Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
LECTURE 8,
SOFTWARE SYSTEMS
PROBLEM/USER ANALYSIS
September 29, 2014
human computer interaction 2014, fjv 1
Recapitulation Lecture #7
• Windowing Systems
– Room Building concept
– Windows Widget Set
– Event Handling, Event Based programming
– Model View Controller Architecture
• Icons– Types
– Meaningfulness
– Classification
• Other Iconic representations
human computer interaction 2014, fjv 2
Icons Classification (ISO/IEC Based)
3
Examples
Icons
Interactive Non-interactive
Object Pointer Control Tool Status
indicator
Container Data Device
FolderIn-basket
DocumentChartSpreadsheet
PrinterPhone
SelectionTextGraphics
Cut/copy/pasteSpell-checkUp/down arrow
FillEraserPencil
Hourglass‘LEDs’
human computer interaction 2014, fjv
Iconic Messengers, Attention Aids
• Structured abstract messages to communicate complex information to either of the senses of the users
– Icons visual
– Earcons audio attention
– Tacticons haptic appeal to a known touch
– Emoticons emotion convey emotional state
– Micon dynamic process visibility
– Gesticons dynamic indicate a state change
– Kineticons dynamic state change, process
• Some are more suitable to (visually) impaired users
4human computer interaction 2014, fjv
Icons in a GUI – Good Practice
• Sufficiently Large:
– Finger-operated UI, Pointing Device-operated UI
• Icons save space; compact toolbars
• Fast to recognize
– Standard Icons
• International
– Avoid cultural differences
• Visual Pleasing
• Product Family
human computer interaction 2014, fjv 5
Iconic Messages & Affordance
• Icons give rise to a perceived affordance
• Tactons/Earcons trigger actions
• Kineticons trigger signal in interactivity
• Affordance
• Visibility
• Iconic Messages
– Crucial interactive elements
– Important for interface, enhance experience
human computer interaction 2014, fjv6
Using Icons to enhance Metaphor
• The BumpTop interface
• Pile as organizational entity
• Icon to invoke physical
interaction
• Pen/Gesture based
• Appeals on gestalt of
physical entities on desk
• Physical properties of icons
human computer interaction 2014, fjv7
Example: Icon Affordance
human computer interaction 2014, fjv 8
Gestures and Affordance
• Relation of Object with Gesture
– Could do with object
– Would do with object
– Affordances
• Visibility
– Consistency
– Mapping
• Do we have a Gesture Alphabet?
– Device consistent
– Transferable, from one device to next …human computer interaction 2014, fjv 9
Leap Motion, Gesture Input
human computer interaction 2014, fjv 10
Example: Application of Gestures
human computer interaction 2014, fjv 11
Fitz Law:
THE SOFTWARE LIFE-CYCLE
12human computer interaction 2014, fjv
The software lifecycle
• Systems development
• Waterfall Lifecycle model
• Spiral Lifecycle model
• Star Lifecycle model
• HCI and software development
• User Centered design
– User analysis, Task analysis
– Prototyping, Dialog analysis
– Evaluation, Usability testing
13human computer interaction 2014, fjv
Fundamental Activities ofInteractive System Design
1. Information gathering and model building
2. Synthesis (or enhancement) of a solution
3. Analysis (or evaluation) of a solution
• 1-3 are iterated activities
human computer interaction 2014, fjv 14
Balance in Efforts
15
Conceptual design
10%
30%
60%
Detailed design Presentation (‘Look’)
• Visual representations• Aesthetics
Interaction (‘Feel’)• Interaction techniques• Standard menus
Design
proceeds
mainly
from the
bottom
level upConceptual (‘Ideas’)• Metaphors• Object attributes• Relationships• Behaviours
human computer interaction 2014, fjv
Traditional Approaches
• SADM = System Analysis Design Methods
• Number of stages: process in linear fashion
– problem definition
– information gathering (conceptual models)
– synthesis of solution + implementation
– evaluation of solution
• Examples
– Waterfall model
– Spiral model
16human computer interaction 2014, fjv
6 phases in software lifecycle
1. Requirements definition
2. Specification
3. Implementation
4. Testing
5. Installation
6. Maintenance
17human computer interaction 2014, fjv
HCI Life-Cycle
• Design= process of developing Artefacts= various representations of artefacts during design
• Look at user-centred design and the HCI lifecycle
– focusing on development and design
• Development= producing range of representations until suitable artefacts is built
• Representations (models): formal + informal
– Users
– Model of users
• Look at several models for the design process
18human computer interaction 2014, fjv
Watch what happens …
19human computer interaction 2014, fjv
Watch what happens …
human computer interaction 2014, fjv 20
What did we learn ...
• How do we need to obtain requirements?
• Who is in controll of the process?
• Who is involved in the process?
• Final state, what to deliver ...
• We have to accept that software development
is iterative and involves end-users
• Different models of software life cycle
• Style of Managing the development process
human computer interaction 2014, fjv 21
Can we better control software
development and thereby user
interaction
22human computer interaction 2014, fjv
Waterfall Lifecycle Model
• Each step contains validation and verification
– Validation:check product to ensure results are conform requirements
– Verification:correct/consistent representation of previous stage
• Typically contract model
– Sensitive to ambiguity (natural language)
• Not embedded in Organization
– Not sensitive for organizational changes due to introduction of system
– Initiated by board and/or corporate management
23human computer interaction 2014, fjv
The Waterfall Model
24
Validation and Verification at each representation step.
human computer interaction 2014, fjv
Spiral Lifecycle model
• Introduces concept of iteration
– Iteration
• Introduces concept of prototyping
– Prototyping, understanding requirements for next stage
• Offers solutions to management
– Risk management
• Which elements have highest probability of not being correct
• Which elements have highest cost for correcting
• Controls problems
25human computer interaction 2014, fjv
The Spiral Model
26human computer interaction 2014, fjv
But, the question remains,
where is the user in this story?
27human computer interaction 2014, fjv
Where is the User?
• In traditional design, Users play a minor role
– Emphasis on technological – technical aspects
– Prescriptive in sequence
• HCI requires User-Centered design
– Emphasis on user and usability
• Requires user evaluation after each developmental phase
• Star Model:
– Descriptive rather than Prescriptive
28human computer interaction 2014, fjv
The Star Model
29
Prototyping
Implementation
Conceptual design /
Formal design
(USER) EvaluationRequirements
specifications
Task analysis /
Functional analysis
ideaproblem
human computer interaction 2014, fjv
The Star Lifecycle model
• No predetermined starting/end point
– Each of the activities
– Each activity has evaluation: including users!
• Based on iteration
• Order of the activities not fixed
• Reflects actual practice User Centered Design
– Professionals
– Rapid prototyping
– Alternating waves (bottom up - top-down etc.)
30human computer interaction 2014, fjv
Typical HCI Approach
• Identify issues of practical effectiveness
• Identify usability factors
– Speed
– Error rates
• No formal system
– Prototype
– Sketch design
– For design components formal systems are used
• Concentrate of Interface & Interaction Quality
31human computer interaction 2014, fjv
Low-Fidelity Prototype
32human computer interaction 2014, fjv
HCI Design & Life Cycle
Problem statement
Systems Analysis (incl. user and task analysis)
Implementation
Requirements spec. (incl. usability specs.)
Evaluation (Analytical, Empirical)
Interaction design / Presentation design
Prototype (inc. online help)
User’s conceptual model design / Interaction style
System design spec. (inc. Interface design spec.)
DefinitionA
nalysis
Design
User object modelling
33
U s
e r
P a
r t
i ci p
a t
i o n
human computer interaction 2014, fjv
Systems Analysis ~ HCI
Systems Analysis
• Identifies entities of
significance to system
• Functionally oriented,
data driven
• Design notation:
to be understood by
systems analysts
– Dataflow diagrams
– Entity relation diagrams
– Resistance by future users
HCI perspective
• Identifies issues of practical effectiveness
• Usability oriented,user driven
• Design notation:to be understood by users
– Task diagrams
– Scenarios
– Screen sketch
– Prototype
34human computer interaction 2014, fjv
Interaction Design
= Designing interactive products to support people in their everyday and working lives.
• Design vs. software engineering?
– architects vs. civil engineers
• Concerned with designing good interface (cf. chap .14)
– what is “good”? take into account
• where will it be used?
• who will use it?(what are they good at, what do they do now, what do they want, use “tried and tested techniques, etc.)
– prototyping
– evaluation: user centered!
– usability testing
35human computer interaction 2014, fjv
Two Crucial Errors
• Assume all users are alike– User Centered means that we accept that people
differ in cultural background, physical ability, etc …
• Assume all users are like the designer– Also consider the discrepancy in engineering and
designing
Therefore:
• User in center of development
human computer interaction 2014, fjv 36
Review #8a
• Software lifecycle
• Effort spend on design
• HCI lifecycle
– Waterfall,
– Spiral,
– Star Model
• Perspective for HCI: User Centered design
– User analysis, Task analysis
– Prototyping, Dialog analysis
– Evaluation, Usability testing
human computer interaction 2014, fjv 37
human computer interaction 2014, fjv 38
USER DRIVEN SYSTEMS
ANALYSIS
Including the user in the development loop
39human computer interaction 2014, fjv
Design & Analysis
• Design– process of developing artefacts (lecture 9,10)
– various representations of artefacts during design
– achieving goals with constraints
• For design analysis is required
• Analysis
– Bring about the key issues of artifact
– User involvement
– Use Personas, Scenarios, Storyboarding
– Look broad: Stakeholders
40human computer interaction 2014, fjv
Design
• Conceptual Design
• Physical Design
– Operational design
– Representational design
– Interaction design
• Envisionment
• Evaluation (typically the Star Model)
• Implementation
human computer interaction 2014, fjv 41
Conceptual Design
• Considering Information and Functions
• Making abstractions
• What do we expect from the user
• Communication of Conceptualization =
– Mental Model
– Metaphoric concepts
• Modeling
human computer interaction 2014, fjv 42
Physical Design
• How is it going to work
• Can lead to a detailed look and feel
• Structuring interaction
– Logical sequences
– Allocation of functions
– Requirements for Software and Hardware
– Tasking activities
• 3 sub components
human computer interaction 2014, fjv 43
Physical Design Components
• Operational design
– How everything works
– How everything is structured/stored
• Representational design
– Shapes, Icons, Colors; Style Aestatics
– Information layout
• Interaction design
– Allocation of function to Human/Technology
– Structuring
• Relates to Envisionment human computer interaction 2014, fjv 44
Interaction Design
• Interaction design concerned with :• allocation of functions to human agency or to
technology• the structuring and sequencing of interactions.
• Allocation of functions has a significant impact on how easy and enjoyable a system is to use.
• Designers create tasks for people by the way they allocate functions
human computer interaction 2014, fjv 45
Interactive System Development
46
User:
Domain expert
User
Interaction
developer
User Interface
software
developer
Interaction design
human computer interaction 2014, fjv
Stakeholders
• Anyone affected by success/failure of system.
– Primary stakeholders
• End users
– Secondary stakeholders
• Input/output related; do not use system, get output …
– Tertiary stakeholders
• Management level, i.e. directly affected
• Customers
• Competitors
– Facilitating
• Design, development, maintenance
47human computer interaction 2014, fjv
MODEL USER: THE PERSONA
48human computer interaction 2014, fjv
Persona’s
• “Hypothetical Archetypes”
– Archetype:
• An original model or type after which other similar
things are patterned; a prototype
• An ideal example of a type; quintessence
• A precise description of a user and what they
want to accomplish
– Imaginary, but precise
– Specific, but stereotyped
• Real people have non-representative quirks
49human computer interaction 2014, fjv
Persona’s in Essence
• Describe a person in terms of their:
– goals in life (relating to a project)
– capabilities, inclinations, and background
• People have a “visceral” ability to generalize
about real and fictional people
– detailed discussions about what e.g. James Bond,
will think or do.
– not 100% accurate, but it feels natural to think
about people this way
50human computer interaction 2014, fjv
Motivation for Persona’s
• A compromise design pleases no-one
– The broader you aim, the more likely to miss the bulls-eye
– “Every time you extend functionality to include another
constituency, you put another speed bump of features and
controls across every other user’s road.”
• There is no such thing as an average user
– Avoid “elastic user”
• unspecific description tends to suit the design needs of the
moment
– Persona helps to prevent designer and/or programmer
from imagining they are the user
51human computer interaction 2014, fjv
Persona’s
52
Tom Jos Henk Toos (aka Ingrid)
Design Team, Evaluation Team
human computer interaction 2014, fjv
Example Persona
53
Ingrid is 37 years old, She has been Warehouse Manager for five years and
worked for Simpkins Brothers Engineering for twelve years. She didn’t go to
university, but has studied in her evenings for a business diploma. She has
two children aged 15 and 7 and does not like to work late. She did part of an
introductory in-house computer course some years ago, but it was
interrupted when she was promoted and could no longer afford to take the
time. Her vision is perfect, but her right-hand movement is slightly restricted
following an industrial accident 3 years ago. She is enthusiastic about her
work and is happy to delegate responsibility and take suggestions from her
staff. However, she does feel threatened by the introduction of yet another
new computer system (the third in her time at SBE).
human computer interaction 2014, fjv
MODEL OF SYSTEMS USE:
SCENARIO
54human computer interaction 2014, fjv
Scenario
• Definition: informal narrative description
describing human activities/tasks
• With respect to requirements and context a
scenario allows:
– Exploration
– Discussion
• Can be understood by all stakeholders
55human computer interaction 2014, fjv
Scenario's
• Scenario's are stories of rich design
– Simples design representation
– Flexible
– Powerful
– Short Scenarios: single situation
– Descriptive for whole interaction
• Force think about design in detail
– Notice potential problems
– Conflicts
56human computer interaction 2014, fjv
Scenarios in Systems Analysis
• Adding detail
– What does the user want
– What is the user intending with this particular
action in relation to this aims
– What is the system doing now
– How should a system respond
– Is the ideal response part of out design
– Are all tasks accounted for
57human computer interaction 2014, fjv
Using Scenario's
• Communicate with others
– designers, clients, users
– Prevent misunderstanding / mismatching
• Validate other models
– Use scenario in formal approaches
• Express dynamics
– Introduce behaviour of the system
• Scenarios are linear (and so is time)
– Single path in the system
– Often there are more routes! Explore this
58human computer interaction 2014, fjv
Scenario – movie player
59
Brian would like to see the new film “Moments of Significance” and wants to invite
Alison, but he knows she doesn’t like “arty” films. He decides to take a look at it to
see if she would like it and so connects to one of the movie sharing networks. He
uses his work machine as it has a higher bandwidth connection, but feels a bit guilty.
He knows he will be getting an illegal copy of the film, but decides it is OK as he is
intending to go to the cinema to watch it. After it downloads to his machine he takes
out his new personal movie player. He presses the ‘menu’ button and on the small
LCD screen he scrolls using the arrow keys to ‘bluetooth connect’ and presses the
select button. On his computer the movie download program now has an icon
showing that it has recognized a compatible device and he drags the icon of the film
over the icon for the player. On the player the LCD screen says “downloading now”, a
percent done indicator and small whirling icon. … … …
human computer interaction 2014, fjv
Scenario – movie player
60
Brian would like to see the new film “Moments of Significance” and wants to invite
Alison, but he knows she doesn’t like “arty” films. He decides to take a look at it to
see if she would like it and so connects to one of the movie sharing networks. He
uses his work machine as it has a higher bandwidth connection, but feels a bit guilty.
He knows he will be getting an illegal copy of the film, but decides it is OK as he is
intending to go to the cinema to watch it. After it downloads to his machine he takes
out his new personal movie player. He presses the ‘menu’ button and on the small
LCD screen he scrolls using the arrow keys to ‘bluetooth connect’ and presses the
select button. On his computer the movie download program now has an icon
showing that it has recognized a compatible device and he drags the icon of the film
over the icon for the player. On the player the LCD screen says “downloading now”, a
percent done indicator and small whirling icon. … … …
human computer interaction 2014, fjv
Scenarios: Text – Video based
• Example, uni.me
• Question:
“What if a mobile phone could provide easily
glance-able information of people’s availability? “
• Designed in 2006 Ana Camila Pinho Amorim
• uni.me,
a new mobile communication
service centered on people’s
availability”
human computer interaction 2014, fjv 61
Scenario in uni.me mobile system
human computer interaction 2014, fjv 62
Types of Scenarios (4 types)
• Stories– Real world experiences, ideas, anecdotes
– Capture snippets of activities
• Conceptual Scenarios– Abstraction, to understand design/requirements
– Stories with context stripped away
• Concrete Scenarios– From a conceptual scenario
– Onset of interface design; Function allocation
• Use cases– Reports about use of the system and interaction
– Different context
– Specification of functional design.
human computer interaction 2014, fjv 63
PROBLEM STATEMENT
Make sure we can get concrete ...
64human computer interaction 2014, fjv
What is it all about really!
65human computer interaction 2014, fjv
Problem Statement
• Human activity: what activity is supported
• Users
• Level of support to be provided
• Form of solution
• Statement of overall goal of whole system in a
single phrase or sentence
– Aim: show clear understanding of what is needed
– Main assumptions should be separately stated
– System evolves from problem statement
66human computer interaction 2014, fjv
Problem Statement Example
Design a cashing register that can be used in the student faculty bar (aka foo-bar), inexpensive, maintainable, easy to learn, wet environment
• Supported activity– Cashing, Accounting, …
• Users– Students that work in the bar
• Level of support to be provided– Register Payments
– Register Accounts for Events: operation(s)
• Add, Modify, Delete, View, Send accounts
– Connect with the mp3-player system
• Form of solution– PC based, Touch screen, not too expensive
67human computer interaction 2014, fjv
User Analysis (1)
• What is the level of expertise
– Novice
– Intermittent
– Frequent
• What is the familiarity with specific hardware
and software
• What is the software they are familiar with
– Operating system
– Should they be exposed to the OS?
68human computer interaction 2014, fjv
User Analysis (2)
• What is the job-related information access
requirement
– Detailed information ~ Summaries
• What are the computing skills of users
– Typing, Texting
• What is the general educational level
• On the level of the organization:
– Users’ knowledge of the organization
– Users’ experience in the organization
69human computer interaction 2014, fjv
User Analysis Example
Bar Cash Register System
• User characteristics
– University Students in Math, CS, Physics, Astronomy
– Reasonable calculus skills
– No complete knowledge of everything offered.
– Only once in a while when they operate the bar
• Skills
– High general skill level
– (often) Very computer skilled
– Not all will have great keyboard skills
• Conclusions
– Keep it simple
– Functionality and usability greater than classical cashing register
– Minimize typing, and be quick and easy to learn (retention)
70human computer interaction 2014, fjv
• HCI project (rietveld-waaijer)
• Software on Mac, Touch screen based
– Interviews with users
– Observational studies flow & Task analysis
Cash-Register Example - Solution
human computer interaction 2014, fjv
Form of Solution: Touch screenFoobar Leiden
71
Register Foobar : FooCash
human computer interaction 2014, fjv 72
human computer interaction 2014, fjv 73
human computer interaction 2014, fjv 74
human computer interaction 2014, fjv 75
Data gathering: Conventional + HCI
• Read background material
• Guided tour of work environment
• Interviews
• Observation
• Questionnaires
• Forms analysis
• Verbal protocol
• Tape / Video recording / Transcript
76human computer interaction 2014, fjv
Verbal Protocol - Video Recording
77human computer interaction 2014, fjv
ANALYSIS FOR
USER CENTERED DESIGN
human computer interaction 2014, fjv 78
The PACT system
• People
– Physical characteristics; Psychological differences
• Activities
– Temporal aspects
– Cooperative complexity
• Context
– Physical, social, organizational
• Technologies
– What i/o devices for communication/content
human computer interaction 2014, fjv 79
PACT
• Helps to understand the system
• From the design point of view
• Questions
– What people will use a system
– What activities people want to undertake
– What is the context of these activities
– What interactive technology
• Answers
– Make a relation between Activity and Technology
human computer interaction 2014, fjv 80
STANDARDS & GUIDELINES
Spetember 29, 2014
81human computer interaction 2014, fjv
What are Standards?
• Standards:– Proclaimed and introduced by international
bodies
– Ensure compliance by large designers community
– Require sound underlying theory &slowly changing technology
– Hardware (common), Software
• HCI: ISO 9241 standard on Usability– usability is defined as effectiveness, efficiency and
satisfaction with which users accomplish tasks
82human computer interaction 2014, fjv
Guidelines
• More suggestive and general
• Many textbooks and reports full of guidelines
• Principles:
– abstract guidelines
– applicable during early life cycle activities
• Style Guides:
– detailed guidelines
– applicable during later life cycle activities
• Acceptance guidelines:
– helps in finding a solution or resolving conflicts
– “Let us do it by the book …”
83human computer interaction 2014, fjv
Golden rules and heuristics
• “Broad brush” design rules
• Useful check list for good design
• Better design using these than using nothing!
• Different collections e.g.
– Shneiderman’s 8 Golden Rules
– Norman’s 7 Principles
– Nielsen’s 10 Heuristics (usability related)
84human computer interaction 2014, fjv
Shneiderman’s 8 Golden Rules
1. Strive for consistency
2. Enable frequent users to use shortcuts
3. Offer informative feedback
4. Design dialogs to yield closure
5. Offer error prevention and simple error handling
6. Permit easy reversal of actions
7. Support internal locus of control
8. Reduce short-term memory load
85human computer interaction 2014, fjv
Norman’s 7 Principles
1. Use both knowledge in the world
and knowledge in the head.
2. Simplify the structure of tasks.
3. Make things visible:
bridge the gulfs of Execution and Evaluation.
4. Get the mappings right.
5. Exploit the power of constraints,
both natural and artificial.
6. Design for error.
7. When all else fails, standardize.
86human computer interaction 2014, fjv
Review #8b
• Stakeholders
• Persona & Scenario
• Problem statement
• User analysis
• Introduction to PACT
• Design Guidelines
• To Do
– Systems for Abstraction/Analysis
– Task analysis, Cognitive analysis, Dialogue analysis
human computer interaction 2014, fjv 87
Human – (Computer*Computer)
human computer interaction 2014, fjv 88