• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Mobile User Experience: What Web Designers Need to Know

on

  • 63,320 views

Until recently, the mobile internet was a crippled user experience due to product, interface and technical constraints. Recent innovations are causing an inflection point for the mobile internet, ...

Until recently, the mobile internet was a crippled user experience due to product, interface and technical constraints. Recent innovations are causing an inflection point for the mobile internet, enabling new and exciting opportunities for mobile user experience. But how do folks who are well versed in creating PC-based internet experiences begin to engage with mobile?

This presentation is designed to help web design professionals answer that question as well as:

- Provide insight into how web designers can begin to approach mobile user experiences.
- Identify key similarities and differences in designing for PC/mobile experiences.
- Provide frameworks and design principles for creating compelling mobile experiences.

Statistics

Views

Total Views
63,320
Views on SlideShare
46,854
Embed Views
16,466

Actions

Likes
266
Downloads
3,170
Comments
12

127 Embeds 16,466

http://uxbite.com 6545
http://www.pinceladasdaweb.com.br 2561
http://minalab.insitum.net 902
http://www.socialbeta.cn 772
http://www.rachelhinman.com 598
http://ulczyk.blogspot.com 491
http://www.moond.com 459
http://users-experiential.net 351
http://www.torresburriel.com 279
http://allwebdesign.co.uk 224
http://www.scoop.it 220
http://rachelhinman.com 176
http://hx.okvi.com 165
http://www.20ju.com 158
http://www.slideshare.net 150
http://www.alibuybuy.com 145
http://mobile.csdn.net 139
http://www.deliriosenbits.com 130
http://blog.derekperez.com 124
http://visualcommunication.tistory.com 120
http://softwareslave.blogspot.com 120
http://www.icietla.net 118
http://asiermarques.com 118
http://rcmdispmoviles.blogspot.com 77
http://ulczyk.blogspot.com.es 68
http://paper.li 67
http://rcmdispmoviles.blogspot.mx 59
http://ucdchina.com 59
http://rcmdispmoviles.blogspot.com.es 57
http://kb.cnblogs.com 52
http://www.usercentered.de 48
http://wiki.bcmoney-mobiletv.com 46
http://bikolabs-ux.tumblr.com 44
http://news.cnblogs.com 43
http://ulczyk.blogspot.mx 43
http://www.marcofavero.com 42
http://www.jbarahona.com 40
http://www.socialbeta.com 35
http://ulczyk.blogspot.com.ar 29
http://www.linkedin.com 29
http://www.dunfou.com 29
http://softwareslave.blogspot.in 27
http://kshitizanand.com 26
http://www.netbramha.com 26
http://mobilewebexperience.com 25
http://www.prometod.eu 23
http://www.kshitizanand.com 20
http://brunosouza.posterous.com 19
http://dtdigital.tumblr.com 19
http://howiechang.com 17
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 12 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…

110 of 12 previous next

Post Comment
Edit your comment
  • Hello - My name is Rachel Hinman and I am an experience design director at Adaptive Path. I’m truly thrilled to be here at Web Directions North and have the opportunity to share these ideas with you with you because this content is very personal to me - it reflects the journey that I have taken over the past four years of my professional life. During that time, I’ve been focused on mobile user experience… Before I joined Adaptive Path, I worked at Yahoo in their mobile group working in the mobile internet space… but more importantly … before I even got involved with mobile…

Mobile User Experience: What Web Designers Need to Know Mobile User Experience: What Web Designers Need to Know Presentation Transcript

  • 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?