Scripts to Improve Website Usability

Ask someone what key ingredients make for a successful website and amidst answers like performance, design, and content, you will hear them coin terms such as user experience and usability. These days, there is a wider acknowledgement that the user’s needs should come first and usability is essential for a site’s success. A highly usable site not only creates a positive experience for visitors, but can drive a higher return on investment (ROI) for your business.

Concerns about website usability usually encompass design, site navigation, information, and response time. But websites are becoming more feature-rich, increasingly interactive, and boast new elements like multimedia and maps, all of which easily impact the user experience. If these new elements and characteristics are not optimized, they can drive down the overall usability rather than enhancing the experience.

Our featured article takes a look at scripts designed to improve your site’s usability and user experience. You will learn how to enhance site navigation with techniques like the “sticky menu” or “sidebar scrolling,” as well as how to improve site search by adding auto-completion support. In addition, several other featured scripts will help make your interface, content, and multimedia elements more usable with just a few lines of code.

 

Sticky navigation bar

sticky

Usability researches showed that sticky menus are 22% quicker to navigate. It is basically a navigation bar that sits at its original place above the fold, but when you start scrolling down the long page, it will sticks at the top of the browser window and follows. This tutorial will show you how to create a smart sticky navigation bar with just a few lines of JavaScript codes powered by jQuery.

TopUp

topup
One of the guidelines of usability is to ensure that any prompts or popup are unobtrusive. TopUp is an easy to use Javascript library for unobtrusively displaying images and webpages in a Web 2.0 approach of popups. The library is jQuery and jQuery UI driven in order to maintain cross-browser compatibility and compactness.

 

jFontSize – Controlling Font Size with JavaScript

jfontsize
The jFontSize plugin was developed to facilitate the process of creating the famous buttons A+ and A-, which alter the font size on sites with very large texts, such as blogs, journals, tutorials, etc. This can be useful for you to improve readability of content of your site.

 

AJAX AutoComplete for JQUERY

autocompleteAutocomplete can increase usability of your forms in some cases and should be used with caution, as it can be distracting. AJAX AutoComplete for JQUERY allows you to easily create autocomplete/autosuggest boxes for text input fields. Built with focus on performance – results for every query are cached and pulled from local cache for the same repeating query. If there are no results for particular query it stops sending requests to the server for other queries with the same root.

 

Opentip

opentip
Opentip is a JavaScript tooltip framework that is free and open source. It comes with different styles but also provides a way for you to create your own. Opentips can automatically download content via AJAX and its joints and targets feature allow you to position the tooltip exactly where you want it.

 

Sorttable

sorttable

Sorttable is a JavaScript table sorting library that allows your site visitors to sort your table data. It supports an automatic column type whereby which it will detect whether the columns are number, date, currency or text and add clickable sorting arrows to the your columns’ headers.

 

Scroll/Follow Sidebar

scrolling

Scrolling or following sidebar is a commonly used technique whereby which you can make elements in your sidebar follow your visitors as they scroll down or up the page. This tutorial explains the basis of setting up a follow sidebar.

 

Joyride

joyride
Joyride allows you to create feature tours easily. It is extremely flexible and lets you take control of how people interact with your tour. It has been programmed to be cross-browser compatible with modern browsers and even used some fancy CSS to avoid images.

 

Uniform

uniform
Uniform is a popular jQuery plugin that applies a consistent skinning to your form elements across all browsers. It does this by masking your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility.

 

FitVids.JS

fitvids

FitVids.JS is a lightweight and easy-to-use jQuery plugin for fluid width video embeds. It is ideal for responsive web design whereby which the embedded video size will increase or decrease automatically to adjust based on the browser’s size.

 

PageSlide

pageslidePageSlide is a jQuery plugin allows you to add slide interaction to your pages. When clicked, your main viewport will slide to reveal an additional interaction pane. This is pretty handy for revealing sidebar navigation or widgets in a web application.

 

pageGuide.js

pageguide
pageguide.js is an interactive visual guide to elements on web pages. Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions.

 

Capty

capty

Capty is a jQuery plugin that allows you to easily add captions over your images. These captions are pulled from your image ALT attribute and you can set it to show by default at a fixed position or rendered when the mouse is hovered over the image. This plugin also allows you to pull content from an external DIV.

 

CraftMap

craftmap

CraftMap is a lightweight, fully configurable jQuery plugin that converts a simple image into a functional map by overlaying dynamic elements on it such as markers. Like Google Maps, you can place your own marker icons and add location information to specific markers with a draggable image interface.

 

FitText

fittext

FitText is a plugin that makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.