COMP 4026 Lecture3 Prototyping and Evaluation

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


Evaluate

(Re)Design


requirements


Final Product

Design/Prototyping Tools

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 PrototypeInvite A)endSuggest DescribeExplore RefineQues;on AnswerPropose TestProvoke ResolveTenta;ve,noncommi)al SpecificDepic;on

The primary differences are in the intent

Paper Prototyping

Paper Proto: Create Widgets

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 Designer View

App Inventor Blocks View

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/

Other Visual Prototyping Tools •  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

VVVV Visual 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: Communicate Vision 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


Evaluate

(Re)Design


requirements


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 implementation evaluation 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


Evaluate

(Re)Design


requirements


Final Product

MOBILE AUGMENTED REALITY FOR SPATIAL

NAVIGATION Sharon Brosnan

0651869 Bachelor of Science in Digital Media Design

BUNRATTY FOLK PARK Sharon 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

NAVIGATIONAL AID Smartphone Platform Most people carry mobile phones and are comfortable with

them Ideal Augmented Reality Technology •  Global tracking tools •  Wireless communication capabilities •  Location based computing •  Large display for interaction

DESIGNING FOR THE VISITOR

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 •  Define Visitors 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

•  Camera View •  Map View •  List View

•  Sub-Options •  Places •  Events •  Restaurants

•  Augmented Reality Features for navigation •  Text Information •  3D Objects •  3D Tour Guide •  3D Placement of Buildings

STORYBOARD

ITERATIVE DESIGN PROCESS

ITERATIVE DESIGN PROCESS Prototyping and User Testing •  Low Fidelity Prototyping

•  Sketches •  Paper Prototyping •  Post-It Prototyping •  PowerPoint Prototyping

•  High Fidelity Prototyping •  Wikitude

INITIAL SKETCHES Pros:• Goodforideagenera;on• Cheap• ConceptsseemfeasibleCons:• Notgreatfeedbackgained• Photoshopnotfastenoughformakingchanges

POST IT PROTOTYPING

FirstDra5

CameraViewwith3D

SecondDra5 ThirdDra5

• Selec;onhighlightedinblue

• Homebu)onaddedforeasynaviga;ontomainmenu

POWERPOINT PROTOTYPING Benefits• UsedforUserTes;ng• Interac;ve• Func;onali;esworkwhenfollowingthestoryofScenario1• Quick• EasyarrangementofslidesUserTes?ng• Par;cipantsfound• 15minutesessionsscreencaptured• ‘TalkAllowed’techniqueused

• Notestaken

• 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 User Testing •  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 "  Flexibletoolforcapturingtheuseofaninterface

"  Elaboratesimula;onofhowthenaviga;onalaidwillwork

" Doesnotneedtoberealis;cineverydetail

" Givesagoodideaofhowthefinishedsystemwillwork

Demo Video • 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..

Demo Video

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

www.empathiccomputing.org

@marknb00

[email protected]

COMP 4026 Lecture3 Prototyping and Evaluation

Technology

Transcript of COMP 4026 Lecture3 Prototyping and Evaluation