Usability Do’s And Don’ts For Interactive Design

Advertisement

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.

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.

Pinchzoom1 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.

Pinchzoom offer a rotating graphic and text in a modal box to draw user’s attention and inform them that content is loading2
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 + Bogusky3 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.

Crispin Porter + Bogusky website displays too much information and options for the user at once4
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 Postbox5 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.

Rotating messages featured on the Postbox homepage6
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.

Delibar7 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.

Prominent tabs from Delibar draws the user’s attention so that they do not miss any important information about the product8
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 jQuery9.

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, designinsocial10 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.

Screenshot of designinsocial at 1024x768 screen resolution11
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 jQuery12,” which has some great tips on implementing form validation with jQuery.

Blue Sky Resumes comment jQuery form validation13
jQuery form validation for comments on Blue Sky Resumes.

Blue Sky Resumes14 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.

CSSbake uses jQuery animations to display an item’s title and rating once you rollover the screenshot15
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 druckbar16 demonstrates this problem.

You can use one of two solutions to save users from this hassle. The first is the .stop()17 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:

$("ol#gallery li").hover(function () {
$(".thumb-meta", this).stop().animate({ bottom: '0px' }, 400);
},
function () {
$(".thumb-meta", this).stop().animate({ bottom: '-22px' }, 400);
});

Alternatively, you could use a jQuery plug-in such as hoverIntent18, 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. Mashable19, 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 + Lovely20
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.

Crush Lovely page navigation21

Shaun Inman22
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.

Shaun Inman navigation23

Robotcat24
Robotcat reinforces its newsletter sign-up form validation with jQuery, by highlighting any errors. Form fields are highlighted with a prominent red border.

Robocat form validation25

Panelfly26
Panelfly features tabbed content in its high-impact design so that the user does not miss important content.

Panelfly tabbed content27

Orman Clark28
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.

Orman Clark's portfolio navigation29

Jan-Eike Koormann30
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.

Jan-Eike Koormann loading portfolio item31

YAY Paul32
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.

YAY Paul hover animations33

IconDock34
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.

IconDock cart animations35

Useful Resources

(al)

↑ Back to topShare on Twitter

Ben MacGowan is the Lead UI Engineer for a digital agency based in Reading UK. With a keen eye for detail and passion for innovative designs and cutting edge technologies. Ben also carries this passion for the industry and sharing knowledge across to being one of the core organisers of a free bi-monthly event for web designers and developers, Breaking Borders.

  1. 1

    thanks..important topic

    0
  2. 2

    very interesting article thanks ;)

    1
  3. 3

    Yep.. really nice topic. The one that I’ve been looking so far.

    0
  4. 4

    For the animation not stopping on the druckbar site(when hovers start jumping like mad), i believe that is due to the animation queue(correct me if im wrong here) so you can set your animation queue to false this works great for hover items, especially in that case. That way it will stop its animation process mid way and return back.

    Like so.

    $(this).animate({marginTop: “124px”}, {queue:false,duration:500});

    -1
    • 5

      Thanks for this Philly. Must admit I have never myself used this method, but if it works then I suppose it gives people even less excuses for preventing their animations from stacking. ;)

      0
  5. 6

    Machteld Ouwens

    April 27, 2010 5:15 am

    Oh mr. know-it-all

    -1
  6. 8

    good article as always!

    But I don’t know if Crush + Lovely is such a “best-practice” example.. Sure it looks good, but after checking the loading time with firebug I saw this page weights a total of 9,2MB …
    In my opinion this is far too much, even for this one-page-website – any different opinions?

    0
    • 9

      I agree but I found that their site seemed to load pretty quickly for me (or at least the loading of images wasn’t exactly noticeable or have a negative effect). I’m not on a fast internet connection by any stretch of the imagination, either.

      On another note, please can we fix the title of the article?
      “Usability Do’s And Don’ts For Interactive Design” should be “Usability Dos And Don’ts For Interactive Design”
      Grammar nazi here ;)

      0
  7. 10

    Nice article. Very educational and good reference.

    Small tip:
    Don’t tell people to “Use jQuery To Improve Form Validation”.
    Instead, tell them to use Javascript for that, then provide a jQuery-powered example.
    The article seems pretty jQuery-centric, although the design factors are pretty common, regardless of technology used.

    0
    • 11

      Yes the article is jQuery-centric, but for the reasons that jQuery is where most of my JavaScript knowledge stems from and also it is the most widely preferred and therefore used library. I would hope that people who prefer other libraries such as Mootools or even core JavaScript would be able to connect the dots and carry the same methodology across.

      But thanks for the tip anyway :)

      0
    • 12

      I agree with dkruythoff. While I prefer jQuery, I hope it doesn’t become the industry norm so that other technologies can still compete and provide valuable alternatives.

      0
  8. 13

    Vipul Limbachiya

    April 27, 2010 5:34 am

    Very good article

    Thanks for sharing!

    0
  9. 14

    Great points, the theme of the post was don’t use unnecessary animations, which I liked. Just because it is so easy to add we can do so much with jQuery, does not mean it is always useful.

    To much animation becomes noise.

    Great post!

    0
  10. 15

    Thanks SM, great article. Would also love to see this supplemented with some analytical content that illustrates the impact that improved usability has on site traffic/ cart abandonment.

    0
  11. 16

    Wonderful article! Web Developers hardly take care of these points.
    Thanks!!

    0
  12. 17

    Good, needed article, but I must agree with dkruythoff, you could replace “jQuery” with “JavaScript” in this whole article, since all tips apply to JS in general and to a lot of other libraries too. This way you might scare non-jQuery users away, but more important, we mustn’t come to think of jQuery as if it IS JavaScript, it’s “only” a library for it.

    0
  13. 18

    Wow! Crispin Porter and Bogusky’s site has gone down hill since I last saw their site. It isn’t even a company site anymore. It became more of a channel. I don’t even know what they do based on that site. I know they are an interactive marketing firm but damn. I remember seeing their old site. That is rediculous. Went way overboard on the interactive elements and I now can’t even find what any verbage about what their company is. There is no information and the contact link is way at the bottom of the page. A general user will have a hard time making sense of the site.
    Anyways, good article, just like Flash, people can go overboard with the animations using jQuery. The more it gets used, the more it has the potential to get abused like Flash was and still sometimes is.

    0
  14. 19

    Estoy harto de que me digan lo que tengo que hacer y cómo tengo que diseñar.

    0
    • 20

      Nadie te obliga a escuchar. Es sólo una guía con conceptos probados para ayudarle.

      0
  15. 21

    How about making sure the site and features still work without JavaScript?

    Also for the animation, try something like .stop(true, true);

    You probably want to clear the queue and jump to the end of the animation (the respective parameters)

    0
  16. 22

    A very good read for any kind of designer…

    0
  17. 23

    Best interactive site on the net in both design and usability is http://www.griplimited.com hands down!

    0
  18. 24

    Shaun Inman website is no good, took me ages to figure out what each icon was, infact i had to go to each site to figure them out…

    aesthetically nice however

    0
  19. 25

    There is another important step you left out, which is test, test, test. It’s all very well having a fantastic design, but if people can’t find the content, it doesn’t work in a popular browser, or numerous other problems crop up, the site is pretty much useless. I really think usability testing is the key, along with great design of course.

    Thanks for the article though, some really useful tips on interactive design.

    0
  20. 26

    good,very good,
    thanks!

    0
  21. 27

    Modal boxes with simply ‘Loading…’ and a random animation usually makes me cancel and bypass, or just close the page, as I prefer to know how long I have to wait. As an example, I _always_ bypass Lightboxes, and open the image links using ‘open in new/background tab’ shortcuts, where I can comfortably see the progress live, and without something dimming the page or otherwise hindering any further action until loading is complete.
    What I’m trying to say is, if there’s a loading window, there should be a progress indicator as well (where possible, of course).

    0
  22. 28

    Its interesting what you say about speed, Google are now starting to look at load speeds as an element of Page Rank. Although at the moment that is a relatively minor aspect of PR there may come a time when PR may need to be balanced against whether in some cases it makes sense to load fast.

    0
    • 29

      My point about the speed was aimed more at the animations you would have on a page. From my understanding, and please do correct me if I am wrong, but the Google ranking is more to do with the loading speeds of your page – I don’t see why you wouldn’t want your page to load fast.

      0
  23. 30

    Very misleading article title when all but the first section are wholly about how to “enhance” a site using jquery (not even javascript)
    I gained nothing from this article :(

    0
  24. 31

    Just what are the rules we need to follow as junior designers while making websites.Very fruitfull article ,thx for this.

    0
  25. 32

    Form validation only with jquery is not a good idea. Please read security issues!

    0
    • 33

      And please read the article. I never said form validation with only jQuery: “But remember that JavaScript form validation should never entirely replace server-side validation.”

      0
  26. 34

    Kyle Somerville

    April 29, 2010 2:48 pm

    Thank you for articles like this. Great help do designers!

    0
  27. 35

    hi im ryan lees and i go to point pleasant boro high school in NJ i think this website is really cool and you should put some more interesting articles on so i could read more

    0
  28. 36

    Very misleading article title when all but the first section are wholly about how to “enhance” a site using jquery (not even javascript)
    I gained nothing from this article :(

    0
  29. 37

    i love this website with all of my heart!!!! <333333

    0
  30. 38

    Sasha Baksht, @techbridge_ca

    May 1, 2010 9:13 am

    Liked it! Tweeted it.

    0
  31. 39

    Great post on Usability. Really Liked it.

    0
  32. 40

    nice topic. usefull one.

    0
  33. 41

    Michael Luedtke

    May 3, 2010 4:36 am

    The some business community would benefit for this article. thanks

    0
  34. 42

    Hi man, i translated your article to portuguese, on te link:http://vqv.me/s/3k0, nice article, thanks

    0
  35. 43

    this topic very important with me! thanks Ben and SM

    0
  36. 44

    Nice article! But one major problem with the shown JQuery Tabs solutions etc. is that most of them are not linkable and bookmarkable.
    Does someone have a good solution for this?

    0
  37. 45

    Nice article. I really like what JQuery can do *still have to learn how to use it tho =$, what’s the best place to start?*

    You featured Crush + Lovely for their nice navigation. If you click through or use the up/down keyboard keys fast to navigate through their site you see the very problem happening you featured earlier: Prevent Animations From Stacking.

    0
  38. 46

    Great information. Thank you for posting!

    0
  39. 47

    A modern day “Don’t make me think!”, required reading for designers and programmers.

    0

↑ Back to top