LECTURE 2: DESIGN AND PROTOTYPE

COMP 4026 – Advanced HCI Semester 5 - 2016

Mark Billinghurst University of South Australia

August 4th 2016

Interaction Design

“Designing interactive products to support people in their everyday and working lives” Preece, J., (2002). Interaction Design

•  Design of User Experience with Technology

•  Interaction Design involves answering three questions: • What do you do? - How do you affect the world? • What do you feel? – What do you sense of the world? • What do you know? – What do you learn?

Bill Verplank

Interaction Design Process

Evaluate

(Re)Design

Identify needs/ establish

requirements

Build an interactive version

Final Product Develop alternative prototypes/concepts and compare them And iterate, iterate, iterate....

DISCOVERY

Interaction Design Process

Evaluate

(Re)Design

Identify needs/ establish

requirements

Build an interactive version

Final Product Develop alternative prototypes/concepts and compare them And iterate, iterate, iterate....

Consider the Whole User

Needs Analysis Methods

Learn from people

Learn from analogoussettings

Learn from Experts

Immersive yourself in context

Interviewing

• Understanding people’s thoughts, emotions, motivations • Understanding people’s choices and behaviours • Key way to identify needs

Understanding the User

A day in the Life of.. Cultural Probes.. Role Playing..

Persona

• Capture elements relevant to problem

Empathy Map

Problem Definition Creates Insight

User + Need = Insight

DESIGN

Interaction Design Process

Evaluate

(Re)Design

Identify needs/ establish

requirements

Build an interactive version

Final Product

Ideate

• Idea generation • Large quantity of diverse ideas

• Motivation • Step beyond obvious solutions • Harness collective perspectives • Uncover unexpected areas of exploration • Create fluency (volume) and flexibility (variety) • Move beyond obvious solutions

How Might We … ? •  Short questions that launch brainstorming

Brainstorming

•  Best with interdisciplinary team

MindMapping

Other Products in Market

• Notice all the iPod look-alikes?

Tools for Effective Design

! Personas ! Scenarios ! Storyboards (comics, movie technique) ! Wireframes and Mock-ups

Gunther the Ad Guy

Gunther is from Germany. He Travels extensively for work and As he is an advertising executive he needs to present concepts to clients quickly and easily. He is a person very well-versed in new technologies and wishes he had easier portable solutions for his presentations…..

How to use your Personas

• Use them to find real people for usability testing. • Use them as a foundation to discuss any design issues/feature issues that come up.

• Use them to evaluate competitor’s products. • Use them to keep you honest. • Keep updating them as part of your continued user research.

• Use them to find real customers you can have on-going relationships with.

Scenarios Usage Scenarios are narrative descriptions of how

the product meets the needs of a persona Short (2 pages max) Focus on unmet needs of persona Concrete story Set of stories around essential tasks, problems... Use to test ideas

A business woman travels from SF to Paris on a business trip. On her way to the airport she narrowly misses a traffic delay. She avoids the jam because her Smartphone beeps and send her a warning text message on her route from the office to the airport.

Upon arrival the location-sensitive Smartphone notifies the airline that she‘ll check in shortly and an airline employee finds her immediately and takes her baggage. Her display shows that her flight is on time and provides a map to her gate. On the way she downloads tourist information (maps, events) for Paris.

Once found her seat, she begins to review the downloaded information. She books a ticket for an opera she wants to see. Her Smartphone makes the booking using her credit card number stored in memory. The security software of the Smartphone protects her against fraud.

The Smartphone stores the opera booking along with emails written on the plane. As soon as she steps off the plane, it makes the calls and sends the emails. As she leaves the airport, a map appears on the display and guides her to her hotel

Storyboarding

Sequence of sketches showing use of system in everyday use context

Concrete example Easier (faster) to grasp than text based stories Means of communication with users and system

developers Sketches, not drawings... Use to test interaction and check design works

Example Storyboard

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

Wireframes

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

FunMe Mobile AR Wireframe/Mockup

http://www.yunnuocheng.com/funme/

GlassSim – http://glasssim.com/

▪  Simulate the view through Google Glass ▪  Multiple card templates

PROTOTYPE

Interaction Design Process

Evaluate

(Re)Design

Identify needs/ establish

requirements

Build an interactive version

Final Product

How can we quickly prototype interactive experiences with little

or no coding?

Why Prototype?

▪  Quick visual design ▪  Capture key interactions ▪  Focus on user experience ▪  Communicate design ideas ▪  “Learn by doing/experiencing”

Design/Prototyping Tools

Typical Development Steps

▪  Sketching ▪  Storyboards ▪  UI Mockups ▪  Interaction Flows ▪  Video Prototypes ▪  Interactive Prototypes ▪  Final Native Application

Increased Fidelity & Interactivity

Sketching Sketching is not about drawing It is about design. Sketching is a tool to help you:

•  express •  develop, and •  communicate design ideas

Sketching is part of a process:

•  idea generation, •  design elaboration •  design choices, •  engineering

Sketched Interfaces

▪  Sketch + Powerpoint/Photoshop/Illustrator

Paper Prototyping (Low Fidelity) Quick and simple means of sketching interfaces Use office materials Easier to criticize, quick to change Creative process (develop in team) Can also use for usability test (focus on interaction flow) Used a lot to test out concepts before real design begins.

Paper Prototyping

The Basic Materials

• Post-its • 5x8 in. index cards • Scissors, X-acto knives • Overhead transparencies • Large, heavy, white paper (11 x 17) • Tape, stick glue, correction tape • Pens & markers (many colors & sizes)

Paper Prototyping

•  https://www.youtube.com/watch?v=85muhAaySps

Physical Prototype

Google Glass (2011 - )

Google Glass Prototyping

https://www.youtube.com/watch?v=d5_h1VuwD6g

Early Glass Prototyping

Early prototyping

Early prototyping

Early prototyping

Early prototyping

Early prototyping

Early prototyping

Early prototyping

Transitions

Interactive Sketching

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

Using Pop

▪ 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

UI Concept Movies

EXAMPLE: SKETCH TO VIDEO

AR Hockey

• Concept – Air Hockey in the real world •  Mix materiality and real surfaces with digital forms •  React to real body movement and player interaction

https://stereoscopica.wordpress.com/2013/05/29/augmented-reality-hockey-concept/

AR Hockey Concept

https://stereoscopica.wordpress.com/2013/05/29/augmented-reality-hockey-concept/

Sketched Projected Content

Game Setup

Paper/Experience Prototypes

• Having people act out the game

Physical Mockup

Concept Video

https://vimeo.com/79285725

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

Proto.io - Interface

Limitations ▪  No access to sensor data ▪  Camera, orientation sensor

▪  No multimedia playback ▪  Audio, video

▪  Simple transitions ▪  No conditional logic

▪  No networking

Wireframe vs. Prototype vs. Mockup • Wireframe

•  Low fidelity representation of design • What UI elements, where UI are placed

• Mockup • High fidelity static design •  Visual design draft

• Prototype • Medium to high fidelity •  Supports user interaction

www.empathiccomputing.org

@marknb00

mark.billinghurst@unisa.edu.au