mobile prototyping essentials workshop: part 2

Rachel HinmanSenior Research Scientist Nokia Research Lab Palo Alto, California USA

Hinman

Part II

Mobile Prototyping Essentials

Our plan for today…8:30am - Noon

What makes mobile UX different?Two Design/Mobile UX Exercises:• Identifying Mobile Needs• Ideating in the Wild

1:30pm – 5:30pm

Mobile prototyping essentialsThree Mobile Prototyping Exercises• Storyboarding• Practice Ruthless Editing/Translating GUI to NUI• Creating an In-Screen Prototype

Noon – 1pm - LUNCH

What makes mobile UX different?

Bad Decision-Making

The final diamonds are where good design decisions matter most… …and where designers new to mobile have the least domain specific skill and confidence.

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

Highly variable context and environment

Small screen size and limited text input UI takes up the entire screen

Difficult to multi-task and easy to get lost

Designers new to mobile don’t have the domain specific skills or heuristics to lean on…

…and their instincts are not tuned to the nuance of mobile.

Try starting with instinct and intuition

AInstinct nounA natural or innate impulse, inclination, or tendency.

PC Prototypingis considered a

Luxury

ADesign involves

Instincts

Mobile Prototyping is

Essential

APrototyping

will help you develop

Mobile Instincts

ADesign involves

Instincts

APrototyping

Mobile Instincts

Our plan for this afternoon…Review the four “whys” of mobile

prototypingIdentify the two genres of prototyping and overview of six prototyping methodsReview the key differences between NUI and GUI interfaces

Overview of animation principles that can be incorporated into your mobile experiencesThree hands-on activities

Review the four “whys” of mobile prototypingIdentify the two genres of prototyping and overview six prototyping methods

Review the key differences between NUI and GUI interfaces

Our plan for this afternoon…

Three hands-on activities

Okay, let’s get started!

Prototyping

Explore the “Unknowns”

“Whys” of prototyping

Improve your design decision-making

steal this slide!

Gather User Feedback

Communicate an Idea

Fine-tune an Idea

YouTube Video

Communicating an Idea or Experience

Gather User Feedback

Explore the Unknowns

Fine-Tune an Idea

Two Genres

Experiential Prototyping

Tactical Prototyping

You are working on a “broader” mobile project.

Experiential Prototyping:Best suited for design explorations where:

Target mobile hardware and software scope is unknown.(perhaps being created).

steal this slide!

The design space is relatively unchartered.

You are working on a “focused” mobile project.

Tactical Prototyping:Best suited for design explorations where:

Target mobile hardware and software scope is known.

steal this slide!

The design space is relatively known.

Experiential Prototyping

Context Matters

Context will likely beyour blindside

Experiential Prototypingwill help you understand

context

Concept Videos

Experiential Prototypes

Storyboarding

Speed Dating Prototypes

Body Storming

Concept Videos

Storyboarding

Body Storming

Concept Videos

Storyboarding

Body Storming

“…users are just trying to muddle through situations in their lives. They often act without rationalizing.”

~ Andrew HintonInteractions 2012

Plans & Situated Action

Mutual Reconfiguration

Suchman’s theory of mutual reconfiguration suggests a person’s capacity to act (their agency) is reconfigured when it comes into contact with another thing or person - that human action is constantly constructed and reconstructed from dynamic interactions with the material and social worlds.

Bodystorming

Similar to improvisational theater, body storming involves acting out possible scenarios or use cases with actors and props. Unlike computer-based technology that is logic based and only makes visible the conditions that existed before, people are illogical, perceptive, aware, and self-correcting.

Body storming is a technique that helps capture and harness these messy yet essential aspects of human behavior and account for them in the mobile design process.

Photo by Christian Crumlish (xian), 2009 on Flickr

1. Select groups of five to eight participants in a troupe.

2. Identify 3-5 experience scenarios for your troupe to “perform.”

Examples: Purchasing a cup of coffee with my iPhone, selecting which phone to purchase in a carrier’s store.

3. Every player must have a role; there should be no “trees” that are just for background. Use large cards that label the roles people are playing.

4. Props can have feelings, thoughts, and the ability to speak. Use thought-bubble cards to show what a participant is thinking versus saying.

5. Have a narrator or color commentator who can explain things. The narrator can pretend the scenario is like television, using a remote to stop action, rewind, or fast-forward.Photo by Christian Crumlish (xian), 2009 on

Flickr

6. De-brief after each scenario. What did the group learn? What was surprising? What seemed important? Capture what you learned from the exercise and discuss how you can integrate it into what happens next.

Bodystorming will help you capture the emotional tenor of

mobile interactions

Design in Context

Concept Videos

Storyboarding

Body Storming

Storyboarding

Why Storyboard?

1. In mobile, Context Matters

Even in situations in which a spirit of exploration and freedom exist, where faculty are free to experiment to work beyond physical

and social constraints, our cognitive habits often get in the

Marshall McLuhan called it “the rear-view mirror effect,” noting that “We see the world through a

rear-view mirror. We march backwards into the future.”

“Hey, I’ve got this great idea …”

2. Qualify ideas

Mobile UX StoryboardingIdentify the central idea(s) you are trying to communicate.

Create a character and identify the key issues he/she currently faces.

Rough out a basic story.

Start filling in the cells. Rough out the complete story, then fill in details.

Rough out a basic story.

Start filling in the cells. Rough out the complete story, then fill in details.

Rough out the basic story

ActivitySelect a concept…

ActivityYour Design Challenge!Storyboarding

Select one concept you’d like to explore more deeply using the storyboarding technique.

Storyboard one scenario using the templates provided.

Remember to identify the key issues the character faces and rough out the complete story before filling in details.

30 Minutes

Concept Videos

Storyboarding

Body Storming

Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating

Scott Davidoff of CMU

• Few design tools

• High Cost of Failure

• Unpredictable social consequences

Rapidly Exploring Application Design through Speed Dating

Concept Videos

Storyboarding

Body Storming

Abundance brings perspective.

Speed Dating PrototypesBuilds on three theories:

Need to cross boundaries to know they exist.

Multiple low-cost engagements with multiple concepts enables a broader perspective to emerge.

Step One

Identify most promisingconcepts

Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 93

Step Two

Create storyboards thatdepict each concept

Step Three

Present storyboards tousers & gather feedback

Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 95

Step Four

Create prototypes

Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 96

Step Five

Conduct user enactments with prototypes

Speed Dating Prototypes are especially well-suited for gathering user impressions of a new-to-the-world experience

Tactical Prototyping

Flash Prototype

Tactical Prototypes

In-Screen Mobile Prototypes

steal this slide!

Keynote/Powerpoint Prototypes

Mobile Browser Prototypes

Platform Specific Prototype

Sketching/Paper Prototyping

Flash Prototype

Tactical Prototypes

steal this slide!

Sketching/Paper Prototyping

Great mobile UIsspeak their power

Already talked about….

Edit!!!

RuthlessEditing

A Brave NUI World

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

We’re reaching the edges of what GUI can do

Most mobile smartphones have touchscreens with Natural User Interfaces

GUIs Become Brittleon a Mobile Device

Eight Principles of NUIs

1. Principle of Performance Aesthetics

2. Principle of Direct Manipulation

3. Principle of Scaffolding

4. Principle of Contextual Environments

5. Principle of Super Real

6. Principle of Social Interaction

7. Principle of Spatial Representation

8. Principle of Seamlessness

1. Principle of Performance Aesthetics

NUI experiences should be like an ocean voyage, the pleasure comes from the interaction, not the accomplishment.

Example:Part instrument, part composition and part artwork, the iPhone application Bloom enables users to create elaborate patterns and unique melodies by simply tapping on the screen

2. Principle of Direct Manipulation

Touch screens and gestural interaction functionality enable users to feel like they are physically touching and manipulating information with their fingertips. Example:The scrolling gesture is an example of the Principle of Direct manipulation

3. Principle of Scaffolding

Scaffolding is strong cue or guide that sets a user’s expectation by giving them an indication of how the interaction will unfold.

Example:The graphics that surround objects as the are placed on a Surface Table are an example of scaffolding.

4. Principle of Contextual Environments

Unlike GUIs that will present a user with the same set of options regardless of the context it is in, NUIs are responsive to the environment and suggests what the next interaction should be.

Example:Most mobile devices can locate themselves in time and space, and present interfaces that adapt to the orientation of the device.

5. Principle of the Super Real

Unlike GUIs that contains information in a cascading series of windows that resemble sheets of paper, successful NUIs extend objects in a logical way into the world of magic.

Example:Gestures like “pinch/zoom” are a logical extension into the world of magic

6. Principle of Social Interaction

Unlike GUI laptops that are optimized for individual use, systems with larger NUI formats like the Microsoft Surface Table or tablets, like the iPad, lend themselves to social computing experiences.

Example:Matt Jones of BERG Design Consultancy created an UI iPad sketch that explores the passable and sharable nature of the iPad as an object

7. Principle of Spatial Representation

Unlike GUI systems, where an icon serves as visual representation of information, NUIs represent information as objects. Example:NUI objects have auras, like attraction affordances pictured in this Surface Table application.

8. Principle of Seamlessness

Touchscreens, sensors embedded in hardware, and the use of gestural UIs allow NUI interactions to feel seamless for users because interactions are direct. There are fewer barriers between the user and information. Example:Coverflow UI on the iPhone is a seamless way to navigate content

GUI/NUI Chasm

Key differences between NUI and GUI

Defining Attributes of

GUIs…

GUI Mental Model = Computer as tool

GUI = Recognition“What you see is what you

get”

GUI = Metaphorics, containment and place

GUIs = Heavy Chrome, Icons & Buttons

Defining Attributes of

NUIs…

NUI Mental Model = Computer as media

NUI = Intuition“What you do is what you

get”

NUI = Fluid, Unmediated, and Organic

NUIs = Content is the Star

GUI = Experiences are anchored

NUI = Experiences Unfold

NUIs Unfold Like a Game

NUIs Can Feel Anchor-less

The Nested Doll Pattern1

Mobile Experiences UnfoldPatterns for how mobile experiences unfold and progressively reveal their nature

steal this slide!

The Hub and Spoke Pattern2

The Bento Box Pattern3

The Filtered View Pattern4141

Nested Doll Pattern

Hub and Spoke Pattern

Bento Box Pattern

Filtered View Pattern

ActivityDesign Challenge!From GUI to NUI

Identify an interaction sequence you’d like to recreate using NUI principles.

Sketch out the interaction using the templates provided.

Identify how you’d like your mobile experience to unfold.

ActivityREMEMBER!It’s easy to go crazy and try to do it all.Instead, focus on applying what we’ve covered…

Understanding the differences between graphical and natural user interfaces.

Experimenting with how your mobile experience can unfold and and progressively reveal its nature.

Play around with the unfolding patterns that have been presented… or invent some of your own.

NUI characteristics:• Computer as Media • What you DO is what you get

• Content is the interface • Unfolding

GUI to NUI TranslationFocus on....

Boulder to Pebbles - Create UIs that speak their power with Ruthless Editing!

NUI Unfolding Patterns• Nested Doll • Hub and Spoke

• Bento Box • Filtered View

30 Minutes

Paper In-Screen Prototypes

Following Process documented by Diego Pulido via UX Magazine – Paper In-Screen PrototypesPhotos courtesy of Diego Pulido and UX Magazine

1. Sketch screen layouts.

Photo courtesy of Diego Pulido and UX Magazine156

1. Sketch screen layouts. 2. Scan or photograph the sketches.

3. Making sizing adjustments to the files.

4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly.

5. Import the files into the mobile device’s photo gallery.

Photo courtesy of Diego Pulido and UX Magazine

5. Import the files into the mobile device’s photo gallery.

6. Click and swipe away.

Photo courtesy of Diego Pulido and UX Magazine

5-10 Minutes

Now you can really start to have

some fun!

• Gesture• Sound/Voice• Image/Video• GPS• Animation• Facial Recognition• Sensors

Q:What revisions can you make now?

ActivityDesign Challenge!From GUI to NUI Modifications

Now that your concept is on the device, what new interactions does the device inspire?

Modify your existing interaction sequence with at least one NUI-inspired interaction

Create a new in-screen prototype using the new NUI-inspired interaction

20 Minutes

3Key Learnings

1. Sketching Rocks!

2. Get into the NUI Paradigm to design for

173Photo courtesy of Diego Pulido and UX Magazine

3. Get your work on a device as quickly as you can

174Photo courtesy of Diego Pulido and UX Magazine

3. GET YOUR WORK ON A DEVICE AS QUICKLY

AS YOU CAN!!!

supermodel

Use the medium you’re designing for

Making it pretty…

Flash Prototype

Tactical Prototypes

steal this slide!

Sketching

Supports *some* gestures and transitions.

Reasons for Prototyping in Keynote/Powerpoint

steal this slide!

Level of fidelity is high – gives you an end result that looks and feels like a real app.

It’s as close as you can get to the real thing without digging into code.

It’s super efficient and fast!

http://keynotopia.com/

Even in situations in which a spirit of exploration and freedom exist, where faculty are free to experiment to work beyond physical

and social constraints, our cognitive habits often get in the

Marshall McLuhan called it “the rear-view mirror effect,” noting that “We see the world through a

rear-view mirror. We march backwards into the future.”

In closing….

Fidelity

Failure

Prototyping is not a Panacea

Mobile presents an

opportunity to invent new ways for users to interact with information.

Opinion!

are uniquely mobile

Great Mobile Experiences:

are sympathetic to contextspeak their power3

PC Prototypingis considered a

Luxury

Mobile Prototyping is

Essential

APrototyping

Mobile Instincts

Thank you!Email:rachelhinman@gmail.com

mobile prototyping essentials workshop: part 2

Design

rapid prototyping alen

rapid prototyping - hamk prototyping... · c k chua, k f...

prototyping model

forward tof prototyping

mockups prototyping

prototyping mistakes (hebrew)

prototyping augmented reality

planning essentials tiu - tablets-im-unterricht.de€¦ ·...

14 prototyping

robot prototyping

designjp prototyping 20160825

paper prototyping workshop auf der smwhh 2014

usecon_experience design & prototyping

prototyping. gliederung prototyping allgemein prototyping...

workshop blender essentials -...

rapid prototyping

p5 prototyping

iterative prototyping

tq-workshop essentials aug-sept 2014

paper prototyping wud09