Mobile Design is for Mobile Users
2 likes1,977 views
The document discusses best practices for mobile design. It recommends first writing an experience strategy that defines user needs, goals, and design strategies. It then notes that mobile design is challenging but important to get right through precise, thoughtful design. The document provides some dos and don'ts for mobile design, such as designing for touch, context, and common usage patterns rather than trying to design for all devices or the "lowest common denominator."
Mobile Design is for Mobile Users
- 1. 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 @gretchen414 2
- 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 up 3
- 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 hood 4
- 5. 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 months" 9
- 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. 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 need, Portable lighting (e.g. torches), fast and what do they want?" access to neighbors, a communal space to shout angry demands" What kinds of things should Monster notifications, illumination we build to meet those function, a way to communicate, needs?" locator town square locator" 16
- 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 locator 17
- 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 TOWNSPEOPLE 18
- 19. 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 Development " 20
- 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 itself" 23
- 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. 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" patterns Old thinking: “sticky” website" New thinking: touch and go" 29
- 30. Mobile Design is for Mobile Users a MADE at MiKE presentation Sticky vs. Touch/Go" 30
- 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 environment" 31
- 32. Mobile Design is for Mobile Users a MADE at MiKE presentation Design for the ! denominator” “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 bored" 33
- 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, entertainment…" 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. 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 content" 38
- 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 Plan 40
- 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 Profile 41
- 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 Location Mob Detail 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 Media 43
- 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 3 to its detail page. 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 Profile 45
- 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/touch 50
- 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 codes" 51
- 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." 44 px 44 px ! 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... 10/01/2011 3:08 pm Monster Sighting 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 Monster sighting at the cobbler shop Physical 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-fi 54
- 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... •! 10/14/2011 12:01 am Follow brand guidelines" 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 Profile 56
- 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" 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/ Introduction/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