Web developers have been using JavaScript to layer on enhanced user interfaces and add dynamic content since the days of Netscape Navigator’s dominance. Today JavaScript can be used to build huge advanced web applications but it still remains a valuable tool we use daily to add progressive enhancements that can make the difference between a good site and a great one.
The jQuery JavaScript Library helps make many common tasks easier and gives developers a powerful toolset to handle page events, animations, and more. Complicated, common tasks go from 100 line endeavors to single lines of code. The vast list of available plugins available can add even more capabilities.
Using the jQuery library and leveraging reusable logic makes adding some basic usability and interaction features a no brainer on most projects. Relatively easily we can make important tweaks that improve the overall user experience of your site.
Improve the Usability of Site Navigation
Drop-down and flyout menus are nearly ubiquitous today on any site that contains more than a handful of pages. They make it easy for visitors to find and quickly access second level pages without additional clicks or page loads. But drop-downs aren’t perfect. Annoyances caused by imprecise mouse movements such as displaying the wrong items or disappearing too quickly can result in frustrated users.
That’s where a jQuery menu plugin named Superfish steps in to help. Superfish eases the pain of creating complex but usable navigation across multiple browsers and also adds several important usability features. The plugin can add animations and is much more forgiving of mouse errors by delaying the hiding of drop-downs on mouseout. It also improves accessibility by providing keyboard support to the site’s drop-down menus.
Grab a Visitor’s Attention with Lightboxes
There are a lot of reasons you’d want a website visitor’s undivided attention. Login required to view the page? Critically important message about thier account? An error occured with what they were doing? Lightboxes are an attractive and effective method of communicating information to a user and making sure they see it.
A lighbox is a modal dialog created by dimming out the rest of the screen and displaying a content overlay that the visitor must interact with. They’re great for things such as displaying alerts or for creating a dynamic and focused photo gallery browsing experience. Don’t overuse them though, they’re effectiveness and bluntness makes them a bad choice for low priority items or background information.
There’s a new lightbox plugin seemingly everyday that each has different features and advantages, but our two favorite general purpose lightbox plugins are currently FancyBox and ColorBox. Both allow the display of many different types of content with flexible logic to interact and theme them.
Display More Content without Overwhelming by Using Rotators & Sliders
No matter the project, stakeholders always want there to be more content and they want it all to be displayed with first priority. Designers and information architects prefer to show and highlight only the most important stuff. Luckily, modern interaction design and a jQuery plugin here and there help us find a middle ground.
There are a variety of techniques available that allow us to rotate through content items, collapse others, and generally hide additional content while still making it easily accessible. Here we can use plugins such as Cycle or jCarousel or the jQuery UI framework as building blocks to create new custom interactive experiences that align with the designer’s creative vision. Interface elements such as sliders, rotators, tabs, and accordions can provide more detail without overwhelming while also delighting the visitor when used appropriately.