Your SlideShare is downloading. ×
Mobile Design is for Mobile Users
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Design is for Mobile Users

1,002
views

Published on

Published in: Design, Business, Technology

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,002
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Martin Cooper, Motorola employee and cell phone pioneer, making a call on the first cell phone.
  • It’s a silly question, of course. Since the dawn of the personal computer, we’ve been trying to figure out how to make computing portable.
  • Source: NielsenYou can increasingly count on people having good mobile-capable devices.
  • This app is supposed to let you compose techno music on your iPhone. Flyout menuSmall screen controls, scattered all over the screenNo screen identification or labeling
  • Source: NielsenYou can increasingly count on people having good mobile-capable devices.
  • A lot of fantastic ideas suffer death by technical constraints. Surround yourself with experienced, creative technologists who know there are always constraints, and they aren’t always deal-breakers.
  • Source: NielsenYou can increasingly count on people having good mobile-capable devices.
  • You can’t depend on SEO to get people to your app, Can’t lean on a lovely look and feel to make up for uselessnessYou can’t expect people to spend a lot of time trying to figure out your app. Your app needs to anticipate their needs.
  • Start with a few devices and add them in future phases.
  • Source: NielsenYou can increasingly count on people having good mobile-capable devices.
  • Source: NielsenYou can increasingly count on people having good mobile-capable devices.
  • A good user experience is thoughtful, not one size fits all. If you are looking to design a mobile experience without too much thought, effort or cost, my advice would be don’t bother.
  • Source: Tapworthy: Designing great iPhone apps, Josh Clark
  • Source: Tapworthy: Designing great iPhone apps, Josh ClarkMicrotasks: short dashes of activity, may be frequentLocal: tell me what’s happening around meI’m bored: I want to waste time
  • Source: Tapworthy: Designing great iPhone apps, Josh ClarkMicrotasks: short dashes of activity, may be frequentLocal: tell me what’s happening around meI’m bored: I want to waste time
  • Source: Tapworthy: Designing great iPhone apps, Josh ClarkMicrotasks: short dashes of activity, may be frequentLocal: tell me what’s happening around meI’m bored: I want to waste time
  • Source: NielsenYou can increasingly count on people having good mobile-capable devices.
  • People browse differently on mobile devices. Remember: they're not there to meander through your content.
  • Too many levelsNon-essential informationNot task based.
  • Just a few tasksScaled back content – only what the user really cares about.
  • Visit them, sit down with them, ask them questions about themselves.
  • Just like wireframes for a desktop application.
  • Why do you have to do a wireframe before visual design? Because at this point, you can start communicating how the app will look and still be free to change it. The wireframing stage is also a really good time to start prototyping and testing your designs.
  • That’s a web paradigm. If you’ve ever tried to use a traditional website on your phone, you know why.Only options and quick tasks.
  • Instead of a bunch of buttons, arrows or links, make the content actionable.
  • The iphone does not have a menu button like Android – this helps you focus on the options that matter, and not use a menu area as a catch-all.On the web, we used to call this “quick links.” remember that?
  • “Focus on the primary task”“Elevate the Content that People Care About”“Minimize the Effort Required for User Input”These guidelines will not only get your app into the app store, but serve as good guidelines no matter what device you’re designing for.
  • These are minimums
  • Now that everything has been tested and validated, you have a good idea that your designs are on track.
  • Transcript

    • 1. Mobile Design is for Mobile Usersa MADE at MiKE presentation Mobile Design is for Mobile Users a MADE at MiKE presentation
    • 2. Mobile Design is for Mobile Users a MADE at MiKE presentation Me Gretchen Thomas User Experience Strategist, Johnson Controls gretchen@gretchen-thomas.com @gretchen4142
    • 3. Mobile Design is for Mobile Users a MADE at MiKE presentation Today we’ll talk about:  Mobile: what’s UX got to do with it?  Experience strategy  Mobile design is hard  Design Do’s and Don’ts  Translating experience strategy into design  Summary and wrap up3
    • 4. Mobile Design is for Mobile Users a MADE at MiKE presentation We won’t talk about:  Device strategy  Native app vs. mobile web  Development  Performance  Anything under the hood4
    • 5. Mobile Design is for Mobile Usersa MADE at MiKE presentation Mobile Design What’s UX got to do with it?
    • 6. Mobile Design is for Mobile Users a MADE at MiKE presentation Pretty much everything.6
    • 7. Mobile Design is for Mobile Users a MADE at MiKE presentation Why make portable computers? People who used computers asked for a better experience: The freedom to access, create and share information – wherever they go.7
    • 8. Mobile Design is for Mobile Users a MADE at MiKE presentation And nothing’s changed. The more interesting computing gets, the more people want to take it with them.8
    • 9. Mobile Design is for Mobile Users a MADE at MiKE presentation Experience matters. In today’s mobile world where:  Hardware innovations happen constantly  Mobile trends have a short shelf life  Cell phones are replaced every 18 months9
    • 10. Mobile Design is for Mobile Users a MADE at MiKE presentation Experience matters. …people are looking for the same experience 30 years later: to use information wherever they go.10
    • 11. Mobile Design is for Mobile Usersa MADE at MiKE presentation Get Your Strategy Right How to approach mobile design
    • 12. Mobile Design is for Mobile Users a MADE at MiKE presentation First things first. Write an experience strategy. It doesn’t have to be big or complicated, just clear.12
    • 13. Mobile Design is for Mobile Users a MADE at MiKE presentation A what now? Experience Strategy: A clearly defined set of principles based on user needs and desires that guide design and development decisions.13
    • 14. Mobile Design is for Mobile Users a MADE at MiKE presentation Flickr has a really nice one:14
    • 15. Mobile Design is for Mobile Users a MADE at MiKE presentation First, ask these questions: What kinds of things should we build to meet those needs? Who are our end users? How do we want their experience to feel? What do our users need, and what do they want?15
    • 16. Mobile Design is for Mobile Users a MADE at MiKE presentation Then write down the answers. Who are our end users? Old-timey townspeople How do we want their Organize a productive angry mob on experience to feel? a moment’s notice What do our users Portable lighting (e.g. torches), fast need, and what do they access to neighbors, a communal want? space to shout angry demands What kinds of things should Monster notifications, illumination we build to meet those function, a way to needs? communicate, town square locator16
    • 17. Mobile Design is for Mobile Users a MADE at MiKE presentation Mobile App: Experience Strategy Audience: Old-timey townspeople Vision: Organize a productive angry mob on a moment’s notice Goals: Portable lighting (e.g. torches), fast access to neighbors, a communal space to shout angry demands Strategies: - Monster status notifications - Illumination function - A a way to communicate - Town square locator17
    • 18. Mobile Design is for Mobile Users a MADE at MiKE presentation About this time you’ll want to involve your marketing or brand group. They’ll want to make sure your strategy is on brand. And they may give your app its own name: FOR ANGRY TOWNSPEOPLE18
    • 19. Mobile Design is for Mobile Usersa MADE at MiKE presentation A Word About Mobile Design It’s no picnic
    • 20. Mobile Design is for Mobile Users a MADE at MiKE presentation Here’s the thing. Mobile design is hard. It’s complex and takes time and energy. “You should expect your explorations into mobile to be some of the most challenging moments of your career.” - Brian Fling, Mobile Design and Development20
    • 21. Mobile Design is for Mobile Users a MADE at MiKE presentation But what are you gonna do? Precise and thoughtful design is the cost of entry into the mobile medium. You can’t get around it. Your design needs to take effort – because that’s what users expect.21
    • 22. Mobile Design is for Mobile Users a MADE at MiKE presentation If it were easy, we’d never see things like this.22
    • 23. Mobile Design is for Mobile Users a MADE at MiKE presentation Getting started It’s easy to get overwhelmed with technical obstacles: • devices • networks • frameworks • the medium itself23
    • 24. Mobile Design is for Mobile Users a MADE at MiKE presentation Take a deep breath. When designing, focus on your experience strategy …and deal with the obstacles later.24
    • 25. Mobile Design is for Mobile Usersa MADE at MiKE presentation Some Do’s and Don’ts Avert disaster before you start
    • 26. Mobile Design is for Mobile Users a MADE at MiKE presentation Design for touch As of June 2011, Android and iOS are responsible for almost 2/3 of the mobile data consumed.26
    • 27. Mobile Design is for Mobile Users a MADE at MiKE presentation Design for context In mobile, context is king. Your users will get value from apps that help them now, in their present state of mind, in their current environment.27
    • 28. Mobile Design is for Mobile Users a MADE at MiKE presentation Try to design for all devices Design for everybody creates a watered down mess that serves nobody. Target 2-3 devices, and make a fantastic experience.28
    • 29. Mobile Design is for Mobile Users a MADE at MiKE presentation Understand mobile usage patterns Old thinking: “sticky” website New thinking: touch and go29
    • 30. Mobile Design is for Mobile Users a MADE at MiKE presentation Sticky vs. Touch/Go30
    • 31. Mobile Design is for Mobile Users a MADE at MiKE presentation Watch users on their phones • One hand, often the right one • Gripping/using thumb • May not be paying attention • Could be in almost any environment31
    • 32. Mobile Design is for Mobile Users a MADE at MiKE presentation Design for the “lowest common denominator” This phrase is the enemy of good design, and should be abolished from planning meetings.32
    • 33. Mobile Design is for Mobile Users a MADE at MiKE presentation Understand mobile motivations • I’m microtasking • I’m local • I’m bored33
    • 34. Mobile Design is for Mobile Users a MADE at MiKE presentation I’m Microtasking Short dashes of activity: jotting down ideas, photos, contacts, info, forecasts, e ntertainment…34
    • 35. Mobile Design is for Mobile Users a MADE at MiKE presentation I’m Local Looking for information on surroundings. Movie listings, directions, music identification, menus, home listings…35
    • 36. Mobile Design is for Mobile Users a MADE at MiKE presentation I’m Bored Entertainment and distraction, games, reading.36
    • 37. Mobile Design is for Mobile Usersa MADE at MiKE presentation Let’s do this. Translating your experience strategy into design
    • 38. Mobile Design is for Mobile Users a MADE at MiKE presentation The process Five main steps: 1. Make a site map to organize content 2. Make clickstreams to show interaction 3. Wireframe to show the skeleton 4. Prototype and test 5. Apply look, feel and content38
    • 39. Mobile Design is for Mobile Users a MADE at MiKE presentation 1 - Site map: plan the content organization Keep your site map simple People get lost easily on their phones; it’s essential to scale back functionality and edit content.39
    • 40. Mobile Design is for Mobile Users a MADE at MiKE presentation Bad mobile site map Mob Buddy Home Mobs News About Landing Landing Shopping Community Page Page Upgrade History Monster Torches Friends Location Settings Ideas Boots Chat News Polls Alerts Mob List Plan40
    • 41. Mobile Design is for Mobile Users a MADE at MiKE presentation Good mobile site map Mob Buddy News Monster Monster News Detail Home Feeds Alerts Alerts Mobs Mob Detail Torch Profile41
    • 42. Mobile Design is for Mobile Users a MADE at MiKE presentation 2 - Clickstreams: plan how users will move through the app Take your time. Get to know your users so you can be educated on what they need, and in what sequence.42
    • 43. Mobile Design is for Mobile Users a MADE at MiKE presentation Mob Buddy Clickstreams News Detail Home Details Map News, Monster Alerts, Mob Reminders Monster Mob Detail Location Time & Date Plan a Mob Name Navigation Description Mobs Location Invited Torch Townspeople List of Mobs Contacts Plan a Mob Profile Name Page Content Area Email Link to Page Social Media43
    • 44. Mobile Design is for Mobile Users a MADE at MiKE presentation 3 – Wireframes: show the skeleton and general content areas Mobile wireframes are different • Web wireframes: all about content. • Mobile wireframes: all about interaction and functionality.44
    • 45. Mobile Design is for Mobile Users a MADE at MiKE presentation Mob Buddy Wireframe UIStatusBar 1 Tapping a news item advances to its detail page. 3 MobBuddy refresh 2 Swiping down refreshes the news feed. Monster Sighting 1 10/25/2011 3:08 pm 3 Tapping Refresh refreshes the Mob Event Reminder news feed 10/21/2011 7:08 am 4 Tapping a nav item advances Dr. Frankenstein News to that page 10/15/2011 3:08 pm 2 Invitation Notice 10/14/2011 12:01 am Monster Sighting 10/07/2011 8:08 am Mob Event Reminder 10/04/2011 3:08 pm Monster Sighting 10/01/2011 3:08 pm Invitation Notice 09/28/2011 3:08 pm Monster Sighting 09/27/2011 3:08 pm 4 News Mob Schedule Torch Profile45
    • 46. Mobile Design is for Mobile Users a MADE at MiKE presentation A few design thoughts: There is no concept of a “menu” in mobile.46
    • 47. Mobile Design is for Mobile Users a MADE at MiKE presentation A few design thoughts: A central idea of the Natural User Interface paradigm: The content is the action.47
    • 48. Mobile Design is for Mobile Users a MADE at MiKE presentation A few design thoughts: Create a default reference design, and alter it for your other target devices. If the iPhone is one of your targeted devices, start with that.48
    • 49. Mobile Design is for Mobile Users a MADE at MiKE presentation A few design thoughts: Get acquainted with Apple’s iOS UX guidelines.49
    • 50. Mobile Design is for Mobile Users a MADE at MiKE presentation A few design thoughts: Design for the touch gestures available: Drag Pinch Tap Double Tap Swipe Spread Press Press-Drag Press-Tap Rotate Get these at http://lukew.com/touch50
    • 51. Mobile Design is for Mobile Users a MADE at MiKE presentation A few design thoughts: If you’re designing a native app, make use of: • Voice input • Audio + Video • Location services • Accelerometer • Bar codes/QR codes51
    • 52. Mobile Design is for Mobile Users a MADE at MiKE presentation A few design thoughts: Target touch sizes: Apple recommends : 44 px squared. Windows recommends: 34 px with 8 px spacing.52
    • 53. Mobile Design is for Mobile Users a MADE at MiKE presentation 4 – Prototyping and testing Validate your designs 1. Find the users that you’ve defined in your experience strategy who are not you. 2. Are you sure they’re not you? 3. Have them all perform the same tasks and give you honest feedback. 4. Plan on revisions.53
    • 54. Mobile Design is for Mobile Users a MADE at MiKE presentation Types of prototypes UIStatusBar MobBuddy refresh Monster Sighting 10/25/2011 3:08 pm UIStatusBar iPhone 10:15 PM Mob Event Reminder MobBuddy refresh 10/21/2011 7:08 am Monster Sighting The Monster was spotted at the b... Dr. Frankenstein News 10/25/2011 3:08 pm 10/25/2011 3:08 pm 10/15/2011 3:08 pm Mob Event Reminder REMINDER: Fisher Castle Mob This... 10/21/2011 7:08 am 10/21/2011 7:08 am Invitation Notice 10/14/2011 12:01 am Dr. Frankenstein News 10/15/2011 3:08 pm Dr. Frankenstein gets a perm 10/15/2011 3:08 pm Monster Sighting Invitation Notice 10/14/2011 12:01 am 10/07/2011 8:08 am Angus Goodby accepted your mob invi... 10/14/2011 12:01 am Monster Sighting Mob Event Reminder 10/07/2011 8:08 am The Monster has dinner with the mayor 10/04/2011 3:08 pm Mob Event Reminder 10/07/2011 8:08 am 10/04/2011 3:08 pm Monster Sighting REMINDER: Concorde Square Mob Thi... Monster Sighting 10/01/2011 3:08 pm 10/04/2011 3:08 pm 10/01/2011 3:08 pm Invitation Notice Invitation Notice Goody Prynn accepted your mob invi... 09/28/2011 3:08 pm 09/28/2011 3:08 pm 09/28/2011 3:08 pm Monster Sighting Physical Monster sighting at the cobbler shop Monster Sighting 09/27/2011 3:08 pm 09/27/2011 3:08 pm 09/27/2011 3:08 pm Monster sighting at the milliner 09/26/2011 3:08 pm Object News Mob Schedule Torch Profile News Mob Schedule Torch Profile News Mob Schedule Torch Profile Paper HTML High Functioning Clickthrough App Lo-fi Hi-fi54
    • 55. Mobile Design is for Mobile Users a MADE at MiKE presentation 5 – Apply look, feel and content Express the brand • Emotional design is important, but not at the expense of usefulness. • Sync your experience strategy with brand strategy. • Make visual design familiar by following conventions and using visual systems.55
    • 56. Mobile Design is for Mobile Users a MADE at MiKE presentation Mob Buddy visual design iPhone 10:15 PM Add brand, content The Monster was spotted at the b... 10/25/2011 3:08 pm REMINDER: Fisher Castle Mob This... 10/21/2011 7:08 am • Make a lovely visual design Dr. Frankenstein gets a perm 10/15/2011 3:08 pm Angus Goodby accepted your mob invi... • Follow brand guidelines 10/14/2011 12:01 am The Monster has dinner with the mayor 10/07/2011 8:08 am • Use accurate labeling REMINDER: Concorde Square Mob Thi... 10/04/2011 3:08 pm Goody Prynn accepted your mob invi... 09/28/2011 3:08 pm • Include representative data: Monster sighting at the cobbler shop 09/27/2011 3:08 pm real words Monster sighting at the milliner 09/26/2011 3:08 pm News Mob Schedule Torch Profile56
    • 57. Mobile Design is for Mobile Users a MADE at MiKE presentation Summary • Have a well-researched experience strategy • Prepare for hard work …but don’t freak out over roadblocks! • Small site map, essential functions, precise clickstreams • Use new design and interaction concepts • Test early and often • Make your users fall in love with your visual design.57
    • 58. Mobile Design is for Mobile Users a MADE at MiKE presentation The result: Happy, productive users!58
    • 59. Mobile Design is for Mobile Users a MADE at MiKE presentation Further reading Apple iOS Human Interface Guidelines http://developer.apple.com/library/IOs/#documentation/UserExperience/Conceptual/MobileHIG/Introductio n/Introduction.html Windows Mobile Design Guidelines http://msdn.microsoft.com/en-us/library/bb158602.aspx Video: Mobile First! by Luke Wroblewski http://www.lukew.com/ff/entry.asp?1137 Mobile Design Pattern Gallery http://www.mobiledesignpatterngallery.com/mobile-patterns.php Mobile Design and Development, Brian Fling http://www.mobiledesign.org/toc Tapworthy: Designing Great iPhone Apps, Josh Clark http://www.amazon.com/Tapworthy-Designing-Great-iPhone-Apps/dp/1449381650 Mobile Web Design, Cameron Moll http://mobilewebbook.com/59
    • 60. Mobile Design is for Mobile Users a MADE at MiKE presentation Questions/ Comments/ Thank you.60

    ×