the mobile frontier

124
Title Interactions 2012 The Mobile Frontier Rachel Hinman Senior Research Scientist Nokia Research Lab Palo Alto, California USA Hinman

Upload: rachel-hinman

Post on 17-Aug-2014

78.722 views

Category:

Design


2 download

DESCRIPTION

Mobile user experience is a new frontier. Untethered from a keyboard and mouse, this rich design space is lush with opportunity to invent new and more human ways for people to interact with information. Invention requires casting off many anchors and conventions inherited from the last 50 years of computer science and traditional design and jumping head first into a new and unfamiliar design space.In this talk, Rachel will provide:Insight into how designers and UX professionals can navigate the unfamiliar and fast-changing mobile landscape with grace and solid thinking.In-depth information on advanced mobile design topics UX professionals will spend the next 10+ years pioneeringTools and frameworks necessary to begin tackling mobile UX problems in this rapidly changing design space.

TRANSCRIPT

Page 1: The Mobile Frontier

Title!

Interactions 2012

The Mobile Frontier

Rachel Hinman Senior Research Scientist Nokia Research Lab Palo Alto, California USA

Hinman

Page 2: The Mobile Frontier

I used to be a web designer, too!

2

Page 3: The Mobile Frontier

Mobile has arrived…

Page 4: The Mobile Frontier

Mobile = Wild West

Page 5: The Mobile Frontier

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 way.

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 for an app…”

Page 6: The Mobile Frontier
Page 7: The Mobile Frontier
Page 8: The Mobile Frontier
Page 9: The Mobile Frontier

The Rearview Mirror Effect

Page 10: The Mobile Frontier

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 way.

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.”!

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

and social constraints, our cognitive habits often get in the way.

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.”

Page 11: The Mobile Frontier

11!

Mobile presents an

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

Page 12: The Mobile Frontier
Page 13: The Mobile Frontier

Where to Look?

Page 14: The Mobile Frontier

Shapeshifting 1

A Brave NUI World

Comfortable Computing

Emergent Mobile Topics

2

3

Page 15: The Mobile Frontier

Shapeshifting 1

A Brave NUI World

Comfortable Computing

Emergent Mobile Topics

2

3

Page 16: The Mobile Frontier

Shapeshifting

Page 17: The Mobile Frontier
Page 18: The Mobile Frontier

18!

Page 19: The Mobile Frontier

“We made the web in the image of ourselves, and in the U.S., that means OBESE.”

~Jason Grigsby

Page 20: The Mobile Frontier

A!

20!

Page 21: The Mobile Frontier

21!

Page 22: The Mobile Frontier

Q:!

“I think a lot of web design in the past five to ten years is actually just a reflection of print again. We’ve been designing for one context, which isn’t much better than a PDF document.”

~ Bryan Rieger

Q:

22!

Page 23: The Mobile Frontier

Q:!

“Our obsession with layout (carried over from print design) keeps us from seizing much bigger opportunities on mobile.”

~ Luke Wroblewski

Q:

23!

Page 24: The Mobile Frontier

24!

Page 25: The Mobile Frontier

Shapeshifting

Page 26: The Mobile Frontier

Plans & Situated Action

Mutual Reconfiguration

Page 27: The Mobile Frontier
Page 28: The Mobile Frontier

Q:!

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.

Q:

Page 29: The Mobile Frontier
Page 30: The Mobile Frontier

30

Page 31: The Mobile Frontier

Q:! Two Design Implications

Q:

Page 32: The Mobile Frontier

Q:!

Q:

1. Shift in contextual assumptions

Page 33: The Mobile Frontier

Q:!

Q:

2. Shift in our sensibilities around content as a design material

Page 34: The Mobile Frontier

Q:!

Q:

1. Shift in contextual assumptions

Page 35: The Mobile Frontier
Page 36: The Mobile Frontier
Page 37: The Mobile Frontier
Page 38: The Mobile Frontier
Page 39: The Mobile Frontier
Page 40: The Mobile Frontier
Page 41: The Mobile Frontier

A!

Page 42: The Mobile Frontier

A!

Throughout the design process, our work should be situated in the contexts where it will be used.

Page 43: The Mobile Frontier

Go to the Gemba

Page 44: The Mobile Frontier

Go to the Gemba

Page 45: The Mobile Frontier

Go to the Gemba

Page 46: The Mobile Frontier

Q:!

Q:

2. Shift in our sensibilities around content as a design material

Page 47: The Mobile Frontier
Page 48: The Mobile Frontier

Design as the manipulation of materials.

Page 49: The Mobile Frontier

Q:!

Q:

Pages and screens are not our design material

Page 50: The Mobile Frontier

Content as a design material.

Page 51: The Mobile Frontier

Q:!

“Right now many designers end up focusing a lot of energy on the overlying view – the whole template and look and feel. But the smaller the screen gets, the less that stuff matters.

One of the most important things we’ve started looking at is writing and working with APIs rather than designing ‘pages’ for one context.”

~Stephanie Rieger

Q:

Page 52: The Mobile Frontier

Q:!

“For so much digital content, there is no good metaphor to render anymore – the content is just information, text and images – so new approaches to interaction and visual UI design are needed.”

~Mike Kruzeniski

Page 53: The Mobile Frontier
Page 54: The Mobile Frontier
Page 55: The Mobile Frontier
Page 56: The Mobile Frontier
Page 57: The Mobile Frontier

Q:!

Q:

Page 58: The Mobile Frontier

Shapeshifting 1

A Brave NUI World

Comfortable Computing

Emergent Mobile Topics

2

3

Page 59: The Mobile Frontier

59!

Page 60: The Mobile Frontier

60!

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

Page 61: The Mobile Frontier

61!

We’re reaching the edges of what GUI can do

Page 62: The Mobile Frontier

62!

Page 63: The Mobile Frontier

63!

GUIs become brittle on a mobile device

Page 64: The Mobile Frontier
Page 65: The Mobile Frontier
Page 66: The Mobile Frontier

66!

Page 67: The Mobile Frontier

67!

Page 68: The Mobile Frontier

Key differences between NUI and GUI

Page 69: The Mobile Frontier

Defining Attributes of

GUIs…

Page 70: The Mobile Frontier

70!

GUI Mental Model = Computer as tool

Page 71: The Mobile Frontier

71!

GUI = Recognition “What you see is what you get”

Page 72: The Mobile Frontier

72!

GUI = Metaphorics, containment and place

Page 73: The Mobile Frontier

73!

GUIs = Heavy Chrome, Icons & Buttons

Page 74: The Mobile Frontier

Defining Attributes of

NUIs…

Page 75: The Mobile Frontier

75!

NUI Mental Model = Computer as media

Page 76: The Mobile Frontier

76!

NUI = Intuition “What you do is what you get”

Page 77: The Mobile Frontier

77!

NUI = Fluid, Unmediated, and Organic

Page 78: The Mobile Frontier

NUIs = Content is the Star

78!

Page 79: The Mobile Frontier

79!

GUI = Experiences are anchored

Page 80: The Mobile Frontier

80!

NUI = Experiences Unfold

Page 81: The Mobile Frontier

81!

NUIs Unfold Like a Game

Page 82: The Mobile Frontier

82!

NUIs Can Feel Anchor-less

Page 83: The Mobile Frontier

83

Page 84: The Mobile Frontier

The Nested Doll Pattern 1

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

The Hub and Spoke Pattern 2

The Bento Box Pattern 3

The Filtered View Pattern 4

Page 85: The Mobile Frontier

85!

Nested Doll Pattern

Page 86: The Mobile Frontier

86!

Hub and Spoke Pattern

Page 87: The Mobile Frontier

87!

Bento Box Pattern

Page 88: The Mobile Frontier

88!

Filtered View Pattern

Page 89: The Mobile Frontier

The Nested Doll Pattern 1

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

The Hub and Spoke Pattern 2

The Bento Box Pattern 3

The Filtered View Pattern 4

Page 90: The Mobile Frontier

Q:!

Q:

Page 91: The Mobile Frontier

Shapeshifting 1

A Brave NUI World

Comfortable Computing

Emergent Mobile Topics

2

3

Page 92: The Mobile Frontier

Mark Weiser

Page 93: The Mobile Frontier

Q:!

Q:

Page 94: The Mobile Frontier

Q:!

Q: “The most profound technologies are those that disappear.

They weave themselves into the fabric of everyday life until they are indistinguishable from it.”

~ Mark Weiser The Computer for the 21st Century

Page 95: The Mobile Frontier

Q:!

Q:

1991

Tab Pad Yard-Sized Board

Page 96: The Mobile Frontier

2010

Page 97: The Mobile Frontier
Page 98: The Mobile Frontier

Mobile devices are the gateway drug for ubicomp

Page 99: The Mobile Frontier

Following toddlers into the future

Page 100: The Mobile Frontier
Page 101: The Mobile Frontier

Q:!

Q: “I like cuddling up in bed with Netflix on the iPad instead of sitting in front of the TV. It’s more comfortable to go to bed with a movie the same way I used to go to bed with a book”

~ Norbert iPad Study Participant

Page 102: The Mobile Frontier

Q:!

Q: “It’s almost like my blankie… I curl up in bed with it, or on the couch. I usually have it with me, regardless of extenuating circumstances ”

~ Erin iPad Study Participant

Page 103: The Mobile Frontier

“It’s almost like my blankie…”

Page 104: The Mobile Frontier
Page 105: The Mobile Frontier
Page 106: The Mobile Frontier
Page 107: The Mobile Frontier

Say Goodbye to Done

Page 108: The Mobile Frontier

108!

This should look familiar…

Page 109: The Mobile Frontier

109!

The web has evolved around a task-efficiency model.

Mobile can be different.

This should look familiar…

Page 110: The Mobile Frontier

110!

Tasks are about completion…

Page 111: The Mobile Frontier

111!

Tasks are about completion…

Possibilities are interactions that accrue over time…

Page 112: The Mobile Frontier

… or facilitate exploration…

112!

Tasks are about completion…

Possibilities are interactions that accrue over time…

Page 113: The Mobile Frontier

… or facilitate exploration…

113!

Tasks are about completion…

Possibilities are interactions that accrue over time…

..or are about SENSING INTENT!

Page 114: The Mobile Frontier

114!

Page 115: The Mobile Frontier

115!

Page 116: The Mobile Frontier

116!

Page 117: The Mobile Frontier

117!

Page 118: The Mobile Frontier

118!

Page 119: The Mobile Frontier

119!

Page 120: The Mobile Frontier
Page 121: The Mobile Frontier

Shapeshifting 1

A Brave NUI World

Comfortable Computing

Emergent Mobile Topics

2

3

Page 122: The Mobile Frontier

122!

Mobile presents an

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

Page 123: The Mobile Frontier

Thank you!

Email: [email protected]

Thanks, and next up…!

Page 124: The Mobile Frontier

Oh! By the way… I’m writing a book!

Expected Publication: April 2011

! ! !