Mobile UX Essentials - Silicon Valley IxDA/BayChi

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Mobile UX EssentialsSilicon Valley IxDA<br />Rachel Hinman<br />Senior Research Scientist <br />Nokia Research Lab <br />...

2004<br />

Where do I begin?<br />Q:<br />Where do I begin<br />

What can we do with mobile?<br />Q:<br />Q:<br />

Where do I begin?<br />Q:<br />Where do I begin<br />

Our plan for today…<br />Our plan for today<br />Similarities and differences between designing for the PC and mobile<br />

Our plan for today…<br />Our plan for today<br />Similarities and differences between designing for the PC and mobile<br /...

Our plan for today…<br />Our plan for today<br />Similarities and differences between designing for the PC and mobile<br /...

Our plan for today…<br />Our plan for today<br />Similarities and differences between designing for the PC and mobile<br /...

Along the way…<br />Along the way<br />Watch for slides with this orange label!<br />Slides Worth Keeping<br />Design Prin...

Okay, let’s get started!<br />Okay… let’s get started<br />

A<br />What are the similarities<br />What are the similarities?<br />Q:<br />

UX designers know how to work <br />in a rapidly evolving field<br />13<br />Web designers know how to work in a rapidly e...

UX designers understand how to create experiences within technical constraints<br />14<br />Ability to work within technic...

UX designers use similar tools and processes<br />15<br />Similar Tools… Similar processes<br />

What are the differences?<br />What are the differences?<br />A<br />Q:<br />

A mobile phone is not a computer <br />17<br />A mobile phone is not a computer<br />

umm…. duh!<br />A<br />Um… duh!<br />

19<br />Differences in the mobile environment<br />Seated in a relatively predictable environment<br />Large screen enable...

20<br />Differences in the mobile environment<br />Seated in a relatively predictable environment<br />Large screen enable...

Differences in the mobile environment<br />Highly variable context and environment<br /> Small screen size and limited tex...

22<br />Mobile phones started out as a one-to-one<br />

They evolved<br />23<br />

Mobile phones evolved from the landline phone<br />24<br />

26<br />Smartphone… added <br />

27<br />Smartphone… added <br />Opinion!<br />27<br />

The Rearview Mirror<br />

Hypothesis vs. Agenda<br />Even in situations in which a spirit of exploration and freedom exist, where faculty are free t...

30<br />Mobile presents an opportunity to invent new ways…<br />Opinion!<br />Mobile UX presents you with the opportunity ...

31<br />iPhone<br />Mobile phones aren’t really phones anymore<br />

Hypothesis vs. Agenda<br />

Hypothesis vs. Agenda<br />Work outside the contours <br />of your own assumptions<br />

Hypothesis vs. Agenda<br />

What are the differences?<br />What’s the first step?<br />A<br />Q:<br />

36<br />Shift your perspective and point of view<br />Step One: Know the medium you’re designing for<br />

37<br />Shift your perspective and point of view<br />NO EXCUSES!<br />Buy a modern mobile device<br />

38<br />Shift your perspective and point of view<br />Step Two: Participate in the cultureyou are designing for<br />

39<br />Shift your perspective and point of view<br />Images needed<br />Cultivate mobile “mindfulness”<br />

40<br />Shift your perspective and point of view<br />Step Three: Embrace the chaos<br />

Shift your perspective and point of view<br />“The rapid development of cell phones is killing early cell phones much fast...

1<br />are uniquely mobile<br />Great Mobile user experiences<br />steal this slide!<br />Great Mobile Experiences:<br />2...

Great Mobile Experiences:<br />1<br />are uniquely mobile<br />Great Mobile user experiences<br />

Do you remember a time…<br />Do you remember a time when the web was new?<br />Q:<br />A<br />

Do you remember a time…<br />“We need a web presence!”<br />!<br />A<br />

46<br />Solution: Brochure - online<br />Brochureware<br />

“we need a web presence”<br />“We need online commerce!”<br />!<br />A<br />

48<br />Online commerce<br />What about shipping?<br />

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

50<br />Southwest airlines<br />

What we learned from the web<br />Lessons Learned from Web<br />We borrowed broken models. Too focused on tactics. <br />W...

How do we not do that again?<br />How do we NOT do that again?<br />Q:<br />A<br />A<br />

What we learned from the web<br />steal this slide!<br />Design PrinciplesUniquely Mobile<br />Mobile is a unique & differ...

Design Principle: Uniquely Mobile Focus on what mobile can do well<br />

What we learned from the web<br />Design Principle: Uniquely Mobile Focus on what mobile can do well<br />

vs<br />56<br />Identify your assumptions<br />

57<br />Identify your assumptions<br />vs<br />

What we learned from the web<br />Design Principle: Uniquely Mobile Technology can help guide, but should not be the focus...

What we learned from the web<br />Design Principle: Uniquely Mobile Need vs. Solution<br />

Identify your assumptions<br />Research Techniques<br />INVASIVE<br />Prototype<br /> Testing<br />Deprivation <br />Study...

Identify your assumptions<br />Research Techniques<br />INVASIVE<br />Prototype<br /> Testing<br />Deprivation <br />Study...

Identify your assumptions<br />Research Techniques<br />INVASIVE<br />Prototype<br /> Testing<br />Deprivation <br />Study...

are uniquely mobile<br />1<br />Great Mobile user experiences<br />Great Mobile Experiences:<br />are sympathetic to conte...

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

Pictures of mobile contexts<br />A<br />

More pictures of mobile contexts<br />

Social context<br />

Context is complex<br />Context is complex!<br />!<br />A<br />

Context is about understanding human relationships to the people,places and things in the world.<br />A<br />Context is ab...

70<br />Context Framework<br />Context Framework<br />steal this slide!<br />

71<br />Context Framework<br />Context Framework<br />steal this slide!<br />

72<br />Relationships Chording<br />Orchestration and Inflection<br />

73<br />Peanut butter<br />

74<br />Google: Facebook<br />Spatial<br />

75<br />Temporal<br />Temporal<br />

Spatial - peanut butter<br />Social<br />76<br />

Google: Facebook<br />Semantic<br />77<br />

78<br />Peanut butter in Denver<br />Peanut butter in Melbourne right now?<br />

The web is good at people and things.<br />The web is good at semantic relationships.<br />(and okay at social relationshi...

Context Framework<br />Mobile is good at places…<br />steal this slide!<br />80<br />

Context Framework<br />Mobile is good at spatial and temporal relationships.<br />steal this slide!<br />81<br />

82<br />Google maps - PC vs. Mobile<br />

Temporal and spatial relationships are underserved<br />There are currently not many technologiesthat help us understand p...

How do you get that understanding?<br />How do we get that understanding?<br />Q:<br />

Design for partial attention and interruption<br />1<br />Sympathy to context principles<br />Design Principles:<br />Symp...

Design for partial attention and interruption<br />86<br />Text entry will never be easy<br />

87<br />Text entry will never be easy<br />Design for partial attention and interruption<br />

Reduce cognitive load and opportunity cost<br />88<br />

89<br />Text entry will never be easy<br />Ideate in the wild…<br />

90<br />Wand in the world<br />Your Design Challenge!<br />Sympathy to the mobile context<br />Activity<br />Divide into g...

91<br />“in the wild” ideation<br />Activity<br />Go outside and brainstorm ideas<br />

92<br />“in the wild” ideation<br />Activity<br />Sketch your ideas…<br />

Context Framework<br />Mobile is good at places…<br />steal this slide!<br />93<br />

Context Framework<br />Mobile is good at places…<br />steal this slide!<br />94<br />

Great Mobile Experiences:<br />are uniquely mobile<br />1<br />Great Mobile user experiences<br />are sympathetic to conte...

Speak their power?<br />Huh?<br />Q:<br />A<br />

A light switch<br />97<br />

Shopping cart<br />98<br />

Shopping cart<br />99<br />

We can annotate expectations in the web world<br />100<br />We can annotate expectations in the web world<br />

We can annotate expectations in the web world<br />Free two-day shipping<br />Look inside the book<br />REALLY!Look inside...

Options in mobile have to be readily apparent<br />102<br />Options have to be apparent and intuitive in mobile for people...

How do you make interfaces that speak their power<br />How do I create mobile interfaces that “speak their power”?<br />Q:...

Say good bye to done<br />steal this slide!<br />Design Principles:<br />Interfaces that speak their power<br />Understand...

steal this slide!<br />105<br />Wireframe<br />

106<br />Wireframe<br />GUI = Metaphorics, containment and place<br />

107<br />Wireframe<br />Recognition vs. Recall<br />

108<br />Wireframe<br />We’re reaching the edges of what GUI can do<br />

109<br />Wireframe<br />It’s not longer “what you see is what you get…”<br />

110<br />Wireframe<br />…now it’s “what you do is what you get”<br />

111<br />Wireframe<br />Different platforms express characteristics differently<br />

112<br />Wireframe<br />steal this slide!<br />

113<br />Wireframe<br />Ruthless editing is part of the NUI design process<br />

Say Goodbye to done<br />114<br />Wireframe<br />

This should look familiar…<br />115<br />Wireframe<br />

116<br />Wireframe<br />This should look familiar…<br />The web has evolved around a task-efficiency model.<br />Mobile is...

Mobile is different….<br />117<br />Mobile is different<br />

Mobile is different….<br />118<br />Mobile is different<br />

119<br />Mobile is different<br />Mobile is different….<br />Mobile is about pivoting people through information quickly.<...

What’s the point?<br />“What can happen?”<br />“What’s the point?”<br />TASK<br />POSSIBILITIES<br />

Tasks are about completion…<br />121<br />Tasks are about completion<br />

122<br />Tasks are about completion<br />Tasks are about completion…<br />Possibilities are interactions that accrue over ...

Tasks are about completion<br />Tasks are about completion…<br />Possibilities are interactions that accrue over time…<br ...

… or facilitate exploration…<br />124<br />Tasks are about completion<br />Tasks are about completion…<br />Possibilities ...

125<br />Example - <br />

126<br />Example - <br />

127<br />Example - <br />

128<br />Example - <br />

129<br />Example - <br />

130<br />Example - <br />

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

How do you make interfaces that speak their power<br />A<br />132<br />

How do you make interfaces that speak their power<br />A<br />133<br />

How do you make interfaces that speak their power<br />A<br />134<br />

It’s like a card game…<br />135<br />It’s like a game of cards<br />

Each card speaks it’s power<br />136<br />It’s like a game of cards<br />

You win with a good hand<br />137<br />It’s like a game of cards<br />

Pivoting people through information<br />Your Design Challenge!<br />Step 3: Creating a good hand<br />Activity<br />138<b...

Pivoting people through information<br />139<br />

Pivoting people through information<br />Create a winning hand.<br />Activity<br />140<br />

Pivoting people through information<br />Create a winning hand.<br />Activity<br />Stitch cards together to answer the que...

Prototype<br />Prototype<br />Prototype<br />Prototype<br />Prototype<br />Prototype<br />142<br />Prototype<br />

143<br />Analogy of cards<br />Process<br />Prototype at every stage<br />

144<br />Analogy of cards<br />Process<br />Prototyping “Swirl”<br />

Pivoting people through information<br />145<br />

Pivoting people through information<br />146<br />

Paper Prototype example<br />147<br />

Pivoting people through information<br />148<br />

High fidelity prototype example<br />

Can users grok it?<br />Can users grok it?<br />Does each screen speak it’s power?<br />Can I simplify this?<br />Is this ...

Analogy of cards<br />steal this slide!<br />Tips for mobile prototyping<br />Plan for a lot of it!<br />1<br />Work at sc...

Analogy of cards<br />Some info about mobile web/ and app programming:<br />iPhone Apps = Xcode<br />1<br />Android Apps =...

Where do I begin?<br />Where do I begin?<br />Q:<br />

are uniquely mobile<br />1<br />Great Mobile user experiences<br />steal this slide!<br />Great Mobile Experiences:<br />a...

Everybody starts somewhere<br />Everybody starts somewhere….<br />

Good luck<br />Good luck!<br />

Thank you!<br />Email:<br />rachel.hinman@nokia.com<br />The Mobile Frontier<br />www.rosenfeldmedia.com/books/mobile-desi...

Resources:<br />MOBILE RESOURCESUltimate iPhone Stencil for Omnigrafflehttp://graffletopia.com/stencils/413<br />mooTools ...

Q?<br />Q&A: final break<br />

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

How UX Design Has Changed The World by BuiltByHQ 98467 views
Our eternal digital afterlife — Fro... by Alberta Soranzo 1562 views
IXDC BEIJING 2015 by Henk Haaima 484 views
Agile in UX by Forecast 365 views
7. Przygotowanie form do drukowania... by Patryk Patryk 4597 views
Tech Backpack Journey till May 2013 by Tech Backpack 484 views

View on Slideshare

1 of 159 Ad

View on Slideshare

1 of 159 Ad