Below, we’ll briefly discuss ways to look at the code and the result of our interactive designs and, thus, improve their usability.
[Offtopic: by the way, did you know that Smashing Magazine has one of the most influential and popular Twitter accounts? Join our discussions and get updates about useful tools and resources — follow us on Twitter!]
Don’t Leave Users In The Dark
Most if not all jQuery is fired through events from the user, whether it’s loading new content, posting forms or simply modifying the presentation of an item. Such events are fired through a click from the user.
While as designers and developers we would know that something is happening, without a visual representation, the user is left guessing what is going on. If the user clicks an element and nothing occurs immediately, they could wonder whether the page is broken or they have done something wrong.
But by simply displaying a message or loading graphic for the user, they are assured that something is happening and that their action will be completed shortly.
Pinchzoom offers a consistent experience when loading new content by displaying a spinning graphic alongside the word “Loading.” The constant motion of the graphic tells the user that the website is working on their request.
Always Put Your Code To The Test
As part of any testing process, designers make sure that their interactive design will work across multiple browsers. Unfortunately, we do not test our design elements by using them as a normal user would. You’d be surprised how differently we use our own websites.
Users vary widely in their behavior and viewing set-ups, so don’t be reluctant to use your design in different ways and with different set-ups.
Don’t Add jQuery At The User’s Expense
One of the last things you want is a confused user. Adding too many interactive elements can make the user unable to decide what to do or how to find what they need.
When building your website, restrict the number of controls to those that will help the user achieve their goal. By restricting choice, you create a much more effective user experience.
An example of this problem can be seen on the Crispin Porter + Bogusky website. This website has a lot of scrolling navigation and many “Read more” links that load more content on the page. This overloads the user with information. New users might be unsure what to do, where to go or if they’ve missed important information.
Speed Isn’t Always Key
We always optimize our code to load pages faster and help users complete their tasks more quickly. On the other hand, there are instances when slowing down animations could improve the usability of a website.
Animations such as those showing rotation through messages or pictures are often set too fast. We must remember that users don’t want to be rushed. Give them time to take everything in. A user shouldn’t be halfway through reading an item and then have to wait for it to rotate before being able to finish.
Whether you use a plug-in to generate the effect or core jQuery code, settings should be available to change the speed of the animation. In most cases, keywords such as “slow” or “fast” can be used. If you wish to be more exact with your timings, numeric values such as “800” or “1200” are available, which would specify time in milliseconds.
The home page of Postbox features a rotating list of news and key items. Though not a prominent feature of the design, the delay between each item is long enough toallow the user to fully absorb the information.
Make Tabs More Prominent
Though more of usability tip for design, this deserves mention nonetheless. If you are using tabs to show and hide content, make sure they are prominent and that each tab describes its content well.
Tabs are a great space-saver and some say they allow for more creativity in a design. But don’t risk the user overlooking potentially important content.
By making tabs prominent, you enable users to find more information easily should they need it. Also, being more descriptive in your labeling makes clear to the user what they should expect to see.
Delibar styles its tabs as bookmarks. The bold green draws the user’s attention. Delibar uses one-word labels to succinctly convey the product features and content behind the tabs. For example, the “Manage” tab leads to content that describes the numerous ways that users can manage their Delicious bookmarks using Delibar.
Don’t Take Control Away From Users
One-page websites with smooth scrolling (horizontal and/or vertical) are a growing trend now. But don’t leave users stuck should they not want to use the navigation you provide.
Users who realize that the page extends beyond the fold will likely try to use their mouse or scroll bar to navigate down. Removing scrolling just shows how taking away basic browsing functionality (and thus taking control away from the user) can impair the overall experience. Users will feel that they are not in control of their own browsing.
If you are including page scrolling in your design, you could improve usability by providing keyboard navigation and shortcuts. This provide another option by which users can navigate the page. Now they’ll have the scroll bar, the mouse and the keyboard. jQuery for Designers has a tutorial on adding keyboard navigation using jQuery.
When deciding how your design and its jQuery should function, think of how your choices might impede basic functionality and how users might react to that.
While providing links to navigate down the page, designinsocial does not let users browse freely with their mouse or scroll bar. As you can see below, content exists below the fold and users will want to scroll down.
Use jQuery To Improve Form Validation
jQuery can easily improve form validation and can be triggered either by the “Submit” button or by the user focusing off a field (
Using jQuery to help validate forms can have two very important benefits to users:
- The user won’t have to wait for the page to reload to learn that they made an error. Also, if the page has to reload before an error message is displayed, the user might assume that their submission was successful and overlook the message.
- jQuery allows for easier and more effective error highlighting; for example, by changing the border and background color of relevant inputs or by using animation, such as a tooltip, to catch the user’s attention.
Trevor Davis has an informative article entitled “AJAX Forms with jQuery,” which has some great tips on implementing form validation with jQuery.
Blue Sky Resumes uses jQuery on its blog comment form by changing the background and border color to highlight input fields with errors. A validation summary also appears above the form to further explain the error.
Prevent Animations From Stacking
One of the great features of jQuery is that it allows you to enhance a design by animating elements. This includes fading, changing colors and moving elements. One jQuery animation, often used to de-clutter an interface, is to hide information such as image captions and then display it on hover.
One problem that many designers and developers overlook, though, is that such animations can quickly “stack.” When a page has many thumbnails, and a user quickly hovers over several at a time, then the animation will drag behind one by one, even though the user has stopped moving their mouse. Hovering over the four panels on druckbar demonstrates this problem.
You can use one of two solutions to save users from this hassle. The first is the.stop() function. When
.stop() is called on an element, the currently running animation (if there is one) is immediately stopped. For instance, for an element hidden with
.stop() is called, the element will be displayed but at a fraction of its previous height. Callback functions are not called.
CSSbake uses the following function in the example shown above to prevent animations from stacking:
Alternatively, you could use a jQuery plug-in such as hoverIntent, which fires an animation only if the user’s mouse slows down enough, making it obvious that they are intentionally hovering over an element.
Keep Content Animation To A Minimum
The fade-in animation tied into this technique can be quite distracting for the user. If a user is steeped in an article, the fade-in as they scroll down might break their flow. It would be more effective if the image loaded with no animation, ideally just before the image area came into the viewport, to avoid disruption.
So, think about how animation and other jQuery functionality will affect the user’s ability to concentrate on the main content.
jQuery’s ever-growing popularity has brought to light the wide range of possibilities it offers. The points discussed here are just a handful of the current trends in interactive design. As you would with any design element, think of how your decisions will affect users. Is the element easy to use? Are the processes easily understandable? If something goes wrong for the user, how might they react? Questions like these can help iron out errors, giving users a more solid interactive design and user experience.
Showcase Of Websites With Effective jQuery
Crush + Lovely
Crush + Lovely uses jQuery to create a smooth scrolling effect when a navigation item is clicked. The user experience is enhanced through keyboard navigation: the left and right arrow keys scroll the page between sections.
Shaun Inman uses jQuery to highlight the item that the user is hovering over. The other animations make the interface and experience more fun for the user.
Robotcat reinforces its newsletter sign-up form validation with jQuery, by highlighting any errors. Form fields are highlighted with a prominent red border.
Panelfly features tabbed content in its high-impact design so that the user does not miss important content.
Orman Clark’s portfolio has fixed navigation and jQuery that create smooth scrolling between the sections of the one-page design, while still allowing the user to move with the scroll bar or mouse.
Jan-Eike Koormann uses jQuery and AJAX to load items in his portfolio. When an item is loading, a graphic lets the user know that something is happening.
YAY Paul uses hover events to animate and display the titles of his portfolio pieces. Using the methods described above, Paul West prevents animations from stacking.
IconDock uses jQuery to create a unique and playful experience when the user adds items to the cart. In addition to being able to click the “Add to Cart” links, users can drag icon images to the cart. A loading graphic lets users know that the cart is being updated.
- 45+ New jQuery Techniques For Good User Experience
- 9 Common Usability Mistakes In Web Design
- 10 Usability Nightmares You Should Be Aware Of