JQuery and the User Experience
With a slew of developers creating jQuery plugins on a daily basis, it isnt all that surprising for most users to become somewhat perplexed as to which plugins follow the best practices and whether they will end up enhancing the end user experience or simply making things somewhat more complex.
Functionality VS. User Preference
JQuery is an expedient and concise library that simplifies traversing HTML documents, event handling, animations, and adding AJAX. JQuery plug-ins offer a vast array of benefits to web designers of all levels of experience. Those who are just beginning to dabble in web design may come to discover that plug-ins will allow the implementation of any given functionality within their web site – which they lack the skills by which to code themselves. For experienced web designers, the greatest benefit is time saved. Being able to resolve simple issues of functionality with a plug-in allows them to devote their time into creating an improved user experience.
User End Experience and Simplicity
However, despite all of the options available to designers, being able to find the right plug-in can become difficult. Although Plug-ins can end up simplifying a designer’s life, we recommend that you do not get “plug-in happy” with your website. Certain plug-ins are somewhat “bulky” and can considerably hinder page loading time. With page load speed being one of the major factors which is being used to calculate your page rank in search engines, optimizing your site for fast loading time is pertinent more than ever before.
Conclusively, try to use plug-ins only and strictly because they contribute to a better user-end experience. As with most things in life, simplicity is always better. For this article we would like to present our readers with 15 JQuery plugins which will be useful for improving the overall user experience on your website.
1. FlipClock.js : for Good Looking Clocks and Countdowns
FlipClock.js is a jQuery plugin which replicates this effect to present anything related to time. It has support for working as a clock, countdown or timer and can be customized completely with CSS. There is an option for auto-start, multiple methods exist for controlling it (start, stop, getTime, setTime..) with their callbacks.
2. Least.js : Randomized Image Galleries
Least.js is a jQuery-powered image gallery that can display images in a Pinterest-like layout. The images are displayed from an unordered list where their order is randomized on each load. Any clicked image doesn’t load the bigger version in a modal but by sliding other items down and the big version on the top (kind of similar to Google Image search).
3. Mmenu : Mobile App-Like Sliding Menus with jQuery
jQuery.mmenu is a slick plugin that brings the same behavior into any -mobile- web layout. It transforms unordered lists with unlimited sub-lists into menu items and has multiple options for customization. The options include the position of the menu (left/right), if a counter for the menu items will be displayed or not and more. jQuery.mmenu can also be controlled (opening, closing and toggling the menu) with simple function.
4. AudioPlayer.js : HTML5 Audio Player
AudioPlayer.js is a jQuery plugin for quickly placing a HTML5-powered audio player to any web page. The player’s interface is chic (doesn’t use any images for that), has a responsive layout and touch support. It has the major controls (play/pause, volume and duration) and weights only 4kb.
5. noUiSlider : Range Slider for jQuery
It is lightweight 2.7 kb jquery Range Slider plugin which supports for single or double handles, custom starting values, vertical/horizontal orientation and the ability to get/set values. It also works with touch devices and can customized with css.
6. Windows : Scrolling Pages
Windows is a lightweight jQuery plugin for nicely scrolling the full-screen. It provides a simple and handy API for managing the page/content position to ease the browsing experience. The plugin can analyze if a defined content is in the viewport, how much of it is in the viewport and can trigger any actions like focusing the page to the content by scrolling it.
7. MixItUp : For Filtering and Sorting Items
MixItUp is a great plugin to handle filtering and sorting elements and deserves to be bookmarked. While jQuery part decides which elements to show or hide, CSS3 transitions are used for animating them. The plugin plays nice with responsive + fluid layouts it is lightweight and works pretty fast. There are many options for customization: effects, easing, their speed, etc. and it is very well-documented.
8. jQuery Swatches
jQuery.swatches is a free to use that turns a one-line div into a sweet color swatch. You can customize the class as you want. Using different classes would allow you to render groups of swatches at individual times by calling swatchify() on a different selector.
9. Transit : CSS Transitions for jQuery
Transit is a super-smooth CSS transitions & transformations for jQuery. You can make transition on any CSS property. They will happen much smoother than if you were to use jQuery’s default .animate(). You can easily translate, rotate, scale, skew and etc.
Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. It is released under MIT License.
Tooltipster is a powerful, flexible jQuery plugin enabling you to easily create semantic, modern tooltips enhanced with the power of CSS. Tooltipster allows you to use any HTML tag you can think of inside your tooltips. This means you can insert things like images and text formatting tags.
Unslider is the jQuery slider that just slides. No fancy effects or unnecessary markup, and it’s less than 3kb. It’s fluid, flexible, fantastically minimal. Unslider’s been tested in all the latest browsers, and it falls back magnificently for the not-so-latest ones. If you want to, you can add keyboard arrow support. Not all slides are created equal, and Unslider knows it. It’ll stylishly transition heights with no extra code. You’ll be hard pressed to find a site that’s not responsive these days. Unslider’s got your back. It’s totally responsive.
12. Magnifici Popup
Magnific Popup is a free responsive jQuery lightbox plugin that is focused on performance and providing best experience for user with any device. The majority of lightbox plugins require you to define size of it via JS option. Magnific Popup does not – you can use relative units like EM’s or resize lightbox with help of CSS media queries. Update content inside lightbox without worrying about how it’ll resize and center.
13. Menu Aim
menu-aim is a jQuery plugin for dropdown menus that can differentiate between a user trying hover over a dropdown item vs trying to navigate into a submenu’s contents. This problem is normally solved using timeouts and delays. menu-aim tries to solve this by detecting the direction of the user’s mouse movement. This can make for quicker transitions when navigating up and down the menu. The experience is hopefully similar to amazon.com/’s “Shop by Department” dropdown.
14. Flexisel : jQuery Plugin for Responsive Carousels
Flexisel is a jQuery carousel plugin that works well on screen sizes down-to-mobile.
It has settings for enabling autoplay, defining the animation speed and stopping on hover or not. The standard layout of Flexisel adapts to different screen sizes but also, the plugin provides an option to customize the “number of visible items” for the screen sizes preferred which offers a great experience for users.
15. FlexNav : for Simple to Complex Responsive Menus
FlexNav is another jQuery plugin for easily handling menus in responsive layouts and it does that well for complex ones too. The plugin has support for unlimited sub-menus that work similarly in both desktop and mobile layouts.