Design, Prototyping and Construction

Design, prototyping and
construction
A model for interaction design
Identify needs/
establish
requirements
(Re)Design
Evaluate
Build an
interactive
version
Final product
What is User-Centered Design?
• An approach to UI development and system
development.
• Focuses on understanding:
– Users, and
– Their goals and tasks, and
– The environment (physical, organizational,
social)
• Pay attention to these throughout
development
What is a prototype?
• What do you think of when you hear
“prototype”?
• What kinds of prototypes have you
seen anywhere?
– in other fields or disciplines?
– on television?
• What are they “for”?
What is a prototype?
• In other design fields a prototype is a
small-scale model:
a miniature car
a miniature building or town
• Exists for some purpose
– Show the “concept” to some stakeholders
– Get feedback about some aspect
– Test somehow
• E.g. a wing in a wind-tunnel
Prototyping and Software
• Do software companies do this?
– Sometimes do it well
– But sometimes the prototype is…
Version 1.0!
• Constantine and Lockwood:

“Software is the only engineering field that
throws together prototypes and then
attempts to sell them as delivered goods.”
What is a prototype for
us?
In HCI / 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 cardboard mock-up
a piece of software with limited functionality
written in the target language or in another
language
Why prototype in
general?
• Evaluation and feedback are central to interaction
design
• Developers can test feasibility of ideas with team, users
• Stakeholders can see, hold, interact with a prototype
more easily than a document or a drawing
• Team members and users can communicate effectively
• To validate existing / other requirements
• It encourages reflection: very important aspect of
design
• Prototypes answer questions, and support designers in
choosing between alternatives
What to Prototype and Why
• Prototyping reduces uncertainty
– It can be a major tool for risk management
– Apply on whatever you might be uncertain
about!
• Prototyping technical issues

– E.g. run-time issues
• Prototyping to establish requirements
– Users “see” functionality
• Prototyping for usability concerns
– Our concern in this course
When and at What Level
• For SW, you might prototype at

various times in the lifecycle
– Different goals, different techniques
• Conceptual Design
• Interaction Design
• Screen Design
Benefits of Prototyping Early
• Exploration and evaluation of different

design options
• Increase communication among users
and developers
– Rapid feedback on ideas and changes
• Identify problems and issues before
construction (expensive)
Prototyping: Conceptual Design
• Early in development
• Explore high-level issues
– Different conceptual models
– Interaction styles
– User needs and characteristics
– Usability goals
• High-level representations
– Far from final code or GUIs
Prototyping: Interaction Design
• Later in development
• Focus on user work-flows
– Tasks and scenarios you’ve identified
• Might focus at the screen (or page) level.
Possibly like this:
– identify screens, pages, activities
– Organize these in groups
– Define flows or transitions between them
• Involve users in evaluation
• Representations
– Still probably not much like final code or GUIs
Prototyping: Screen Design
• Before development
• Define and refine screens (pages)
– Blue-prints for final physical design
• User evaluation
– Both achieving tasks and navigation, and
other usability criteria (as we’ve studied)
• Representations
– Low-fidelity or high-fidelity prototypes
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, etc
‘Post-it’ notes
storyboards
Sketchin
g
• Sketching is important to low-fidelity
prototyping
• Don’t be inhibited about drawing ability.

Practice simple symbols
• Can use post-its, photo-copied widgets,
etc.
A Paper Sketched Screen
A Sketched Screen Design made of software
Storyboards
• Storyboards are:
– a low fidelity visual representation where
– steps or actions represented by panels,
like a comic book
• Goals are to
– flesh out the scenarios in an interaction
design
– effectively communicate with users or
stakeholders
Storyboard
s
•Often used with scenarios, bringing more
detail, and a chance to role play
•It is a series of sketches showing how a user

might progress through a task using the
device
•Used early in design

An Example of Storyboard
Principles and Variations
• (As usual in HCI) storyboards should be
“real” and “representational” rather than
“abstract” or “complete”
• Used in different ways at different phases
– Early: focus on user tasks, work-flow, context,
etc.
– Later: lo-fi drawing of screens, menus, etc.
• Principles:
– Describe a scenario -- focused on interaction
– Contains explanations, notes, etc.
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
High-fidelity Prototyping
• Benefits
– More realistic
– Closer to final product
• Good for developers and users
– Can collect metrics
• Limitations
– More expensive, less rapid
– Reluctance to change
– See Rettig’s list
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
Possible Problems with
Prototyping
• Pressure to enhance prototype to become
delivered system
– From client
– From management
• Both see code, see almost-working “system”
• Why not use the prototype?
• Prototype built for quick updates, so...
– No design, so hard to maintain
– Ugly code, no error checking
– Wrong environment
And then… Construction
•Taking the prototypes (or learning from
them) and creating a final product
•Quality must be attended to: usability (of
course), reliability, robustness,
maintainability, integrity, portability,
efficiency, etc
•Product must be engineered
Evolutionary prototyping
‘Throw-away’ prototyping

Design, Prototyping and Construction

Uploaded by

Copyright:

Available Formats

Design, Prototyping and Construction

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Design, Prototyping and Construction

Uploaded by

Copyright:

Available Formats

Design, prototyping and

• Constantine and Lockwood:

a Powerpoint slide show

• Prototyping technical issues

• For SW, you might prototype at

• Exploration and evaluation of different

•Is quick, cheap and easily changed

• Don’t be inhibited about drawing ability.

•It is a series of sketches showing how a user

•Used early in design

You might also like