It is always hard to guess how users browse + how they perceive the content and flow of a website or web app.
There are tools to analyze these as much as possible and, using methods like A/B testing, improving the usability is always possible.
However, it is always a great idea to guide users whenever they want. Nothing to lose on that for sure.
There are awesome jQuery plugins that ease guiding users and creating site/page tours for them. They are stylish, customizable and simple to use. Check them out:
Intro.js
A lightweight plugin that uses data attributes and has keyboard navigation support.
It focuses on objects beautifully and pretty easy-to-setup.
aSimpleTour
aSimpleTour uses a JSON data for all the configuration and content.
While a floating box helps managing the tour, tooltips (that can be positioned however wanted) help focusing on the elements.
Pageguide.js
Pageguide.js offers a very slick way to provide site tours.
The steps are highlighted beautifully and a sticky footer/header allows navigating through them while providing extra info about each step.
Read the rest of this entry »
Read the rest of this entry »
There can be times where we may want to inform/guide users regarding the details/functions of the HTML elements on the page.
Chardin.js is a jQuery plugin which does that in a very chic way (inspired from the recent Gmail new composer tour).
It uses the information mentioned in “custom
data attributes” of the given elements.And, once triggered, it activates an overlay that focuses on the element and displays the info with visual guides (that can be positioned however wanted).
Requirements: jQuery
Compatibility: All Major Browsers
Compatibility: All Major Browsers
The “Draggable” and “Droppable” interactions of jQuery UI are by far the most popular solution for drag ‘n’ dropping elements.
For anyone in search of an alternative, Draggabilly, a standalone and lightweight JavaScript library can be the right choice.
The element to be dragged can be limited to have that feature in a container and there are callbacks on each event (start, move, end) which can also return the position/location of the item.
It works in all modern browsers (IE8+) and there is built-in support for touch events.
Requirements: No Requirements
Compatibility: All Modern Browsers
Compatibility: All Modern Browsers
Swipebox is a jQuery lightbox plugin that has support for touch eventsand works well in responsive layouts.
It can display a single item or a group of items (gallery) where they can be browsed with swipe gestures or keyboard too.
The plugin mostly uses CSS transitions and has jQuery fallback for unsupported browsers.
Captions can be displayed with ease and few options exist for customization (like the appearance delay of the action bar)
Requirements: jQuery
Compatibility: All Modern Browsers
Compatibility: All Modern Browsers
The dynamic column grid layouts are so popular not only because it is used by Pinterest but also because it is a great way of displaying content with different sizes.
Wookmark, a Pinterest alternative, has released a jQuery plugin for creating such layouts, that work well on each browser, instantly.
The plugin has very few options to set: the container element, offset (vertical/horizontal distance) and width of the items, that’s all.
Once initialized, it gets the size of the window and auto-arranges the grid (yes, it is responsive).
Requirements: jQuery
Compatibility: All Major Browsers
Compatibility: All Major Browsers
jui_datagrid is a jQuery plugin, making use of jQuery UI, that comes with lots of features for presenting and managing data.
It has built-in pagination, sorting, editing, deleting and advanced searching.
The datagrid can be used with any scripting language (a PHP class comes with the download package) and its look can be totally customized(Themeroller-friendly).
A “preferences” option enables users to choose which columns and features to show/hide.
And, a powerful API exists for controlling/integrating the datagrid however wanted.
Requirements: jQuery and jQuery UI
Compatibility: All Major Browsers
Compatibility: All Major Browsers
Custom scrollbars that look the same on all browsers are everywhere (for ex: almost all Google apps).
Perfect Scrollbar is a lightweight (~14kb) jQuery plugin for creating them without any hassle.
It doesn’t ruin the default layout or require/apply any CSS changes. The plugin works with containers of any size and re-arranges the positions if a container-resize happens.
Also, the design of the scrollbar can be customized completely with CSSand it supports jquery-mousewheel plugin in case you want to make use of it.
Requirements: jQuery
Compatibility: All Major Browsers
Compatibility: All Major Browsers
Modal boxes are so functional in displaying any HTML content with a focused interface and there are many great ones around.
iLightBox is a fresh alternative to other jQuery lightbox plugins and there is a strong chance that, although it is a paid resource, it may become your favorite.
It can present images, videos (YouTube, Vimeo, HTML5 video), other HTML and there is an optional fullscreen mode.
The gallery mode can display other items as thumbnails and allows browsing via keyboard, mousewheel and touch events (swipe).
There are retina-ready skins, it can be completely customized and
iLightbox can also be used as a good-looking replacement for JavaScript’s alert, prompt and confirm dialogs.
It has a powerful JavaScript API for customizing it further when needed. And, yes, it is responsive.
The plugin supports a wide range of browsers starting with IE7+ and works with mobile ones too.
For WordPress fans, there is also a WordPress plugin offered which is compatible with the regular wordpress gallery shortcode
Requirements: jQuery
Compatibility: All Major Browsers
Compatibility: All Major Browsers
Tooltips are usually created and triggered with JavaScript. But, CSS is now powerful enough to handle a simple tooltip functionality itself.
Hint.css is a tooltip library that is built with SASS and only uses CSS + HTML.
The library uses
data attribute, content property, pseudo elements and CSS3 transitions.
Tooltips are simple-yet-good looking, has arrows and can be positioned on any side of the parent element.
And, they don’t have to be visible only when hovered but can be set as “always showing” too.
Requirements: No Requirements
Compatibility: All Modern Browsers
Compatibility: All Modern Browsers
Tooltips are so useful in informing users when needed without the need for a design challenge as they work well with any layout.
Opentip is a pretty cool JavaScript tooltips framework that can work with jQuery, Prototype or standalone.
It creates the tooltips with HTML5 canvas so that any creative designs are possible and they are rendered almost equally in all browsers.
There is support for calling content into tooltips with Ajax, positioning them wherever wanted or grouping them (so that only one tooltip of the same group can stay open).
A nice and unique feature is stems (the little pointers) which auto-arranges themselves into any direction.
Opentips has multiple, good-looking styles and new ones can be created very easily.
0 Comment to "11 Awesome “jQuery Site Tour Plugins” For Guiding Users With Style"
Post a Comment