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??

EMPATHY

HOW

FASCINATING!

God-trick: you can’t actually see ec

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