mobile user experience - inductive design process
DESCRIPTION
Presentation for Denver Titanium Users Meetup -- first revision based on questions and feedback at the meeting. Newly added: 1)links go great pattern resources 2)slide showing sketch, wireframe, mockup 3)side-by-side reference of Android and iOS design guidelines, 4)design go-to questions slide reflects Paul's comment about rich experiences. Next revision: concrete examples and images! Thanks for your thoughts, guys!TRANSCRIPT
![Page 1: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/1.jpg)
Mobile UX
A contextual design
perspective
For Titanium User Group
Jen Shurley. 9.23.2013. [email protected] @jens_cam
![Page 2: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/2.jpg)
A user experience
perspective
![Page 3: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/3.jpg)
Mobile as a part of someone’s life and
environment
![Page 4: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/4.jpg)
Structure of talk: iceberg
• App show (concrete first)
• A contextual perspective on UX design
• Conversation about design patterns
Webb et al 2008
![Page 5: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/5.jpg)
Starting point: black hole to do list.
David Allen - GTD
Life Hacker
18 Minutes
Real Simple Magazine
Family art night
cards
![Page 6: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/6.jpg)
App goals
• Reduce cognitive and emotional load
induced by long lists of cleaning tasks
• Provide randomly selected, limited
choice of ridiculously easy goals
• Timebox
• Don’t optimize everything; choose.
![Page 7: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/7.jpg)
Tools used
• Initial Design – Mocks and Wireframes
– Pen and paper.
– Google docs for user stories
– Adobe Illustrator – (b/c you can build mocks right
on wireframes)
• Moving forward
– TFS for ALM (show user stories)
– C#, ASP.NET, host in Azure
![Page 8: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/8.jpg)
Tap Flow,
Wireframe
Low High
fidelity
Sketch Mockup Visual Skins
![Page 9: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/9.jpg)
This is kind of like using design patterns…
![Page 10: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/10.jpg)
TFS is the ALM
![Page 11: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/11.jpg)
“don’t design [just] for yourself”
• You - Your felt experience, as a human, can provide valuable information
• Users – empathetic observations, interviews, usability tests
• Experts – design patterns, design libraries, large usability studies
![Page 12: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/12.jpg)
Suspending bias, generating
empathy
What??
EMPATHY
HOW
FASCINATING!
God-trick: you can’t actually see ec
Huh?
![Page 13: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/13.jpg)
Learning about a user’s
experience
• Go beyond asking users “what do you
want us to build?”
• Notice: watch how users interact with
prototypes, paper prototypes,
competing products
• Ask: discover their goals, values, the
way they organize their thoughts on
something.
![Page 14: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/14.jpg)
Go-to questions
As a Contextual Researcher
• Under what conditions?
• What are the different ways that people see this problem?
• “Tell me more about that” (suspend bias)
As a Designer
• Does is make sense for this app to be simple, or should we provide a richer experience?
• Is there hierarchy and differentiation?
• How does the design support the function?
• How do visual elements relate and work together?
![Page 15: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/15.jpg)
Learning Resources I have found
helpful
• Usability.gov
• Smashing magazine and ebooks
• Lean UX and Lean UX for startups
• Josh Clark’s Myths in Mobile
presentation
http://globalmoxie.com/jhc/prez/mob
ile-context-myth-fowd.pdf
• A List Apart books
![Page 16: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/16.jpg)
Questions - design patterns
• Your take on x design pattern
• Others that are really important
• Things you wish designers would take
into consideration when designing for
mobile
![Page 17: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/17.jpg)
Android design guidelines
http://developer.android.com/design/get-started/principles.html
![Page 18: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/18.jpg)
• https://developer.apple.com/library/ios/document
ation/userexperience/conceptual/mobilehig/index.
html#//apple_ref/doc/uid/TP40006556-CH66-SW1
iOS design guidelines
Other pattern resources & lists
• http://pttrns.com/categories/25-about
• http://www.youthedesigner.com/2013/01/09/10-useful-resources-where-
you-can-get-best-mobile-ui-design-patterns/
• http://blog.mariuszwozniak.com/post/40090655756/top-10-mobile-ui-
design-and-interaction-patterns
• http://www.androidpatterns.com/
• http://www.flickr.com/photos/mobiledesignpatterngallery/collections/
![Page 19: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/19.jpg)
Josh Clark
• Mobile Context Recap:
• Mobile is not rushed or less.
• Complex is not complicated.
• Tap quality not tap quantity.
• Focus for all platforms.
• No such thing as mobile web.
• Don’t think app: think service.
• Metadata is the new art direction.
http://justcreative.com/2011/11/07/future-of-web-design-conference-
day-1-review/
![Page 20: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/20.jpg)
Android Design Principles •
–
–
–
–
•–
–
–
–
–
–
–
–
•–
–
–
–
–
iOS Design Principles Aesthetic Integrity
• how well an app’s appearance and behavior integrates with its function to send a coherent message.
Consistency
• pays attention to the standards and paradigms people are comfortable with and it provides an internally consistent experience
Direct Manipulation
• When people directly manipulate onscreen objects instead of using separate controls to manipulate them, they're more engaged with their task and it’s easier for them to understand the results of their actions.
Feedback
• Feedback acknowledges people’s actions, shows them the results, and updates them on the progress of their task.
Metaphors
• When virtual objects and actions in an app are metaphors for familiar experiences—whether these experiences are rooted in the real world or the digital world—users quickly grasp how to use the app.
User Control
• People—not apps—should initiate and control actions. An app can suggest a course of action or warn about dangerous consequences, but it’s usually a mistake for the app to take decision-making away from the user.
![Page 21: Mobile User Experience - Inductive Design Process](https://reader034.vdocument.in/reader034/viewer/2022051513/5479bff7b4af9fc3158b48d5/html5/thumbnails/21.jpg)
patterns http://uxdesign.smashingmaga
zine.com/2012/04/10/ui-
patterns-for-mobile-apps-
search-sort-filter/
Great article about
search, sort and filter
with lots of examples
http://uxdesign.smashingmaga
zine.com/2012/06/06/design-
patterns-when-breaking-rules-
ok/
If I wanted to give a
talk on design patterns,
I would base it heavily
on this!
Mobile design
principles
http://alistapart.com/topic/mo
bile-multidevice
Collection of articles
from respected
thought leaders
http://alistapart.com/article/or
ganizing-mobile
Luke Wroblewski’s
principles for mobile