ComputerPrototypes
MattiasArvola
36
37
38
39
40
41
42
43
44
GROUP PROJECT1
WORK
45
45
47
48
49
50
51
52
1
2
PROJECT2
1day/week
Checkpoint
Research
Deadline
Concept
Checkpoint
Revisions
Deadline
Detailing
DeadlineIdeaLog
(andProcessBook)
INDIVIDUAL DESIGN
WORK
1day/week READINGS
Seminar1
Seminar2
Seminar3
(Deadline
CriticalReview)
3
3
Human-CenteredDesign(ISO9241-210)
1.Planthe
human-centred
process
Meetsthe
requirements
2.Understand
thecontextof
use
5.Evaluate
against
requirements
3.Specifyuser
&business
requirements
4.Produce
design
soluAons
ideaUon
revisions
detailing
Uncertainty/PaVerns/InsightsClarity/Focus
ideaUon
revisions
detailing
6
DetailingofSolutions
1. Revise design and
requirements, start
detailing the look and feel.
2. Build an interactive
computer prototype
1. cover the most
important tasks
2. HiFi in visual design
and interaction.
3. Recruit representative
users. One user per group
member.
4. Prepare and conduct a
usability test of your
computer prototype,
analyze results, and
discuss consequences of
test results for design.
5. Prepare a demo, a usability
test report (<6000 words)
and other design material
you wish to hand in for
grading.
6. Deadline at the
Presentation
7
Theindividualdesignassignment
• You are now expected to have quite a bit of UI
sketching
• Now it’s time to start detailing look and feel and make
explanatory sketches
• (Presentation images, pixel-perfect renderings and
HiFi prototypes)
8
Today
•
•
•
•
Types of prototypes
Fidelity
Computer prototypes
Tools for building computer prototypes
9
Evolutionaryorthrow-awayprototypes
10
WhatPrototypesPrototype
FuncUon
Integrated
ConstrucUon
Look&Feel
11
LoFiandHiFiPrototypes
• Low Fidelity: Often paper-based. Used to test a design
with users and predict big problems at an extremely
low cost.
• High Fidelity: Interactive and computer-based. Used
to convince management and other stakeholders that
you have thought the design through and are on the
right path. Cost can be rather high, and they can
create to large expectations from customers.
• Mixed Fidelity: Some parts are HiFi and others LoFi
12
Fidelityinwhatrespect?
• Interaction: Transitions, animations, system
responses
• Data: Real or realistic data
• Width in functionality: Overview of e.g. withdrawal,
deposit, account current, payments
• Depth in functionality: Details of e.g. withdrawal
• Visual: Sketchy or pixel perfect
13
14
15
Howmuchshouldweimplement?
• Build it if you can
• Fake it if you cannot
• If nobody can building, then your design is wrong
16
Whyandwhatofcomputerprototypes
• Bring a prototype with you to get more out of a
stakeholder meeting
• Response times, states of graphical objects and
animations
17
WizardofOz
• Gives the users the impression that they are working
on a real system when there is no such real system
• Controlled completely or partially be a wizard that
looks at what the user is doing and then provides the
system response
• Makes it possible to test advanced AI to se if and how
it should be constructed
• Can also be used to build a corpus of interactions for a
natural language user interface
far from the participant, helping to make the
Overkamp,T.,&Holmlid,S.(2015).MarionetteprototypingforevaluatingconceptualUbiCompapplicationsintheircontext.In
manipulations non-obtrusive for the participant.
ParticipatoryInnovationConference2015,TheHague,TheNetherlands.
WizardofOz
Figure 1. Imagined wireless interaction with a ubicomp object. The
object sends information directly to the user’s device.
18
Figure 1. Imagined wireless interaction with a ubicomp object. The
object sends information directly to the user’s device.
Figure 2. Marionette setup of the ubicomp interaction. For the user,
the information seems to be coming from the object, whereas in
reality, the researcher sends this information to the user’s device.
Thus, in the Marionette Prototyping method we create a
Figure 3. The setup for the researcher following along on the walkthrough.
The tablet on the left, for manipulating the user-device in the
manipulator role, and the notepad on the right, for taking notes in the
researcher role.
InteractiveComputer
Prototypes
• Looks and behaves like the final product
• Test the feel and detailed interaction
• It takes an effort to make changes in it (compared to
paper prototypes) and a bug can put the entire test
session to a halt
21
22
IterativeandEvolutionaryPrototypes
• Built to both test a design and to build on for the
future
• Made in the development environment, but preferably
with a GUI builder
• Such environments have component libraries: easy to
use standard widgets
• Easy to fixate on standard components and widgets
23
ThreeBasicKindsofPrototypingTools
• Hot spot-based tools that take existing wireframes /
mock-ups and add interactivity
• E.g. InVision, POP, Flinto, Keynote, Powerpoint
• States-based tools with UI components
• E.g. UXPin, Axure RP, proto.io, Pixate, Atomic,
Indigo Studio, Fluid UI
• Code tools that take and load dynamic data: E.g.
Framer, LiveCode, Interface Builder, Visual Studio
Express, Qt Creator, Noodl
proto.io
Principle
Indigo
Studio
Protoshare
Pixate
HotGloo
Solidify
Origami
Framer
UXPin
Marvel
Form
Webflow
Justinmind
Fluid
Briefs
InVision
LiveCode
Axure
Keynotopia
Atomic
QTCreator
Prototyping
onPaper
Noodl
InVision
•
https://www.youtube.com/watch?v=zNoBmjg-NnQ
25
UXPin
•
https://www.youtube.com/watch?v=NM30LmppB5U
26
LiveCode
•
https://www.youtube.com/watch?v=PeYBSFoiOqI
27
28
PrototypingToolswithProsandCons
• For example:
• http://www.cooper.com/prototyping-tools
29
Non-interactivePrototypes
30
VideoPrototypes
• Linear illustrations of how users interact with the new
system
• Can build on paper prototypes, physical mock-ups,
existing software and images of actuall environments
• Start with a scenarion and make storyboard for the
film
• Move around parts of the storyboard to set together
sequences of clips
• Film the clips in the right order based on the
storyboard so you don’t have to edit and cut so much
31
ScreenCastVideoPrototype
• Movie showing the UI
• Flash
• Powerpoint or Keynote med efterbehandling i
MovieMaker, iMovie eller AfterEffects.
• Show a feature that cannot be made with paper,
mock-up, wizard of oz or analog video prototype.
• Start with a storyboard!
• Can be made with stops at every step
32
Furtherreading:
• http://www.inuse.se/blogg/tre-proptptypverktyg-duinte-far-missa/
• http://www.cooper.com/prototyping-tools
• https://medium.com/@msds_branding/5-fantasticux-prototyping-tools-part-1-3a4d05f8801f
• http://ms-ds.com/our-thinking/insights/5-best-uxprototyping-tools-part-two
• https://uxmag.com/articles/comparing-popularlayer-based-and-code-based-prototyping-tools
• https://uxmag.com/articles/comparing-fourpopular-page–based-interactive-prototyping-tools
mattias.arvola@liu
@mattiasarvola
www.liu.se