Do’s and Don’ts of UI Design

This blog is based on my meeting with Tom, Usability Manager of Guardian. I have added the suggestions he made to my presentation “Best Practices for Web UI”. Here is a quick list of Do’s and Dont’s of Web Application UI.

Do’s

• Be consistent!
  • Use the same icon for the same link or activity (eg. Home, delete, add etc..)
  • Links color
  • Button styles
  • Style all pop-ups the same
  • Illustration style (use of lines, color pallets, representation of people)
  • Icon size
  • Providing feedback to the user
  • Using Fonts (including Font size)
• Layout
  • Anticipate the reading order – place content/navigation/buttons on the page where the user will need them
  • Design to a grid and stick to it http://www.smashingmagazine.com
  • Use consistent and familiar layouts (eg, header, body, footer)
  • Consider framing your page to delineate margins
  • Anticipate the limitations of XHTML/CSS and proper DIV based layout
  • Leave breathing room – ample margins (including image/branding elements)
  • Don’t leave empty space
  • Centre the application in the window – don’t left-align it (Or use liquid layout)
  • Hide non-relevant content
  • Consider that fixed-width layouts are generally easier to develop and design for (but fluid layouts are officially more accessible, though this is still being debated furiously by the UI community)
• Color
  • Choose a basic color combination and stick to it throughout your application. Eg:, foreground, background, highlight 1, highlight 2 ( kuler.adobe.com)
  • You can use gradient tints of single colors, but these are ideally subtle
  • Ensure foreground and background elements are sufficiently contrasting
    http://snook.ca/technical/colour_contrast/colour.html
• Text
  • Limit your font-set – no more than two fonts in a site/application
  • Use web-safe fonts http://www.fonttester.com/help/list_of_web_safe_fonts.html
  • Use the same font for the same purpose (eg. Georgia for heading at www.guardian.co.uk, Arial for body text)
  • Choose your main font and stick to it
  • Use variations of your font set to denote types of content (links in different colors, sub-headings in bold or colors, headings etc..)
• Navigation
  • Place navigation in the same places throughout a site / application
  • Place navigation where users expect to see it (top/left, next buttons bottom-right, etc)
  • Place relevant navigation close to its content
  • Group navigation by appropriate themes/topics/actions
  • Keep navigation simple and relevant to the user
  • Use descriptive links
  • Highlight important / relevant links over others on page (eg, submit buttons)
• IA
  • Anticipate your users’ needs – do they want to be led through a process (wizard) or to enter all of their info at once (form)
• Content and naming / terminology
  • Create user expectation
  • Follow through designs to sub-pages
  • Use language that the user expects or is familiar with
  • Call elements by recognizable names
  • One named element should do the same thing through the application
• Technical
  • Test designs in every possible scenario before it is deployed

Don’ts

• Navigation
  • Hide critical information from the user or force them to interact to see it
• Color
  • Use too extreme gradients
  • Use gradients with very different colors
  • Use dark shadows
  • Use colors that don’t contrast
  • Use colors that are inappropriate for color-blind users (Eg, red on green)
• Fonts
  • Use many fonts
  • Use more than one font too often
• Layout
  • Overload the user with too many options
  • Place the same function/button in different places on different pages (relative to the content)

Conclusion

This list is neither exhaustive nor the final word in UI design. Creativity comes from breaking rules, while best practices help leverage conventional wisdom to create simple and effective UI quickly. A good UI designer will combine creativity and convention to create the perfect interface for the client’s needs.

You are welcome to add to this list via your comments…