Download - Adv of HCI
-
8/2/2019 Adv of HCI
1/62
Institut frComputertechnik
ICT
Institute ofComputer Technology
HCI Human Computer
Interaction
Jrgen Falb
-
8/2/2019 Adv of HCI
2/62
Institut fr Computertechnik 2
-
8/2/2019 Adv of HCI
3/62
Institut fr Computertechnik 3
HCI A Multi-disciplinary Subject
The ideal designer needs expertise in:
Psychology and cognitive science
Ergonomics
Sociology
Computer science and engineering
Business
Graphic design
Technical writing
-
8/2/2019 Adv of HCI
4/62Institut fr Computertechnik 4
HCI Theory
No general and unified theory available
But there are four major issues of concern:
the human,
the computer, the tasks to be performed, and
usability.
-
8/2/2019 Adv of HCI
5/62
Institut fr Computertechnik 5
HCI Basics
-
8/2/2019 Adv of HCI
6/62
-
8/2/2019 Adv of HCI
7/62
Institut fr Computertechnik 7
Computers
screen, or monitor, on which there are windows
keyboard
mouse/trackpad
variations desktop
laptop
PDA
the devices dictate the styles of interaction that the systemsupports
If we use different devices, then the interface will support adifferent style of interaction
window 1
window 2
12-37pm
-
8/2/2019 Adv of HCI
8/62
Institut fr Computertechnik 8
Interactions
interaction models
translations between user and system
ergonomics
physical characteristics of interaction
interaction styles the nature of user/system dialog
context
social, organizational, motivational
-
8/2/2019 Adv of HCI
9/62
Institut fr Computertechnik 9
Normans Interaction Model
1. Formthegoal7.
Evalu
ate
theou
tcome
5.Perceive
thesystem
state
4. Execute the action
3.Spe
cifyth
eactio
n
-
8/2/2019 Adv of HCI
10/62
Institut fr Computertechnik 10
Ergonomics
Study of the physical characteristics ofinteraction
Also known as human factors but this can alsobe used to mean much of HCI!
Ergonomics good at defining standards andguidelines for constraining the way we designcertain aspects of systems
-
8/2/2019 Adv of HCI
11/62
Institut fr Computertechnik 11
Ergonomics Examples
arrangement of controls and displays
e.g.controls grouped according to function or frequency of use, orsequentially
surrounding environment
e.g.seating arrangements adaptable to cope with all sizes of user
health issuese.g.physical position, environmental conditions (temperature,humidity), lighting, noise,
use of colour
e.g.use of red for warning, green for okay,awareness of colour-blindness etc.
-
8/2/2019 Adv of HCI
12/62
Institut fr Computertechnik 12
Interaction Styles
command line interface
Menus (e.g. OSD)
natural language
question/answer and query dialogue (e.g. SQL)
form-fills and spreadsheets WIMP
point and click threedimensional interfaces
-
8/2/2019 Adv of HCI
13/62
Institut fr Computertechnik 13
Context
Interaction affected by social and organizationalcontext
other people
desire to impress, competition, fear of failure
motivation
fear, allegiance, ambition, self-satisfaction
inadequate systems cause frustration and lack of motivation
-
8/2/2019 Adv of HCI
14/62
Institut fr Computertechnik 14
Interaction Design
Scenario/Task Design
Navigation Design
Screen Design and Layout
-
8/2/2019 Adv of HCI
15/62
Institut fr Computertechnik 15
HCI Methods
State Charts,Petri Nets
TaskProgramming
Application
Programming
Eventmechanisms,
Constraints
Layoutmechanisms
WidgetProgramming
CTA TKS, TAKD
XML/DTD,CORBA
IDL
HTA, UseCases,
ConcurTaskTrees
ER-Diagrams,
Class Diagrams
Programming byDemonstrations
Formal
Grammatics
Dialognets,
Storyboards
User InterfaceDescriptionLanguages
Mockups,Imagemaps
Task-DialogMapping, OOA-
Dialog Mapping
Widgetmapping,Autolayout
AutomaticGeneration
GraphicalSpecification
Programming TextualSpecification
Presentation
Dialogue-
Control
ApplicationSemantics
Entities
Tasks
low-level high-level
-
8/2/2019 Adv of HCI
16/62
Institut fr Computertechnik 16
HCI FrameworksMB-UIDEsFrameworks
Toolkits
CASE Tools
ApplicationGenerating
Tools
User Interface Management Systems
User InterfaceRenderers
User InterfaceEditors
InterfaceGeneration
Tools
Automatic
Generation
Graphical
SpecificationProgramming
Textual
Specification
Dialogue-Control
ApplicationSemantics
Entities
Tasks
Presentation
low-level high-level
-
8/2/2019 Adv of HCI
17/62
Institut fr Computertechnik 17
Architectural Patterns for
User Interfaces
-
8/2/2019 Adv of HCI
18/62
Institut fr Computertechnik 18
Seeheim
-
8/2/2019 Adv of HCI
19/62
Institut fr Computertechnik 19
Arch / Slinky
-
8/2/2019 Adv of HCI
20/62
Institut fr Computertechnik 20
Model-View-Controller
-
8/2/2019 Adv of HCI
21/62
Institut fr Computertechnik 21
Presentation-Abstraction-Control
-
8/2/2019 Adv of HCI
22/62
Institut fr Computertechnik 22
Hybrid Architectures
Control
Presen-tation
DomainAdaptor
App-lication
Presen-tation
PAC - Amodeus
PAC
PAC
PAC
M V
C
Layer 1
M V
C
M V
CLayer 2
Layer 3
HMVC
-
8/2/2019 Adv of HCI
23/62
Institut fr Computertechnik 23
User Interface Models
-
8/2/2019 Adv of HCI
24/62
Institut fr Computertechnik 24
Significant Models
Task models
Cognitive models
User models
Domain models
Context models Presentation models
Dialog models
-
8/2/2019 Adv of HCI
25/62
Institut fr Computertechnik 25
CHI97 Metamodel
-
8/2/2019 Adv of HCI
26/62
Institut fr Computertechnik 26
Examples
Check Availability Select Room
Book Room
Make Reservation
Reservationstart dateduration
smokingRoom
smoking
type of room
location
Guest
name
address
Hotel
name
location
Availability Browser
Hotel View
Room List
Hotel View
Room List
Reservation Editor
Availability Browser
Domainmodel
Task
modelMultiple
presentation models
-
8/2/2019 Adv of HCI
27/62
Institut fr Computertechnik 27
Glossary
Scenarios:sequences of actions aimed ataccomplishing some task goal
Goals:partially specified states that the userconsiders desirable
Functions:effects achieved by some entity Tasks:pieces of work that a person or other
agent has to (or wishes to) perform
-
8/2/2019 Adv of HCI
28/62
Institut fr Computertechnik 28
Task Analysis
Goals: Elicit descriptions of what people do
Represent those descriptions Predict difficulties, performance
Measure learnability, transfer of knowledge between
systems Evaluate systems against usability and/or functional
requirements
Problem: Instantiate current tasks in new system, rather than
redesigning flow of work to achieve desired higher-level function
-
8/2/2019 Adv of HCI
29/62
Institut fr Computertechnik 29
Types of Task Analysis
Hierarchical Task Analysis (e.g. HTA, CTT)
Cognitive Task Analysis (e.g. MHP Model
Human Processor)
Modeling how-to knowledge (e.g. GOMS)
-
8/2/2019 Adv of HCI
30/62
Institut fr Computertechnik 30
Hierarchical Task Analysis
Graphical representation
Decomposition of high level task into
constituent subtasks, operations, plans,relationships
-
8/2/2019 Adv of HCI
31/62
Institut fr Computertechnik 31
ConcurTaskTrees
Focus on Activities
Hierarchical Structure
Graphical Syntax
Rich set of temporal operators
Task allocation Objects and task attributes
-
8/2/2019 Adv of HCI
32/62
Institut fr Computertechnik 32
CTT ConcurTaskTrees
-
8/2/2019 Adv of HCI
33/62
Institut fr Computertechnik 33
Cognitive Task Analysis
Inform the design process through applicationof cognitive theories
Some tasks, actions are cognitive define these Examples:
decide which button to press
recall previously stored knowledge from memory compare two objects
Model the internal representation andprocessing that occurs for the purpose ofdesigning tasks that can be undertaken moreeffectively by humans
-
8/2/2019 Adv of HCI
34/62
Institut fr Computertechnik 34
Modeling how-to Knowledge
how to do it knowledge
Focuses on task to action mapping
GOMS (Goals, Operations, Methods, SelectionRules) is most famous approach
-
8/2/2019 Adv of HCI
35/62
Institut fr Computertechnik 35
GOMS
A method to describe user tasks and how a userperforms those tasks with a specific interface design
Assumes error-free, goal-directed, and rational behavior
Bridges task analysis with a specific interface design
Views humans as information processors
Small number of cognitive, perceptual, and motor operatorscharacterize user behavior
To apply GOMS:
Analyze task to identify user goals (hierarchical)
Identify operators to achieve goals
Sum operator times to predict performance
-
8/2/2019 Adv of HCI
36/62
Institut fr Computertechnik 36
GOMS
Goals: What a user wants to accomplish
Operators: Cognitive or physical actions that
change the state of the user or the system Methods: Groups of goals and operators
Selection rules: Determine which method toapply
-
8/2/2019 Adv of HCI
37/62
Institut fr Computertechnik 37
GOMS Example
GOAL: CLOSE-WINDOW . [select GOAL: USE-MENU-METHOD . MOVE-MOUSE-TO-FILE-MENU . PULL-DOWN-FILE-MENU
. CLICK-OVER-CLOSE-OPTION GOAL: USE-ALT-F4-METHOD . PRESS-ALT-F4-KEYS]
For a particular user:
Rule 1: Select USE-MENU-METHOD unless another rule applies Rule 2: If the application is GAME, select ALT-F4-METHOD
k
-
8/2/2019 Adv of HCI
38/62
Institut fr Computertechnik 38
Envisioning New Tasks
Three task design concerns to keep in mind:
Effectiveness: Designing tasks that meet real
needs
Comprehension: Designing concepts and
services that your users can predict, understand
Satisfaction: Designing tasks that are
motivating and lead to feelings ofaccomplishment, satisfaction
D i i f Eff ti
-
8/2/2019 Adv of HCI
39/62
Institut fr Computertechnik 39
Designing for Effectiveness
Innovation is good, but how much is too much?
Build on what is already working well
Engage stakeholders in cooperative design
What parts of a task to support via technology?
Leverage other aspects of the work context, bothpeople and things (distributed cognition)
Balance tendency toward general solutions with
the needs of specific tasks Predict and support exceptions, provide special cases
for common or critical tasks
D i i f C h i
-
8/2/2019 Adv of HCI
40/62
Institut fr Computertechnik 40
Designing for Comprehension
Cannot directly observe comprehension
Must rely on users behaviors, reactions, comments
Make inferences about their mental models
Metaphors play a crucial role in this
Designers explore metaphors to get new ideas
Users evoke metaphors to understand new concepts
Try to leverage users existing knowledge
Anticipate and support analogical reasoning But look for ways to break current understandings
D i i f S ti f ti
-
8/2/2019 Adv of HCI
41/62
Institut fr Computertechnik 41
Designing for Satisfaction
Automate tedious tasks, but try not to removesources of reward or accomplishment
Carefully examine sources of reward, maintain orenhance opportunities for feelings of achievement
Use the computer to make tasks more personal,
more stimulating, more fun Balance the needs of individuals with those of
the groups they work with
The people who do the most work when using asystem may not be those who get the most benefit
P t ti M d l
-
8/2/2019 Adv of HCI
42/62
Institut fr Computertechnik 42
Presentation Models
Presentation model: describes the visualaspects of the interface. It is divided into
Abstract presentation model and concretepresentation model.
Abstract presentation model provides an abstract
view of an interface that is independent from theunderlying concrete model.
Concrete Presentation model is the concrete instance
of an interface which can be presented to a user;there may be many concrete instances of an abstractpresentation model.
Example Abstract Presentation Model
-
8/2/2019 Adv of HCI
43/62
Institut fr Computertechnik 43
Example Abstract Presentation Model
-
8/2/2019 Adv of HCI
44/62
Institut fr Computertechnik 44
User Interface Design Processes
Typical HCI Development Phases
-
8/2/2019 Adv of HCI
45/62
Institut fr Computertechnik 45
Typical HCI Development Phases
User Identification
Task Analysis
User Concept Modeling
Interaction Design
Visual Design Usability Evaluation
Categories of HCI Design Processes
-
8/2/2019 Adv of HCI
46/62
Institut fr Computertechnik 46
Categories of HCI Design Processes
Participatory Design
Nygaard 70s
Scenario- and Task-Based Design Carroll, Paterno,
Use-Case-Based / Usage-Based Design
Constantine and Lockwood
User-Centered Design
Norman and Draper 1986
Participatory Design
-
8/2/2019 Adv of HCI
47/62
Institut fr Computertechnik 47
Participatory Design
Users are 1st class members in the designprocess
Active collaborators vs. passive participants Work together with engineers
Users considered subject matter experts
Know all about the work context
Iterative process
Artifacts: task flows, task objects, GUI objectsAll design stages subject to revision
Examples: CARD, PICTIVE, METAPHOR
Participatory Design
-
8/2/2019 Adv of HCI
48/62
Institut fr Computertechnik 48
Participatory Design
Pros: users are excellent at reacting to suggested system
designs (designs must be concrete and visible)
users bring in important folk knowledge of workcontext (knowledge may be otherwise inaccessible todesign team)
greater acceptance for the system often results
Cons: hard to get a good pool of end users (expensive,
reluctance...)
users are not expert designers (dont expect them tocome up with design ideas from scratch)
the user is not always right (dont expect them to
know what they want)
Scenario/Task-Based Design
-
8/2/2019 Adv of HCI
49/62
Institut fr Computertechnik 49
Scenario/Task Based Design
Scenarios for user interactions
Focus on situations most likely to impact usability
Emphasize the mental experience of the users Scenarios used for:
Object identification
Systems functionality specification
Concrete user interface design
Examples: SBD (Carroll), IDIOM, CTT
Idiom
-
8/2/2019 Adv of HCI
50/62
Institut fr Computertechnik 50
Idiom
Mark v. Harmelen,
Object Modeling and User Interface Design
Usage-Centered Design
-
8/2/2019 Adv of HCI
51/62
Institut fr Computertechnik 51
Usage Centered Design
Focus is on usage (work users are doing)
Usage-centered design is a systematic, model-
driven approach to improving product usability.A few simple but powerful models guide the
user interface design toward a better fit with
the real needs of users: user roles,
tasks, and
interface content Examples: UI in RUP, Wisdom, Essential Use
Cases
Primary Models in Usage-Centered Design
-
8/2/2019 Adv of HCI
52/62
Institut fr Computertechnik 52
Primary Models in Usage Centered Design
User Roles
User-Role
Map
Use Cases
Use-Case
Map
ContextModel
Navigation
Map
Visual andInteraction
Design
Operational Model (environmental and contextual factors)
Domain Model (glossary, data model, or object-class model)
User-Centered Design
-
8/2/2019 Adv of HCI
53/62
Institut fr Computertechnik 53
User Centered Design
Main three factors:
User studies to understand their needs
Rapid paper prototyping to get user feedback fordesign iterations
Usability testing
Examples: ISO 13407
User-Centered Design
-
8/2/2019 Adv of HCI
54/62
Institut fr Computertechnik 54
User Centered Design
I SO 13407: Human-cent reddesign processes for
int eract ive syst ems (1999)
Comparison
-
8/2/2019 Adv of HCI
55/62
Institut fr Computertechnik 55
Comparison
User-Centered Design
Focus is on users: userexperience and
satisifaction Driven by user input
Substantial userinvolvement
Design by iterativeprototyping
Highly varied, informal
processes Design by evolution
Usage-Centered Design
Focus is on usage:improved tools supporting
task accomplishment Driven by models
Selective user involvement
Design by modeling
Systematic, fully specified
processes Design by engineering
OVID
-
8/2/2019 Adv of HCI
56/62
Institut fr Computertechnik 56
Methodology for object-oriented user interfacedesign
Iterative Process:
Images from IBM Ease of Use Website
OVID Discovery Phase
-
8/2/2019 Adv of HCI
57/62
Institut fr Computertechnik 57
y
OVID Abstract Design Phase
-
8/2/2019 Adv of HCI
58/62
Institut fr Computertechnik 58
g
OVID Real Design Phase
-
8/2/2019 Adv of HCI
59/62
Institut fr Computertechnik 59
g
Resources
-
8/2/2019 Adv of HCI
60/62
Institut fr Computertechnik 60
CARD (Collaborative Analysis of Requirements andDesign): Tudor, L.G., Muller, Michael J., and Dayton, T.A.,A CARD Game
for Participatory task analysis and redesign: MacroscopicComplement to PICTIVE, INTERCHI'93 poster, 1993.
PICTIVE (Plastic Interface for Collaborative TechnologyInitiatives through Video Exploration): M.J. Muller et.al.Equal opportunity PD using PICTIVE.
Communications of the ACM, 1993.http://doi.acm.org/10.1145/153571.214818
IDIOM: M. van Harmelen. Object Modeling And User Interface Design.
Pearson Education Publishing, 2001. OVID (Object, view and interaction design):
IBM Ease of Use: http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589
Literature
http://doi.acm.org/10.1145/153571.214818http://doi.acm.org/10.1145/153571.214818http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://doi.acm.org/10.1145/153571.214818http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589 -
8/2/2019 Adv of HCI
61/62
Institut fr Computertechnik 61
Sprache: Englisch
Gebundene Ausgabe- 834 Seiten - PrenticeHall
Erscheinungsdatum:30. September 2003
Auflage: 3rd
I SBN: 0130461091
Literature
http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589 -
8/2/2019 Adv of HCI
62/62
Institut fr Computertechnik 62
Sprache: Englisch
Broschiert - 352Seiten - Addison Wesley
Erscheinungsdatum:
April 2001
I SBN: 0201657899
http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589http://www-306.ibm.com/ibm/easy/eou_ext.nsf/publish/589