Download as PDF, PPTX
![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)
Uploaded byVinny Wu
Be A Mobile Design Hero: Transform Your Web Design Knowledge Into Mobile Design Skills Presentation
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.
More Related Content
Similar to Be A Mobile Design Hero: Transform Your Web Design Knowledge Into Mobile Design Skills Presentation
![Pharma times mobile[2]](https://cdn.slidesharecdn.com/ss_thumbnails/pharmatimesmobile2-120522030647-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
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, totalworldwide 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 nowaccess the web via mobile phones than via PC in China, Japan and South Korea...” — Tomi T. Ahonen
- 5.
- 6. Mobile 2009 =Internet 1999 In Your Face e Best of Interactive Design (1996)
- 7.
- 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.
- 10.
- 11. “Life is Mobile” “Ourresearch 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 DailyLife
- 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 mobileinternet strength lies in doing small tasks in idle time.” — Christian Lindholm, Interaction Designer for Nokia’s Lifeblog
- 16. Snacking, not ameal http://www.flickr.com/photos/nicmcphee/111606277/
- 17. Network, Power, Capacity What’syour 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 & VirtualWorlds LifeScan iPhone Diabetes Monitor
- 19. Interacting with OtherSystems
- 20.
- 21. Interacting with PH1 MobileLifeDiary 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 MobileLifeDiary 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 MobileLifeDiary 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 MobileLifeDiary 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 MobileLifeDiary 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 MobileLifeDiary 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.
- 28. Activity Think Like aMobile Designer
- 29.
- 30.
- 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.
- 36. Mobile Design Process observing concepting evaluating sketching prototyping wireframing storyboarding
- 37.
- 38. (problems with) Usability Testing http://www.flickr.com/photos/rachelcreative/2664091856/
- 39. interaction methods (devices) content navigation design design
- 40. Which Devices? “All phonesare 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 Designfor Both? Simplified IA Bigger hit states Screen percentages, not pixel perfect Don’t use Fireworks, use vector tool of choice
- 46. Navigation & ContentDesign 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.
- 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 4edges, z-order, flip Breadcrumbs or previous Back button (5-way)
- 52. Visual vs Text forpattern recognition
- 53.
- 54.
- 55.
- 56. Activity Design a MobileProduct
- 57. References & Resources References TomiT. 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 Menon 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/