With this post Monks have tried to explore some of the top jQuery plug-ins from usability point of view. Segregated as per their core functions, these plug-ins will help enhance your website’s UX.
Navigation
Single sprite navigation,although very good, can be tiresome to develop. You’d have to measure the Photoshop slices with pixel perfect precision, code the CSS taking absolute care and thenperform some cumbersome calculations to arrive at anideal single sprite navigation. But Nav-o-Matic does all of the above functions that too in a few clicks! Neat, huh?
Image Source: www.webresourcesdepot.com
TipTip is a super light plug-in that doesn’t use images at all. It is absolutely customizable via CSS and functions by identifying the edges of the browser window and ensuring that tooltips stay within current window size. With TipTip all your tooltips will be adjusted to get displayed on the top, bottom, left or right of the element where you apply TipTip.
Image Source: churchofrabbit.com
Slideshows & Galleries
3. Nivo Slider - Slideshow jQuery Script
With 9 exclusive transition effects and a horde of other options this jQuery image slider plug-in is a must-have. It’s sleek and lets you set functions that need to be operational prior to and after the image transition and also lets you define animation speed and activate pause on hover.
Image Source: designmodo.com
Structure out items by reorganizingand sorting them, that too with an awesome shuffling animation with this jQuery plug-in.
Image Source: www.tripwiremagazine.com
Content Improvement
5. Dynamic Footnotes With CSS and jQuery
To improve UX with footnotes, useDynamic Footnotes,which displays the footnote content when users hover over the footnote symbol. In a way Dynamic Footnotes interacts with users by displaying content that they seem to hold interest in knowing and thereby, improves their experience as they do not have to scroll down all the way to view the content.
Image Source: www.jquerycode.com
Captify enables displaying simple, attractive image captions that appear on rollover. Tested for numerous browsers like Firefox, Chrome, Safari, and Internet Explorerit is inspired by ImageCaptions a similar plug-in, but is more efficient than ImageCaptions.
Image Source: www.sitepoint.com
Layouts
Columnizer automatically splits content into required no. of columns as per the browser and browser window size. It is compatible with all major browsers and works without any complex CSS tricks.
Image Source: jquer.in
Graphs& Maps
8. Dygraphs - Open Source Javascript Library
Available in the form of an open source JavaScript library, Dygraphs generates interactive, zoom-able charts of the present time series. Primarily designed to display dense data sets, it enables users to drawinferences from them.
Image Source: www.designyourway.net
This flexible and highly customizable plug-inenables you to embed Google Maps into your website.Usinglongitude and latitude you can specify the location of your gMap object. You can also customize the marker image, enable/disable zooming with mouse scroll-wheel and perform many other mapping functions using this amazing plug-in.
Image Source: speckyboy.com
Images & Visual Effects
10. jqFancyTransitions - jQuery Image Rotator Plug-in
As the name states jqFancyTransitions enables displaying photos in the form of a slideshow with fancy transition effects. User-friendly and agile, this plug-in will help you explore many novel image transition effects.
Image Source: www.freebiewebresources.com
11. Sponsor Flip Wall With jQuery and CSS
A huge amount of data needs to be squeezed in into sponsor pages.And this needs to be done while ensuring that all of the data is well organized sothat the sponsors are the highlight of the page design and nothing else. Sponsor flip wall facilitates this very function and very efficiently so.
Image Source: tutorialzine.com
These were a few plug-ins that the Monks consider to be a great value addition to the UX of any website. If you want to add 100s of interactive components to make your website look really appealing, visit our library full of jQuery components.
Webby Monks
Latest posts by Webby Monks (see all)
- Trouble organizing your CSS? 6 handy tips to consider! - April 20, 2024
- Interaction Design – How to direct the audience in few easy ways? - April 15, 2024
- Infographic – Google’s new mobile friendly algorithm: 81% of sites under the lens! - April 8, 2024
