Designing Web Usability with a Human-Centered Approach

1
Designing Web Usability with a
Human-CenteredApproach

• CIS 421
• usability.ppt

2
Agenda

• Changes to schedule
• Usability
• Universal Design Movement -- in your textbook
• Technology usability
• Web Usability

3
Changes to Schedule

• DUE Thursday before class Complete Blackboard
  quizzes on Usability
• Next Week DUE Thursday, 11/5 before class
  Project 2 posted on individual website, with
  grading sheets posted to Blackboard assignment
• Delay until week 7 (October 10-12)
• Tuesday Ex. 2 on Cyber Security Fair
• Thursday Blackboard Quizzes Ch 7 quiz
  (Video Audio) and Color Theory quiz
• Week 8, Thurs (11/19)
• Post Exercise 3, accessibility test of peer's
  website, posted on Blackboard website

4
Universal Design

• Universal Design principles are used in designing
  more than websites
• Housing
• House and kitchen ware
• Teaching materials
• What are the main ideas of universal design?
• Hint think about what your Textbook Universal
  Design for Web Accessibility says about the value
  of designing barrier-free websites

5
3 Usability Gurus are important

• Donald Norman, Cognitive Psychologist -
  technology in general computers, door knobs
• The Psychology Design of Everyday Things, 1988,
  1991.
• Things that make us smart, 1993
• Emotional Design 2004
• Jakob Nielsen, Computer Scientist - Web
• Designing Web Usability, New Riders, 2000
• With Marie Tahir, Home Page Usability, 2002
• With Hoa Loranger, Prioritizing Web Usability,
  2006
• Minor guru Steve Krug, practitioner Web
• Dont make me think, 2nd ed. New Riders, 2006

6
Usability Concepts Rules

• Norman Human-centered design theory
• Ideas have affected technology design since 1980s
• http//www.jnd.org http//www.nngroup.com
• Nielsen Web usability
• Research tracking users movements in response
  to Web pages
• http//www.useit.com
• Krug Popular version of Usability
• Ideas based on practice
• http//www.sensible.com

7
Normans human-centered approach

• Technology ought to be invisible to us and not
  get in the way of doing the task
• Knowledge in the technology (in the world) aids
  task performance
• Example printer icon suggests button function
• Krug calls it self-evident
• Require less knowledge in the head
• especially when icon becomes a standard used by
  many
• It prevents human error
• Final word When all else fails, standardize!
  GUI ( web) design has become much more
  standardized since PCs became widely adopted

8
Norman How do we convey what we mean to the user?

• Affordance is quality of object that suggests
  what can be done to an object
• A door affords opening closing
• Perceived Affordance
• Person can tell not only what the door does, but
  how it works by looking at it PUSH it, PULL it,
  TURN THE KNOB, etc.
• Affordances set expectations Is self-evident
  (Krug)
• Feedback tells user what happened when they
  interact with something on interface
• Door opens, door closes, user hears something
• Users figure out what they can do based on
  affordances feedback

9
Normans Paradox of Technology

• Technology offers the potential to make life
  easier and more enjoyable
• Each new technology provides increased benefits
• At the same time, technology can add complexities
  which can make technologies frustrating to use

10
Jakob Nielsens Web Usability 101http//www.useit
.com/alertbox/20030825.html

• Usability is a quality attribute that assesses
  how easy user interfaces are to use has 5
  quality components
• Learnability How easy to do basic tasks?
• Efficiency how FAST can user begin to perform
  tasks?
• Memorability how easy to remember how it works?
• Errors How easy to make errors? How handled?
• Satisfaction How pleasant to use design?
  emotional
• On the Web, usability is a necessary condition
  for survival. If website is difficult to use,
  people leave

11
Nielsens Designing Web Usability

• Usability rules the web the person who clicks
  the mouse decides everything -- including to
  leave web site
• Jakobs Law of Internet User Experience Users
  spend most of their time on other websites!
• How does that affect how users view your website?
• What are users comparing your website to?
• Page design is the most immediately visible part
  of web design
• Users usually look at one page at a time
• Based on what they see, they stay or leave

12
Nielsen Hoa, Prioritizing Web Usability (2006)
based on user tests

• Tested 69 adult users (20-60 years of age)
• 57 in US, 12 in UK
• At least 1 year experience using web
• Rated HIGH experience or LOW experience,
  depending on whether used advanced techniques
• Not people who develop technology or web
  applications
• Tested individually, Thinking aloud
• Videotaped their movements computer with 2
  separate cameras
• 1-3 observers watched what they did

13
Users had 2 sets of tasks

• Site-specific task to solve
• Assigned to one of 25 web sites (all types
  sizes of sites in the test set)
• Web-wide task to solve
• Could go anywhere they wanted
• Tasks or problems rated as
• 100 solved
• 0 solved
• Partially solved

14
Success Rates Experience
Average success rate for BOTH was 66, up from
40 in 1990s Self-reported USER SATISFACTION was
4.7 on a scale of 0 (low) to 7 (high). Not
particularly surprising since their research
shows that users tend to give generous scores on
user satisfaction even when they have difficulty
using a website
15
Web-Wide Task results How people used sites
What does this mean?

• 88 used a search engine
• While doing task, users averaged 3.2 sites
• Probability of revisiting a site 12
• On average, test users spent 1 min., 49 sec.
  visiting a website before moving on
• Average time per page 22 seconds or this long
• Time spent on final site where solved task 3
  min, 49 sec.
• 60 of Initial visits to a site were to inner
  page not home page.
• When users browsed, they spent avg of 27 sec on
  interior page
• most of time on content area
• Ignored banners, navigation, sidebars, etc.
• Almost half of user clicks were from content area
  

16
SERP Search Engine Results Page returns two
types of listings

• Sponsored Listings
• Sponsors bid on how much they will pay for
  click-throughs on keyword advertising
• Top bids get listed above the Line
• Organic listings are best matches on web to
  keyword search based on
• flytrap content that is narrowly focused
• Rich see also links to related content
  services
• Provide analysis insight that attracts people
• Publish a newsletter to set up relationships with
  users.

17
Where users click on organic listings on SERP
83 ONLY used p. 1 listings
18
Page Views by Homepage vs.
Screenful Interior
Pages
People find MORE USEFUL information inside the
websitethan on the home page, but they often
checked the home page to see what the site is
about.
19
Scrolling Users are lazy, ignorant!

• 35 of pages did not require scroll down
• on other 65 the who scrolled down
• Homepage, 1st visit 23
• Homepage, 2nd visit 14
• Interior pages 42
• Search engine results 47
• Less experienced users are more likely to scroll
  down than experienced ones.

20
Nielsens Top Ten Mistakes in Web
Designhttp//www.useit.com/alertbox/9605.html

• Bad Search -Overly literal search engines
• PDF Files for Online Reading ok for manuals,
  but not for pages
• Not Changing the Color of Visited Links
• Non-Scannable Text Should use 8th grade reading
  level for general public.
• Fixed Font Size
• Page Titles With Low Search Engine Visibility

• Anything That Looks Like an Advertisement users
  have Banner blindness if it looks like an ad,
  they ignore it
• Violating design conventions be consistent
• Opening New Browser Windows
• Not Answering Users' Questions leaving off the
  price or total price, until you submit the form
  with your name on it.

21
Conclusions from this study

• Do users scroll down to find anything?
• Do users usually go to the home page when they
  visit a website from a search engine?
• Do users click on more than the first few items
  on the organic part of the SERP?
• How do you get your page to the top of
  theorganic list?

22
Solutions to Usability problems

• Simple usability testing
• Content issues
• Design issues
• Use of standards
• Layout
• Navigation signposts
• Readability

23
Nielsens Quick User testing

• Find 5 users to test site 5 is enough to find
  important usability problems
• Ask users to perform representative tasks with
  the current version of your Website
• Observe what users do
• Where do they succeed?
• Where do they have problems with user interface?
• Listen to what they say
• Revise the site and retest the revision

24
Krug Trunk Test site in exercise
http//www.al-eds.com/

• Look at a your page and answer these questions
• What site is this? (site id?)
• What page am I on (page name)
• What are the major sections of this site?
  (sections)
• What are the options at this level (local
  navigator)
• Where am I in the scheme of things?
• How can I search?

25
Types of Web testing

• Eyetracking video
• Vincent Flanders Web Pages that Suck
• Worst Web Sites of 2008 -- need to scroll down
  below ads to find ethem
• Web Pages That Suck - Lack of contrast

26
Content Strategy to encourage Information
foraging at your site

• Based on assumption that users do not exert
  themselves unless they must--energy optimization
  similar to animals hunting for food
• Information Scent concept based on spoor
• Users will keep looking as long as they feel they
  are getting warmer, closer to information they
  wantk and/or need
• Analogy to diet selection of a fox in a forest
  with big bunnies and small bunnies. What should
  he eat?
• The foxs decision on what to hunt will depend on
  how easy the bunnies are to catch
• little bunnies are usually easier prey

27
Content Strategy to encourage Information
foraging at your site

• Diet Selection Content looks like a Nutritious
  Meal that is Easy to Find (several smaller, baby
  bunnies vs. one large bunny)
• After eating a few small bunnies, does the fox
  stay or move on to another hunting patch?
• With broadband, users can snack information in
  small bites instead of big meals its easier to
  catch small bunnies!

28
Content Strategy to encourage Information
foraging at your site

• When they find something at your site they can
  stay for more or move on what they do depends
  on how far they have to go to find other
  information
• Search engines emphasize the quality of links so
  users can easily go elsewhere.
• Make your content look like a nutritious meal
  enhance the information scent
• Have links explicitly describe what users will
  find
• Use words people understand
• Remind user they are getting warmer

29
Content What do users find?

• People scan the content part of the page for
  information, ignore navigation anything that
  looks like an Ad or is in position that Ads
  occupy
• F-Shaped pattern - http//www.useit.com/alertbox/r
  eading_pattern.html
• http//www.youtube.com/watch?vlo_a2cfBUGcfeature
  related
• Banner Blindness if it could be a banner ad,
  ignore it. http//www.useit.com/alertbox/banner-bl
  indness.html
• How will visitor to site know what site is about?
• How will visitor know where they are if they land
  in middle of site from search engine?Signs that
  say You are here!
• Breadcrumbs, Page titles, Site maps

30
Content Page real estate citigroup.com
Nielsens review of 50 homepages found
Accenture.com

• Actionable content of interest to viewers
• Nielsen recommends 50-80 meaningful content on a
  home page,
• Findings were that average of 40 meaningful
  content
• 20 Content that is interesting to users
• 20 Navigation primary valuable content?
• Fluff useless areas 41 total
• Ads, empty space, self-promotion
• Overhead
• 19 Operating system/browser/scrollbars.

31
Use Standards to help Users Know

• What features to expect
• How features will look
• Where features will be located
• How to operate each feature to achieve users
  goals
• Prevent user from missing features because they
  look different or cant find
• Prevents users surprise when things do not work
  as expected

32
Web Design Element standards http//www.useit.com
/alertbox/20040913.html

• Standard 37 of design elements were done the
  same way by 80 of sites, including
• Logo in upper left corner of page
• Search box on homepage
• Absence of splash pages
• Breadcrumbs listed horizontally, if used
• Convention 40 of design elements done same way
  on 50-80 of sites, including
• Labeling site maps as Site Map
• Changing color of visited links
• Placing shopping cart link in upper right corner
• Placing links on parallel subtopics in left
  column
• Rest was Confusion, especially navigation

33
Layout Design Issues

• Avoid horizontal scrolling at 1024x768
• Use liquid layout
• Use elastic design so page element scale when
  font sizes are increased
• Content Alignment Choose one stick to it
• Left, center, or right
• Centered alignment gets wavy looking less
  readable
• Get text away from left page edge
• Use padding to separate content from border of
  box
• Use margins to separate box from other boxes
• Horizontally align text on rows of buttons

34
Web Usability Design Issues

• Templates CSS let you style entire site or
  sections of site with one CSS file
• Elastic Design http//www.alistapart.com/articles/
  elastic/
• http//www.csszengarden.com/?cssfile/063/063.css
  page0
• Validate clean up code
• W3C XHTML, CSS validators
• Website Optimization for quicker download speed
• Run ToolsgtView Speed Report to see how long page
  takes to download, what objects are largest, and
  how to optimize page
• Using non-standard code Warn users
• if page only displays in certain browser versions
• About plugins required to view files
• File size they will be downloading (esp. videos)

35
Krug users just muddle through

• Users dont need to (or want to) understand how
  technology works
• Users scan or skim Web pages for information or
  solutions to tasks they dont want to read them
  thoroughly
• If they find something that works, they will
  continue to use it, even if it is not the most
  efficient way of doing it - satisficing
• your job make it self-evident or at
  least self-explanatory!

36
Krug Clear Visual Hierarchy

• Organize prioritize information on page
• Most important information larger, bolder,
  distinct color, set off by more white space, near
  the top of page
• Things that are related logically are related
  visually
• Nest things visually to show what is part of what
• Use conventions everyone understands shopping
  cart
• Make it obvious what is clickable
• Break up pages into clearly defined areas

37
Content Graphics Animation

• Run ToolsgtView Speed Report to check page,
  download speed, see what page elements need to be
  optimized
• Use ALT tags and labels for content to offer
  accessibility for disabled users
• Use graphics to show real content not just to
  decorate the page maximum 3 per page
• Label graphics if meaning not immediately clear
  to user
• Edit graphics so content is visible
• Remember animation is distracting
• http//www.howardsystems.com/index.html
• Dont animate anything critical (logo)
• Let users launch animation themselves

38
Nielsen Web Content Text

• Use customer-focused language
• Make it easy to understand
• Use consistent capitalization style
• Avoid single-item categories lists
• Avoid exclamation points!

• Beware of spelling in all uppercase
  communicates anger
• Limit font styles other text formatting (size,
  colors,) so not distracting
• Use high-contrast text background colors or
  background image type is legible to your intended
  audience

39
Nielsen Web Content Text http//www.useit.com/al
ertbox/9710a.html

• Make it short slower to read on web
• Avoid needless words
• Use plain language
• Scrap the happy talk (blather, blah, blah)
• Write for scanability so user can quickly
  decide whether pertinent
• Spell grammar check
• Continue text on a second page
• Legible text colors, values, font size

40
Navigation

• How will the user know where they are?
• When they come into inner page in website from a
  search engine?
• What kinds of signposts can you set up to tell
  them where they are in the scheme of things?
• How can you let them know where they can go next?
• How will they complete their tasks?

41
Nielsen Effective Navigation

• Locate primary navigation area in visible area,
  right next to main body of page
• Banner blindness people avoid information
  above horizontal rules at top of page
• Group similar items together
• Dont provide multiple navigation areas for same
  types of links top, side, bottom
• Use category names that people understand
• Use icons in navigation if easy to understand

42
Persistent Navigation

• Makes users feel grounded they know
• what site they are on
• where they are on the site
• Tells users what is there
• Tells how to use the Web site what does this
  website offer? http//www.zincbistroaz.com/
• Mystery Meat navigation example
• Instills user confidence in Site developers
• Follows the conventions hyperlinks, icons,
  consistent positions for menus

43
Links set Expectations (Affordances)

• Use descriptive titles
• Allow link colors to show visited unvisited
  states make visible and easy to interpret
• visited links should look different
• Otherwise users get confused revisit same pages
  get annoyed, waste time.
• Make links indicate
• what will happen or open (email, PDF file, etc.)
• size of file especially if large

44
Breadcrumbs

• home gt services gt analyze gt results
• Usually located at Top of page
• Use gt between levels
• Use words that tell users where they are
• Boldface last item
• Dont use instead of page name

45
Coming Up

• Rest of quarter
• Work on project 2 take your photos
• Flash hands-on starts Thursday