Usability Do’s And Don’ts For Interactive Design - Smashing ... http://www.smashingmagazine.com/2010/04/27/usability-dos-a...
Usability Do’s And Don’ts For Interactive Design
By Ben MacGowan (http://www.smashingmagazine.com/author/ben-macgowan/)
April 27th, 2010
Design (http://www.smashingmagazine.com/category/design/)
26 Comments (http://www.smashingmagazine.com/2010/04/27/usability-dos-and-donts-
for-interactive-design/#comments)
We often talk about how to make our websites more usable, whether it’s tweaking the HTML structure
of pages to benefit the user’s process or figuring out how best to display a message via CSS. But we
never bring this thought process into our jQuery-based (and other JavaScript-based) elements. How
can we enhance the user experience and usability of our jQuery events?
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 (http://creatives.commindo-media.de/www/delivery
/ck.php?oaparams=2__bannerid=1252__zoneid=0__cb=c3f655874b__oadest=http%3A%2F
%2Ftwitter.com%2Fsmashingmag) !]
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 (http://pinchzoom.com/) 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.
1 of 14 28.04.10 12:28
Usability Do’s And Don’ts For Interactive Design - Smashing ... http://www.smashingmagazine.com/2010/04/27/usability-dos-a...
(http://pinchzoom.com/)
Pinchzoom shows a rotating graphic and text in a modal box to catch the user’s attention and tell
them that content is loading.
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.
By trying to break your JavaScript, you could come across bugs that you didn’t notice before, which
will lead you to create a stabler and more solid user experience. Coming across an element that
appears to be broken or not functioning correctly will often make users lose trust in the website as a
whole.
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 (http://cpbgroup.com/)
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.
2 of 14 28.04.10 12:28
Usability Do’s And Don’ts For Interactive Design - Smashing ... http://www.smashingmagazine.com/2010/04/27/usability-dos-a...
(http://cpbgroup.com/)
Crispin Porter + Bogusky shows too many options at once.
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 (http://www.postbox-inc.com/) 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 to
allow the user to fully absorb the information.
3 of 14 28.04.10 12:28
Usability Do’s And Don’ts For Interactive Design - Smashing ... http://www.smashingmagazine.com/2010/04/27/usability-dos-a...
(http://www.postbox-
inc.com/)
Rotating messages on the Postbox home page.
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 (http://www.delibarapp.com/) 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.
4 of 14 28.04.10 12:28
Usability Do’s And Don’ts For Interactive Design - Smashing ... http://www.smashingmagazine.com/2010/04/27/usability-dos-a...
(http://www.delibarapp.com/)
Prominent tabs draw attention so that users do not miss important information.
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 (http://jqueryfordesigners.com/adding-keyboard-navigation/) .
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 (http://www.designinsocial.com/)
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.
5 of 14 28.04.10 12:28
Usability Do’s And Don’ts For Interactive Design - Smashing ... http://www.smashingmagazine.com/2010/04/27/usability-dos-a...
(http://www.designinsocial.com/)
Screenshot of designinsocial at 1024 x 768 pixel resolution.
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 (.blur()). But remember that JavaScript form validation should never
entirely replace server-side validation.
Using jQuery to help validate forms can have two very important benefits to users:
1. 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.
2. 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 (http://trevordavis.net
/blog/tutorial/ajax-forms-with-jquery/) ,” which has some great tips on implementing form validation
with jQuery.
6 of 14 28.04.10 12:28
Usability Do’s And Don’ts For Interactive Design - Smashing ... http://www.smashingmagazine.com/2010/04/27/usability-dos-a...
(http://www.blueskyresumes.com/)
jQuery form validation for comments on Blue Sky Resumes.
Blue Sky Resumes (http://www.blueskyresumes.com/) 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.
7 of 14 28.04.10 12:28
Usability Do’s And Don’ts For Interactive Design - Smashing ... http://www.smashingmagazine.com/2010/04/27/usability-dos-a...
(http://www.cssbake.com/)
A CSS showcase uses jQuery animation to display an item’s title and rating when you roll over the
screenshot.
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 (http://www.druckbar.info/) demonstrates this
problem.
You can use one of two solutions to save users from this hassle. The first is the .stop()
(http://api.jquery.com/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
.slideUp(), when .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:
1 $("ol#gallery li").hover(function () {
2 $(".thumb-meta", this).stop().animate({ bottom: '0px' }, 400);
3 },
4 function () {
5 $(".thumb-meta", this).stop().animate({ bottom: '-22px' }, 400);
6 });
8 of 14 28.04.10 12:28
Usability Do’s And Don’ts For Interactive Design - Smashing ... http://www.smashingmagazine.com/2010/04/27/usability-dos-a...
Alternatively, you could use a jQuery plug-in such as hoverIntent (http://cherne.net/brian/resources
/jquery.hoverIntent.html) , 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
Because JavaScript functions are so easy to implement with jQuery, many of us easily get carried
away with animations, causing disruption for the user. Some websites use jQuery to load images as
the user scrolls down the page, thus making the initial page load faster and allowing users to access
content more quickly. Mashable, a popular social media news website, does this. While this is great
for users who have a slow Internet connection, it does have its drawbacks.
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.
Conclusion
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 (http://crushlovely.com/)
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.
9 of 14 28.04.10 12:28
Usability Do’s And Don’ts For Interactive Design - Smashing ... http://www.smashingmagazine.com/2010/04/27/usability-dos-a...
(http://crushlovely.com/)
Shaun Inman (http://shauninman.com/pilation/)
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.
10 of 14 28.04.10 12:28
Usability Do’s And Don’ts For Interactive Design - Smashing ... http://www.smashingmagazine.com/2010/04/27/usability-dos-a...
(http://shauninman.com/pilation/)
Robotcat (http://www.robocatapps.com/)
Robotcat reinforces its newsletter sign-up form validation with jQuery, by highlighting any errors.
Form fields are highlighted with a prominent red border.
(http://www.robocatapps.com/)
Panelfly (http://panelfly.com/)
Panelfly features tabbed content in its high-impact design so that the user does not miss important
content.
(http://panelfly.com/)
Orman Clark (http://www.ormanclark.com/)
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.
11 of 14 28.04.10 12:28
Usability Do’s And Don’ts For Interactive Design - Smashing ... http://www.smashingmagazine.com/2010/04/27/usability-dos-a...
(http://www.ormanclark.com/)
Jan-Eike Koormann (http://koormann.de/)
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.
(http://koormann.de/)
12 of 14 28.04.10 12:28
Usability Do’s And Don’ts For Interactive Design - Smashing ... http://www.smashingmagazine.com/2010/04/27/usability-dos-a...
YAY Paul (http://www.yaypaul.com/)
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.
(http://www.yaypaul.com/)
IconDock (http://icondock.com/)
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.
(http://icondock.com/)
13 of 14 28.04.10 12:28
Usability Do’s And Don’ts For Interactive Design - Smashing ... http://www.smashingmagazine.com/2010/04/27/usability-dos-a...
Useful Resources
45+ New jQuery Techniques For Good User Experience (http://www.smashingmagazine.com
/2009/01/15/45-new-jquery-techniques-for-a-good-user-experience/)
9 Common Usability Mistakes In Web Design (http://www.smashingmagazine.com/2009/02
/18/9-common-usability-blunders/)
10 Usability Nightmares You Should Be Aware Of (http://www.smashingmagazine.com
/2007/09/27/10-usability-nightmares-you-should-be-aware-of/)
jQuery and JavaScript Coding: Examples and Best Practices
(http://www.smashingmagazine.com/2008/09/16/jquery-examples-and-best-practices/)
(al)
Ben MacGowan (http://www.smashingmagazine.com/author/ben-macgowan/)
Ben MacGowan is a professional front-end web developer who has an appreciation for innovative
designs and new technologies. His passion for the web industry and eagerness to learn has led him to
run CSSbake (http://www.cssbake.com) , a CSS gallery dedicated to showcasing outstanding designs
and categorising them by their unique elements.
Homepage (http://www.benmacgowan.co.uk)
Twitter Page (http://twitter.com/urbenkeach)
Smashing Media GmbH. Created by Sven Lennartz & Vitaly Friedman (/about)
14 of 14 28.04.10 12:28
