The Mobile Frontier

Post on 17-Aug-2014

78.722 views 2 download

Tags:

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 of The Mobile Frontier

Title!

Interactions 2012

The Mobile Frontier

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

Hinman

I used to be a web designer, too!

2

Mobile has arrived…

Mobile = Wild West

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

The Rearview Mirror Effect

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

11!

Mobile presents an

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

Where to Look?

Shapeshifting 1

A Brave NUI World

Comfortable Computing

Emergent Mobile Topics

2

3

Shapeshifting 1

A Brave NUI World

Comfortable Computing

Emergent Mobile Topics

2

3

Shapeshifting

18!

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

~Jason Grigsby

A!

20!

21!

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!

Q:!

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

~ Luke Wroblewski

Q:

23!

24!

Shapeshifting

Plans & Situated Action

Mutual Reconfiguration

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:

30

Q:! Two Design Implications

Q:

Q:!

Q:

1. Shift in contextual assumptions

Q:!

Q:

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

Q:!

Q:

1. Shift in contextual assumptions

A!

A!

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

Go to the Gemba

Go to the Gemba

Go to the Gemba

Q:!

Q:

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

Design as the manipulation of materials.

Q:!

Q:

Pages and screens are not our design material

Content as a design material.

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:

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

Q:!

Q:

Shapeshifting 1

A Brave NUI World

Comfortable Computing

Emergent Mobile Topics

2

3

59!

60!

Seated in a relatively predictable environment

Large screen enables multi-tasking

Keyboard and a mouse for input

61!

We’re reaching the edges of what GUI can do

62!

63!

GUIs become brittle on a mobile device

66!

67!

Key differences between NUI and GUI

Defining Attributes of

GUIs…

70!

GUI Mental Model = Computer as tool

71!

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

72!

GUI = Metaphorics, containment and place

73!

GUIs = Heavy Chrome, Icons & Buttons

Defining Attributes of

NUIs…

75!

NUI Mental Model = Computer as media

76!

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

77!

NUI = Fluid, Unmediated, and Organic

NUIs = Content is the Star

78!

79!

GUI = Experiences are anchored

80!

NUI = Experiences Unfold

81!

NUIs Unfold Like a Game

82!

NUIs Can Feel Anchor-less

83

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

85!

Nested Doll Pattern

86!

Hub and Spoke Pattern

87!

Bento Box Pattern

88!

Filtered View Pattern

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

Q:!

Q:

Shapeshifting 1

A Brave NUI World

Comfortable Computing

Emergent Mobile Topics

2

3

Mark Weiser

Q:!

Q:

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

Q:!

Q:

1991

Tab Pad Yard-Sized Board

2010

Mobile devices are the gateway drug for ubicomp

Following toddlers into the future

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

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

“It’s almost like my blankie…”

Say Goodbye to Done

108!

This should look familiar…

109!

The web has evolved around a task-efficiency model.

Mobile can be different.

This should look familiar…

110!

Tasks are about completion…

111!

Tasks are about completion…

Possibilities are interactions that accrue over time…

… or facilitate exploration…

112!

Tasks are about completion…

Possibilities are interactions that accrue over time…

… or facilitate exploration…

113!

Tasks are about completion…

Possibilities are interactions that accrue over time…

..or are about SENSING INTENT!

114!

115!

116!

117!

118!

119!

Shapeshifting 1

A Brave NUI World

Comfortable Computing

Emergent Mobile Topics

2

3

122!

Mobile presents an

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

Thank you!

Email: rachel.hinman@nokia.com

Thanks, and next up…!

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

Expected Publication: April 2011

! ! !