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.

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)

7. Understanding
Mobile Behaviors

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

20. Samsung’s Mobile LifeDiary

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

30. Mobile IxD Essentials

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

37. Prototype, Prototype, Prototype!

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/