SlideShare a Scribd company logo
Mobile UX
A contextual design
perspective
For Titanium User Group
Jen Shurley. 9.23.2013. jenshurley@gmail.com @jens_cam
A user experience
perspective
Mobile as a part of someone’s life and
environment
Structure of talk: iceberg
• App show
(concrete first)
• A contextual
perspective on UX
design
• Conversation
about design
patterns
Webb et al 2008
Starting point: black hole to do list.
David Allen - GTD
Life Hacker
18 Minutes
Real Simple Magazine
Family art night
cards
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.
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
Tap Flow,
Wireframe
Low High
fidelity
Sketch Mockup
Visual Skins
This is kind of like using design patterns…
TFS is the ALM
“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
Suspending bias, generating
empathy
What??
HOW
FASCINATING!
Huh?
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.
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?
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
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
Android design guidelines
http://developer.android.com/design/get-started/principles.html
• 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/
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/
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.
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

More Related Content

PPT
UCD and low-fidelity prototyping
PDF
Crop UX design
PDF
Beginner's Guide to UI Design
KEY
Game Design 2: 2011 - Introduction to Game Interface Design
PDF
Introduction to wireframing ux and design
KEY
Rapid Prototyping With jQuery
KEY
Game Design 2: UI in Games - Revision Lecture
PDF
Tools of the UX Trade
UCD and low-fidelity prototyping
Crop UX design
Beginner's Guide to UI Design
Game Design 2: 2011 - Introduction to Game Interface Design
Introduction to wireframing ux and design
Rapid Prototyping With jQuery
Game Design 2: UI in Games - Revision Lecture
Tools of the UX Trade

What's hot (20)

PDF
Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014
PDF
General Assembly: Sketch Before You Etch
PDF
The Art of APPlication: Using Apps to Engage Students as Collaborators, Creat...
PDF
Designing for Wearables
PDF
UX roles
PDF
2013 Lecture 6: AR User Interface Design Guidelines
PDF
How Do I UX by Quick Left
PDF
Rapid Prototyping For Augmented Reality
PPTX
Ask your users
PPTX
Prototyping tools
PPTX
UI-UX Practical Talking - Mohamed Shehata
PDF
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
PPT
GCU Game Design 2 (2013): Lecture 2 - Menu Flow
PDF
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality
PDF
COMP 4010: Lecture11 AR Interaction
KEY
Stand Out Online and Land an Interview
PDF
Practical UX Methods - as presented at FOWD 2014
PDF
Why do lazy developers write beautiful code?
PPTX
An introduction to ergonomics for mobile UX (Ux in the City)
PPTX
UI Design - Lessons Learned, Principles, and Best Practices
Intro to User Experience Design for Developers, Carnegie Apps Hackathon 2014
General Assembly: Sketch Before You Etch
The Art of APPlication: Using Apps to Engage Students as Collaborators, Creat...
Designing for Wearables
UX roles
2013 Lecture 6: AR User Interface Design Guidelines
How Do I UX by Quick Left
Rapid Prototyping For Augmented Reality
Ask your users
Prototyping tools
UI-UX Practical Talking - Mohamed Shehata
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...
GCU Game Design 2 (2013): Lecture 2 - Menu Flow
COMP 4010 - Lecture 5: Interaction Design for Virtual Reality
COMP 4010: Lecture11 AR Interaction
Stand Out Online and Land an Interview
Practical UX Methods - as presented at FOWD 2014
Why do lazy developers write beautiful code?
An introduction to ergonomics for mobile UX (Ux in the City)
UI Design - Lessons Learned, Principles, and Best Practices
Ad

Similar to Mobile User Experience - Inductive Design Process (20)

PPTX
20210821151927_ISYS6619-UX for Digital Business Topik 09.pptx
PDF
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
PDF
10 Truths to Great Product Experiences
PDF
MIMA 2014 - Changing your Responsive Design Workflow
PDF
Intro to User Centered Design Workshop
PDF
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
PDF
Prototyping for responsive web design
PDF
Web designtrends 5-29-2013
PDF
UX design for every screen
PDF
Bank Chris - Web UI Design Patterns - 2014
PDF
2022 COMP4010 Lecture 6: Designing AR Systems
PPTX
What is UX v2
PDF
20130219 chi chi-overzicht
PPTX
Intro to UX Design
PDF
COMP 4026 Lecture3 Prototyping and Evaluation
PPTX
Xamarin tools
PDF
Incorporating UX into Your Projects
PDF
Introduction to building wireframes
PDF
Uxpin web ui design patterns 2014
PPTX
User Experience Design + Agile: The Good, The Bad, and the Ugly
20210821151927_ISYS6619-UX for Digital Business Topik 09.pptx
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
10 Truths to Great Product Experiences
MIMA 2014 - Changing your Responsive Design Workflow
Intro to User Centered Design Workshop
It's Better To Have a Permanent Income Than to Be Fascinating: Killer Feature...
Prototyping for responsive web design
Web designtrends 5-29-2013
UX design for every screen
Bank Chris - Web UI Design Patterns - 2014
2022 COMP4010 Lecture 6: Designing AR Systems
What is UX v2
20130219 chi chi-overzicht
Intro to UX Design
COMP 4026 Lecture3 Prototyping and Evaluation
Xamarin tools
Incorporating UX into Your Projects
Introduction to building wireframes
Uxpin web ui design patterns 2014
User Experience Design + Agile: The Good, The Bad, and the Ugly
Ad

Recently uploaded (20)

PPTX
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
PPTX
Tenders & Contracts Works _ Services Afzal.pptx
PPTX
HPE Aruba-master-icon-library_052722.pptx
PPTX
areprosthodontics and orthodonticsa text.pptx
PDF
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
PDF
Wio LTE JP Version v1.3b- 4G, Cat.1, Espruino Compatible\202001935, PCBA;Wio ...
PDF
Quality Control Management for RMG, Level- 4, Certificate
PDF
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
PDF
The Advantages of Working With a Design-Build Studio
DOCX
actividad 20% informatica microsoft project
PDF
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
PDF
Africa 2025 - Prospects and Challenges first edition.pdf
PPT
pump pump is a mechanism that is used to transfer a liquid from one place to ...
PDF
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
PPTX
Wisp Textiles: Where Comfort Meets Everyday Style
PPT
unit 1 ppt.ppthhhhhhhhhhhhhhhhhhhhhhhhhh
PPT
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
PDF
Urban Design Final Project-Site Analysis
PPTX
YV PROFILE PROJECTS PROFILE PRES. DESIGN
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
Tenders & Contracts Works _ Services Afzal.pptx
HPE Aruba-master-icon-library_052722.pptx
areprosthodontics and orthodonticsa text.pptx
Design Thinking - Module 1 - Introduction To Design Thinking - Dr. Rohan Dasg...
BRANDBOOK-Presidential Award Scheme-Kenya-2023
Wio LTE JP Version v1.3b- 4G, Cat.1, Espruino Compatible\202001935, PCBA;Wio ...
Quality Control Management for RMG, Level- 4, Certificate
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
The Advantages of Working With a Design-Build Studio
actividad 20% informatica microsoft project
Integrated-2D-and-3D-Animation-Bridging-Dimensions-for-Impactful-Storytelling...
Africa 2025 - Prospects and Challenges first edition.pdf
pump pump is a mechanism that is used to transfer a liquid from one place to ...
Facade & Landscape Lighting Techniques and Trends.pptx.pdf
Wisp Textiles: Where Comfort Meets Everyday Style
unit 1 ppt.ppthhhhhhhhhhhhhhhhhhhhhhhhhh
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
Urban Design Final Project-Site Analysis
YV PROFILE PROJECTS PROFILE PRES. DESIGN

Mobile User Experience - Inductive Design Process

  • 1. Mobile UX A contextual design perspective For Titanium User Group Jen Shurley. 9.23.2013. jenshurley@gmail.com @jens_cam
  • 3. Mobile as a part of someone’s life and environment
  • 4. Structure of talk: iceberg • App show (concrete first) • A contextual perspective on UX design • Conversation about design patterns Webb et al 2008
  • 5. Starting point: black hole to do list. David Allen - GTD Life Hacker 18 Minutes Real Simple Magazine Family art night cards
  • 6. 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.
  • 7. 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
  • 9. This is kind of like using design patterns…
  • 10. TFS is the ALM
  • 11. “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
  • 13. 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.
  • 14. 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?
  • 15. 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
  • 16. 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
  • 18. • 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/
  • 19. 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/
  • 20. 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.
  • 21. 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