prototyping universidad de costa rica posgrado en computación e informática diseño de interfaz...
Post on 31-Dec-2015
215 Views
Preview:
TRANSCRIPT
Prototyping
Universidad de Costa RicaPosgrado en Computación e
InformáticaDiseño de interfaz humano-
computador
2
“In engineering, and error, not the planning of flawless intellects, has brought most advances; this is why engineers build prototypes.”
Eric Drexler
3
Overview • User centered system design and
participatory design
• Prototyping and construction
• Conceptual design
• Physical design
• Generating prototypes
• Tool support
5
User Centered System Design
• What can I easily build on this platform?
• What can I create from the available tools?
• What do I as a programmer find interesting?
Typical approach: System Centered Design
6
User Centered System Design
• Design is based upon a user’s– abilities and real needs – context– work– tasks– need for usable and useful product
• Golden rule of interface design: Know The User
7
User Centered System Design
•... is based on understanding the domain of work or play in which people are engaged and in which they interact with computers…
From Denning and Dargan, p111 in Winograd, Ed., Bringing Design to Software, Addison Wesley
Denning and Dargan, 1996
8
User Centered System Design
• Assumptions– The process of design is a collaboration
between designers and customers. • The design evolves and adapts to their changing
concerns.• The process produces a specification as an
important byproduct.
9
User Centered System Design
• Assumptions– The customer and designer are in
constant communication during the entire process.
– The result of a good design is a satisfied customer.
10
Participatory Design
• Problem– Intuitions wrong– Interviews and other communications not
precise– Designer cannot know the user
sufficiently well to answer all issues that come up during the design
The user
is just
like me
11
Participatory Design
• Solution– Designers should have access to
representative users• END users, not their managers or union reps!
12
Participatory Design
• Users are 1st class members in the design process.– Active collaborators vs passive
participants
• Users considered subjectmatter experts.– Know all about the work
context.
13
Participatory Design
• Iterative process– All design stages subject to revision
Design
Prototype
Evaluate
14
Participatory Design
• Up side– Users are excellent at reacting to suggested
system designs.• Designs must be concrete and visible.
– Users bring in important “folk” knowledge of work context.• Knowledge may be otherwise inaccessible to
design team.
– Greater buy-in for the system often results.
15
Participatory Design
• Down side– It is hard to get a good pool of end users.
• Expensive, reluctance ...
– Users are not expert designers.• Don’t expect them to come up with design
ideas from scratch.
– The user is not always right• Don’t expect them to know what they want.
16
Participatory Design Methods for involving the user
• At the very least, talk to users– Surprising how many designers don’t!
• Contextual interviews + site visits– Interview users in their workplace, as
they are doing their job– Discover user’s culture,
requirements, expectations,…
17
Participatory Design Methods for involving the user
• Explain designs– Describe what you’re going to do.– Get input at all design stages .
• All designs subject to revision
18
Participatory Design Methods for involving the user
• Important to have visuals and/or demos– People react far differently with verbal
explanations.– This is why prototypes are critical.
19
Prototyping and construction
• What is a prototype? • Why prototype?• Different kinds of prototyping
low fidelityhigh fidelity
• Compromises in prototypingvertical horizontal
• Construction
20
What is a prototype?
In other design fields a prototype is a small-scale model:
• a miniature car• a miniature building or town
21
What is a prototype?
In interaction design it can be (among other things):• a series of screen sketches• a storyboard, i.e. a cartoon-like series of scenes • a Powerpoint slide show• a video simulating the use of a system• a lump of wood (e.g. PalmPilot)• a cardboard mock-up• a piece of software with limited functionality written in
the target language or in another language
22
Why prototype?
• 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 .
23
What to prototype?
• Technical issues
• Work flow, task design
• Screen layouts and information display
• Difficult, controversial, critical areas
24
Low-fidelity Prototyping
• 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, others‘Post-it’ notesStoryboards‘Wizard-of-Oz’
25
Sketching
• Sketching is important to low-fidelity prototyping.
• Don’t be inhibited about drawing ability. Practice simple symbols.
26
Sketching
• It is drawing of the outward appearance of the intended system.
• Crudity means people concentrate on high level concepts.– But hard to envision a
dialog’s progression
27
Sketching - Attributes• Quick
– to make• Timely
– provided when needed• Disposable
– investment in the concept, not the execution
• Plentiful – they make sense in a
collection or series of ideas• Clear vocabulary
– rendering & style indicates it’s a sketch, not an implementation
• Constrained resolution– doesn’t inhibit concept
exploration• Consistency with state
– refinement of rendering matches the actual state of development of the concept
• Suggest & explore rather than confirm– value lies in suggesting
and provoking what could be i.e., they are the catalyst to conversation and interaction
28
Card-based prototypes
• Index cards (3 X 5 inches) • Each card represents one screen or part of
screen• Often used in website development
29
Storyboards
• Users can evaluate quickly the direction the interface is heading.
• Are often used with scenarios, bringing more detail, and a chance to role play.
• A storyboard is a series of sketches showing how a user might progress through a task using the device.•It is used early in design.
31
Tutorials as Storyboards
• A step by step storyboard walkthrough with detailed explanations– Written in advance of the system
implementation
• Also an interface specification for programmers
Apple’s Tutorial Guide to the Macintosh Finder
32
High-fidelity prototyping• 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…….see compromises
33
High-fidelity prototyping
• Purpose– Provides sophisticated but limited scenario for
the user to try– Can test more subtle design issues
• Dangers– Users reluctant to challenge designer– Users reluctant to touch the design– Management may think its real!
34
High-fidelity prototyping
• Prototyping with a computer– simulate some but not all features of the
interface• engaging for end users
• “Wizard of Oz”
• Scripted simulations
35
‘Wizard-of-Oz’ prototyping• The user thinks she is interacting with a computer,
but a person is responding to output rather than the system. •Usually done early in design to understand users’ expectations
>Blurb blurb>Do this>Why?
User
36
‘Wizard-of-Oz’ prototyping
• Human ‘wizard’ simulates system response– Interprets user input according to an algorithm.– Controls computer to simulate appropriate output.– Uses real or mock interface.– Wizard is sometimes visible, sometimes hidden.
• “Pay no attention to the man behind the curtain!”
• Good for:– Adding simulated and complex vertical functionality– Testing futuristic ideas
39
Compromises in prototyping
•All prototypes involve compromises.•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 prototypes mustn’t be ignored. Product needs engineering
40
Control panel for pump 2
coolant flow 45 %
retardant 20%
speed 100%
Shut Down
Scripted simulations
• Create storyboard with media tools– Scene transition activated by simple user inputs– A simple vertical prototype
• User given a very tight script/task to follow– Appears to behave as a
real system– Script deviations blow
the simulation
Control panel for pump 2
coolant flow 0 %
retardant 20%
speed 100%
DANGER!
Shut Down
45
Conceptual design: from requirements to design
• Transform user requirements/needs into a conceptual model. •“A description of the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended”
• Don’t move to a solution too quickly. •Iterate, iterate, iterate.
• Consider alternatives.•prototyping helps.
46
Is there a suitable metaphor?
• Interface metaphors combine familiar knowledge with new knowledge. •In a way that will help the user understand the product
• Three steps: •Understand functionality.•Identify potential problem areas. •Generate metaphors.
47
Is there a suitable metaphor?
• Evaluate metaphors:– How much structure does it provide?– How much is relevant to the problem?– Is it easy to represent?– Will the audience understand it?– How extensible is it?
48
Considering interaction types
• Which interaction type?How the user invokes actions
InstructingConversingManipulatingExploring
• Do different interface types provide insight?WIMP, shareable, augmented reality, others
49
Expanding the conceptual model
•What functions will the product perform?
What will the product do and what will the human do (task allocation)?
•How are the functions related to each other?
Sequential or parallel?Categorisations,
•e.g. all actions related to telephone memory storage
50
• What information needs to be available?
• What data is required to perform the task? • How is this data to be transformed by the
system?
Expanding the conceptual model
51
Using scenarios in conceptual design
• Express proposed or imagined situations
• Used throughout design in various ways
•Scripts for user evaluation of prototypes
•Concrete examples of tasks
•As a means of co-operation across professional boundaries
55
Limiting prototype functionality• Vertical prototypes
– Include in-depth functionality for only a few selected features.– Common design ideas can be tested in depth.
• Horizontal prototypes– The entire surface interface with no underlying functionality– A simulation
• No real work can be performed
• Scenario– Scripts of particular fixed uses
of the system• No deviation allowed
Vertical prototype
Scenario
Horizontal prototype
Full interface
56
Summary• Different kinds of prototyping are used for different
purposes and at different stages
• Prototypes answer questions, so prototype appropriately
• Construction: the final product must be engineered appropriately
• Conceptual design (the first step of design)
• Consider interaction types and interface types to prompt creativity
• Storyboards can be generated from scenarios• Card-based prototypes can be generated from use cases
top related