Be A Mobile Design Hero: Transform Your Web Design Knowledge Into Mobile Design Skills Presentation
18 likes1,268 views
The document outlines a mobile interaction design workshop held at Web 2.0 Expo in 2009, emphasizing user behaviors, mobile information ecologies, and design principles suited for mobile experiences. Key discussions include the evolution of mobile usage, the necessity of contextual design, and strategies for optimizing user interactions with mobile applications. Additionally, it provides insights into the mobile ecosystem, interaction methods, and resources for further exploration of mobile design.
![Mobilize Don’t Miniaturize
Mobilizing, on the other hand,
“precisely targets mobile user
needs, making [the] best possible
use of technology.”
— Barbara Ballard
Designing the Mobile User Experience, Barbara Ballard, 2007](https://image.slidesharecdn.com/beamobiledesignherotransformyourwebdesignknowledgeintomobiledesignskillspresentation-100426235126-phpapp01/85/Be-A-Mobile-Design-Hero-Transform-Your-Web-Design-Knowledge-Into-Mobile-Design-Skills-Presentation-33-320.jpg)
Be A Mobile Design Hero: Transform Your Web Design Knowledge Into Mobile Design Skills Presentation
- 1. Mobile IxD Design Workshop Web2.0Expo SF March 31, 2009 Kim Lenox — kimlenox@mac.com
- 2. March 31st 1:00 Understanding Mobile Behaviors 1:30 Activity — ink like a Mobile Designer 2:15 Break 2:30 Mobile IxD Design Essentials 3:00 Activity — Design a Mobile Product
- 3. “In 2006, total worldwide mobile subscriber base grew from 2.1 billion to 2.7 billion.”* — Tomi T. Ahonen *This is before the first iPhone launch.
- 4. “...more people now access the web via mobile phones than via PC in China, Japan and South Korea...” — Tomi T. Ahonen
- 5. Leveraging What You Already Know
- 6. Mobile 2009 = Internet 1999 In Your Face e Best of Interactive Design (1996)
- 8. Mobile Information Ecologies Context of use Different paces of user interaction Network availability, processing power & hard drive capacity How it interacts with physical resources (Bluetooth, RFID) How it interacts with other devices Adapted from Mobile Interaction Design, Matt Jones & Gary Marsden, 2006
- 9. Context
- 10. Context
- 11. “Life is Mobile” “Our research shows users want custom content that enables a mobile lifestyle, where their content and their entertainment move with them.” — Ken Olewiler, Punchcut
- 12. Part of Daily Life
- 13. Different Paces of User Interaction http://www.flickr.com/photos/alexbct/3032093071/ http://www.flickr.com/photos/28343258@N06/3220081887/
- 14. Continuous Partial Attention Design for 1 minute tasks Shallow, quick access navigation Auto saving data http://www.flickr.com/photos/carbonnyc/2591454436/
- 15. Empty Moments “...the mobile internet strength lies in doing small tasks in idle time.” — Christian Lindholm, Interaction Designer for Nokia’s Lifeblog
- 16. Snacking, not a meal http://www.flickr.com/photos/nicmcphee/111606277/
- 17. Network, Power, Capacity What’s your product experience online and offline? Gracefully handle poor connectivity Caching certain content locally on the device Download updates behind the scenes Don’t be a battery hog
- 18. Linking Physical & Virtual Worlds LifeScan iPhone Diabetes Monitor
- 19. Interacting with Other Systems
- 21. Interacting with PH1 Mobile LifeDiary 2006 Other Systems 05 Concept Ideation 08 2006 Concepts The Current Ecosystem Content Ecosystem circa 2006 Content - Phone Calls - - Email - - Email - - SMS - - Photos/Videos - - websites (General) - - Photos/Videos - - Phone Book - - websites (Personal) - - Phone Book - - Calendar - - Photos/Videos - - Calendar - - IM - - Apps/Tools - - Music/Ringtones - - Music/Ringtones - - Music/Ringtones - - IM - - Notes - - Phone Book - - Games - - Storage - - Calendar - - Email - - Apps/Tools - - Games - - Voice (voicemail, voicenotes, voiceSMS) - - Storage - - Notes - - Storage - Publish Web Web Publish Carrier Social Mobile Phone Sync PC Web Web Sync Storage Tools View View View Create/Edit Create/Edit Create/Edit Manage Manage Manage August 25, 2006 | Confidential 53
- 22. Interacting with PH1 Mobile LifeDiary 2006 Other Systems05 Concept Ideation 08 2006 Concept A PC as Epicenter Content Ecosystem Concept Content - Phone Calls - - SMS - - Photos/Videos - - Phone Book - - Calendar - - Music/Ringtones - - IM - - Games - - Email - - Voice (voicemail, voicenotes, voiceSMS) - - Notes - - Storage - Publish Publish Mobile Phone Sync PC Sync Samsung Web View View View Create/Edit Create/Edit Manage August 25, 2006 | Confidential 55
- 23. Interacting with PH1 Mobile LifeDiary 2006 Other Systems 05 Concept Ideation 08 2006 Content Ecosystem Concept Concept B Samsung Web as Epicenter Content - Phone Calls - - SMS - - Photos/Videos - - Phone Book - - Calendar - - Music/Ringtones - - IM - - Games - - Email - - Voice (voicemail, voicenotes, voiceSMS) - - Notes - - Storage - Publish Mobile Phone Sync Samsung Web View View Create/Edit Create/Edit Manage August 25, 2006 | Confidential 57
- 24. Interacting with PH1 Mobile LifeDiary 2006 Other Systems 05 Concept Ideation 08 2006 Concept E Moblog to Samsung Web Content Ecosystem Concept Content - Phone Calls - - Photos/Videos - - SMS - - Music/Ringtones - - Photos/Videos - - Voice (voicemail, voicenotes, voiceSMS) - - Phone Book - - Notes - - Calendar - - Music/Ringtones - - IM - - Games - - Email - - Voice (voicemail, voicenotes, voiceSMS) - - Notes - Publish - Storage - Publish Mobile Phone Sync PC Sync Samsung Web View View View Create/Edit Create/Edit Create/Edit Manage Manage (Lite Version) August 25, 2006 | Confidential 63
- 25. Interacting with PH1 Mobile LifeDiary 2006 Other Systems 05 Concept Ideation 08 2006 Content Ecosystem Concept Concept D PC as Epicenter, Moblog with Partners Content - Phone Calls - - Email - - Photos/Videos - - SMS - - Photos/Videos - - Music/Ringtones - - Photos/Videos - - Phone Book - - Notes - - Phone Book - - Calendar - - Calendar - - IM - - Music/Ringtones - - Music/Ringtones - - IM - - Notes - - Games - - Storage - - Email - - Apps/Tools - - Voice (voicemail, voicenotes, voiceSMS) - - Notes - Publish - Storage - Web Partner Web Partner Publish Mobile Phone Sync PC Web Partner View View Create/Edit Create/Edit Web Partner Manage View August 25, 2006 | Confidential 61
- 26. Interacting with PH1 Mobile LifeDiary 2006 Other Systems 05 Concept Ideation 08 2006 Concept C Web Partners Content Ecosystem Concept Content - Phone Calls - - Email - - SMS - - Photos/Videos - - Photos/Videos - - Phone Book - - Phone Book - - Calendar - - Calendar - - IM - - Music/Ringtones - - Music/Ringtones - - IM - - Notes - - Games - - Storage - - Email - - Apps/Tools - - Voice (voicemail, voicenotes, voiceSMS) - - Notes - Publish - Storage - Web Partner Web Partner Publish Mobile Phone Sync PC Web Partner View View Create/Edit Create/Edit Web Partner Manage View August 25, 2006 | Confidential 59
- 27. Q&A
- 28. Activity Think Like a Mobile Designer
- 29. Break
- 31. Mobile 2.0 Ecosystem Mobile 2.0 Ecosystem brew browsers applications platforms widgets and j2me gestures services windows ethnography startups android mobile user social media blackberry linux experience iphone symbian observation the internet of sensoring things new mobile music environments video NFC devices RFID content games © dotopen http://dotopen.eu
- 32. Mobilize Don’t Miniaturize Miniaturizing “treats the mobile environment and technology as a subset of the desktop environment.” — Barbara Ballard Designing the Mobile User Experience, Barbara Ballard, 2007
- 33. Mobilize Don’t Miniaturize Mobilizing, on the other hand, “precisely targets mobile user needs, making [the] best possible use of technology.” — Barbara Ballard Designing the Mobile User Experience, Barbara Ballard, 2007
- 34. Mobilize Don’t Miniaturize “Contextual user tasks, not the existing website, determine the content, architecture, and user experience of the mobilized site.” — Cameron Moll Mobile Web Design, Cameron Moll, 2005 & 2009
- 35. Wikipedia
- 36. Mobile Design Process observing concepting evaluating sketching prototyping wireframing storyboarding
- 38. (problems with) Usability Testing http://www.flickr.com/photos/rachelcreative/2664091856/
- 39. interaction methods (devices) content navigation design design
- 40. Which Devices? “All phones are not created equally, but all phones are equally valid.” — Barbara Ballard http://www.flickr.com/photos/gaetanlee/118885175/
- 41. Interaction Methods 5-ways & scroll wheels Always has a focus Challenging for long lists Use paging shortcut keys Context menu & soft keys
- 42. Interaction Methods 5-ways & scroll wheels Always has a focus Challenging for long lists Use paging shortcut keys Context menu & soft keys
- 43. Interaction Methods Fingers & styli capacitive resistive touch targets* iceberg tips adaptive targets *target = (target size in inches) × (screen width in pixels) / (screen width in inches) Designing Gestural Interfaces, Dan Saffer, 2008
- 44. Interaction Methods Fingers & styli capacitive resistive touch targets* iceberg tips adaptive targets *target = (target size in inches) × (screen width in pixels) / (screen width in inches) Designing Gestural Interfaces, Dan Saffer, 2008
- 45. How to Design for Both? Simplified IA Bigger hit states Screen percentages, not pixel perfect Don’t use Fireworks, use vector tool of choice
- 46. Navigation & Content Design Menus - icon grid, list, tabs, toolbar or carousel? Information architecture Shallow vs. deep navigation Content vs. action/task Sense of place Breadcrumbs, previous, back, transitions Keep it simple Robust search
- 47. Menus
- 48. Information Architecture Shallow vs. deep navigation
- 49. Information Architecture Content vs. action/task
- 50. Information Architecture Content vs. action/task
- 51. Sense of Place Transitions 4 edges, z-order, flip Breadcrumbs or previous Back button (5-way)
- 52. Visual vs Text for pattern recognition
- 53. Keep it Simple
- 54. Robust Search
- 55. Q&A
- 56. Activity Design a Mobile Product
- 57. References & Resources References Tomi T. Ahonen, http://www.tomiahonen.com/ http://communities-dominate.blogs.com/brands/2007/01/putting_27_bill.html Matt Jones & Gary Marsden, (2006) Mobile Interaction Design DotOpen, Mobile 2.0 Ecosystem http://dotopen.eu Barbara Ballard, (2007) Designing the Mobile User Experience Cameron Moll, (2005 & 2009) Mobile Web Design Rachel Hinman, Mirjana Spasojevic, Pekka Isomursu, PC Internet Deprivation Study http://portal.acm.org/citation.cfm?doid=1358628.1358652 Dan Saffer, (2008) Designing Gestural Interfaces Resources http://library.ixda.org/ - Look for Jenifer Tidwell’s talk on Mobile Design Patterns http://www.squidoo.com/mobiledesign http://www.lukew.com/ff/entry.asp?450 - mobile book list http://flingmedia.com/ http://www.mobiledesign.org/ http://www.mobilemonday.net/ http://mobiforge.com/Designing http://www.littlespringsdesign.com/ http://design4mobile.mobi/ http://phonegap.com/ http://www.adaptivepath.com/blog/#thelist http://mobili.st/ http://dev.mobi
- 58. Thank you Kim Lenox — kimlenox@mac.com
- 59. Photo Credits Context slide Men on boat http://www.flickr.com/photos/dnevill/2818839015/ Underground http://www.flickr.com/photos/e01/2656058861/ Stalls http://www.flickr.com/photos/iconeon/445984637/ Bus http://www.flickr.com/photos/seattlemunicipalarchives/2851696370/ Man with mobile http://www.flickr.com/photos/bobcatrock/293410753/ Mall http://www.flickr.com/photos/waterwin/603449470/