Web Usability

Most of this lectures concepts come from Dont Make Me Think by Steve Krug First some examples (from Mike): Scotiabank, http://www.rotman.utoronto.ca/
Usability vs Design
Usability:
Make it easy for users to do what they want to.
Design:
Typically thought of as creating aesthetically pleasing websites.
Primary Principles
DON'T MAKE ME THINK
Example
obviousthought
Example
obviousthought
Click Me
Example
Which of the following is simpler? Top or bottom?
Quick Search:
How we really use the web
From: http://www.useit.com/eyetracking/ Facts
Example
Billboard design 101
Create a clear visual hierarchy
Example
  • large type=headline
  • stories are under their headlines
  • text under a picture is the description of the picture
Example
Havenworks
Conventions are your friends
  • Allow users to use their experience to more naturally use your website
  • Conventions come from both outside and inside your website
  • No new conventions unless there is a clear advantage. New conventions require users learn. Is it worth the effort?
Example
eBay eBay/baby eBay/books nus business school vs nus school of computing Yahoo vs Yahoo Finance
Other Advice
  • Break pages into clearly defined areas. Can users point to areas on the page and tell you want that area is about?
  • Make whats clickable obvious.
  • Keep the noise down.
Example
Lings Cars
Animal, Vegetable or Mineral
Clicks are ok if...
Example
dell.com
Omit Needless Words
The Elements of Style
Omit needless words.

Vigorous writing is concise. A sentence should contain no unnecessary words, a paragraph no unnecessary sentences, for the same reason that a drawing should have no unnecessary lines and a machine no unnecessary parts. This requires not that the writer make all his sentences short, or that he avoid all detail and treat his subjects only in outline, but that every word tell.

Why? Culprits
Example
ibm ibm CGI Outsourcing Services
Street Signs and Bread Crumbs
Different ways to navigate in a mall...
Example
Yorkdale Store Directory
List of stores by category. ('Site map')
Example
Customer Service ('Search')
Example
('Local Navigation')
Example
Web Navigation 101
Users are trying to find something, typically, they can ask ( ) or browse (use signs to guide them).
The Problem With Browsing (without navigation)
  • No sense of scale (how many pages?)
  • No direction
  • No sense of location
Navigation provides users with a sense of these
Purposes of Navigation
  • help find what user is looking for
  • tell user where they are
  • give user something to hold onto
  • tell user whats here (reveals contents)
  • tell user how to use the site
  • give confidence in people that built website
Web Navigation Conventions
Pages typically have the following navigational components
  • Site ID: On every page. Lets users know they are still here.
  • Sections and subsections: Highest levels of navigation. Give a sense or organization. Describe content.
  • Utilities: Important elements of the site, not part of content. (ie. Contact, About Us, Shopping Cart, Login)
  • You are here indicator:
  • Breadcrumbs: path from home page to current page

  • Page Name
  • Local Navigation
  • Small text/duplicate navigation: Usually at the bottom of pages.
Web Navigation Test
  • What site is this? (SiteID)
  • What page am I on? (Page name)
  • What are the major sections of this site? (Sections)
  • What are my options at this level? (Local nav)
  • Where am I in the scheme of things? (You are here)
  • How can I search?
Example
gap.com toysrus.ca about.com canadianTire.com youTube.com sourceforge.net
The Tag Line
A few simple words describing what this is. Usually associated with the site id. see this note
Example
The site ID and tag line for Toys R Us
Example
The site ID and tag line for Ranting & Raving
Example
An interesting discussion of tag line choices.
Colours
References