Web Design Tips, Tutorials & More!

jQuery Usability: 3 Great Tips

Looking to increase usability even with jQuery events? This is no small feat. In fact, designers rarely think of applying usability principles to jQuery based elements. The truth is that the user experience can be enhanced many times over by bringing the usability thought process into these elements, and we’re here to help. In this post, we’ll take a look at the code and consider several great ways to improve usability in the interactive designs you create.

Reassure the User

Because in jQuery the user’s action gets everything going, they’ll need visual reassurance that something is happening so that they’re not left in the dark about what’s going on. You, the designer may be fully aware that something is happening, but if the user does not get immediate response from his click he may mistakenly think there’s a problem with the site or page. There’s a simple way to fix this. Display a loading graphic or message to inform the user that their click is not just a shot in the dark.
Pinchzoom displays a spinning graphic with the message “Loading” when content is being loaded. This keeps the user informed by way of motion from the graphic as well as the descriptive text.

Put it to the Test

The importance of testing cannot be overstated. Where bugs and broken, dysfunctional elements run amok, users can easily lose confidence in a site overall. You’ll want to give the user a solid and stable experience on a consistent basis.
This means testing your design by trying it in different ways, especially with the user’s perspective in mind. Take into consideration, for instance, that each user has a different viewing preference and certainly, each user will interact with your site differently. Make sure that your design will work across multiple browsers as well as with a variety of different users.

Don’t Confuse the User

You never want to leave the user without a clue about what to do next on your site. A design can be so overloaded with interaction, that users get confused and begin to turn away in frustration. Keep the numbers of controls manageable, limiting them only to those essential for helping users do exactly what they’d like to do. A much more straightforward user experience can be created this way.
Take a look at the website below, the Crispin Porter + Bogusky website. Here is an example of how too many choices, complicated navigation and cluttered “Read more” links bombard the user with too much information. This could completely leave new users without a clue as to how to operate the site.

Speed Isn’t Always Key

When it comes to increasing usability the name of the game is not always speed. For designers, speed is a constant goal. We want to ensure that load times are quick and seamless, but for users, slower animations can make things easier to digest visually.
Complicated animations set to the fastest tempo can rush users, without providing the time they need to truly experience the site or page. Use a plug-in or the jQuery code to maneuver the speeds of animations, using simple keywords, i.e. “slow” or “fast.” Postbox incorporates a delay between each rotating news and key item, which is just the perfect amount of time for the user to take in all the information presented.


Leave a Reply