CS 5115 USER INTERFACE DESIGN_ IMPLEMENTATION AND EVALUATION by suchenfz

VIEWS: 7 PAGES: 64

									User-Centered Design: Intro and Methods

     Loren Terveen
    CS 5115, Fall 2010
     September 15




                                          1
Sample Hall of Fame/Shame
 James Greensky Fall 2006
Blood Pressure Monitor (Aneroid)
-
    Hall of Shame
    Very difficult to impossible to form any conceptual model
-   Absolutely no constraints or few visibility clues as to how to use the objects or even how
    they relate
-   Some affordanances, but without a conceptual model they don’t make sense
-   No feedback as to using the devices correctly
-   Must remember exactly how to use the devices
-   Very large Gulfs of Execution and Evaluation
-   Other “Gulfs”
    - Even if you know how to use the device, very hard to execute the correct action
      sequences without errors to obtain the results
            - Easy to position cuff wrong, but the arrow helps
            - Also easy to put cuff on too tight or too loose
            - Easy to forget valve is open
            - Needs full user attention to hear and remember results
    - Interpreting the results requires previous knowledge
            - Do the results make sense or is the cuff on wrong, better adjust cuff and retest
            - Was the pressure for no heartbeat systolic or diastolic, often referred to by
              non-professional users of the device as simply the top and bottom numbers
Blood Pressure Monitor (Digital)
                   - Much easier to form a conceptual
                   model for the device due to a unified
                   structure
                   - Being able to form a conceptual
                   model makes all the difference
                   - Affordances make more sense
                   - Much easier to figure out and after
                   remember how to use the device
                   - Much better visibility and feedback
                   due to display
                   - No longer requires user’s full attention
                   - Can easily see the results and KNOW
                   that the top number is systolic and the
                   bottom number is diastolic
                   - Less susceptible to error but…
Hall of Fame???
 - Errors can still easily occur due to improper
   placement or fit of cuff
 - Easy to hit on/off button instead of start
   which instantly turns the tester off
 - Still need to have previous knowledge to
   interpret the results
        - Is ???/?? normal, am I going to die???
 - Start button could be “coded” better
Blood Pressure Monitor (Walmart)
                  - Excellent conceptual
                    model
                  - Excellent use of
                    affordance
                  - Excellent use of physical
                    constraints
                  - No Gulf of Execution
Hall of Fame
               - Buttons are “culturally
                 coded”
               - Can easily interpret
                 and evaluate results
               - No Gulf of
                 Evaluation
               - A good design can
                 make you want to use
                 the device
User-Centered Design
You need real users
  You may think your idea for a new system is so
  wonderful that everyone will want it, though you
  can’t think of a really specific example, and that it
  will be useful in some way to people, even though
  you can’t say how. But history suggests that
  you will be wrong. (Lewis and Rieman, Chapter
  2)‫‏‬




                                                          10
Task-Centered User
Interface Design
 Tasks?




                     12
Tasks
  A detailed description of a complete job that
   specific users want to accomplish
  What, not how
  Concrete, detailed
  Complete job
     Not just feature lists
     Transitions between sub-tasks
     Inputs/outputs – information flow




                                                   13
 Example Task
Professor Terveen gets email telling him that 5115 is
scheduled to meet every Monday and Wednesday,
starting September 7, and ending December 15; the
final will be sometime during the week of December
15. He should enter those dates into his calendar,
scheduling 9:45-11:00 for the class. He should also
produce a list of conflicting appointments that need
to be rescheduled.




                                                        14
Another Example
 Loren wants to buy tickets for a trip to San Francisco,
  leaving November 2 and returning November 5. He
  wants to leave as close to noon as possible, but wants
  to be sure to arrive by 4pm Pacific Time. For the return
  trip, he wants to leave as close to 5pm as possible, not
  no earlier. He prefers to fly Delta, since he’s a SkyMiles
  member. He prefers an aisle seat. He’d also like a row
  where no other passengers are seated or else an exist
  row so he’s got more room to stretch out.
What Tasks?
 Focus: frequent and infrequent-but-
  important tasks
 Depth/quality more important than number
  of tasks




                                             16
Scenarios
 Specific instances of system use
   From the what to the how
     A particular task
     A particular interface

   What the user would do, in detail, in a specific
    interface
       So someone could complete without task knowledge
 (Yes, Go and Carroll mean something else....)




                                                           17
Important: tasks and
scenarios are concrete
 Questions come in different kinds
 Some can be settled through abstract argument
    Are there more real numbers than natural numbers?
 Some only can be settled empirically
    Can students use OneStop.umn.edu to find out
     whether there is room to enroll in CS 5115?




                                                         18
              •Scenario            •Usage
           •(Go & Carroll)          story

             •kind of like

      •Task           •+     •Persona
•(Lewis & Rieman)
Exercise
 Take a look at the student section of
  www.OneStop.umn.edu
 Define a task (not scenarios) students
                                         10 minutes
  might try to accomplish with the site
    Remember what tasks are used for
 Present tasks, discuss, ask questions

                                          10 minutes




                                                 20
Project check
Human Cognition User Interface
 It’s Human-Computer Interaction,
  Design so we need to understand something about
  human capabilities
 … so a brief overview of human cognitive
  capabilities as relevant to HCI
 Goal: use this knowledge to guide design of
  interfaces that extend people’s abilities and
  compensate for weaknesses




                                                23
Human Cognition
 Attention
 Perception and recognition
 Memory
 Learning
 Problem solving and reasoning




                                  24
Attention
 From the range of available possibilities, select
  what to concentrate on
 Visual or auditory scanning
 Factors that affect ease of focusing on the right
  stuff:
   Specificity of goals
   Information display




                                                      25
Attention – Design Implications
 Information relevant to the current task should
  be salient
 Graphical techniques – layout, ordering,
  organization, underlining, color, animation – can
  be used to achieve this goal
 But don’t visually clutter the interface: plain
  interfaces can be easier to use




                                                      26
Attention - Example
 Consider two interfaces that support web search;
 evaluate both from the perspective of being able
 to focus on where to enter your query




                                                     27
28
29
Two more examples




                    30
31
32
Perception
 Acquiring information from the environment
  using different senses
 Results in internal experience of external events
 Vision is dominant sense for sighted people




                                                      33
Perception – Design
Implications
 Icons should be designed so users can easily
  distinguish their meanings
 Sounds should be clearly audible and
  distinguishable
 Text should be legible and distinguishable from
  the background




                                                    34
Perception - Example
 My goal is to read new messages in an online
 forum




                                                 35
         Icons: are their meanings clear?
Attention: easy to focus on the right stuff?




                                               36
Memory
 Short-Term Memory
   Severely limited capacity – “7 plus or minus 2”
   Instant, effortless recall
   “Chunking”
   Fragile
 Long-Term Memory
   “Unlimited” capacity
   Takes time/effort to store and retrieve
   Interpretative
   Retrieval is context-sensitive
   rote memory vs. relationships vs. explanation

                                                      37
Memory (continued)‫‏‬
 People are really good at remembering some
 things
   Visual cues, especially faces
 People are much better at recognizing things than
  recalling them
 People are good at associative reminding
 People remember the typical case and the
  exceptions



                                                      38
Memory – Design Implications
 Don’t make users remember complicated
  procedures
 Design interfaces that promote recognition over
  recall
 Give users resources to help them visually
  encode information (colors, icons, time stamps,
  etc.)‫‏‬




                                                    39
More than 7 +- 2
items in menu – bad?

What about a voice
menu?




                       40
                     Visual representation of contacts
Group                         – recognition, not recall
Icons
                                        Icons
                    Spatial organization of information
                                     Representing
                                      Individual
        Groups of                      contacts
        Contacts                                    Pictures




                                                          41
Learning
 Acquiring new knowledge or skills
 Exploratory learning – learning by doing
 Scaffolding or “training wheels”




                                             42
Learning – Design Implications
 Create interfaces that encourage exploration
    Easy to try out and undo actions
 Design interfaces that constrain and guide users
  to select the right action
 Provide multiple, linked representations




                                                     43
Examples
 Graphical editors
 Simulation environments




                            44
Can undo picture editing action

Can learn about actions that are
not available in current context




                                   45
Problem solving and reasoning
 Conscious; reflective
 Thinking over one’s options
 Figuring out the best option or solution
 Making a plan
 Weighing pros and cons




                                             46
  Task Structure
                 # of levels of decision making
# of alternatives A lot – deep    A few -
at any level                      shallow
A lot – wide     Hard:           Menu
                 games, puzzles,
                 recreational
                 activities
A few –          Recipe
narrow

                                                  47
Problem solving – Design
Implications
 Provide the proper information and aids
 But, even better – design to make problem-
 solving and reasoning unnecessary




                                               48
Spreadsheet




              49
Tax Preparation Software
 User doesn’t have to do computation
 User doesn’t have to figure out which form to use
 Instead, software poses questions that users are
 likely to be able to answer




                                                      50
Example
 What’s the best flight from Vancouver to
 Montreal?
   Time
   Layovers
   Plane changes
   Price
  …




                                             51
   Representation 1
AC 117   Vancouver      Calgary        7:00     9:00

Cdn 321 Vancouver       Calgary        9:00     12:00

Cdn 355 Calgary         Montreal       13:30    19:30

AC 123   Calgary        Toronto        12:30    16:30

AC 123   Toronto        Montreal       16:45    17:30

 * Time zones: van-cal  + 1 ; cal – tor, mon  + 2

                                                        52
      Representation 2
            7   9      11      13       15    17
Vancouver

     AC 117          Cdn 321

  Calgary 8     10     12      14       16    18

                      AC 123        Cdn 355
  Toronto                                     20



 Montreal 10    12     14      16       18

                                                   53
Spend time with users
 Go talk with the users
    Are they too busy?
       Then how will they have time to evaluate/use it?
       Are there good surrogate users?
 Observe the user at work
   Content – what they’re trying to accomplish
   Context – physical workplace, organizational
    setting, etc.




                                                           55
Talking with users
 What do they know?
   systems, skills, etc.
 What do they do?
   tasks
 How do they do it now?
   scenarios
 What do they want to do?
   new tasks




                             56
One way to work with users
 Contextual inquiry
    Beyer, Hugh, and Holtzblatt, Karen, "Apprenticing
     with the Customer: A Collaborative Approach to
     Requirements Definition," Communications of the
     ACM, May 1995 (available through ACM Digital
     Library, www.acm.org/dl)‫‏‬
    (More to come on this)‫‏‬




                                                         57
Users aren’t perfect either
 Users aren’t all-knowing
   They may have a very narrow view
   They may not be able to articulate what they do
    and what they know
   They may not be able to envision possible new
    ways of doing things
 They aren’t designers
   You must learn about the tasks from the users
   Then use your design skills to create a design
   Finally, get user feedback on the design/prototype


                                                         58
Hall of Shame/Fame
    Brian Terlson
  Fall 2006 student




                      60
Shameful: The Godfather




                          61
Why The Godfather is Terrible
  Poor visibility and poor focus
     The interface tries to do too much in one screen.
     Eg. There are so many scroll bars that it can take quite some
      time to simply find the right one!
     Completing simple tasks requires scanning everything in the
      UI and toggling every button and moving every scroll bar
      (since items may be hidden) or memorizing it beforehand.
  Tab interface not consistent with Window’s standard.
   Tabs just look like any other button.
  Icons are not good and often meaningless.
  Can accomplish the same thing on multiple screens –
   such as changing the title tag, can be done in no less
   than 3 different screens and in two different pop-up
   dialogs.

                                                                      62
Fame: Apple Front Row




                        63
What rocks about Front Row
 Consistency with existing UIs and programs
    The icons are all recognizable items from OS X
    The menus for music and pictures are the same as those in
     iTunes and iPhoto.
    The DVD player and video playing interface is familiar to
     anyone who has used a DVD player before.
 Natural mapping between buttons action desired and
  buttons on remote – rotating icons around, scrolling
  through lists are natural.
 Remote is simple and does all required functions –
  easy to learn and retain functions even in short term
  memory.
 Program gives great feedback when items are selected
  or moved – both sound and visual.
 The program is easy to use and easy to learn – a great
  UI!
                                                                 64

								
To top