Monday, September 12, 2011

10 Principles for User Interface Design

Jakob Nielsen, a web usability consultant well-known in his field, developed 10 Usability Heuristics. These are the rules of thumb that can help improve the interface of computer systems. I’ve listed them below and also provided a “translation” and questions you can ask yourself to see how this applies to your own site. Feel free to share any thoughts, comments, or ideas.

1. Visibility of system status
Interpretation: Users should know what your site is doing and when. When they perform a function on the site, they should see a response from the site. Submitting a form should lead to a thank you page, just as clicking a link leads to another page.

Ask yourself: Do users always know how your site is functioning? Does your site respond to every user action with a reaction, so users understand what is happening?

2. Match between system and the real world
Interpretation: Users should not have to learn a new syntax or vocabulary system just so they can navigate your site. You want things to be intuitive: make navigation and language follow real world conventions and be put together in such a way that the average user understands it.

Ask yourself: Does the language on your site reflect how your target audience would speak? Do you use any site-specific jargon and, if so, how much can you eliminate? Do all of your buttons and icons make sense?

3. User control and freedom
Interpretation: Make sure users have leeway when they are navigating your site. You may want users to take a specific action (e.g. sign up for your email list), but you cannot force them. So ensure that users always have an “exit” to return to the homepage or the previous section of the site.

Ask yourself: Do you always have a link that goes back to your homepage? Are visitors able to move to the previous page?

4. Consistency and standards
Interpretation: The basic functions and design within your site should be consistent. For example, say you have your menu bar at the top of your homepage. Moving it to the left-hand side on another page of your website may confuse users. So would referring to your blog as a blog in one link on the site, an update journal in a second, and a live report in a third.

Ask yourself: Is the design and look of your site similar across every page? Do links to the same place on the site use the same words?

5. Error prevention
Interpretation: Think through the processes on your site, identify where users might go awry, and prevent errors before they happen. For example, if you want a supporter to donate only in increments of $10, make a note of that beside or below the contribution field on your donation form.

Ask yourself: Are all of the instructions on your site clear? Have you included a confirmation page for users to review when requesting information?

6. Recognition rather than recall

Interpretation: Visitors to your site should not have to hunt for information or remember how to find specific things or perform certain actions. Label and organize everything so that it is easy to find, and carry information across pages in the site. For example, if filling out a form on page A requires that users have received certain information on page B, make sure users can get back to page B quickly and easily. Do not expect them to retain information across your site.

Ask yourself: Starting from your homepage, can you easily see and find links to all of your information? Can users access all necessary information quickly and easily?

7. Flexibility and efficiency of use
Interpretation: There should be shortcuts for more advanced users and more than one way to perform an action to increase efficiency. A great example of a shortcut is Facebook’s photo albums. You can go to the next photo in an album by clicking the link, but also by tapping the right arrow on your keyboard. But without getting unnecessarily fancy, you want to make sure users can get to your information in a variety of ways.

Ask yourself: Do you provide multiple ways for a visitor to access your content, such as a site map or search bar?

8. Aesthetic and minimalist design
Interpretation: Having too much information displayed on a single webpage can overwhelm users and distract them from the main tasks of your site. Keep it simple and include only relevant information. Otherwise, you risk losing your message amidst the “noise” of your site.

Ask yourself: Do you have a purpose in adding that text, feature, or link, or is it just additional “noise”?

9. Help users recognize, diagnose, and recover from errors
Interpretation: Mistakes happen; it’s a function of us all being human. So build an error messaging system that is helpful to users: explain the problem specifically and tell them a way they can fix it. For example, in your contribution system of $10 increments, say someone attempted to donate $155. Do not have a message such as “Error: failed transaction” since that does not help the user—and may make them think something else is to blame. Instead, the error message should display “Error: Donation must be entered in increments of $10.”

Ask yourself: Have you accounted for the major ways a user can incorrectly operate your site? Have you suggested the necessary solutions? If you were the one who had made the error, would you find your messages helpful?

10. Help and documentation
Interpretation: No matter how simple your site may seem to be, it is always a good idea to provide some sort of support. Make support simple, straight-forward, and easy to navigate. But remember: your site should not depend on the help documentation.

Ask yourself: Have you included a help section that contains instructions on how to perform the main functions on your site? Does it help users quickly and efficiently?

Keeping these 10 principles in mind will make your site friendly and accessible to your users. Check back in the future for more information about site usability!

*Source

No comments:

Post a Comment