How To Use Help Elements To Improve Your Designs

Advertisement

When designing a website, the most important thing is to make it as usable and convenient as possible. On a website on which users could possibly get confused, it is best to include help elements. Help elements come in all different shapes and sizes: an entire page, a suggestion box or a quick tip. But they all have one thing in common: besides doing the obvious (i.e. helping the user), help elements provide an extra convenience that brings the website closer to that sought-after usability.

With the number of forms, search functions and other navigational elements on websites these days, using them can occasionally become confusing for some users. Providing help elements in as many places as possible can be a great way to make the user’s experience more pleasurable. The better the experience of the user, the more likely the user will buy your product, come back to the website and fulfill the goal that the website was built to achieve.

Below is a compilation of best practices for help elements, an explanation of when to use them and a showcase of excellent help elements.

You may also be interested in the following related posts:

When To Include A Help Element

Convenience is key to a website, and going the extra mile to make a website more convenient can go a long way. Help pages and help elements bring that extra convenience to users. But where is a help element really needed?

1. Forms
To some, forms may be confusing. The purpose of certain objects and inputs may be unclear to users, so suggestions and examples certainly should be included to help users fill them out. Another type of form element is labels.

2. Log-Ins/Sign-Ups
You want users to sign up for your service, so make it as easy for them as possible. There are a number of ways to make log-ins and sign-ups more usable, one of which is to include help elements. First, as mentioned, you should include help elements within the sign-up form.

The form below is nicely laid out; it’s clean and has good explanations of each form element. It is overall a usable form with thorough help elements.

Screenshot5

3. Checkouts
As with forms, some elements of the checkout may be unclear to the user. During checkouts, money is being transferred, so it is essential that the user does not become confused in the process.

4. Searches
There is not too much that’s complicated about a search box, but what to search may be unclear. Providing search examples and suggestions is a good idea. Live auto-suggest boxes are another usable search feature.

What To Include

What to include depends on the type of element and where it is being used, but there are a few guidelines to making a “helpful” help element.

Avoid the Obvious
If you are going to make a help element, actually make it useful. Don’t put it there just for the sake of including it.

Quick Tips
One type of help element is “tips.” Providing tips to help a user navigate content is often a good idea. Tips and suggestion boxes can be especially convenient to new users.

The following is a tip box from Google Reader. In this example, the tip is alerting users to a recent redesign. A link is provided to give users more information. This could be very useful to new users who are confused by the layout.

Screenshot6

Here is another good example from Google Reader. It shows tips and shortcuts to provide a better user experience.

Screenshot7

Examples
In forms, it’s a good idea to include examples that will help the user fill out information. This includes showing examples of user names, email addresses, etc.

Search Tips/Suggestions
With search, many websites add the convenience of search suggestions. This gives users a basis for their search and makes it much easier for them.

Take a look at the Apple search box below. There is an option to show a list of useful search tips for product support topics. Also notice that the link leading to the list of tips doesn’t get in the way of the search, but it has a convenient location for those who need help.

Screenshot8

Password Strength Meter and User Name Check
On sign-up forms, password strength meters and user name availability checks are just two small elements that drastically increase the usability of a form.

Labels
To take forms to an even higher level of usability, adding labels to inputs is the way to go. Explain form inputs in as much detail as possible.

Usability Is The Key

With any website design, one strives for usability. Usability is the key factor in the success that a website achieves. Usability is simply about making things easier for your users — and help elements certainly do that. But are your individual help elements themselves usable?

Don’t Confuse the User
Confusing the user contradicts the purpose of the help element, so avoid it. Only put in content that is appropriate to the element. The way you organize content within the help element affects usability. If the element contains a lot of content, use lists and highlight keywords so that the content is easy to scan.

Placement Has a Major Impact
In Web design layout, placement of objects is a top usability consideration. Likewise for help elements, placement affects usability.

Many designers make the mistake of making help elements (i.e. buttons, links, etc.) very small so that they don’t get in the way of the website’s main content. The problem is that they become hard for the user to find. Sure, their small size leaves room for more content, but that won’t help a confused user. Find a balance between subtlety and accessibility.

Also remember that help elements should be optional for the user, not required. Allow the user to choose to get help, instead of immediately showing the element.

Take a look at the form below. Notice the small question mark icon to the right of one of the inputs. When clicked, this icon pops up a box containing information about the input. The icon is clean, well-placed and out of the way of the form.

Screenshot9

Avoid Too Much Clicking, No Pop-Ups
The worst thing you can do is force the user to have to click back and forth between help elements and the content on the page. This makes tools that are supposed to help the user completely unusable.

Using Graphics/Icons as Metaphors
Using icons and other graphics as metaphors in Web design is quite tricky. The meaning the icon is meant to represent could easily be taken the wrong way by users. Just because you understand it, doesn’t mean that all of your users do. If easy to understand, icons can be very useful in help elements and can even serve as the help elements themselves. Graphics can be used to explain things such as diagrams, charts and directions. Just make sure the graphic or icon is easily understandable for any user.

Showcase Of Help Elements

Help elements appear on many websites, and you often don’t notice them. Here are some examples of websites with usable help elements.

Form Elements

Here are a few nicely laid out forms that contain useful and convenient help elements. The elements give examples and explanations of the inputs to assist users.

Screenshot10

Screenshot11

Screenshot12

Screenshot13

Screenshot14

Screenshot15

Screenshot16

Screenshot17

Screenshot18

Screenshot19

Search Elements/Suggestions

The following are usable search functions that give examples and suggestions to make the user’s search easier.

Screenshot20

Screenshot21

Screenshot22

Screenshot23

Screenshot24

Screenshot25

Screenshot26

Screenshot27

Screenshot28

Screenshot29

Screenshot30

Screenshot31

Log-ins/Sign-Ups

Finally, here is a group of cleanly designed log-ins and sign-ups that use help elements.

Screenshot32

Screenshot33

Screenshot34

Screenshot35

Screenshot36

Screenshot37

Screenshot38

Screenshot39

Screenshot40

Screenshot41

Screenshot42

Screenshot43

Screenshot44

Further Resources

You may be interested in the following articles and related resources:

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/02/18/9-common-usability-blunders/
  2. 2 http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  3. 3 http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/
  4. 4 http://www.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/
  5. 5 http://superduperlist.com/account/signup
  6. 6 http://www.google.com/reader/
  7. 7 http://www.google.com/reader/
  8. 8 http://www.apple.com/support/
  9. 9 https://secure.typography.com/cart/editUser.php?checkout=true&newUser=true#pagetop
  10. 10 http://productplanner.com/flows/create
  11. 11 http://www.whitehouse.gov/contact/
  12. 12 http://www.pointofe.com/
  13. 13 http://www.google.com/local/add/lookup?hl=en-US&gl=US
  14. 14 https://register.madebysofa.com/versions/buy?referrer=
  15. 15 http://www.13creative.com/
  16. 16 http://hellorent.com/
  17. 17 https://www.teefury.com/check_out.php?sid=r68i6nf8jo4sksmh6j4k326og7
  18. 18 http://www.carbonmade.com/signup
  19. 19 http://www.culturedcode.com/things/
  20. 20 http://www.wishlistr.com/
  21. 21 http://alltop.com/
  22. 22 http://kb.mediatemple.net/
  23. 23 http://www.mybanktracker.com/banks
  24. 24 http://collabfinder.com/
  25. 25 http://nyc.everyblock.com/
  26. 26 http://www.miaandmaggie.com/
  27. 27 http://listen.grooveshark.com/
  28. 28 http://www.findinternettv.com/
  29. 29 http://www.whatalovelyname.com/
  30. 30 http://www.tastebook.com/
  31. 31 http://www.vouchercodes.co.uk/
  32. 32 https://auth.apple.com/authenticate?service=DockStatus&realm=primary-me&returnURL=aHR0cDovL3d3dy5tZS5jb20vd28vV2ViT2JqZWN0cy9Eb2NrU3RhdHVzLndvYS93YS90cmFtcG9saW5l&destinationUrl=
  33. 33 http://www.wishlistr.com/signup/
  34. 34 http://www.kontain.com/#home
  35. 35 http://flashden.net/signup
  36. 36 http://www.evelmerch.com/signup.php
  37. 37 https://secure.me.com/wo/WebObjects/Signup.woa/wa/trial?aff=consumer&cty=US&lang=en
  38. 38 https://www.fontshop.com/fonts/login.php?returnto=%2Ffreefonts%2Fdownload%2F100
  39. 39 http://www.wishlistr.com/signup/
  40. 40 http://corkd.com/signup
  41. 41 https://secure.joblogs.cc/
  42. 42 http://www.yahoo.com/
  43. 43 http://www.onsugar.com/user/register
  44. 44 http://www.google.com/
  45. 45 http://patterntap.com/tap/collection/help
  46. 46 http://www.netmag.co.uk/zine/home/designing-simple-accessible-forms
  47. 47 http://www.webdesignerdepot.com/2008/12/10-usability-tips-for-web-designers/
  48. 48 http://www.doshdosh.com/50-web-usability-tips/

↑ Back to topShare on Twitter

Matt Cronin is an avid graphic designer, web designer/developer, Cocoa programmer, photographer, digital artist, and the like. He also enjoys writing, and does quite a bit of writing for Smashing Magazine. He is currently working on a startup called VAEOU, which will have new services coming soon.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    First… and wow, what a Post ! awesome again! thanks Smashing Magazine! and Matt! :)

  2. 2

    very informative. thanks for sharing.

  3. 3

    Tops.. really useful. thanks

    from badurally.com

  4. 4

    Amazing as usual. Exactly what I need now. Thanks a lot!

  5. 5

    Thiet ke website

    April 23, 2009 1:36 am

    Wow thanks for sharing.

  6. 6

    Nice post, but, you should avoid using only colors to point something out … color blind people, blind people, etc … aren’t recognized that ;)

  7. 7

    This is a really interesting article, but Smashing needs to do some proof-reading before publishing.

    There shouldn’t be a question mark in the title (it’s not a question). Then, in the second paragraph, “With the amount of forms, search functions and other navigational elements on websites” should be “With the number of forms”.

  8. 8

    Oh, nice. Thanks for sharing this!

  9. 9

    Amazing as usual. thanks for sharing.

  10. 10

    Way too many images there, confused me when scanning the page.

    With that amount of pictures, a subtle border would have been helpful so I could see where the content was and where the images were.

    Nice tips though.

  11. 11

    Cool examples as per usual. Gives me some good ideas, I’m always looking out for good usability ideas to use in my work. Great design and usability is the aim.

  12. 12

    Hi, Thanks for the tips. This was a helpful article.

    I do agree with Fred’s comment that visually, this article seemed cluttered when scanning. The content, however, was very helpful. Thanks.

    -rod homor

  13. 13

    Do you have proof to your concepts?
    Just because ex. google does something, it´s not necessary the perfect solution. A layout should be self explanetary mostly, I doubt that throwing help dialogs in the users face is the way to go, cause it can clutter up the layout.

  14. 14

    Honestly, this is a great post, but this was released 1 month ago….
    Also, its a bit difficult to scan the page and there is some typos…

  15. 15

    Interesting post.
    I have to note that anyone serious about enhancing element design has read Web Form Design by Luke Wroblewski.

  16. 16

    thanks for sharing, there are good + not so good examples up there. some overdo it with too much suggestions for a simple form. I only like the help elements when they are funny~

  17. 17

    In the Further Resources section, a link to further reading about the active auto-suggest search feature (ie, how to create it) would be very welcome.

    On the topic of usability, I think that SM could include a ToC with section anchors in its articles to ease the scanning/scrolling issue. I would love to see that.

  18. 18

    Great examples. Really helpful. My only suggestion is someone should look at the first three links under Further Resources. I may be wrong but I don’t think they should all point to Pattern Tap at least not judging by the text. ;-)

  19. 19

    Amazing article. Plus right timing as I am trying to improve the usability of the form fields.
    Thanks!

  20. 20

    I also would love to see some tutorials or further discussion on how to actually implement some of the techniques here. The examples are nice to look at but how to I create them?

  21. 21

    Pretty neat article with some good ideas on design/usability. But yes, I do agree with what someone mentioned above. Please have some border style around the images or something to that effect, because they just tend to blend together.

  22. 22

    Pedro Magalhães

    April 23, 2009 10:53 am

    I was waiting for something like this.. Thanks!

  23. 23

    Am I missing the part where they actually show you how to do this effect?

  24. 24

    Ayaz. – Yes, I agree with you. Your site could do with some pointers. I am by no means the final say on any of this but the first thing I would do if i was building a site in english, would be to use correct grammar. Maybe you could get some copywriting done for you. Then possibly play with the hierarchy of some of your information – Until you get massive (which is your intention because you tell us that on your site:) ) maybe the explanation of the site purpose, could be simplified and lifted in the header region and made more prominent. Good luck on your project. Cheers Karl. – Oh by the way. Nice article Matt. Often the subtle touches like this that make the difference.

  25. 25

    SM is back to what it does best. Kudos

  26. 26

    Great info…thanks

  27. 27

    I really enjoy this article, it must be useful to me…

  28. 28

    Wow, lot’s of inspiration here.

  29. 29
  30. 30

    Wow! Thank you! I always wanted to write on my blog something like that. Can I include a portion of your post to my website?

  31. 31

    I really love this article.
    Hope to use them soon.

↑ Back to top