New	
  Media	
  Talks

User	
  centered	
  design


 Kath	
  Straub,	
  PhD
 Usability.org
SOME OBSERVATIONS
TEENS                 GEN Y                  GEN X            Younger Boomers        Older Boomers         Silent Generati...
58%
     of respondents asked how they
   solved one of 10 possible problems
requiring connection or information from
    ...
58%
             of respondents asked how they
           solved one of 10 possible problems
How people look for informati...
78% of people have visited a government website.
TEENS                  GEN Y                  GEN X             Younger Boomers         Older Boomers          Silent Gene...
face to face            BUT
                                           via the
               the way people interact    i...
Explore
                                                   benefits
                   Get a
                  drivers
face...
Reminder
For some tasks
people still want
to interact with
other people.

Not websites.
Evidence-driven DESIGN
What is User-centered design?

 User-centered design (UCD) is a process in which the needs, wants, and
 limitations of the...
User-centered design
             Ergonomics
 Usability
    Human Factors Engineering
 Citizen-centered design
Persuasive ...
ce
                 ur
          re   so
     E AT
GR
Take-away
 User-centered design relies on
  evidence, not opinion
 to drive decisions about design.
Who	
  uses	
  
your	
  site?	
  

Who	
  could	
  
 use	
  your	
  
   site?              Usability	
  ;p:	
  
          ...
Text


       Usability	
  insight:	
  
        Some;mes	
  your	
  
         most	
  frequent	
  
       user	
  group	
 ...
Quick & Easy
    Customer Profile




               rc es
           s ou
      re
   AT
GRE
Take-away
 The first step in the process is to
      know your users
What	
  are	
  your	
  
users	
  top	
  tasks?

What	
  do	
  people	
            Usability tip:
                         ...
1.
              ON/OFF

3.
Volume	
  
                               2.	
  
control
                               Change...
Eyetracking is a research
technique that lets us
watch where people look
how long they look there.




        Usability t...
Shameless plug:

Learn more about current
usability research
@ the
Web Manager University
Reseach in Practice
December 9th...
Usability tip:
     Put the
  information
that people are
   looking for
   where you
know they will
Usability tip:
  Use design
 elements like
saturated color
    to draw
  attention to
 key content.
Take-away
 Great websites help people do
        a few top tasks
 really well.
Can	
  people	
  DO	
  
their	
  top	
  tasks?

                 Usability tip:
                 Usability types
         ...
Benefits
of Usable Websites

1. Citizen get MORE done more efficiently
2. GovStaff does MORE meaningful work
3. Getting thin...
Why WEBSITES FAIL
Some common problems cited by usability	
  test	
  par;cipants

                 “The	
  wrong	
  stuff	
                  ...
Usability problems happen
     when there is a
         mismatch
          between
    how the site works
                ...
The next few slides provide an example of a
mental model mismatch. That is a situation in which what
users expect to happe...
James
          Dyson
  The cyclonic separation
vacuum cleaner inventor guy
At the carwash the “dryer” does not “DRY” your car. It pushes/the water
      off your car ... the dyson dryer works on th...
dry
airblade

      wet
If you watch people use this*

1. They put their hands in.
2. They try to rub them a bit
3. They give up ... and wipe
thei...
If you watch people use this*

1. They put their hands.
2. They try to rub them a bit
3. They give up ... and wipe
their h...
Take-away
 Tasks feel easy when they reflect the
         mental model
 that the user already has.
Watch	
  representa;ve	
  
                                users	
  try	
  to	
  do	
  their	
  top	
  
                  ...
HHS has
          2    Usability testing
                                   labs
          available for


      FREE     ...
Testing doesnʼt always need to be formal. Guerilla testing works, too.

  Usability speak: Guerilla	
  
 tes;ng	
  means	
...
Measure Improve REPEAT
Small, VISIBLE incremental steps.

USCourts Intranet




                                   After


                      ...
Take-away
 User centered design is an
   iterative process
The	
  Federal	
  
                                                                                                       ...
T nit ies
                       EA rtu
                     GR ppo
                      go
                   nin
me aga...
AT rum
    R E fo
   G g
     rin
s ha
Take-away
 The best websites are
          evidence-driven.
Craigʼs list
Usable
Useful
not pretty
Take-away
 People use websites that help them
          get things done.
If you do nothing else
       1. Make a list of your top tasks
       2. Watch real users try to do them
                 ...
Presenter information

                 Kath	
  Straub,	
  PhD
                 Usability.org

                 kath@usabi...
Webmanager University New Media Talks: User Centered Design
Webmanager University New Media Talks: User Centered Design
Webmanager University New Media Talks: User Centered Design
Webmanager University New Media Talks: User Centered Design
Upcoming SlideShare
Loading in …5
×

Webmanager University New Media Talks: User Centered Design

1,657 views
1,609 views

Published on

User-Centered Design is a multistage process that helps web managers and designers analyze and predict how users are likely to use a website, and test these draft designs with actual users a number of times before site launch. User-centered design lets you optimize the user interface around how people want and need to interact, rather than forcing them to adapt how they interact to the software.

Come hear Kath Straub introduce User-Centered Design and its importance in creating a great citizen experience on government websites. Visitors to government websites want to be able to find what they need and act on what they find.

Learn how to make your website content

* Easy to Use
* Understandable
* Relevant to the customer

Find out how adopting User Center Design can:

* Save Money
* Decrease Help Desk Calls
* Decrease the need for website Redesign
* Decrease formal training

Published in: Technology, Business

Webmanager University New Media Talks: User Centered Design

  1. 1. New  Media  Talks User  centered  design Kath  Straub,  PhD Usability.org
  2. 2. SOME OBSERVATIONS
  3. 3. TEENS GEN Y GEN X Younger Boomers Older Boomers Silent Generation G.I. Generation 1 Play Games Email Email Email Email Email Email 2 Email Search Search Search Search Search Search 3 Instant In Message Research Product Research Product Research product Get health info Research Get health info 4 Visit SNS Get News Get Health Info Get health info Research product Get health info Make travel reserv 5 Get News Watch Video Buy Something Get news Buy something Make travel reser. Research product 6 Download Music Buy Something Get News Make travel reser. Get news Visit Govʼt Site Buy something PEW Internet & American Life Project 7 Watch Video Get Health Info Make Travel Reser. Buy something Make travel reser. Buy something Get news 50% 8 Create SNS Profile Visit SNS Bank Visit Govʼt Site Visit Govʼt Site Get news Visit Govʼt Site 9 Read Blog Make Travel Reser. Visit Govʼt Site Research for job Bank Bank Get religious info 10 Buy Something Get Job Info Research for job Bank Research for job Research for job Bank 11 12 collects self-report data on what people Download Video Get job info Create SNS Profile IM Watch Video Get job info Watch video Get job info Get job info Watch video Get religious info Rate product IM Play games do (or donʼt) online... 13 Create Blog Download Music Download Music Get religious info Rate product Play games Rate product 14 Get Health Info Bank IM Rate product Get religious info IM Read blog 15 Get Religious Info Visit Govʼt Site Get religious info IM Play games Watch video Watch video 16 Podcast Research for Job Play Games Auction Auction Read blog Download video 17 Visit virtual world Play Games Visit SNS Read blog Read blog Auction Get job info 18 - Read blog Rate product Play games IM Download Podcast 19 - Download Video Read blog Download music Download music Download video Research for job 20 - Rate Product Download video Download video Download video Get job info Auction 21 - Get Religious Info Auction Visit SNS Podcast Visit SNS Create blog 22 - Auction Create SNS profile Podcast Visit SNS Podcast Download music 23 - Podcast Podcast Create SNS profile Create SNS profile Create blog Visit SNS 24 - Create Blog Create Blog Create Blog Create Blog Create SNS profile Create SNS profile 25 - Visit virtual world Visit virtual world Visit virtual world Visit virtual world Visit virtual world Visit virtual world
  4. 4. 58% of respondents asked how they solved one of 10 possible problems requiring connection or information from the government said they did it on the internet
  5. 5. 58% of respondents asked how they solved one of 10 possible problems How people look for information has changed. requiring connection or information from the government said they did it on the internet
  6. 6. 78% of people have visited a government website.
  7. 7. TEENS GEN Y GEN X Younger Boomers Older Boomers Silent Generation G.I. Generation Top Email Email Email Email Email Email Tasks Personal tax problem Search Search Search Search Search Search 2 3 Explore govt. benefits Research Product Research Product Research product Get health info Research Get health info 4 Community matters Get News Get Health Info Get health info Research product Get health info Make travel reserv 5 Programs agencies offer Watch Video Buy Something Get news Buy something Make travel reser. Research product 6 Getting car liscence Buy Something Get News Make travel reser. Get news Visit Govʼt Site Buy something 7 Research for school or Get Health Info Make Travel Reser. Buy something Make travel reser. Buy something Get news work 8 Create SNS Profile Visit SNS Bank Visit Govʼt Site Visit Govʼt Site Get news Visit Govʼt Site 50% 9 Read Blog Make Travel Reser. Visit Govʼt Site Research for job Bank Bank Get religious info 10 Buy Something Get Job Info Research for job Bank Research for job Research for job Bank 11 Download Video Create SNS Profile Watch Video Watch video Get job info Get religious info IM 12 Get job info IM Get job info Get job info Watch video Rate product Play games 13 Create Blog Download Music Download Music Get religious info Rate product Play games Rate product 14 Get Health Info Bank IM Rate product Get religious info IM Read blog 15 Get Religious Info Visit Govʼt Site Get religious info IM Play games Watch video Watch video 16 Podcast Research for Job Play Games Auction Auction Read blog Download video 17 Visit virtual world Play Games Visit SNS Read blog Read blog Auction Get job info 18 - Read Blog Rate product Play games IM Download Podcast 19 20 Across the adult generations, - - Download Video Rate Product Read blog Download video Download music Download video Download music Download video Download video Get job info Research for job Auction more than 50% of adults visit government websites 21 - Get Religious Info Auction Visit SNS Podcast Visit SNS Create blog 22 - Auction Create SNS profile Podcast Visit SNS Podcast Download music 23 - Podcast Podcast Create SNS profile Create SNS profile Create blog Visit SNS 24 - Create Blog Create Blog Create Blog Create Blog Create SNS profile Create SNS profile 25 - Visit virtual world Visit virtual world Visit virtual world Visit virtual world Visit virtual world Visit virtual world
  8. 8. face to face BUT via the the way people interact internet over with government is still the phone evolving...
  9. 9. Explore benefits Get a drivers face to face license Learn via the about programs internet over Resolve a the phone personal Do tax issue research The way people interact with government depends on the problem they are trying to solve.
  10. 10. Reminder For some tasks people still want to interact with other people. Not websites.
  11. 11. Evidence-driven DESIGN
  12. 12. What is User-centered design? User-centered design (UCD) is a process in which the needs, wants, and limitations of the end user of an interface or document are given extensive attention at each stage of the design process. User-centered design can be characterized as a multi-stage problem solving process that not only requires designers to analyze how users are likely to use an interface, but also to test the validity of their assumptions with regards to user behaviour in real world tests with actual users.
  13. 13. User-centered design Ergonomics Usability Human Factors Engineering Citizen-centered design Persuasive Design Usability fact: A good way to confuse people is to give one thing 5 names and then use them interchangeably.
  14. 14. ce ur re so E AT GR
  15. 15. Take-away User-centered design relies on evidence, not opinion to drive decisions about design.
  16. 16. Who  uses   your  site?   Who  could   use  your   site? Usability  ;p:   Usabilty.gov  has   tools    to  help  you   do  these  things.
  17. 17. Text Usability  insight:   Some;mes  your   most  frequent   user  group  is  not   the  “obvious”one
  18. 18. Quick & Easy Customer Profile rc es s ou re AT GRE
  19. 19. Take-away The first step in the process is to know your users
  20. 20. What  are  your   users  top  tasks? What  do  people   Usability tip: Priori;ze  top   -­‐  want  to  do?   tasks  according   -­‐  want  to  learn? to  BOTH  your   agency  mission   and  your  user   goals.
  21. 21. 1. ON/OFF 3. Volume   2.   control Change   channels Usability tip: Learn your usersʼ top 2 or 3 tasks. Work on those first.
  22. 22. Eyetracking is a research technique that lets us watch where people look how long they look there. Usability tip: Put important things where peopleʼs eyes will “trip” over them
  23. 23. Shameless plug: Learn more about current usability research @ the Web Manager University Reseach in Practice December 9th .
  24. 24. Usability tip: Put the information that people are looking for where you know they will
  25. 25. Usability tip: Use design elements like saturated color to draw attention to key content.
  26. 26. Take-away Great websites help people do a few top tasks really well.
  27. 27. Can  people  DO   their  top  tasks? Usability tip: Usability types recommend recruiting 6-8 representative users / user type to get actionable findings.
  28. 28. Benefits of Usable Websites 1. Citizen get MORE done more efficiently 2. GovStaff does MORE meaningful work 3. Getting things done costs LESS
  29. 29. Why WEBSITES FAIL
  30. 30. Some common problems cited by usability  test  par;cipants “The  wrong  stuff   “I  can’t  find   things” “Content   is  on  top” “Its  in   isn’t  helpful” “Content   GovSpeak” “  Its  a  giant  wall   is  outdated” of  words” “The  pictures   “I’m  not  aYer “Its  organized   don’t  help  me” a  news  feed” like  the   government” ”I  know  its  here,  I  just  cant  find  it”                                  -­‐
  31. 31. Usability problems happen when there is a mismatch between how the site works Usability speak: and how users User centered designers will say expect the site to work “There is a mismatch between the userʼs mental model and the site model.
  32. 32. The next few slides provide an example of a mental model mismatch. That is a situation in which what users expect to happen and what happens are different. And as a result ... a brilliant design often fails.
  33. 33. James Dyson The cyclonic separation vacuum cleaner inventor guy
  34. 34. At the carwash the “dryer” does not “DRY” your car. It pushes/the water off your car ... the dyson dryer works on the same principle.
  35. 35. dry airblade wet
  36. 36. If you watch people use this* 1. They put their hands in. 2. They try to rub them a bit 3. They give up ... and wipe their hands on their trousers. *Putting instructions on this helps ... but not much... and People donʼt read instructions, anyway. Usability tip: Watching people try to do tasks in the “real world” is the most valid type of test.
  37. 37. If you watch people use this* 1. They put their hands. 2. They try to rub them a bit 3. They give up ... and wipe their hands on their trousers. Sound familiar? Usability problem: Users are trying to apply the familiar mental model to the new dryer. They should work the same, right?
  38. 38. Take-away Tasks feel easy when they reflect the mental model that the user already has.
  39. 39. Watch  representa;ve   users  try  to  do  their  top   tasks. Need  images  of   usability  tes;ng  lab Can  they.... 1.  Find  what  they  need 2.  Understand  it 3.  Act  on  it Usability tip: Its important to observe representative users. Not your friends or workmates.
  40. 40. HHS has 2 Usability testing labs available for FREE ce to government employees ur on an as avaiable basis. re so E AT GR
  41. 41. Testing doesnʼt always need to be formal. Guerilla testing works, too. Usability speak: Guerilla   tes;ng  means  using  paper   prototypes  to  test  a  few  tasks   with  a  few  people.
  42. 42. Measure Improve REPEAT
  43. 43. Small, VISIBLE incremental steps. USCourts Intranet After Before (baseline) Usability tip: Top Tasks Capture userʼs success levels on top tasks before and after design changes ... and over time. Use these numbers to demonstrate why usability matters and how much it saves to management.
  44. 44. Take-away User centered design is an iterative process
  45. 45. The  Federal   Government  has   many  specialists   and  many   resources  (like   web  cotent.gov)   for  people  who   want  to  learn   more. Usability  ;p:  A  good  usability  specialist  will  also  mentor  your  web  team  as  he  or  she  works.
  46. 46. T nit ies EA rtu GR ppo go nin me again le ar
  47. 47. AT rum R E fo G g rin s ha
  48. 48. Take-away The best websites are evidence-driven.
  49. 49. Craigʼs list Usable Useful not pretty
  50. 50. Take-away People use websites that help them get things done.
  51. 51. If you do nothing else 1. Make a list of your top tasks 2. Watch real users try to do them (better yet conduct usabilty testing) 3. Learn more Tools and Information Learning opportunities
  52. 52. Presenter information Kath  Straub,  PhD Usability.org kath@usabiity.org +1.443.831.1351 kas kstraub researchdrivebys.usability.org

×