Post on 19-Dec-2015
1
The Design Process
Lecture 10Date: 2nd March
2
Overview
•4 basic activities in HCI
•Requirements
•Design
•Develop
•Evaluation
3
Design Model
Design Model
Requirements
Design
Build/DevelopPrototyping
Evaluate
4
Prototypes
In other design fields a prototype is a small-scale model:
a miniature cara miniature building or town
Prototyping
5
“Users can’t tell you what they want, but when they see something and use it, they soon know what they don’t want” (Preece)
A prototype is an invaluable design tool for testing ideas, clarifying requirements and initiating user input and feedback
Core component of iterative design
Prototypes
Prototyping
6
In HCI design it can be (among other things):
a series of screen sketchesa storyboard, i.e. a cartoon-like series of scenes a Powerpoint slide showa video simulating the use of a systema lump of wood (e.g. PalmPilot)a cardboard mock-upa piece of software with limited functionality written in the target language or in another language
What is a Prototype?
Prototyping
7
•Evaluation and feedback are central to interaction design
•Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing
•Team members can communicate effectively
•You can test out ideas for yourself
•It encourages reflection: very important aspect of design
•Prototypes answer questions, and support designers in choosing between alternatives
Why Prototype?
Prototyping
8
•Technical issues
•Work flow, task design
•Screen layouts and information display
•Difficult, controversial, critical areas
What to Prototype?
Prototyping
9
Fidelity refers to the level of detail:•Low Fidelity
•Storyboards•Wizard of Oz
•Medium Fidelity
•High Fidelity•Software tools for prototyping
Types of Prototype
Prototyping
10
•Uses a medium which is unlike the final medium, e.g. paper, cardboard
•Is quick, cheap and easily changed
•Examples:sketches of screens, task sequences, etc‘Post-it’ notesstoryboards‘Wizard-of-Oz’
Low Fidelity Prototypes
Prototyping
11
•Often used with scenarios, bringing more detail
•It is a series of sketches showing how a user might progress through a task using the device
•Used early in design
Storyboards
Prototyping
12
•
Storyboards
Prototyping
13
•
Storyboards
Prototyping
14
•
Storyboards
Prototyping
15
•The user thinks they are interacting with a computer, but a developer is responding to output rather than the system. •Usually done early in design to understand users’ expectations
>Blurb blurb>Do this>Why?
UserUser
Wizard of Oz Prototyping
Prototyping
WizardWizard
16
Human ‘wizard’ simulates system response interprets user input according to an algorithm controls computer to simulate appropriate output uses real or mock interface wizard sometimes visible, sometimes hidden
“pay no attention to the man behind the curtain!”
Useful for:Useful for:adding simulated and complex vertical functionalitytesting futuristic ideas
Wizard of Oz Prototyping
Prototyping
17
IBM: an imperfect listening typewriter using continuous speech recognition
Secretary trained to:- understand key words as “commands”
- to type responses on screen as the system would
manipulating graphic images through gesture and speech
Intelligent Agents / Programming by demonstration Person trained to mimic “learning agent”
- user provides examples of task they are trying to do
- computer learns from them
Shows how people specify their tasks
In both cases, system very hard to implement, even harder to change!
Wizard of Oz Prototyping - Examples
Prototyping
18
Prototyping with a computerPrototyping with a computer•simulate some but not all features of the interface•engaging for end users
PurposePurpose•provides sophisticated but limited scenario for the user to try•can test more subtle design issues
DangersDangers•user’s reactions often “in the small”•users reluctant to challenge designer•Users reluctant to touch the design•management may think its real!
Medium Fidelity Prototyping
Prototyping
19
•Uses materials that you would expect to be in the final
product.
•Prototype looks more like the final system than a low-
fidelity version.
•For a high-fidelity software prototype common
environments include Macromedia Director, Visual Basic,
and Smalltalk.
•Danger that users think they have a full system…….
High Fidelity Prototyping
Prototyping
20
•High fidelity prototypes usually used for physical design
•Physical design considers more concrete, detailed issues of designing the interface: screens, menus, icons,
•Guidelines for physical design. Examples:
Nielsen’s usability guidelines
Styles guides: commercial, corporate
decide ‘look and feel’ for you
widgets prescribed, e.g. icons, toolbar
Physical Design & High Fidelity Prototyping
Prototyping
21
•By nature, prototype cannot as functional as end system -> compromise•For software-based prototyping maybe there is a slow response? sketchy icons? limited functionality? •Two common types of compromise
• ‘horizontal’: provide a wide range of functions, but with little detail• ‘vertical’: provide a lot of detail for only a few functions
Compromises in Prototyping
Prototyping
22
•Horizontal prototype – shows user interface but has
limited functionality behind the buttons/controls. No
database links included.
•Vertical prototype – contains all of the high level and low
level functionality of particular areas in the system
Horizontal vs. Vertical Prototyping
Prototyping
23
•Requirements Animation – functional requirementsare demonstrated in a s/w prototype
•Throw-away prototyping– similar to requirements animation.. and prototype is not developed into the final product
•Evolutionary prototyping – prototype is not discarded and is used as the basis for the next iteration of design. I.e. system “evolves” from prototype
•Incremental prototyping – final product is build as separate components, one at a time – allows large systems to be installed in phases to avoid delays between specification and delay
Prototyping Methods
Prototyping
24
Prototype method Description Useful tool
Requirements animation Allows possible requirements to be demonstrated in a prototype which can then be assessed by users
Screen painters are suitable for animating the representational aspects. Data manipulation and other high-level languages are suitable for animating the functional aspects. Authoring languages, menu builders and active images tools prototype operational aspects
Rapid (throw-it-away) prototyping
Aims to collect information on requirements and the adequacy of possible designs. Recognises that requirements are likely to be inaccurate when first specified. the emphasis is on evaluating the prototype before discarding it in favour of some other implementation
Representational requirements and designs can be quickly created using screen painters, forms systems, report generators and menu systems. Hypermedia and VHLL systems are also particularly suitable
Evolutionary prototyping compromise between production and prototyping. The system can cope with change during and after development. Helps overcome the traditional gap between specification and implementation
It is important to prototype using the facilities that will eventually be used to implement the final system. Additions and amendments are made to the model following evaluation and the system is regenerated
Incremental prototyping the system is built incrementally, one section at a time. Incremental prototyping is based on one over all design.
Re-usable software and highly modular languages can be useful as more pieces are ‘bolted on’ to gradually produce the final system.
25
Prototyping and Design
•Prototyping is useful at different stages of design:
Productconceptualisation
Task level
Screen Design
Prototyping
26
•Product conceptualisation – prototype used in earlystages of product development to gain a better understanding of the kind of product required
•Task Analysis – during requirements analysis, useprototype to clarify exactly how certain tasks will be accomplished. Critical for systems such as process controlfault diagnosis (e.g. MoD in U.K requires an executableprototype from the functional specs for all s/w projects
•Screen Design – verifying the details of screen design – icons, menus, screen layouts, use of colour, visual and audio effects, grouping of menu commands
Prototyping and Design
Prototyping
27
Prototyping S/w Tools
Need to choose the right software tools for the prototype:
What prototyping method? - will prototype be thrown away? Evolutionary? etc
What is the purpose?
- product conceptualisation? Screen design?
Who will be developing it?
- how much programming skill required?
Prototyping
28
Production tools
(that can be usedfor prototyping too)
Prototypingtools
Specifically used for prototyping
Prototyping S/w Tools
Prototyping
29
Production tools:
Produces re-usable software
X Constraints of producing quality s/w not necessarily compatible with prototyping
X Code management over head can slow production
X Higher costs of producing prototype
X Requires development skills -
Prototyping S/w Tools
Prototyping
30
Prototyping specific tools
Faster
Can be used by non technical staff
X Must be throw-away
X May not look exactly like future system
X May limit what can be configured
Prototyping S/w Tools
Prototyping
31
Prototyping specific tools
RAPID
MacroMind Director
HyperCard
Visual basic (can be used as part of productionsystem)
Examples of Prototyping S/w Tools
Prototyping
32
• Visual Basic for prototyping– The “Tools” menu contains the set of
Visual Basic tool that can be used to quickly build a user interface
– For example, the programmer can bring up the “Menu Editor” to design pull down and cascading menus for the user interface
– Developer can distribute executable for review
Prototyping S/w Tools
Prototyping
33
Menu Editor in Menu Editor in Visual BasicVisual Basic
34
Prototyping – Management Issues
Time – takes time to develop, particularly for throw-away prototypes
Planning – many PMs do not have experience required to plan and cost a design process with prototyping
Non-functional features e.g. safety and reliability not included
Contracts – difficult to manage prototyping activities via a contract
Prototyping
35
Design Model
Design Model
Requirements
Design
Build/Develop
EvaluateEvaluation Paradigms
36
Evaluation
2 types of evaluation•Formative evaluation is done at different stages of development to check that the product meets users’ needs.
•Summative evaluation assesses the quality of a finished product.
Our focus is on formative evaluation
Evaluation Issues
37
Evaluation
What to evaluate:Iterative design & evaluation is a continuous process that examines:
•Early ideas for conceptual model •Early prototypes of the new system•Later, more complete prototypes
Designers need to check that they understand users’ requirements.
Evaluation Issues
38
Evaluation
When to evaluate:•Throughout design•From the first descriptions, sketches etc. of users needs through to the final product•Design proceeds through iterative cycles of ‘design-test-redesign’
•Evaluation is a key ingredient for a successful design.
Evaluation Issues
39
Evaluation
•Evaluation
•Evaluation paradigms
•Expert reviews
•Usability testing
•Survey instruments
•Acceptance testing
Evaluation Issues
40
Expert Reviews
Evaluation Issues
• Formal expert reviews have proven to be effective
• Expert reviews range from a half day to one week, although a lengthy training period may be required
• Expert review methods: • Heuristic evaluation • Guidelines review • Consistency inspection • Cognitive walkthrough • Formal usability inspection
41
Expert Reviews
Evaluation Issues
• Can be scheduled at several points in the development process
• Different experts tend to find different problems in an interface, so 3-5 expert reviewers can be highly productive
• Experts may not have an adequate understanding of the task domain or user communities.
• Experienced expert reviewers can have difficulty knowing how first-time users will behave
42
Usability Testing
•Usability testing involves measuring typical users’ performance on tasks that are typical of those for which the system was designed
•Performance is generally measured in terms of number of errors and time to complete the task
•Forms of usability testing:•Paper mockups•Discount usability testing•Competitive usability testing•Universal usability testing•Field test and portable labs•Remote usability testing•Can-you-break-this tests
Evaluation Issues
43
Survey Instruments•Written user surveys are a familiar, inexpensive companion for usability tests and expert reviews.
•Keys to successful surveys•Clear goals in advance•Development of focused items that help attain the goals.
•Online surveys avoid the cost of printing and the extra effort needed for distribution and collection of paper forms.
•Many people prefer to answer a brief survey displayed on a screen, instead of filling in and returning a printed form.
Evaluation Issues
44
Survey Instruments•Goals would be to ascertain
•users background (age, gender, origins, education, income)
•experience with computers (specific applications or software packages, length of time, depth of knowledge)
•job responsibilities (decision-making influence, managerial roles, motivation)
•personality style (introvert vs. extrovert, risk taking vs. risk aversive, early vs. late adopter, systematic vs. opportunistic)
•reasons for not using an interface (inadequate services, too complex, too slow)
•familiarity with features (printing, macros, shortcuts, tutorials)
•their feeling state after using an interface (confused vs. clear, frustrated vs. in-control, bored vs. excited).
Evaluation Issues
45
Acceptance Tests
•For large implementation projects, the customer usually sets objective and measurable goals for hardware and software performance e.g.
•Time to learn specific functions •Speed of task performance •Rate of errors by users •Human retention of commands over time •Subjective user satisfaction
•If the completed product fails to meet these acceptance criteria, the system must be reworked until success is demonstrated.
Evaluation Issues
46
Articulate:•who users are•their key tasks
User and task descriptions
Requirement:
Design:
Build:
Brainstorm designs
Participatory design
User-centered design
Evaluatetasks
User involvement
Representation & metaphors
low fidelity prototyping methods
Throw-away paper prototypes
Participatory interaction
Task scenario walk-through
Refined designs
Graphical screen design
Interface guidelines
Style guides
high fidelity prototyping methods
Testable prototypes
Usability testing
Heuristic evaluation
Completed designs
Alpha/beta systems or complete specification
Field testing
Interface Design and Usability Engineering
Evaluation:
47
Summary of Lecture• Lifecycle models
• Software engineering lifecycle models
• HCI lifecycle models • Usability Engineering Lifecycle Model
• Star Lifecycle Model
• HCI design models• Requirements
• Design• User-centred design
• Develop/Build• Prototyping
• Evaluation• Evaluation paradigms
48
Terms of Reference• Preece, J. et al. (2002) Interaction Design
• Shneiderman, B. & Plaisant, C. (2005) Designing the User Interface
• Benyon, D. et al (2005) Designing Interactive Systems
• Helander, M. et al (1997) Handbook of Human-Computer Interaction
• Hartson, R. & Hix, D. (1989) Towards Empirically Derived Methodologies and Tools for HCI Development
• Mayhew, D. (1995) The Usability Engineering Lifecycle
• Alan Dix et al (1993) Human Computer Interaction
References