Aspects of Web Design Introduction to Usability 2

1
Aspects of Web DesignIntroduction to Usability 2
2
introduction to usability 2

• Steve Krugs ideas on usability
• Practical web site design
• Couple of hints for the assessments

3
the story so far

• Lots of practical work over the years on
  designing things for people
• ergonomics, time and motion, environmental
  design, etc
• Development of computers and the graphical user
  interface led to new design challenges
• psychology of design, human computer
  interaction, usability
• Emergence of the web as a ubiquitous resource has
  given rise to a whole new set of issues
• standards compliance, browser wars,
  information anxiety

4
Steve Krugs approach to usability

• Krug provides a pragmatic, no-nonsense guide to
  usability in his book Dont make me think!
• very accessible
• grounded in real-world experience
• Covers key aspects of practical design
• design of the homepage
• design of navigation
• user testing

5
Steve Krugs approach to usability

• Steve Krugs principles of usability
• Dont make me think!
• It doesnt matter how many times I have to click,
  as long as each click is a mindless, unambiguous
  choice.
• Get rid of half the words on each page, then get
  rid of half of whats left.

6
Krugs principles of usability

• Dont make me think
• If something looks like it might take some time,
  or is difficult, people wont do it
• Cognitive overhead - eliminate questions from
  users minds
• what is this site?
• does it have what I need?
• what do I do next to get it?
• example dont confuse people with your search
• people know where to look on the page for search,
  so dont put your search somewhere else
• dont call it anything else!

7
Krugs principles of usability

• It doesnt matter how many times I have to
  click
• as long as each click is a mindless, unambiguous
  choice.
• its not the total amount of clicks that matter
  but the total amount of thought
• Guide people to the right thing to click on next
• make it obvious what is clickable and what is not
• create a clear visual hierarchy the more
  important something is, the more prominent it
  should be
• Divide the page up into separate distinct areas
• things that are related should look similar eg
  navigation levels
• use conventions from printed media eg newspaper
  headlines span the text they apply to and only
  the text they apply to

8
Krugs principles of usability

• Get rid of half the words on each page
• then get rid of half whats left.
• Reduce the noise on the page
• you want users to find the information they want,
  so dont make them read stuff they dont need
  before they get to it
• make the pages shorter so that people dont have
  to scroll
• Get rid of happy talk
• tell them what the site is about as soon as
  possible
• never put corporate statements or mission
  statements on the home page!
• Dont put instructions on the home page
• there shouldnt be any need for them

9
more advice on usability

• Satisficing
• Coined by economist Herbet Simon (1957) Models
  of Man Social and Rational
• has been adopted by a number of disciplines,
  including cognitive science and usability.
• Krug refers to one study in particular
• Gary Klein (1998) Sources of Power, how people
  make decisions
• examined firefighters and others who make high
  stakes decisions
• people dont consider any options at all
• pick the first thing that comes to mind
• do a quick mental check to make sure it could
  work
• then do it!

10
more advice on usability

• People behave as though they are in a hurry
• theres not too much of a downside to getting it
  wrong
• theres no guarantee that thinking will help
• we naturally have a try it and see approach to
  problems
• People just muddle through
• often dont understand why things work
• often have no wish to understand
• as soon as they find something that works they
  stick to it

11
Krugs opinion on navigation

• navigation isnt a feature of a web site it is
  the web site, in the same way the building, the
  shelves and the cash registers are a high
  street store
• navigation lets users know where they are
• lets users know something about the extent of the
  site the site structure
• guides users on how to use the site

12
guidelines on navigation

• Navigation should be consistent throughout the
  site
• persistent navigation - should appear identically
  and work the same way on every page
• people expect to find on each page
• site brand the most prominent part of the page
• page title (which MUST match the link that
  brought them)
• a way to get back to the home page
• search
• top level navigation the main sections of the
  site

13
guidelines on navigation

• Secondary navigation should always be
  distinguished from top level navigation
• less prominent with each level
• different area of the page might be useful, eg
  left hand side for second level, right hand side
  for third level
• Breadcrumb trails
• should be the least prominent navigation aid
• appear towards the top of the page
• begin with you are here, end with current page
  title
• separate each page title with gt

14
Krugs opinion on the home page

• The most important page of your site
• should encompasses the whole site
• should enable users to recognise the rest of the
  site with the brand established on the home page
• Establish what the site is and how to use it
  immediately
• always use a tagline as part of the brand
• make it clear where users start when they get
  there
• establish navigation principles

15
Krugs opinion on testing

• Testing is essential
• testing one user is 100 better than testing none
• testing one early on is better than testing 50
  near the end
• representative users are not necessary (cf
  Neilsen who maintains selecting representative
  users very important)
• test competitors web sites
• Review test results immediately
• pragmatic approach only bother with problems
  that cause major difficulties and are easy to fix

16
putting Krugs ideas into practice

• Minimum effort you should put in to testing
• plan to carry out one test cycle
• test with two people friends are fine
• contextual inquiry ask them to look at the home
  page and talk through what theyre thinking give
  them two or three tasks to perform take notes to
  analyse later
• Minimum effort you should put in to navigation
• make the brand logo a link to the home page
• top level navigation for sections of the site
• sub level navigation for each section
• navigation links should be identical to title of
  the page they link to

17
putting Krugs ideas into practice

• Minimum effort you should put in to home page
• put distinctive branding towards the top left or
  centre of the page
• chose a pithy and effective tagline
• show the navigation that will persist throughout
  the site
• put a search box towards the top right of the
  page
• Minimum effort you should put in to writing
• make each navigation page as short as possible
• write in the active voice (headlines can be
  passive)
• retain brand and navigation on content pages if
  possible

18
putting Krugs ideas into practice

• Minimum effort you should put in to the structure
  of your web site
• decide on the number of navigation levels you
  will have before you start
• separate structure from content
• stick to the standards
• name your CSS classes semantically
• name your folders and files to reflect the page
  titles
• consider the structure of the folders, and be
  able to justify what youve done

19
a couple of hints

• Adding a search box
• use Google to search your site for you

ltform method"GET" action"http//www.google.com/s
earch"gt ltinput type"text" name"q" value""
size"20"gt ltinput type"hidden"
name"as_sitesearch" value"www.people.ex.ac.uk/ds
mith"gt ltinput type"submit" value"Google
this site"gt lt/formgt

• not ideal but quick and easy for the assessment
  demonstrates your design and works after a
  fashion
• takes a while for Google to index your site, so
  put this on your index page asap and link back to
  it from another page

20
a couple of hints

• Naming CSS rules
• name the rules based on the function rather than
  the appearance
• separates structure from content
• Easy to do in Dreamweaver
• demonstrates to the external examiner that you
  understand the semantics of web design
• choose obvious names like brand, logo,
  nav-main, nav-breadcrumb, content
• makes it easy if you want to create an
  alternative layout with a separate stylesheet

21
summary

• Krug presents an alternative opinion on usability
• Simple, pragmatic, common sense approach
• Great starting point, but not exactly academic
• so make sure you dont rely on it for your
  critique use other sources for comparison
• Document the efforts you put in to designing
  usability into your web site
• Justify your decisions, use references to
  research and experts in the field

22
Further Reading

• Krug, Steve (2006) Don't Make Me Think! A
  Common Sense Approach to Web Usability
• Cooper, Alan (1999) The Inmates are Running the
  Asylum
• Wurnum, Richard Saul (2001) Information Anxiety
  2
• http//www.alistapart.com/
• http//www.csszengarden.com/