Web sites that work: Usability, navigation, and accessibility

1
Web sites that work Usability, navigation, and
accessibility

2
The obligatory Dilbert cartoon
3
Housekeeping

• 830 a.m. - 1130 a.m.
• yes, there will be breaks
• Restrooms
• Deli on 3rd floor
• feed yourself, not your computer
• Campus telephone
• Sign-in sheet
• Evaluations

4
Agreements for learning

• Take risks
• Share your experience
• Ask questions
• Respect your classmates
• Challenge us

5
Introductions

• Name, rank, serial number
• Something that the rest of us might find
  interesting about you
• Your Web experience
• Why youre taking this class
• How youll use what you learn today

6
What is bad Web design?

• The Apple Collectionhttp//www.theapplecollection
  .com/
• Vaticanhttp//www.vatican.va/phome_en.htm
• Barneys New York http//www.barneys.com/

7
Reality No captive audience

• Then If you build it, they will come.
• Now If you dont build it well, they will leave
  (and not come back).

• Whatever the purpose of your Web site, if your
  customers don't understand the site, they won't
  use it.
• Help them understand the site by paying attention
  to usability and accessibility principles.

8
Definitions

• Usability The degree to which users can perform
  a set of required tasks.
• Efficient to use
• Easy to learn
• Easy to remember
• Accessibility Can all users (including those
  with disabilities) use the site?
• Perceivable by everyone
• Operable by everyone
• Easy to navigate
• Easy as possible to understand

9
Todays goals

• Learn about your audience (aka users)
• Learn how users navigate
• Learn how to evaluate your site's usability and
  how it meets your users' needs
• Understand Web accessibility issues and how to
  accommodate users with disabilities

10
1 Audience

• Get to know your users
• What do they use your site for?
• Demographics
• User knowledge
• Web savvy more than just age
• Tools
• Platform
• Browser
• Connection speed

11
1 Audience purpose of your site

• The big question Why do people use your Web
  site?
• q Is your content meant to instruct?
• q Is it meant to be a resource?
• Is it meant to support a process?
• (Business transactions, etc.)
• Is it meant to entertain?

12
1 Audience demographics

• Who are these people? Break it down into
  percentages.
• External customers
• Regulation/Oversight
• Prospective donors
• Prospective investors
• Prospective faculty, staff, students
• Internal customers
• Faculty
• Staff
• q Administrative
• q Technical/Service
• q Managerial/ Executive
• q Retirees
• q Students
• q Undergraduate
• q Graduate
• q Alumni
• q Oversight/Policy/Audit Offices

• Gender
• Female
• Male
• Age
• 15-25
• 25-35
• 35-45
• 45-55
• 55-65
• 65
• Assistive technology
• Screen reader
• Screen magnifier
• Braille
• Motor skill devices
• Keyguard
• Foot trackball

13
1 Audience user technical savvy

• Web savvy
• What computer programs do you use most often?
  What do you use them for?
• What browser do you prefer? Why?
• About how many hours do you spend on the Internet
  each week?
• Do you use the Internet at home, work, or both?
• What types of activities do you do online?
• Have you purchased items online? Is so, what have
  you purchased online?
• Do you do searches or research on the Web? If so,
  where do you search for information? (Yahoo,
  Google, MSN, AOL, UCSD Libraries, etc.)
• What type of Internet connection do you have?
  (Dial up modem, cable modem/DSL)

14
1 Audience tools

• Extreme tracker
• http//www.extreme-dm.com/tracking/?reg
• Platform
• Browser
• Screen resolution
• Search engine keywords
• Geography

15
1 Audience summary

• The big question Who?
• Are they familiar with the subject matter?
• What level of detail do they want?
• How Web savvy are they?
• Questions so far?

16
Break! (10 minutes)

• On the other side of
• the back wall

x 53666Campus calls only
17
2 Navigation the facts

• 79 of users scan instead of reading each word
• Reading from computer screens is 25 slower than
  from paper
• Web content should have less than 50 of the
  word count of its paper equivalent
• Rule of thumb Cut it in half, then cut it in
  half again.

Users just dont think (or behave) the way you
expect them to. Source Steve Krug
http//www.sensible.com/chapter.html
18
2 Navigation your experience

• How do you find information on Web sites?
• Browse (topic ? subtopic ? detail)
• Search
• Use the sitemap
• DesperationCall someone

19
2 Navigation case study

• Sorry, NO QUESTIONS!
• Please remain silent as you find these things.
• Do each task in a separate browser window.
• You have 5 minutes to finish everything.
• Go to http//www.cooking.com and find a
  Professional Kitchen Aid stand mixer
• Go to http//www.amazon.com and find Harry Potter
  
• Go to http//www.bhphotovideo.com and find a
  Nikon N80 SLR 35mm camera body
• Go to http//www.moviefone.com and find showtimes
  for Scooby-Doo 2 near 92116

20
2 Navigation case study results

• How did you find info for the following?
• Kitchen Aid mixer
• Browse
• Search
• Harry Potter
• Browse
• Search

• Camera
• Browse
• Search
• Movie
• Browse
• Search

21
2 Navigation how you find info

• Specific I know what Im looking for
• Search
• Browse
• Broad I (sorta) think I know what Im looking
  for
• Browse
• Search

22
2 Navigation obstacles

• Mystery Meat Navigation (MMN)When you have to
  mouse over a graphic to discover whether it's a
  link and where the link will take
  you. http//www.vatican.va/phome_en.htm
• This new, evil form of navigation must be
  stopped because it violates the first rule of
  navigation clearly show people where to go.
  - Vince Flanders
• Web design is not about art, it's about
  information!
• Dont design a site thats confusing
• Help users (quickly) find what they're looking
  for
• MMN is confusing You have to find the
  navigational system and then mouse over each
  image to determine where it will take you.
• Source http//www.fixingyourwebsite.com/mysterym
  eat.html

The one meat selection that isn't readily
identifiable, often disguised by a layer of thick
gravy. The dish became known as Mystery Meat
because you're not sure what kind of meat you're
eating.
23
2 Navigation mystery meat, part deux

• When you go to Wal-Mart and buy a microwave,
  they've got your money. When you're on the Web
  it's different because every click is a decision
  point and people are ruthless. If they don't like
  what they see or they're confused, they go
  somewhere else. MMN is confusing. Confusion is
  bad.
• MMN is very seductive -- it looks cool and is
  used on a lot of sites that win design awards.
• MMN gets rid of long text strings, which makes
  the page look cleaner because there's more
  white space.

Why MMN is really bad When you drive down the
road, you don't see road signs that wait for you
to get near them before they tell you what they
say.
24
2 Navigation what users say

• Users comment on the content first if the
  content is not relevant, then they don't care
  about any other aspect of the design.
• When they arrive on a page, users ignore
  navigation bars and other global design elements
  instead they look only at the content area of the
  page.
• Users don't understand where they are in a Web
  site's information architecture.
• Users are extremely goal-driven and look only for
  the one thing they have in mind - they don't
  spend much time on promotions for anything else.
• In pursuit of their goal, users often rely on
  search as their main hunting strategy.
• Users rarely look at logos, mission statements,
  slogans, or any other elements they consider
  fluff (in particular, they ignore advertising and
  anything that looks like an ad).
• If a page does not appear relevant to the user's
  current goals, then the user will ruthlessly
  click the Back button after two to three seconds.
• If users don't understand a certain design
  element, they don't spend time learning it -
  instead, they ignore it and continue the hunt for
  their own goal.
• Source Nielsen, Is Navigation Useful?
  http//www.useit.com/alertbox/20000109.html

25
2 Navigation Web site goals

• Let your users know where theyre going. Give
  them strong information scent
• Use clear, consistent navigation
• Offer more than one way to reach content
  (prominent search, topics)
• Let users know how to reach someone with a pulse
• Keep it as simple as possible

26
2 Navigation ways to organize

• Information architecture The structure or
  organization of your Web site, especially how the
  different pages of the site relate to one another
• Ways to figure it out
• Card sorting
• Pen and pencil test

27
2 Navigation card sorting
Source http//www.infodesign.com.au/usabilityres
ources/design/cardsorting.asp

• Card sorting shows how people group items, so
  that you can develop meaningful categories. It
• Is easy and cheap to conduct
• Enables you to understand how 'real people' are
  likely to group items
• Identifies items that are likely to be difficult
  to categorize and find
• Identifies terminology that is likely to be
  misunderstood
• How to do card sorting
• Print names of items to be categorized on
  individual cards. (Cards should be large enough
  to accommodate the names in a font that
  participants can read easily when spread out on a
  desk or table-at least 14 point.)
• Ask participants to group items in a way that
  makes sense to them.
• Ask participants to name the resulting groups.
• Once all participants have completed the
  exercise, enter the data in a spreadsheet, and
  examine the groupings. There will be general
  agreement about many items, and these groupings
  will be fairly apparent.

28
2 Navigation pen and pencil test
Source http//libraries.ucsd.edu/about/usability
/terminologytest.doc

• Demographic questionnaire
• Group, experience level, library use
• Orientation script
• Standardized instructions ensure that all
  testers received the same directions for
  performing the test
• Pre-testing the test
• Gives the testers some practice on friendlies
  uncovers confusing instructions
• Administering the test on real people
• Bribery always works
• Make it fast and easy

29
2 Navigation summary

• Learn how users navigate your site.
• Criteria for success
• Can they easily find what theyre looking for?
• Is all necessary information accessible?
• Is it clear and understandable?
• Questions?

30
Break! (10 minutes)

• On the other side of
• the back wall

x 53666Campus calls only
31
3 Evaluate your site

• Ways to evaluate your sites usability and see if
  it meets your audiences needs
• Anecdotal Comments, focus groups, 11
• Factual Usability testing (task-based
  observation)

32
3 Evaluate anecdotal methods

• Ways to get user input
• Comment mechanism
• Did you get what you wanted?
• Focus groups (after testing)
• Individual interviews
• E-mail and phone follow-up

33
3 Evaluate formal usability testing

• Assesses how well the end user can actually
  perform real-life tasks
• Is time consuming, requires hard work, and is not
  always conclusive
• Gives you validated data you can use immediately
  to improve your Web site
• Is as simple or as complex as you choose
• Other perks
• Observing real users interacting with your site
  is incredibly valuable and eye-opening
• Getting people to accept your recommendations
  requires diplomacy as well as data

34
3 Evaluate testing methodology

• In a controlled and observed setting, users are
  asked to perform assigned tasks on a computer
  while "thinking aloud" about the choices they
  make.
• Facilitator reads the questions and observers
  note responses.
• User sits in front of and uses a working version
  of the interface to perform the assigned tasks.

35
3 Evaluate testing who to test

• Use the demographic percentage breakdowns to get
  a representative sample
• Do screening interviews
• Include a range (novice ? expert) of Web savvy
  users
• Include a range (novice ? expert) of users who
  know little to a lot about the subject matter
  your site provides

36
3 Evaluate testing how many

• Are 5 users enough?
• The curve shows that you need to test with at
  least 15 users to discover all the usability
  problems in the design.
• Why test a much smaller number of users?
  Iterative design
• Distribute your budget for user testing across
  many small tests, instead of blowing everything
  on a single, elaborate study.
• If you have the funding to recruit 15
  representative customers and have them test your
  design, spend this budget on three tests with 5
  users each.

Source Nielsen, http//www.useit.com/alertbox/200
00319.html
37
3 Evaluate testing gt5 users

• Test additional users when a Web site has several
  highly distinct groups of users.
• Premise Different needs different behavior
• There will be some similarities between the
  observations from the two groups. All the users
  are human, after all.
• Also, many of the usability problems are related
  to the fundamental way people interact with the
  Web and the influence from other sites on user
  behavior.
• When testing multiple groups of different users,
  don't include as many members of each group as
  you would in a single test of a single group of
  users. The overlap between observations will
  ensure a better outcome from testing a smaller
  number of people in each group.
• Nielsen recommends
• 3-4 users from each category if testing two
  groups of users
• 3 users from each category if testing three or
  more groups of users (you always want at least 3
  users to ensure that you have covered the
  diversity of behavior within the group)
• Source Nielsen, http//www.useit.com/alertbox/200
  00319.html

38
3 Evaluate testing what to test

• Develop plan
• Audience- appropriate tasks What should we test
  and why?
• What are common tasks that users should be able
  to complete on the site?
• Tip Have a mix of complex and simple tasks
• When coming up with tasks, pay attention to the
  following
• 1. How does user familiarity with the topic
  (novice/ experienced) influence their probability
  of success?
• 2. Can tasks be accomplished by multiple
  navigation paths? (browse, search, etc.)
• 3. How will the user know s/he is done with the
  task?
• 4. What obstacles hinder task completion?

39
3 Evaluate testing the results

• Usability functionality. If the user succeeded,
  then our site was useful. Where the users dont
  succeed, look closely at those missteps (and what
  they said when thinking aloud).
• Iterative design ? incorporate changes ? test
  again
• Interpreting results
• Was there a difference between novice and
  experienced users?
• Do users understand our topics?
• Convincing the larger group to adopt our findings
• Mock-up new design

40
3 Evaluate testing case study

• Choose a partner and decide who is the observer
  and who is User A
• User A sit at a computer and bring up
  http//blink.ucsd.edu
• Wait for instructions
• User A think aloud as you complete the tasks
• Observers remain absolutely silent as you
  observe
• Do each task in a separate browser window
• You have 7 minutes to complete this exercise

41
3 Evaluate testing case study

• User A tasks
• Three staff members that provide financial
  support in your department have just resigned.
  Use Blink to find the UCSD department that
  provides temporary employees, and the phone
  number to call for more information. When you are
  confident that you have found the page containing
  this information, say done with task.
• You need to rent a car for a visiting scholar and
  want to be sure to follow UCSDs car rental
  procedure. The visiting scholar is not a UCSD
  employee. Use Blink to find the correct
  procedure. When you are confident that you have
  found the page containing this information, say
  done with task.
• There are ants in your office. Use Blink to find
  a phone number to call so that they will be taken
  care of. When you are confident that you have
  found the page containing this information, say
  done with task.

42
3 Evaluate testing case study

• User B tasks
• One of your new graduate student TA's didn't get
  paid on time. Your department's payroll person is
  on vacation. Use Blink to find the name and
  number of the person you should call to get more
  information on the subject. When you are
  confident that you have found the page containing
  this information, say done with task.
• Your supervisor has asked you if a particular
  invoice has been paid. Use Blink to find out how
  to check the status of an invoice. When you are
  confident that you have found the page containing
  this information, say done with task.
• You will be on vacation for the next two weeks.
  Use Blink to find out how to set up a vacation
  message for your _at_ucsd.edu e-mail account. When
  you are confident that you have found the page
  containing this information, say done with task.

43
3 Evaluate summary

• Test at least 5 users
• Representative sample
• If the user succeeds, then the site is useful.
  Where users dont succeed, look closely at those
  missteps (and what they said when thinking
  aloud).
• Iterative design
• Design ? test ? incorporate changes ? test ?
  launch
• Questions?

44
4 Accessibility and accommodation

• "The power of the Web is in its universality.
  Access by everyone regardless of disability is an
  essential aspect." Tim Berners-Lee, W3C
  Director and inventor of the World Wide Web
• Premise Designing for users with disabilities
  makes Web sites better for all users.
• Perceivable by everyone
• Operable by everyone
• Easy to navigate
• Easy as possible to understand
• What are some Web accessibility issues and how do
  we accommodate users with disabilities?

45
4 Accessibility the numbers

• Source Survey on Income and Program
  Participation, research data file (August
  November 1999, Wave 11), U.S. Census Bureau, U.S.
  Department of Commerce

46
4 Accessibility disability redefined

• Source Dive Into Accessibility
  http//www.fixingyourwebsite.com/DiveIntoAccessibi
  lity/
• The second group (technological disabilities) may
  not stem from physical disabilities. Michael
  sometimes uses a text-only browser purely for
  bandwidth considerations Lillian is stuck in a
  corporate environment that has disabled all
  scripting for security reasons.
• Physical disability
• Blindness
• Low vision
• Colorblindness
• Cognitive disabilities
• Motor skill impairment
• Technological disability
• No images
• No Javascript
• No mouse
• Low (sucky) bandwidth
• No text zoom

47
4 Accessibility listen to the Web

• Source Nielsen Norman Group Beyond ALT text
  Tutorial
• Participants who are sighted and who use no
  assistive technology were
• About six times as successful completing tasks as
  people using screen readers
• Three times as successful completing tasks as
  people using screen magnifiers
• Note With assistive technology, users only see
  one thing at a time
• Why?
• Screen reader Visit http//www.exxon.com

48
4 Accessibility design principles

• Here the tips are grouped by design principles
  proposed by the W3C. Your Web site should be
• Perceivable. You should ensure that all content
  can be presented in forms that can be perceived
  by everyone.
• Operable. You should ensure that the interface
  elements in the content are operable by everyone.
  
• Navigable. You should facilitate content
  orientation and navigation.
• Understandable. You should make it as easy as
  possible for people to understand your content
  and controls.
• Robust. You should use technologies that maximize
  the ability of your content to work with current
  and future web browsers, assistive technologies,
  and other programs.

49
4 Accessibility details 1

• Minimize the use of graphics
• Ensure that graphics are all named something
  thats a) understandable and b) conveys what the
  graphic is and does
• When graphics contain good information, also
  provide the info in text
• Write concisely, and remove superfluous text
• Offer a search engine thats forgiving of
  spelling errors (like Google)
• Clearly describe search results
• Inform users when they have entered nothing in
  the search box
• Summarize all tables
• Make it easy to skip multimedia intros
• Avoid pop-up windows
• Source Nielsen Norman Group Beyond ALT text
  Tutorial

50
4 Accessibility details 2

• Dont rely on rollover text to convey info
• Limit the number of links on each page to less
  than 20
• Avoid very small buttons and tiny text
• Leave space between links and buttons
• Ensure good contrast between text and page
  background
• Underline links
• Minimize scrolling
• Allow users to magnify the site
• On forms, stack fields vertically
• On forms, put the Submit button very close to the
  last entry field
• On forms, put instructions before field, not
  after
• Test your site (especially the text and colors)
  with screen magnifiers
• Source Nielsen Norman Group Beyond ALT text
  Tutorial

51
4 Accessibility check your site

• Accessibility checkers/ information
• Bobbyhttp//www.cast.org/bobby/
• Dive Into Accessibility http//www.fixingyourwebsi
  te.com/DiveIntoAccessibility/
• Trace Designing More Usable Websiteshttp//www.t
  race.wisc.edu/world/web/index.html
• Web Accessibility Initiative (WAI)http//www.w3.o
  rg/WAI

52
4 Accessibility obey the law

• The Americans with Disabilities Act and Section
  508 guidelines from the Architectural and
  Transportation Barriers Compliance Board (Access
  Board) of the U.S. Federal Government are
  enforced at UCSD.
• Section 508 http//www.access-board.gov/sec508/5
  08standards.htm

53
Additional resources

• The über-usability and accessibility information
  resource, in Blink (of course)
  http//blink.ucsd.edu/go/usability

54
See you later!

• 1.) Evaluations
• 2.) Shuttle cam
• http//blink.ucsd.edu/go/shuttlecam
• 3.) Contact us
• http//blink.ucsd.edu/org/blink

55
Context
Source Christina Wodke http//www.carboniq.co
m/