Blog


Website Usability Best Practices: Help and Forgiveness

April 17th, 2012
by Stacey Crisler


Nothing is more frustrating for a user than filling out a form, only to make a mistake because instructions were unclear or missing and to lose all of the information they had entered on the page when the error messaging appears. Yet, these issues are more common than you might realize. Based on our experience, we have seen that taking the time to offer in-context help at the point where users need it and a path for them to easily undo any mistakes made can save you from having a customer give-up or, worse, go to a competitor. So how can you provide the best instruction and forgiveness to a user on your site? Below are the guidelines that make up our Help and Forgiveness Usability Guideline:
  1. Login process is straightforward and user-friendly
  2. Remembers user information between screens
  3. When soliciting user information, clearly indicates what is required vs. optional
  4. When completing forms, provides proper field entry instruction for characters, capitalization, etc.
  5. Allows actions to be reversed and warns users before irrevocable actions
  6. Errors / confusion are managed proactively with clear and informative instructions
  7. ‘Customer Service’ and / or ‘Contact us’ options are clearly visible, along with extensive and instructive help features, such as glossaries, tutorials, FAQ’s, site map, contact information
  8. Search input box defaults to entire site, has no character limits, and allows users to see fully inputted search string / Provides special instruction as necessary to ensure helpful search results
These first 4 guidelines have been discussed in detail in our blog ‘The Seven Deadly Sins of Sign-Up Form Design’. For more detail on each of these, please see that blog post. Given that, I will focus on the remaining guidelines (5-8) in this post.

Help and Forgiveness

1. Allows actions to be reversed and warns users before irrevocable actions
  • None of us like to make mistakes, but when we do, we want to be able to correct them quickly and easily. Unfortunately, on the web this is often impossible. Too often sites force users to completely redo the steps they took prior to the mistake in order to correct the problem, often creating a frustrating experience. The best defense against this is providing clear help at the point of interaction or not letting the mistake happen at all through clear messaging.
    • This comes in 2 key forms. One is the language you are using on your site throughout a process, for example checkout. Action buttons should be clear and specific to the step the user is actually taking. For example, ‘Add to Cart’ is a much more clear button than ‘Place an Order’ when a user is simply putting an item into their cart or bag. ‘Place an Order’ implies that the order is going to happen immediately, something the user may not yet be ready for. So instead of using ‘Continue’ tell a user with the action button what they are actually doing when pressing the button.
    • The other key to this guideline is to offer an alert when a user is about to take any action that cannot be undone to allow them the chance to cancel the action. A good example is deleting an item from a shopping cart. While in many cases, a user can go back and place the item in their cart again, for the new breed of discount site, such as Gilt Groupe or RueLaLa, you may lose an item upon deletion and a user needs to confirm their action to be sure it was not a mistake or a stray click, which could lead to disappointment. Additionally, this message needs to give the user enough information to really make a decision about their action by telling them what they are about to do in detail and what the consequence may be. The message should also have clear action options such as ‘Keep this item in my cart’ or ‘Delete this item’, rather than generic buttons that could lead to further confusion.
    • Wherever possible, it is ideal to also offer users a way to redo what they have undone. In some cases this may not be possible, making the messaging on the site all the more important.
2. Errors / confusion are managed proactively with clear and informative instructions
  • Even with the best in-context help and site design, errors will happen. How you handle the error on the site is what determines if the error will be a fatal one for your customer’s visit to your site. The keys to managing errors are two-fold:
    • First, messaging again is vital. When displaying an error message, it needs to be clear an error has occurred, so the error message must be highlighted and very visible. This is an area where red is a strong color to use as it attracts the eye, and red is often associated with error messages. Once you have a user looking at the message, it must be specific, telling a user:
      1. What went wrong
      2. Where on the page the error is (if you do not bring the user to error itself which is ideal)
      3. How to fix the error, in specific detail
    • Once a user understands the error and corrects it, your site needs to place them in the same position they were in pre-error. Not only does this mean not taking them out of the path they were following, but also not losing any of the information they had input up to the point where the error occurred (including the information on the page where the error occurred).
3. ‘Customer Service’ and / or ‘Contact us’ options are clearly visible, along with extensive and instructive help features, such as glossaries, tutorials, FAQ’s, site map, contact information
  • At times, a user may need more help than you can provide in-context on your site or they may simply be the type of customer who feels more comfortable alleviating their confusion via human contact. Whatever the case may be, there should be a clear area of your site dedicated to customer service or support.
    • Do not hide this area of your site. While not clearly including offline contact information may cut down on expensive calls to your call center, it could also cut down on customers’ comfort levels in transacting with your site. When testing sites that have their 1-800 numbers on their home pages, readily visible, we often hear from users that they wouldn’t be likely to call it, but having it there increases their comfort not only transacting with the site, but also their impression of the brand due to its willingness to share that information. So while the number doesn’t have to be on your home page, a clear path to finding it (no more than 1 click deep) does.
    • This area of your site should also include whatever level of help is appropriate to the type of site / business you have, and should attempt to answer all key user questions on the site without forcing them to call. Most web users prefer to be self-service, so providing FAQs (ideally based on the top questions you get at your call center) can be a great way of providing them the information they are seeking and avoiding a costly call or a jump to another site. Glossaries and more extensive help can be useful if you have a site that includes a lot of industry speak or technical jargon, but may not be necessary on all sites. Tutorials can also be helpful when introducing new or complicated functionality, but be aware of your target audience – few users are likely to turn to a tutorial for help.
    • Generally, this area of the site should give users all the help content you think could be useful to them as well as access to all of the contact avenues available to them (phone, email, chat and mailing address). With good design and usability execution on the rest of the site, you can minimize the need for users to turn to this area, but you cannot avoid offering it to users.
4. Search input box defaults to entire site, has no character limits, and allows users to see fully inputted search string / Provides special instruction as necessary to ensure helpful search results
  • These 2 guidelines both address search so I wanted to look at them together. Search can be either an incredibly useful tool or a very bad experience for users. So how do you ensure that it gives users what they are looking for?
    • Place search in a visible and conventional location (preferably the upper right of the home page and potentially throughout the site)
    • Default to searching the whole site, not a specific section. However, if there is an option to search only a section of the site make that clear as well
    • If the search box contains instructional text (which we will talk about below), when a user clicks into it, the text must automatically disappear. No erasing text required!
    • Users should be able to type their entire search query without limits and they should be able to see the full search string (within reason). The fully inputted search string should definitely be shown on the results page
    • Instructions should be given as to how to best use your specific search, i.e., is it only a keyword search, can users also input catalog codes, can they type a natural text question, etc.?
    • These instructions should appear in or near the search box itself in a concise manner
    • For more information on how to maximize search results, see our blog Retail E-Commerce Usability Part 2: Search!
  • Share/Bookmark

Tags: , ,

Leave a Reply

You must be logged in to post a comment.

Our Services

Web Based Testing

Website Evaluation

Competitive Assessment

Intercept Survey

Prototype Testing

Home Page Survey

Brand & Concept Test

Open Web Research

Online Benchmarking


Consulting Services

Expert UI-Review

UI Consulting

Lab Based Testing

Usability Testing

Focus Groups

Eye Tracking

In-Depth Interviews

Card Sorting

Persona Research

Featured Articles

Usability 101

Methodology Spotlight

Our Expertise

Industries

Benchmarks

Case Studies

About Us

Management Team

Partners

News & Events

Contact Us

415-439-8333

sales@evocinsights.com

Connect With Us

linkedin logo

Keep Informed

Sign up for eVOC's monthly newsletter.