Be A Mobile Design Hero: Transform Your Web Design Knowledge Into Mobile Design Skills Presentation

3,230 views

Published on

Kim Lenox (Consumer Electronics Industry)

This workshop is for web designers interested in shifting their careers toward designing for mobile devices. Kim Lenox of Adaptive Path, will describe what makes mobile different from the web and how to design for mobile context of use. Join Kim for this workshop and learn how your current web design background can be leveraged to design compelling mobile products.

Published in: Design
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,230
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
111
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Be A Mobile Design Hero: Transform Your Web Design Knowledge Into Mobile Design Skills Presentation

  1. 1. Mobile IxD Design Workshop Web2.0Expo SF March 31, 2009 Kim Lenox — kimlenox@mac.com
  2. 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. 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. 4. “...more people now access the web via mobile phones than via PC in China, Japan and South Korea...” — Tomi T. Ahonen
  5. 5. Leveraging What You Already Know
  6. 6. Mobile 2009 = Internet 1999 In Your Face e Best of Interactive Design (1996)
  7. 7. Understanding Mobile Behaviors
  8. 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. 9. Context
  10. 10. Context
  11. 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. 12. Part of Daily Life
  13. 13. Different Paces of User Interaction http://www.flickr.com/photos/alexbct/3032093071/ http://www.flickr.com/photos/28343258@N06/3220081887/
  14. 14. Continuous Partial Attention Design for 1 minute tasks Shallow, quick access navigation Auto saving data http://www.flickr.com/photos/carbonnyc/2591454436/
  15. 15. Empty Moments “...the mobile internet strength lies in doing small tasks in idle time.” — Christian Lindholm, Interaction Designer for Nokia’s Lifeblog
  16. 16. Snacking, not a meal http://www.flickr.com/photos/nicmcphee/111606277/
  17. 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. 18. Linking Physical & Virtual Worlds LifeScan iPhone Diabetes Monitor
  19. 19. Interacting with Other Systems
  20. 20. Samsung’s Mobile LifeDiary
  21. 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. 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. 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. 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. 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. 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. 27. Q&A
  28. 28. Activity Think Like a Mobile Designer
  29. 29. Break
  30. 30. Mobile IxD Essentials
  31. 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. 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. 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. 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. 35. Wikipedia
  36. 36. Mobile Design Process observing concepting evaluating sketching prototyping wireframing storyboarding
  37. 37. Prototype, Prototype, Prototype!
  38. 38. (problems with) Usability Testing http://www.flickr.com/photos/rachelcreative/2664091856/
  39. 39. interaction methods (devices) content navigation design design
  40. 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. 41. Interaction Methods 5-ways & scroll wheels Always has a focus Challenging for long lists Use paging shortcut keys Context menu & soft keys
  42. 42. Interaction Methods 5-ways & scroll wheels Always has a focus Challenging for long lists Use paging shortcut keys Context menu & soft keys
  43. 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. 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. 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. 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. 47. Menus
  48. 48. Information Architecture Shallow vs. deep navigation
  49. 49. Information Architecture Content vs. action/task
  50. 50. Information Architecture Content vs. action/task
  51. 51. Sense of Place Transitions 4 edges, z-order, flip Breadcrumbs or previous Back button (5-way)
  52. 52. Visual vs Text for pattern recognition
  53. 53. Keep it Simple
  54. 54. Robust Search
  55. 55. Q&A
  56. 56. Activity Design a Mobile Product
  57. 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. 58. Thank you Kim Lenox — kimlenox@mac.com
  59. 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/

×