User interface design tips

Stanford University’s online Human-Computer Interaction course includes useful guidelines for user-interface design. They should be obvious to most experienced users and are really easy to understand and apply:

  • The system status should always be visible. For example, when completing a form, users need to know that they are on page 3 of 6, or 50% of the way through. Breadcrumb trails also help.
  • There should always be some prompt or guidance as to what to do next.
  • The application should make reference to the real world, just as e-commerce sites refer to shopping baskets and checkouts. Metaphors such as these save a lot of explanation as users are already familiar with the concepts.
  • The application should be consistent with other applications, by following platform standards and conventions, and should be consistent within itself, in its processes, symbols and use of language.
  • Minimise the chance of user-error by removing ambiguity, offering previews, seeking confirmation, and by physically separating buttons that might otherwise be hit by mistake.
  • Error messages should use plain language and help users to diagnose errors and recover from them by offering alternatives or constructive suggestions.
  • Users should be offered ways to fix their mistakes, such as cancelling actions or hitting a ‘back’ button.
  • Rely on recognition rather than recall: make everything visible to users; don’t expect them to remember where to find things and what to do.
  • Users should be offered flexibility and efficiency of use, such as keyboard short-cuts for experienced users. Give them options and recommendations.
  • An aesthetic and minimalist design should ensure that anything unnecessary is removed, increasing the ‘signal-to-noise’ ratio. Restrict yourself to just a few colours and keep all core information above the fold.
  • Help and documentation, if necessary, should be succinct and easy to search.

The free course also covers storyboarding, prototyping, evaluation, multivariate analaysis and much more besides. If you are interested, take a look at for details.

This entry was posted in Media and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s