SlideShare a Scribd company logo
1 of 6
The Secret to User-Centered Web Design:
Cheap, easy and powerful usability techniques

Erica Reynolds, Johnson County Library
reynoldse@jocolibrary.org

Description: Whether you are implementing a hosted Web calendar of events,
rebuilding an entire site, or just looking for a good label for a new online service, the
secret to patron-centered Web design is to talk to your patrons. Through cheap and
easy patron testing you can quickly discover what works and what doesn't work for the
majority of your patrons. In order to ensure the new JoCoLibrary Web site met the
needs of patrons and staff, the Johnson County Library conducted card sorts, paper
prototypes, interface usability studies, and other techniques. Find out how you can
employ the same techniques, what we learned through our patron-testing, and
discover the super secret added bonus you'll enjoy when you embrace usability testing
as part of your regular course of business.

Recording documents, reports, and other examples are at:
www.jocolibrary.org/usability)


Highly recommended resources:

Krug, Steve. Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd
Edition (2005)

Nielsen, Jakob. http://www.useit.com/

Nielsen Norman Group. Paper Prototyping: A How-To Training Video (on DVD)
Available at: http://www.nngroup.com/reports/prototyping/

Rosenfeld, Louis and Peter Morville. Information Architecture for the World Wide
Web: Designing Large-Scale Web Sites (2006)

Synder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User
Interfaces (2003)
Usability techniques

Card Sorts
      Supplies:
       Index cards
       Black sharpie (or other                                                semi-
         thick black felt tip)
       Posterboard (for site or sub-                                          site
         projects)
       Recording sheets (for
         moderator/recorder)
       Basket of treats/give-aways


      Preparation:
       Develop core tasks/questions
       Develop script
       Develop recording method (online survey systems work well)
       Develop recording sheets

      Recruiting volunteers:
       Guerilla recruitment (wander around and ask staff and patrons)
       Only need about 5-6 people per study if you’re getting consistent results

      Testing time:
      5 minutes – 15 minutes per test

      Location of test:
      Anywhere with a table or flat surface to lay out the cards/posterboard

      Staff needed:
      One moderator/recorder

      Reporting:
       Entering the results per test (about the same time as it takes to conduct
         each test)
       Running reports (again, online surveys work well)
       Analyze results
       Share the results with staff
Paper Prototyping
      Supplies:
       Paper prototypes of the Web/
         interface design
       Paper prototypes of tier 2                                                and
         3 screens, search screens
       Paper prototypes of drop-
         downs, widget options
       Tape
       Transparencies (to serve as                                               the
         screen protector)
       Thin dry-erase marker (to serve as the mouse/keyboard)
       Paper towels to erase
       Recording sheets (for moderator/recorder)
       Video camera and software (optional)
       Basket of treats/give-aways
       Snacks & drinks

      Preparation:
       Develop core tasks/questions
       Develop script
       Develop recording method (online survey systems work well)
       Conceptualize and develop examples of Tier 1, 2 and 3 screens, search
         screens

      Recruiting volunteers:
       Recruit volunteers (talk to volunteer coordinator, ask for volunteers on your
         Web site, ask for volunteers from walk-in patrons, always ask for volunteers
         in all Web surveys to build up a list of potential volunteers)
       Invite volunteers to participate and send out potential schedule (about a
         week in duration)
       Confirm volunteers for schedule and inform them when/where to arrive
       Only need about 5-6 people per study if you’re getting consistent results, so
         schedule at least 7 to account for no-shows.

      Conducting the tests:
      45 minutes – 1 hour per test

      Location of test:
      Comfortable, quiet room with small table that allows “the computer” to reach
      the screens

      Staff needed:
       One moderator/recorder (if you don’t have a video camera you might
         consider dividing these responsibilities among two people—it’s difficult to
         moderator and record accurately)
   One “computer” (the person who acts as the computer and switches the
          screen)

      Reporting:
       Entering the results per test (about the same time as it takes to conduct
         each test)
       If you use digital video, it can take some time for the software to render
         the recording into a portable digital file.
       Running reports (again, online surveys work well)
       Analyze results
       Share the results with staff


Usability Studies
       Supplies:
        Computer with                                                      internet
          connection
        New Web/interface                                                  with real
          content
        Camtasia or other Web                                              screen-
          capture software                                                  (demo
          versions available)
        Microphone
        Recording sheets (for
          moderator/recorder)
        Basket of treats/give-                                             aways
        Snacks & drinks

      Preparation:
       Develop core tasks/questions (if you’ve done paper prototypes, this step
         should be completed—but you might want to refine them)
       Develop script
       Develop recording method (online survey systems work well)
       Practice with screen capture software and know what type of digital files
         you’ll produce after each study
       Develop Web interface with real content (demo content can be distracting)

      Recruiting volunteers:
       Recruit volunteers (talk to volunteer coordinator, ask for volunteers on your
         Web site, ask for volunteers from walk-in patrons, always ask for volunteers
         in all Web surveys to build up a list of potential volunteers)
       Invite volunteers to participate and send out potential schedule (about a
         week in duration)
       Confirm volunteers for schedule and inform them when/where to arrive
       Only need about 5-6 people per study if you’re getting consistent results, so
         schedule at least 7 to account for no-shows.
Conducting the tests:
45 minutes – 1 hour per test

Location of test:
Comfortable, quiet room with a table, internet connection and computer or
place to hook up laptop

Staff needed:
One moderator/recorder

Reporting:
 Entering the results per test (about the same time as it takes to conduct
   each test)
 When using the screen capture software, it can take some time for the
   software to render the recording into a portable digital file
 Running reports (again, online surveys work well)
 Analyze results
 Share the results with staff
Handout outlining Usability Study Techniques (doc)

More Related Content

More from butest

EL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBEEL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBEbutest
 
1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同butest
 
LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALbutest
 
Timeline: The Life of Michael Jackson
Timeline: The Life of Michael JacksonTimeline: The Life of Michael Jackson
Timeline: The Life of Michael Jacksonbutest
 
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...butest
 
LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALbutest
 
Com 380, Summer II
Com 380, Summer IICom 380, Summer II
Com 380, Summer IIbutest
 
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet JazzThe MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazzbutest
 
MICHAEL JACKSON.doc
MICHAEL JACKSON.docMICHAEL JACKSON.doc
MICHAEL JACKSON.docbutest
 
Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1butest
 
Facebook
Facebook Facebook
Facebook butest
 
Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...butest
 
Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...butest
 
NEWS ANNOUNCEMENT
NEWS ANNOUNCEMENTNEWS ANNOUNCEMENT
NEWS ANNOUNCEMENTbutest
 
C-2100 Ultra Zoom.doc
C-2100 Ultra Zoom.docC-2100 Ultra Zoom.doc
C-2100 Ultra Zoom.docbutest
 
MAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.docMAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.docbutest
 
Mac OS X Guide.doc
Mac OS X Guide.docMac OS X Guide.doc
Mac OS X Guide.docbutest
 
WEB DESIGN!
WEB DESIGN!WEB DESIGN!
WEB DESIGN!butest
 

More from butest (20)

EL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBEEL MODELO DE NEGOCIO DE YOUTUBE
EL MODELO DE NEGOCIO DE YOUTUBE
 
1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同1. MPEG I.B.P frame之不同
1. MPEG I.B.P frame之不同
 
LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIAL
 
Timeline: The Life of Michael Jackson
Timeline: The Life of Michael JacksonTimeline: The Life of Michael Jackson
Timeline: The Life of Michael Jackson
 
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
Popular Reading Last Updated April 1, 2010 Adams, Lorraine The ...
 
LESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIALLESSONS FROM THE MICHAEL JACKSON TRIAL
LESSONS FROM THE MICHAEL JACKSON TRIAL
 
Com 380, Summer II
Com 380, Summer IICom 380, Summer II
Com 380, Summer II
 
PPT
PPTPPT
PPT
 
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet JazzThe MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
The MYnstrel Free Press Volume 2: Economic Struggles, Meet Jazz
 
MICHAEL JACKSON.doc
MICHAEL JACKSON.docMICHAEL JACKSON.doc
MICHAEL JACKSON.doc
 
Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1Social Networks: Twitter Facebook SL - Slide 1
Social Networks: Twitter Facebook SL - Slide 1
 
Facebook
Facebook Facebook
Facebook
 
Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...Executive Summary Hare Chevrolet is a General Motors dealership ...
Executive Summary Hare Chevrolet is a General Motors dealership ...
 
Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...Welcome to the Dougherty County Public Library's Facebook and ...
Welcome to the Dougherty County Public Library's Facebook and ...
 
NEWS ANNOUNCEMENT
NEWS ANNOUNCEMENTNEWS ANNOUNCEMENT
NEWS ANNOUNCEMENT
 
C-2100 Ultra Zoom.doc
C-2100 Ultra Zoom.docC-2100 Ultra Zoom.doc
C-2100 Ultra Zoom.doc
 
MAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.docMAC Printing on ITS Printers.doc.doc
MAC Printing on ITS Printers.doc.doc
 
Mac OS X Guide.doc
Mac OS X Guide.docMac OS X Guide.doc
Mac OS X Guide.doc
 
hier
hierhier
hier
 
WEB DESIGN!
WEB DESIGN!WEB DESIGN!
WEB DESIGN!
 

Handout outlining Usability Study Techniques (doc)

  • 1. The Secret to User-Centered Web Design: Cheap, easy and powerful usability techniques Erica Reynolds, Johnson County Library reynoldse@jocolibrary.org Description: Whether you are implementing a hosted Web calendar of events, rebuilding an entire site, or just looking for a good label for a new online service, the secret to patron-centered Web design is to talk to your patrons. Through cheap and easy patron testing you can quickly discover what works and what doesn't work for the majority of your patrons. In order to ensure the new JoCoLibrary Web site met the needs of patrons and staff, the Johnson County Library conducted card sorts, paper prototypes, interface usability studies, and other techniques. Find out how you can employ the same techniques, what we learned through our patron-testing, and discover the super secret added bonus you'll enjoy when you embrace usability testing as part of your regular course of business. Recording documents, reports, and other examples are at: www.jocolibrary.org/usability) Highly recommended resources: Krug, Steve. Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition (2005) Nielsen, Jakob. http://www.useit.com/ Nielsen Norman Group. Paper Prototyping: A How-To Training Video (on DVD) Available at: http://www.nngroup.com/reports/prototyping/ Rosenfeld, Louis and Peter Morville. Information Architecture for the World Wide Web: Designing Large-Scale Web Sites (2006) Synder, Carolyn. Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces (2003)
  • 2. Usability techniques Card Sorts Supplies:  Index cards  Black sharpie (or other semi- thick black felt tip)  Posterboard (for site or sub- site projects)  Recording sheets (for moderator/recorder)  Basket of treats/give-aways Preparation:  Develop core tasks/questions  Develop script  Develop recording method (online survey systems work well)  Develop recording sheets Recruiting volunteers:  Guerilla recruitment (wander around and ask staff and patrons)  Only need about 5-6 people per study if you’re getting consistent results Testing time: 5 minutes – 15 minutes per test Location of test: Anywhere with a table or flat surface to lay out the cards/posterboard Staff needed: One moderator/recorder Reporting:  Entering the results per test (about the same time as it takes to conduct each test)  Running reports (again, online surveys work well)  Analyze results  Share the results with staff
  • 3. Paper Prototyping Supplies:  Paper prototypes of the Web/ interface design  Paper prototypes of tier 2 and 3 screens, search screens  Paper prototypes of drop- downs, widget options  Tape  Transparencies (to serve as the screen protector)  Thin dry-erase marker (to serve as the mouse/keyboard)  Paper towels to erase  Recording sheets (for moderator/recorder)  Video camera and software (optional)  Basket of treats/give-aways  Snacks & drinks Preparation:  Develop core tasks/questions  Develop script  Develop recording method (online survey systems work well)  Conceptualize and develop examples of Tier 1, 2 and 3 screens, search screens Recruiting volunteers:  Recruit volunteers (talk to volunteer coordinator, ask for volunteers on your Web site, ask for volunteers from walk-in patrons, always ask for volunteers in all Web surveys to build up a list of potential volunteers)  Invite volunteers to participate and send out potential schedule (about a week in duration)  Confirm volunteers for schedule and inform them when/where to arrive  Only need about 5-6 people per study if you’re getting consistent results, so schedule at least 7 to account for no-shows. Conducting the tests: 45 minutes – 1 hour per test Location of test: Comfortable, quiet room with small table that allows “the computer” to reach the screens Staff needed:  One moderator/recorder (if you don’t have a video camera you might consider dividing these responsibilities among two people—it’s difficult to moderator and record accurately)
  • 4. One “computer” (the person who acts as the computer and switches the screen) Reporting:  Entering the results per test (about the same time as it takes to conduct each test)  If you use digital video, it can take some time for the software to render the recording into a portable digital file.  Running reports (again, online surveys work well)  Analyze results  Share the results with staff Usability Studies Supplies:  Computer with internet connection  New Web/interface with real content  Camtasia or other Web screen- capture software (demo versions available)  Microphone  Recording sheets (for moderator/recorder)  Basket of treats/give- aways  Snacks & drinks Preparation:  Develop core tasks/questions (if you’ve done paper prototypes, this step should be completed—but you might want to refine them)  Develop script  Develop recording method (online survey systems work well)  Practice with screen capture software and know what type of digital files you’ll produce after each study  Develop Web interface with real content (demo content can be distracting) Recruiting volunteers:  Recruit volunteers (talk to volunteer coordinator, ask for volunteers on your Web site, ask for volunteers from walk-in patrons, always ask for volunteers in all Web surveys to build up a list of potential volunteers)  Invite volunteers to participate and send out potential schedule (about a week in duration)  Confirm volunteers for schedule and inform them when/where to arrive  Only need about 5-6 people per study if you’re getting consistent results, so schedule at least 7 to account for no-shows.
  • 5. Conducting the tests: 45 minutes – 1 hour per test Location of test: Comfortable, quiet room with a table, internet connection and computer or place to hook up laptop Staff needed: One moderator/recorder Reporting:  Entering the results per test (about the same time as it takes to conduct each test)  When using the screen capture software, it can take some time for the software to render the recording into a portable digital file  Running reports (again, online surveys work well)  Analyze results  Share the results with staff