Introduction to Human Computer Interaction by mikesanye


									          Chapter 1

Introduction to Human
 Computer Interaction
•   Human Computer Interaction: definition
•   Why study user interface design?
•   History
•   Goals of HCI
•   Five key ideas in HCI
•   Understanding users
•   User productivity and usability
•   Disciplines contributing to HCI
•   HCI engineering as a branch of software engineering
•   User interface malfunctions
•   Case studies in user interface malfunction
•   Key points to review
           Definition – HCI
– The study of people and computing and the way
  they influence each other
– A set of processes, dialogues, and actions
  through which a human user employs and
  interacts with a computer
– A discipline concerned with the design, evaluation
  and implementation of interactive computing
  systems for human use with the study of major
  phenomena surrounding them
  Human-Computer Interaction (HCI)
• Human
  – the end-user of a program                  The System
  – the others in the organization
• Computer
  – the machine the program runs on    Input               Output

• Interaction
  – the user tells the computer what
                                                The User
    they want
  – the computer communicates
Why Study User Interface Design?
– 75% or more of development effort can go into the user
  •   40% to 70% is typical
  •   User interface specialists are needed
  •   Everybody needs to know the basics

– User interface software is becoming more complex
  •   Complexity increase is faster than other aspects of systems
  •   Graphical user interfaces have provided the biggest jump in complexity
  •   Applications tend to grow to fill available computing resources

– There are direct financial benefits from improved user
Financial benefits & Costs of improved
            user interfaces
  – Increased user productivity
     •   Direct financial savings
  – Increased revenues from sales
     •   The system is more attractive and customer satisfaction is higher
  – Decreased training and support costs
     •   The system is more intuitive
  – Decreased maintenance cost
     •   The system does what user wants
     •   Much maintenance involves fixing UI problems
     •   Pay a little during development, or pay a lot after
         application/product release!
• But
  – Staff must be trained in user interface analysis and design
  – Users must participate
  – UI design tools are needed
• The benefits almost always outweigh the costs
    – Early days of computing:
      •   Computers cost more than people
      •   Computers had little functionality
•         The UI was unimportant
    – Early 1970s
      •   Field of ‘Man Machine Interface’ (MMI) born.
      •   Term changed gradually to ‘User Interface’ (UI)
      •   Ideas for first ‘Graphical User Interface’ (GUI)
          – Dynabook at Xerox
    – Late 1970s and 1980s
      • Products were called ‘user friendly’
      • No science in this: Just a market buzzword
      • First real GUI’s developed
          – Xerox Star --> Smalltalk and Macintosh
                 History (Cont’d)
– 1980s
  • Term ‘Human-Computer Interaction’ (HCI or CHI) came
    into use
    – wider scope than UI (help, work practices etc.)
  • MS-Windows, X-Windows follow the Mac
  • Intense research into HCI
– 1990s and early 2000s
  • Virtual reality, speech and handwriting I/O, Soundblaster
                         Goals of HCI
• Improve productivity and reduce costs through:
  – Safety:
    •   Does the system prevent danger?
  – Functionality:
    •   How many things can the system do?
  – Efficiency:
    •   How few resources does it take to get a task done?
  – Usability :
    •   How easy to learn and use is the system?

  – High functionality (many ways of doing the same thing) can
    actually reduce usability
    •   By causing confusion
            Five Key Ideas in HCI
• Visibility
  – The UI should help the user always understand...
     •   The current state of the system
     •   What operations can be done
  – E.g.
     •   When you position the cursor over a point on the screen, it should be
         clear what would happen if you clicked the mouse
• Feedback
  – When anything changes it should be made visible
     •   When you delete a file, the system should not just say ‘ready’
• Goal
  – A state the user wants to reach
     •   to be talking with somebody on the phone
     •   to have saved a file
      Five Key Ideas in HCI (Cont’d)
• Affordance
  – The set of operations and procedures that can be done to an object
  – ‘Perceived affordance’ is what typical users think can be done to an
      •   Should a door be pulled or pushed?
      •   What does this icon mean?
  – To improve visibility/feedback we need to:
      •   Choose objects with good perceived affordance
      •   Design the UI to generate better perceived affordance
• Task
  – An action the user wants to do
      •   to call somebody
      •   to save the file
  –   Goals beget tasks, tasks beget goals.
         Understanding Users

• “Dual Processor" Theory:
 – Every interactive system is a distributed system
   running on two processors:
         Human           us er     Computer
          User         interface    System

 – User interface design specifies/constrains both:
   • User behavior
   • System behavior
    Understanding Users (Cont’d)
•   Users can be categorized:
    –   By class
        •   Determined by the pattern of use:
                »    e.g., manager, salesperson, shipper, client
    –   By personality type
        •   Shy or reticent
        •   Inarticulate
        •   Disinterested or defensive
        •   Intimidated
        •   Involved designer!
    –   By ability
        •   Physical disability
                »    --> innovative I/O may be needed
        •   Colorblind
                »    --> don’t use colors as the only means of conveying information
        •   Dyslexia or other cognitive glitches
                »    --> watch out for left vs. right!
        •   Illiteracy
                »    --> icons may be needed
        •   Computer illiteracy
        •   Ignorance of domain / learner
        User Productivity & Usability
• User productivity =
    Functionality (what the computer can do)
    Usability (what people can do with the computer)

• If either of these is zero, the system is useless

  – Factors Influencing User Productivity
    •   Kind and number of tasks
    •   Characteristics of users (ability, experience etc.)
    •   Work environment (distractions etc.)
    •   Training and documentation
    •   Functionality and usability of available software and hardware
A Model of Usability Factors
     enjoyability                satisfaction

                 ac ceptability

                    us ability
                                      primary func tionality

                 ergonomics            efficienc y of use
  learnability                     extensibility/customization
                 ease of us e
   familiarity                        error handling

         fit to tas k             cognitive load

                    fit to user
        Disciplines Contributing to HCI
– Cognitive psychology
    •   Capabilities and limitations of human senses and thought processes
– Ergonomics
    •   Hardware and software efficiency of use and safety
– Linguistics
    •   Syntax and semantics of commands
    •   Speech I/O
–   Artificial intelligence
    •   Speech I/O
    •   Intelligent ‘guessing’ what the user wants to do
    •   Knowledge representations of users and tasks
– Sociology and social psychology
    •   Assisting people to work in groups with software
    •   Ensuring software works in different cultures
– Engineering and industrial design
    •   Disciplined measurement-based approaches
    •   Esthetics
    •   Storyboarding etc.
          Human Cognitive system
• Perception and representation
 – Some displays can be hard to interpret
   • Blue foreground
   • Optical illusions
   • Contrast in color but not brightness
   • Too many colors
 – There are two ways to use graphics:
   • For modeling
      – direct images of concepts
    • For coding
      – representing underlying ideas, e.g., displaying quantitative data
       Human Cognitive system (Cont’d)
• Attention limitations

     – People can be readily distracted
              •   Provide cues about what to focus on
     – People get lost in complexity
              •   Structure information so it is easy to browse through
                  – not too many items
                  – not too few items
                  – grouped logically
     – People multitask
              •   Make the ‘state’ clear so users can jump backwards and forwards
     – Some mental processes are automatic, or become so
       (contrasted with controlled processes)
              •   These processes are very hard to unlearn
Oct 4, 2010                                                                  M. Shamim Hossain
       Human Cognitive system (Cont’d)
• Memory limitations

     – Short term memory can contain 7±2 ‘chunks’
              •   Avoid situations where users have to remember more than this
              •   Logically group things so users can chunk them
     – The more meaningful, the more easily remembered
       (familiarity, imagery and consistency contribute to
              •   Use effective names and icons (even) animated ones
              •   Combine icons with words
              •   Icons can be analogies, examples or abstract, but not arbitrary
              •   Watch out for cultural differences (e.g. washroom symbols)
     – People can more easily recognize than recall
              •   Use menus, icons, quick lookup

Oct 4, 2010                                                                     M. Shamim Hossain
A five level conceptual model of the UI
• At each level:
  – Design must be done
  – Problems can occur

  1. Task Level
     •   What is to be done by the user
  2. Conceptual Level
     •   User’s intended mental model of the system
  3. Interaction Style Level
     •   Command-driven, menu-driven, direct manipulation, hypermedia
     •   Design elements that are repeated throughout the system
  4. Interaction Element Level
     •   Specific windows, dialogs, commands, menus
  5. Physical Element Level
     •   Bitmaps, characters, data structures, callbacks
Evolution from plain SW- to usability
– Normal software development (involving the UI)
  •   Focuses on physical and interaction elements
  •   Waterfall model dominates (sequential), Spiral model
  •   Evaluation by functional spec reviews and testing
– User interface development
  •   Focuses on users and tasks
  •   Star model dominates (iterative)
  •   Evaluation by continuous user involvement
  •   Driven by heuristics and guidelines
  •   Integrates psychology etc.
  •   Influence on functionality
– Usability engineering
  •   Driven by engineering objectives
  •   Integrates rigorous engineering discipline
  •   Drives functionality
A conceptual model of user interface
       system architecture
– Why layers?
   •   Simplifies software development and maintenance
– All layers:
   •   Are developed in parallel
   •   Influence each other
   •   Included in complete system specifications
   •   Evaluated together
– Evolution of layers:
   •   Functional layer should need to change less often during iterative tuning
       of the interface
   •   All layers may need to change when business functions change but
       hopefully interaction styles should remain similar


        Model                                                  View
  Characteristics of Products and
– Each kind of application puts different
  demands on the UI designer
  • Application for internal use vs. product for sale
  • Generic utility vs. task-specific tool
  • Walk-up-and-use vs. skilled usage
– Some design challenges:
  • Customizing a generic utility product so that it
    becomes a task-specific tool for internal use and
    vice versa
  • Converting an application requiring skilled usage to
    make it a walk-up-and-use application
       User Interface Malfunctions
• Key idea:
• “There are no good user interfaces ... just
  user interfaces that fit”
  – A truly bad user interface never fits
  – But among the ‘good’ ones, some will suit one
    task/user; some will suit another

• To maximize fitness, we must minimize the
  occurrence of ‘malfunctions’ in the context of
  the expected use of the system
         Definitions of malfunction
 • “A mismatch between what the user wants,
     needs or expects and what the system

           • “A breakdown in usability”

 • “An obstacle to performing a desired task”

• You should know that:
  – Occasional malfunctions are normal
  – Systematic or frequent malfunctions need to be fixed
      Related ideas to ‘malfunction’
  – Error: Identifiable mistake on the part of the designer
  – Defect: A deviation from what the user needs

• A malfunction is a usability defect
  – A defect in the smooth functioning of the
    user/computer system!
  – Users may not be aware of many malfunctions
    • the malfunctions may only be located through
      careful analysis
    • they may be subtle
           Malfunction Analysis
• A disciplined approach to analyzing malfunctions
  –   Provides feedback into the redesign process

1. Play protocol, searching for malfunctions
2. Answer four distinct questions:
  – Q1. How is the malfunction manifested?
      •   What do you notice and who noticed it?
  – Q2. At what stage in the interaction is it occurring?
      •   Goal forming, action decision, action execution, interpretation of
  – Q3. At what level of the user interface is it occurring?
      •   Physical element level to task level
  – Q4. Why is it occurring?
      •   What is its root cause
3. List and prioritize possible cures
  How is the malfunction manifested?
a) Malfunctions detected by the system (easiest to detect)
  – omission of an argument
  – incorrect date format
  – Better prompts, consistency, visible examples, more
    forgiving of alternatives

b) Malfunctions detected by the user during operation
  –   taking wrong path in menu hierarchy
  –   not finding required help
  –   not being able to perform a certain action
  –   not being able to tell which state system is in
  – Improve functionality, feedback, clarity, simplicity
How is the malfunction manifested?
c) Malfunctions undetected (until later)
  – output produced is wrong due to wrong inputs
  – unnecessary work performed
  – Improve feedback indicating consequences of input;

d) Inefficiencies
  –   excessive response time
  –   excessive think time
  –   unnecessarily long command sequences
  –   unnecessary repetitions
  –   complex operations that require use of reference
  – Simplify, speed system up
     What Stage in the Interaction the
           Malfunction Occur?
a) When the user decides on next goal (Forms an intent to do
   inappropriate thing)
   – decides to empty a field because user thinks it is unimportant (when it is
   – decides to charge default exchange rate (when should obtain current
     exchange rate)
   – Lead user through task better; better feedback; better training

b) When the user specifies the action (Action does not match the goal)
   – deletes the record instead of emptying a field
   – charge reciprocal of exchange rate
   – Improve clarity, feedback, prompts, conceptual model
      What Stage in the Interaction the
            Malfunction Occur?
c) When the system executes the action
  – Defects in functionality
  – Fix functionality in normal way

d) When the user interprets the resulting system state
  –   thinks bank account has been debited when it has not
  –   thinks system has ‘hung’ when it has not
  –   thinks some data must be entered when it is the default
  –   cannot understand resulting error message
  – Better feedback, better conceptual model
  At Which Level Does the Malfunction
a) Task level (Task and goals not supported)
  – What the user wants to do cannot be done by the system
  – Functionality is not provided
  – Add functionality

b) Conceptual level (User has wrong mental model; does not
   understand intended conceptual model)
  – thinks that money is being deducted from bank account when it is
    being charged to a credit card
  – thinks that dragging a file to the desktop means they are no longer on
    the disk
  – thinks that dragging a disk to the trash can icon deletes disk contents
  – make conceptual model clearer; improve metaphors
   At Which Level Does the Malfunction
c) Interaction style level (system wide problem)
  –   does not know how to pull down a menu
  –   scrolls a page instead of a line
  –   goes to next screen instead of scrolling
  –   retypes command after an error instead of editing it
  – make operation of the interface more intuitive and

d) Interaction element level (specific detail inappropriate)
  – selects wrong button because label is misinterpreted
  – specifies invalid command syntax
  – specifies wrong code for option
  – More attention to details of the interface, simplification
  At Which Level Does the Malfunction
e) Physical element level (Physical execution incorrect)
  –   presses wrong key accidentally
  –   clicks on wrong pixel in image
  –   out-types machine (actions lost)
  –   types ahead when system is computing; keystrokes
      later applied to wrong action
  – Defenses to protect user from consequences; better
    hardware design; fix bugs in code
Why Does the Malfunction Occur?
a) Lack of (on the part of the user):
  – Motivation:
     •   Poor job satisfaction
  – Attention:
     •   User is pre-occupied with other things.
  – Input information processing:
     •   No feedback provided to tell user what is going on
     •   or cues provided by the system are not recognized
     •   or cues are misinterpreted
     Cures: Clearer, more consistent feedback
  – Discrimination:
     •   user is unable to tell certain things apart
     •   e.g. red/green color discrimination
     •   e.g. two icons that are similar
         Cures: Improved expression of information
Why Does the Malfunction Occur?
– Physical coordination:
  • e.g. wrong item selected because of difficulty positioning
    cursor with mouse.
    Cures: Alternate interaction mechanisms, better
– Recall:
  • User did not remember command , syntax etc.
   Cures: Better mnemonics, online help, quick lookup
         mechanisms, command completion
– Knowledge / lack of learning:
  • User does not have business or software knowledge to
    make right choice.
Why Does the Malfunction Occur?
b) Learning difficulties that cause malfunctions:
  – Learning is difficult
     •   users get frustrated
     •   learning takes time; can be hard to apply
  – Learners make ad-hoc interpretations
     •   they may not recognize their problem
     •   they may falsely think they have a problem
  – Learners generalize from what they know
     •   they assume computers work like manual methods
     •   they assume consistency
  – Learners have trouble following directions
     •   they often ignore them even if they see them
     •   they do not easily understand them
Why Does the Malfunction Occur?
b) Learning difficulties that cause malfunctions:
  – Problems and features interact
     •   they do not see that one problem can cause another
  – Prerequisites and side-effects confuse learners
  – Help facilities do not always help
     •   they do not know what to ask for
     •   too much detail is often provided

  – Other causes of malfunctions:
     •   Excessive resource demands
     •   External events (e.g. noise)
     •   Misleading or inadequate training
     •   Unrealistic task definitions
     •   Intrinsic human variability
– Goals of HCI: Improve
    •   safety
    •   functionality
    •   efficiency
    •   usability
–   Visibility and feedback
–   Affordance and perceived affordance
–   Goal = state; task = action
–   Human/computer as system running on 2 processors
–   Types, classes and abilities of users
–   Productivity = functionality * usability
–   Usability factors
    •   e.g. learnability, fit, acceptability
– Contributing disciplines
    •   e.g. linguistics, Artificial Intelligence
                   Summary (Cont’d)
– Human cognitive system - Limitations on:
  •   perception
  •   attention
  •   memory
– Task analysis vs. functional analysis
– Star model with evaluation at centre
– UI levels
  •   task
  •   conceptual model
  •   interaction style
  •   interaction element
  •   physical element
– Usability engineering
– Layered approach = Model View Controller Software
  Design Pattern
– Malfunction as a kind of defect (of usability)
       Additional Reading
• Read Chapter 1 of INTERACTION
  DESIGN Beyond Human Computer

To top