Web Interface Concepts

View Slideshow in PPT

View Slideshow in PDF

Tips on Web Site Usability

The following is a summarized list of tips for making web sites usable. They come from the legendary book about web design usability, “Don’t Make Me Think” by Steve Krug.

  1. Don’t make your visitors have to think. A web page should be self-evident, obvious, self-explanatory.
  2. Recognize that visitors don’t read pages. They scan them, and they muddle through.
  3. Create a clear visual hierarchy.
  4. Use conventional methods of organizing content (predictability is your friend).
  5. Break up pages into clearly defined areas.
  6. Make it obvious what’s clickable.
  7. Keep visual noise to a minimum.
  8. Omit needless words.
  9. Create street signs and breadcrumbs in your navigation. On any page, a visitor should be able to answer these questions:
    • What site is this?
    • What page am I on?
    • What are the major sections of the site?
    • What are my options at this level?
    • Where am I in the scheme of things?
    • How can I search?
  10. Your home page must convey “the big picture” for your visitors:
    • What is this?
    • What do they have here?
    • What can I do here?
    • Why should I be here-and not somewhere else?
    • Where do I start?
  11. Nothing beats a good tagline.
  12. Don’t design for a mythical “average user.” Test your site with real, ordinary people.

Design Principles

Design principles in depth.

Alignment

  • Everything should align with something else along at least one edge
  • Avoid center alignment
  • Don’t mix alignments (use a grid)
  • Margins and padding add white space
  • White space is your friend

GOOD example: http://www.100candles.com/
POOR example: http://www.maximumscented.com

Proximity

  • Things that go with each other should be closer to each other than things that don’t go together
  • Spacing has meaning; it implies relationships
  • Reinforce those connections with ALIGNMENT for a double-whammy
  • Provide WHITE SPACE to give the eye some rest

GOOD example: http://www.zappos.com/
POOR example: http://www.eviltattoo.com/

Repetition

  • Repeat some aspect(s) of the design
  • Creates UNITY (the sense that all the parts create a unified whole)
  • Helps identify navigation, heading levels, and overall organization
  • Aids usability (visitors don’t need to learn new structure from page to page)
  • Requires design guidelines and discipline

GOOD example: http://werkpress.com/
POOR example: http://www.cars-on-line.com/

Contrast

  • If two things are different, make them VERY different
  • Contrast can be created with color, size, scale, texture, value, motion, dimension
  • Creates a focal point – helps define what is most important
  • If you emphasize everything, you emphasize nothing

GOOD example: http://www.nurun.com/
POOR example: http://www.carolhouse.com/

Spelling and Grammar

Bad spelling and grammar can destroy all you’ve achieved with good design.