What web designers need to know.. Rachel Hinman Mobile User Experience What Web Designers Need to Know

I used to be a web designer, too I used to be a web designer.

What can we do with mobile? How can we streamline the checkout process? How can we streamline the checkout process Q: How can we get community on our site? Q: What can we do with mobile? Q:

What can we do with mobile? How can we streamline the checkout process? How can we streamline the checkout process Q: How can we get community on our site? Q: What can we do with mobile? Q:

Where do I begin Q: Where do I begin?

Our plan for today Our plan for today… Similarities and differences between designing for web and mobile

Our plan for today Our plan for today… Similarities and differences between designing for web and mobile Three most important attributes of great mobile experiences

Our plan for today Our plan for today… Similarities and differences between designing for web and mobile Three most important attributes of great mobile experiences A set of mobile design principles

Our plan for today Our plan for today… Similarities and differences between designing for web and mobile Three most important attributes of great mobile experiences A set of mobile design principles Three mobile design activities

Along the way Along the way… Slides Worth Keeping Shameless Opinion Design Activities Design Principles Watch for slides with this orange label!

Okay… let’s get started Okay, let’s get started!

What are the similarities A What are the similarities? Q:

Web designers know how to work in a rapidly evolving field Web designers know how to work in a rapidly evolving field

Ability to work within technical constraints Web designers understand how to create experiences within technical constraints

Similar Tools… Similar processes Web designers use similar tools and processes

What are the differences? A Q: What are the differences?

A mobile phone is not a computer A mobile phone is not a computer

Um… duh! A umm…. duh!

Differences in the mobile environment Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input

Differences in the mobile environment Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input

Differences in the mobile environment 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

Mobile phones started out as a one-to-one

They evoloved

Mobile phones evolved from the landline phone

Smartphone… added

Smartphone… added Opinion!

iPhone Mobile phones aren’t really phones anymore

Mobile presents an opportunity to invent new ways… Mobile presents an opportunity to invent new ways for users to interact with information. Opinion!

Shift your perspective and point of view Expert to Explorer

How? Understand your assumptions

Great Mobile user experiences are uniquely mobile 1 Great Mobile Experiences: are sympathetic to context 2 speak their power 3 steal this slide!

Great Mobile user experiences are uniquely mobile 1 Great Mobile Experiences:

Do you remember a time… A Do you remember a time when the web was new? Q:

Do you remember a time… A “ We need a web presence!” !

Solution: Brochure - online Brochureware

“ we need a web presence” A “ We need online commerce!” !

Online commerce What about shipping?

Make it like the world A A “ Let’s make our site like…” !

Southwest airlines

What we learned from the web We confused the solution with the need. Lessons Learned from Web steal this slide! We borrowed broken models. Too focused on tactics. We didn’t focus on what the web could do well.

How do we not do that again? A A How do we NOT do that again? Q:

What we learned from the web Focus on needs instead of tactics and solutions. Design Principles: Uniquely Mobile Mobile is a different medium - focus on what it can do well. Don’t get hung up on heuristics and technology - they change rapidly. steal this slide!

Three tips for uniquely mobile experiences Identify your assumptions upfront. Unpack your computer baggage. 1 Three tips for creating uniquely mobile experiences Identify the difference between needs and solutions . 2 Focus on what makes mobile unique. 3 steal this slide!

Identify your assumptions Unpack your computer and mobile baggage… Activity

information needs What are the needs? Activity What need does this information fill? Frame it as a question from the perspective of a user.

Identify information needs What are the needs? Activity What need does this information fill? Frame it as a question from the perspective of a user. I wonder if this restaurant is popular? What neighborhood is this place in? Public Transport?

Identify information needs What are the needs? Activity

The web was not a direct translation A The web was not a direct translation…

And mobile won’t be either. A … mobile won’t be either.

Great Mobile user experiences are uniquely mobile 1 Great Mobile Experiences: are sympathetic to context 2

Pictures of mobile contexts A What exactly do you mean by mobile “context” ? Q:

Pictures of mobile contexts A

More pictures of mobile contexts

Social context

Context is complex A Context is complex! !

Context is about understanding the relationships A Context is about understanding human relationships to the people, places and things in the world.

Context Framework Context Framework steal this slide!

Context Framework Context Framework steal this slide!

Relationships Chording Orchestration and Inflection

Peanut butter

Google: Facebook Spatial

Temporal Temporal

Spatial - peanut butter Social

Google: Facebook Semantic

Peanut butter in Denver Peanut butter in Denver right now?

Context is about understanding the relationships A The web is good at people and things. The web is good at semantic relationships. (and okay at social relationships )

Context Framework Mobile is good at places… steal this slide!

Context Framework steal this slide! Mobile is good at spatial and temporal relationships.

Google maps - PC vs. Mobile

Temporal and spatial relationships are underserved There are currently not many technologies that help us understand place , and temporal and spatial relationships.

How do you get that understanding? How do we get that understanding? Q:

Sympathy to context principles Design for partial attention and interruption 1 Design Principles: Sympathy to Context Reduce cognitive load and opportunity cost 2 steal this slide! Ideate in the wild 3

Text entry will never be easy Design for partial attention and interruption

Wand in the world Activity Get sympathetic to the mobile context…

“in the wild” ideation Activity The Kate Rutter Wand in the World Activity

“in the wild” ideation Activity

“in the wild” ideation Activity Then ideate…

“in the wild” ideation Activity Then ideate…

Great Mobile user experiences are uniquely mobile 1 Great Mobile Experiences: are sympathetic to context 2 speak their power 3

Speak their power? A Huh? Q:

A light switch

Shopping cart

Shopping cart

We can annotate expectations in the web world We can annotate expectations in the web world

We can annotate expectations in the web world We can annotate expectations in the web world Add to cart Free two-day shipping Shipping! Collectible! Maybe a kindle! Look inside the book REALLY! Look inside the book Get it new OR used! Sell mine

Options have to be apparent and intuitive in mobile for people to Options in mobile have to be readily apparent

How do you make interfaces that speak their power A How do I create mobile interfaces that “speak their power”? Q:

Say good bye to done Say good-bye to “done”. 1 Design Principles: Interfaces that speak their power steal this slide! Think possibilities, not tasks. 2 Dismantle the page metaphor. Boulders to pebbles. 3

Wireframe This should look familiar…

Wireframe This should look familiar…

Wireframe This should look familiar… The web has evolved around a task-efficiency model. Mobile is different.

Mobile is different Mobile is different….

Mobile is different Mobile is different….

Mobile is different Mobile is different…. Mobile is about pivoting people through information quickly. It’s about exposing possibilities.

What’s the point? “ What’s the point?” “ What can happen?” TASK POSSIBILITIES

Tasks are about completion Tasks are about completion…

Tasks are about completion Tasks are about completion… Possibilities are interactions that accrue over time…

Tasks are about completion … or facilitate exploration… Tasks are about completion… Possibilities are interactions that accrue over time…

Tasks are about completion … or facilitate exploration… Tasks are about completion… Possibilities are interactions that accrue over time… ..or are about SENSING INTENT!

Example -

Example -

Example -

Example -

Example -

Example -

How do you make interfaces that speak their power A How do I design for possibilities? Q:

How do you make interfaces that speak their power A

How do you make interfaces that speak their power A

How do you make interfaces that speak their power A

It’s like a game of cards It’s like a card game…

It’s like a game of cards Each card speaks it’s power

It’s like a game of cards You win with a good hand

Pivoting people through information Activity Create a winning hand.

Pivoting people through information

Pivoting people through information Activity Create a winning hand.

Pivoting people through information Activity Create a winning hand. Allow people to pivot through information quickly Stitch cards together to answer the question

Prototype Prototype Prototype Prototype Prototype Prototype Prototype

Can users grok it? Can users grok it? Does each card speak it’s power? Can I simplify this? Is this intuitive? Q: Q: Q: Q:

Analogy of cards Prototyping “Swirl” Process

Analogy of cards Plan for a lot of it! 1 Tips for mobile prototyping steal this slide! Work at scale and print it out! 2 Get it on the device as soon as you can. 2

Analogy of cards Prototype at every stage Process

Paper Prototype example

High fidelity prototype example

Where do I begin? Q: Where do I begin?

Great Mobile user experiences are uniquely mobile 1 Great Mobile Experiences: are sympathetic to context 2 speak their power 3 steal this slide!

Everybody starts somewhere Everybody starts somewhere….

Good luck Good luck!

Thanks, and next up… Thank you! [email_address]

RESOURCES Resources: MOBILE RESOURCES Ultimate iPhone Stencil for Omnigraffle http: //graffletopia .com/stencils/413 mooTools http: //mootools .net iUI iPhone navigation (javascript): http://code. google .com/p/iui/ jQuery (javascript): http://jquery.com/ TweenMax (actionscript): http: //blog . greensock .com/tweenmaxas3/ Bruce Sterling speaks on the future of mobile http: //tinyurl .com/6m7kwc

Q&A: final break Q?