LECTURE 3: PROTOTYPE AND
EVALUATE
COMP 4026 – Advanced HCI
Semester 5 - 2016
Mark Billinghurst
University of South Australia
August 11th 2016

DESIGN

Interaction Design Process
Evaluate
(Re)Design
Identify needs/
establish
requirements
Build an
interactive
version
Final Product

Tools for Effective Design
! Personas
! Scenarios
! Storyboards (comics, movie technique)
! Wireframes and Mock-ups

Persona + Storyboard

Wireframe
• It’s about
• Functional specs
• Navigational systems
• Functionality and layout
• Notes about the intended functionality
• How interface elements work together
• Leaving room for the design to be created

Mockup
• It’s about
• Look and feel
• Build on the wireframe with
graphics and polish
• May adjust layout slightly but
stays within the general
guide of the wireframe

PROTOTYPE

Interaction Design Process
Evaluate
(Re)Design
Identify needs/
establish
requirements
Build an
interactive
version
Final Product

Design/PrototypingTools

Sketched Interfaces
▪ Sketch + Powerpoint/Photoshop/Illustrator

From Sketches to Prototypes
• Sketches: early ideation stages of design
• Prototypes: capturing /detailing the actual design

Sketch vs.Prototype
Sketch Prototype
Invite A)end
Suggest Describe
Explore Refine
Ques;on Answer
Propose Test
Provoke Resolve
Tenta;ve, non commi)al Specific Depic;on
The primary differences are in the intent

Paper Prototyping

Paper Proto:CreateWidgets

Card-based prototypes
• Index cards (3 X 5 inches)
• Each card represents
one screen or part of screen
• Often used in website
development

Physical Prototype

Interactive Sketching
• Pop App
• Pop - https://popapp.in/
• Combining sketching and interactivity on mobiles
• Take pictures of sketches, link pictures together

▪ Series of still photos in a movie format.
▪ Demonstrates the experience of the product
▪ Discover where concept needs fleshing out.
▪ Communicate experience and interface
▪ You can use whatever tools, from Flash to iMovie.
Video Sketching

Video Sketch

Interactive Wireframing
▪ Developing interactive interfaces/wireframes
▪ Transitions, user feedback, interface design
▪ Web based tools
▪ UXpin - http://www.uxpin.com/
▪ proto.io - http://www.proto.io/
▪ Native tools
▪ Justinmind - http://www.justinmind.com/
▪ Axure - http://www.axure.com/

Proto.io - http://www.proto.io/
▪ Web based mobile prototyping tool
▪ Features
▪ Prototype for multiple devices
▪ Gesture input, touch events, animations
▪ Share with collaborators
▪ Test on device

Flinto
• https://www.flinto.com/
• High fidelity prototyping
• Use final png files/interface screens
• Connect mockup screens visually
• Apply transitions, scrolling etc
• Send prototypes to mobile for viewing
• Looks like real application

Flinto Interface
Video 11: Flinto

Finto Demo
https://www.youtube.com/watch?v=V1nb0uoSa4A

Facebook Origami
• http://facebook.github.io/origami/
• Visual programming for mobile prototypes
• Drag and drop interface elements, interactions
• Extends Mac Quartz Composer
• Visual design tool
• Tutorial
• http://facebook.github.io/origami/tutorials/

Origami Interface

Limitations
▪ No access to sensor data
▪ Camera, orientation sensor
▪ No multimedia playback
▪ Audio, video
▪ Simple transitions
▪ No conditional logic
▪ No networking

App Inventor
• http://appinventor.mit.edu/
• http://appinventor.org/
• Visual Programming for Android Apps
• Features
• Access to Android Sensors
• Multimedia output
• Drag and drop web based interface
• Designer view – app layout
• Blocks view – program logic/control

App Inventor DesignerView

App Inventor BlocksView

App Inventor Demo
http://www.youtube.com/watch?v=DUuDzEbPqnM

Interactive Coding - Processing
▪ Programming tool for Artists/Designers
▪ http://processing.org
▪ Easy to code, Free, Open source, Java based
▪ 2D, 3D, audio/video support
▪ Processing For Android
▪ http://wiki.processing.org/w/Android
▪ Strong Android support, builds .apk file

http://toxiclibs.org/

OtherVisual PrototypingTools
• VVVV
• http://vvvv.org
• Hybrid visual/text programming environment
• Real time audio/graphics, physical interfaces, etc
• Max/MSP
• http://cycling74.com/products/max/
• Visual programming
• Designed for interactive media applications

Max/MSP Interface

VVVV Interface

VVVVVisual Programming

Experience Prototyping
“Experience Prototype is any kind of
representation, in any medium, that is designed
to understand, explore or communicate what it
might be like to engage with the product,
space or system we are designing.”
Buchenau and Suri

Buchenau, M., & Suri, J. F. (2000, August). Experience prototyping. In Proceedings of the
3rd conference on Designing interactive systems: processes, practices, methods, and
techniques (pp. 424-433). ACM.

Experience Prototyping
The experience of even simple artifacts does not exist in a
vacuum but, rather, in dynamic relationship with other
people, places and objects.
Additionally, the quality of people’s experience changes over
time as it is influenced by variations in these multiple
contextual factors.

Interactive Role Play

IDEO.com
Interactive Role Play in Environment

Role Playing

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
>Blurb blurb
>Do this
>Why?
User

Physical Prototyping - d.tools
• Hardware prototyping
• http://hci.stanford.edu/research/dtools/

D Tools Demo
http://hci.stanford.edu/research/dtools/

littleBits - http://littlebits.cc/
• Plug and play hardware components
• Sensors, input, output
• Rapid design with hardware

Little Bits Demo
https://www.youtube.com/watch?v=wDa3dOERxvA

Tethered Prototypes
Goal:
CommunicateVision
HIGH FIDELITY
PROTOTYE

Rapid Prototyping
• Speed development time with quick hardware mockups
• handheld device connected to PC
• LCD screen, USB phone keypad, Camera
• Can use PC development tools for rapid development
• Flash,Visual Basic, etc

Hardware Prototyping Example
▪ Can we develop unobtrusive input devices ?
▪ Reduce need for speech, touch pad input
▪ Socially more acceptable
▪ Examples
▪ Ring,
▪ pendant,
▪ bracelet,
▪ gloves, etc

Prototyping Platform
Arduino Kit Bluetooth Shield Google Glass

Example: Glove Input
▪ Buttons on fingertips
▪ Map touches to commands

Example: Ring Input
▪ Touch strip, button, accelerometer
▪ Tap, swipe, flick actions

How it works
Bracelet
Armband
Gloves
1,2,
3,4
Values/
output

Goals of Prototyping
• Learn
• Solve Disagreements
• Reduce miscommunication
• Start a conversation
• Fail quickly and cheaply
• Test ideas without spending time and money
• Manage the solution building process
• Break large problem into smaller testable parts

EXAMPLE:
CONCEPT TO DEMO

NASA Hololens Concept Demo
• Vision: Work on Mars from your office
• Story and sketches based on vision
• Led to working Demo

Chesley Bonestell (1940s)

Hololens Story

HoloLens Concept Sketches

Final NASA HoloLens OnSight Demo
https://www.youtube.com/watch?v=o-GP3Kx6-CE

EVALUATION

Interaction Design Process
Evaluate
(Re)Design
Identify needs/
establish
requirements
Build an
interactive
version
Final Product

What is evaluation?
• Evaluation is concerned with
gathering data about the usability
of a design or product by a
specified group of users for a
particular activity within a specified
environment or work context

“Iterative design, with its repeating cycle of design and
testing, is the only validated methodology in existence
that will consistently produce successful results. If you
don’t have user-testing as an integral part of your
design process you are going to throw buckets of
money down the drain.”
See AskTog.com Bruce Tognazzini

When to evaluate?
• Once the product has been developed
• pros : rapid development, small evaluation cost
• cons : rectifying problems
• During design and development
• pros : find and rectify problems early
• cons : higher evaluation cost, longer development
design implementationevaluation
redesign &
reimplementation
design implementation

Four evaluation paradigms
• ‘quick and dirty’
• usability testing (lab studies)
• field studies
• predictive evaluation

Quick and dirty
• ‘quick & dirty’ evaluation: informal feedback from
users or consultants to confirm that their ideas are
in-line with users’ needs and are liked.
• Quick & dirty evaluations are done any time.
• Emphasis is on fast input to the design process
rather than carefully documented findings.

Formal Usability Testing
• Recording typical users’ performance on typical tasks in
controlled settings. Field observations may be used.
• As the users perform these tasks they are watched &
recorded on video & their key presses are logged.
• This data is used to calculate performance times, errors &
help explain why the users did what they did.
• User satisfaction questionnaires & interviews are used to
elicit users’ opinions.

Laboratory-based studies
Controlled, instrumented environment

Field/Ethnographic Studies
• Field studies are done in natural settings
• The aim is to understand what users do naturally
and how technology impacts them.
• In product design field studies can be used to:
- identify opportunities for new technology
- determine design requirements
- decide how to introduce new technology
- evaluate technology in use.

Predictive Evaluation
• Experts apply their knowledge of typical
users, often guided by heuristics, to
predict usability problems.
• Can involve theoretically based models.
• A key feature of predictive evaluation is
that users need not be present
• Relatively quick and inexpensive

Characteristics of approaches
Usability
testing
Field
studies
Predictive
Users do task natural not involved
Location controlled natural anywhere
When prototype early prototype
Data quantitative qualitative problems
Feed back measures &
errors
descriptions problems
Type applied naturalistic expert

Evaluation approaches and methods
Method Usability
testing
Field
studies
Predictive
Observing x x
Asking
users
x x
Asking
experts
x x
Testing x
Modeling x

CASE STUDY

Interaction Design Process
Evaluate
(Re)Design
Identify needs/
establish
requirements
Build an
interactive
version
Final Product

MOBILE AUGMENTED
REALITY FOR SPATIAL
NAVIGATION
Sharon Brosnan
0651869
Bachelor of Science in Digital Media Design

BUNRATTY FOLK
PARKSharon Brosnan
0651869
Bachelor of Science in Digital Media Design

BUNRATTY FOLK PARK
• Irish visitor attraction run by Shannon Heritage
• 19th century life is recreated
• Buildings from the mid-west have been relocated to the 26-land
surrounding Bunratty Castle
• 30 buildings are set in a rural or village setting there.

AUGMENTED REALITY
In Bunratty Folk Park:
• Allows the visitor to point a camera at an exhibit, the device
recognises its by it’s location and layers digital information on to
the display
• 3-dimensional virtual objects can be positioned with real ones on
display
• Leads to dynamic combination of a live camera view and
information

NAVIGATIONALAID
Smartphone Platform
Most people carry mobile phones and are comfortable with
them
Ideal Augmented RealityTechnology
• Global tracking tools
• Wireless communication capabilities
• Location based computing
• Large display for interaction

DESIGNING
FORTHEVISITOR

HUMAN CENTRED DESIGN
Goal of the Navigational Aid
• Easy to use, clear and understandable
• Useful to visitors
• Creating interaction between the visitor and the aid through
the user interface
• Engage the visitor
To ensure this…
• It is necessary to understand the visitor of a navigational aid
in Bunratty Folk Park
• Identify visitor motives and goals while going through the
Folk Park.

HUMAN CENTRED DESIGN
Understanding Technology and Related Work
• Literature
• Similar Technologies
• Electronic Tours in Museum Settings
• Interactions design in Outdoor Museums
Understanding the User over time
• Observations
• Interviews

HUMAN CENTRED DESIGN
Findings
• Most visitors do not use the map
• Most visitors have mobile phones
• Visitors want more information
• View the Folk Park at their own pace
• Information should be straight to the point
• Large social interaction within groups

NEXT STEPS FROM RESEARCH
• DefineVisitors Goals
• Define Functionalities of the Aid
• Develop Personas – visitors who use the Aid
• Develop Scenarios – how the persona uses the navigational aid
in the Folk Park
• Draw up Storyboards on scenarios

FUNCTIONALITY
• View Options
• CameraView
• MapView
• ListView
• Sub-Options
• Places
• Events
• Restaurants
• Augmented Reality Features
for navigation
• Text Information
• 3D Objects
• 3D Tour Guide
• 3D Placement of Buildings

STORYBOARD

ITERATIVE DESIGN

ITERATIVE DESIGN PROCESS
Prototyping and UserTesting
• Low Fidelity Prototyping
• Sketches
• Paper Prototyping
• Post-It Prototyping
• PowerPoint Prototyping
• High Fidelity Prototyping
• Wikitude

INITIAL SKETCHES
Pros:
• Good for idea genera;on
• Cheap
• Concepts seem feasible
Cons:
• Not great feedback gained
• Photoshop not fast enough for
making changes

POST IT PROTOTYPING
First Dra5
Camera View with 3D
Second Dra5 Third Dra5
• Selec;on
highlighted in blue
• Home bu)on added
for easy naviga;on to
main menu

POWERPOINT PROTOTYPING
Benefits
• Used for User Tes;ng
• Interac;ve
• Func;onali;es work when following the
story of Scenario 1
• Quick
• Easy arrangement of slides
User Tes?ng
• Par;cipants found
• 15 minute sessions screen captured
• ‘Talk Allowed’ technique used
• Notes taken
• Post-Interview

WIKITUDE
• Popular augmented reality browser for
mobile devices
• Mapping
• Point of Interest abilities
• Multiplatform
• Shows the points of interest of
Bunratty Folk Park
• Markers can be selected in and an
information pop-up appears

WIKITUDE
UserTesting
• Application well received
• Understandable
• Participants playful with the technology

FINAL CONCEPT
DESIGN

FINAL DESIGN CONCEPT
Key Issues
• Fix issues found in previous sessions
• Design with guidelines in mind
• Appealing to the Mental Model
• Icon Design
• Aesthetic Design
• Colour/Font
• Buttons
• Look

VIDEO PROTOTYPE
" Flexible tool for capturing the use
of an interface
" Elaborate simula;on of how the
naviga;onal aid will work
" Does not need to be realis;c in
every detail
" Gives a good idea of how the
finished system will work

DemoVideo
• Human emotional or physical necessities.
• Needs help define your design
• Needs are verbs not Nouns
• Verbs - (activities and desires)
• Nouns (solutions)
• Identify needs directly out of the user traits you noted, or from
contradictions between
• disconnect between what she says and what she does..

DemoVideo
https://www.youtube.com/watch?v=8BqbEXUyDfo

www.empathiccomputing.org
@marknb00
mark.billinghurst@unisa.edu.au