Beruflich Dokumente
Kultur Dokumente
MockupsDr. Kristina
andLapinprototypes
7 paskaita
Interfeiso projektavimas ir panaudojamumo ininerija (Soul Greenberg)
Task
Psychology of Graphical
centered Participatory
everyday screen
system interaction
Evaluate things design Usability Field
design
User Interface testing testing
Methods: Participatory
involvement Task guidelines
design
scenario Style
User- Representation Heuristic
walk- guides
centered & metaphors evaluation
through
design
2016.03.15 #
Prototyping and construction
What is a prototype?
Why prototype?
Different kinds of prototyping
low fidelity
high fidelity
Compromises in prototyping
vertical
horizontal
Construction
2016.03.15 #
What is a prototype?
2016.03.15 #
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
2016.03.15 #
Why?
Prototyping is a strategy
for efciently dealing with things
that are hard to predict
2016.03.15 11:31 7
Why prototype?
To receive user evaluation and feedback
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
Prototypes answer questions, and support
designers in choosing between alternatives
2016.03.15 #
Mock-ups and prototypes
in project life cycle
Details
High fidelity prototypes
Digital mock-ups
Paper mock-ups
Interaction mock-ups
Project timeline
Technical issues
2016.03.15 #
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
Post-it notes
storyboards
Wizard-of-Oz
2016.03.15 #
SANTA CLARA, California: People thought Jeff
Hawkins was crazy when they saw him taking
notes, checking appointments, and
synchronizing a small block of wood with his
PC, pretending all the while that the block
was a handheld computer.
If I wanted to check the calendar I'd take it
out and press the wooden button.
www.id-book.com 13
Paper prototyping
www.id-book.com 14
15
Paper prototyping tips
Keep all your materials in one place!
Small interface widgets tend to get lost or damaged easily
Work quickly and make reusable components
(buttons, etc)
If something is difficult to simulate (progress
indicators, right mouse menus, hyperlinks), have the
user ask if it is available and then verbally describe the
interaction
16
Paper mock-up for home communication
systems
18
Card-based prototypes
2016.03.15 #
Try Prototypes with People
Need a picture
Test multiple
Emphasis on conversation
www.id-book.com 20
Wizard-of-Oz prototyping
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
What is wrong with this approach?
Kramer movie application
http://www.youtube.com/watch?v=uAb3TcSWu7Q
User
>Blurb blurb
>Do this
>Why?
2016.03.15 #
Mock-ups
25
Wireframes
interface layout
http://www.smartdraw.com/software/wirefra
me-software.htm
26
Low-fidelity prototiping
Advantages Disadvantages
Lower development cost Limited error checking
Evaluate multiple-design Poor detailed specification to
concepts code to
Useful-communication device Facilitator driven
Address screen layout issues
Proof-of-concept
2016.03.15 27
Interactive mockups
Active buttons
Essential use cases
Quantity or quality?
Parallel Sequential
Mockup
(Dow, Fortuna, Schwartz, Altringer, Schwartz, Klemmer, 2011)
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 mustnt be ignored.
Product needs engineering
2016.03.15 #
Filtering dimensions of prototyping
2016.03.15 #
Filtering out different aspects of design
2016.03.15 #
Example: Samsung VI660 prototipes
2016.03.15 37
Lim et al. 2008 38
Construction
Taking the prototypes (or learning from
them) and creating a whole
Quality must be attended to: usability (of
course), reliability, robustness,
maintainability, integrity, portability,
efficiency, etc
Product must be engineered
Evolutionary prototyping
Throw-away prototyping
2016.03.15 #
Developing interactive prototypes
2016.03.15 11:31 40
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
Dont move to a solution too quickly. Iterate,
iterate, iterate
Consider alternatives: prototyping helps
2016.03.15 #
Developing the aesthetics in design
Mood boards
a collage of the ideas and inspiration
44
Overview
Prototyping and construction
Conceptual design
Generating prototypes
2016.03.15 #
Using scenarios in conceptual design
2016.03.15 #
Example plus scenario
S. Bdker (1999) 53
Example plus scenario
S. Bdker (1999) 54
Generate storyboard from scenario
2016.03.15 #
Generate card-based prototype from use
case
2016.03.15 #
Overview
Prototyping and construction
Conceptual design
Scenarios in design
2016.03.15 #
Support for design
Patterns for interaction design
individual patterns
pattern languages
pattern libraries
Open source systems and components
2016.03.15 #
Rapid prototyping tools
Balsamiq Mockups
http://www.balsamiq.com/products/mockups 59
Firefox plugin
60
https://addons.mozilla.org/en-US/firefox/addon/pencil/
Prototype Composer
Windows, freeware
http://www.serena.com/products/prototype-composer/index.html
Mockingbird
Internet prototyping tool
https://gomockingbird.com/
62
iPlotz
Limited version - free,
http://iplotz.com/
WireframeSketcher
Eclipse plug-in
http://wireframesketcher.com/
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
2016.03.15 #
High-fidelity prototyping
Advantages Disadvantages
Complex functionality. More expensive to develop
Fully interactive. Time-consuming to create
User-driven. Inefficient for proof-of-concept
Clearly defines navigational designs
scheme Not effective for requirements
Use for exploration and test gathering
Look and fell of final product
Serves as living specification
Marrketing and sales tool
2016.03.15 66
High fidelity prototype
Look and feel of final product
Effective for testing with users
Variety of tools, pavyzdiui:
Axure: MIF kompiuterinse klasse, nemokamas 1 mn.
Justinmind Prototyper, Flinto, UXPin: 30 dien
Invision, Weebly nemokama apribota versija
67
Other tools
Pop - https://popapp.in/
Flinto - https://www.flinto.com/
Apple Keynote ar MS PowerPoint ar Google presentation -
http://keynotopia.com/guides/
Balsamiq -http://balsamiq.com/
Do not require programming skillsprogramuoti, HTML5
prototype
Tumult Hype -http://tumult.com/hype/
Adobe Edge Animate - http://html.adobe.com/edge/animate/
Googles Web Designer - https://www.google.com/webdesigner
Other tools
http://www.mockflow.com/
http://www.lumzy.com/
Mockup tools
http://www.mockflow.com/
http://www.lumzy.com/
Not up to date but still usefull list
http://c2.com/cgi/wiki?GuiPrototypingTools
69
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
71
References
72