Mobile Design is for Mobile Users

Mobile Design is for Mobile Users
a MADE at MiKE presentation


Me

Gretchen Thomas
User Experience Strategist, Johnson Controls

gretchen@gretchen-thomas.com
@gretchen414

2


Today we’ll talk about:

!! Mobile: what’s UX got to do with it?
!! Experience strategy
!! Mobile design is hard
!! Design Do’s and Don’ts
!! Translating experience strategy into design"
!! Summary and wrap up

3


We won’t talk about:

!! Device strategy
!! Native app vs. mobile web
!! Development
!! Performance
!! Anything under the hood

4

Mobile Design
What#s UX got to do with it?"


Pretty much everything.

6


Why make portable computers?"

People who used computers asked for a better
experience:"

The freedom to access, create
and share information –!
wherever they go."

7


And nothing#s changed."

The more interesting computing
gets, the more people want to take it
with them.

8


Experience matters."

In today#s mobile world where:"

!! Hardware innovations happen constantly"
!! Mobile trends have a short shelf life"
!! Cell phones are replaced every 18
months"

9


Experience matters."
…people are looking for the same
experience 30 years later: "
$
to use information wherever they go. "

10

Get Your Strategy Right
How to approach mobile design"


First things ﬁrst."

Write an experience strategy. "
"
It doesn#t have to be big or complicated,
just clear."

12


A what now?"

Experience Strategy:"
"
A clearly deﬁned set of principles based
on user needs and desires that guide
design and development decisions."

13


Flickr has a really nice one:"

14


First, ask these questions:"
What kinds of things
should we build to
meet those needs?
Who are our end
users?
How do we want their
experience to feel?

What do our users
need, and what do
they want?

15


Then write down the answers."

Who are our end users?" Old-timey townspeople"

How do we want their Organize a productive angry mob on
experience to feel?" a moment’s notice"

What do our users need, Portable lighting (e.g. torches), fast
and what do they want?" access to neighbors, a communal
space to shout angry demands"

What kinds of things should Monster notifications, illumination
we build to meet those function, a way to communicate,
needs?" locator
town square locator"

16


Mobile App: Experience Strategy"

Audience: Old-timey townspeople"

Vision: Organize a productive angry mob
on a moment’s notice"

Goals: Portable lighting (e.g. torches), fast
access to neighbors, a communal
space to shout angry demands

Strategies: - Monster status notifications
- Illumination function
- A a way to communicate
- Town square locator

17


About this time you#ll want to involve your
marketing or brand group."

They’ll want to make sure your strategy is on brand.
And they may give your app its own name:"

FOR ANGRY TOWNSPEOPLE

18

A Word About Mobile Design
It#s no picnic"


Here#s the thing."

Mobile design is hard. It#s complex
and takes time and energy.!
"
“You should expect your explorations into
mobile to be some of the most challenging
moments of your career.”!
!
- Brian Fling, Mobile Design and Development "

20


But what are you gonna do?"

Precise and thoughtful design is the
cost of entry into the mobile medium."
You can’t get around it.
Your design needs to take effort – because
that’s what users expect.

21


If it were easy,"

we#d never see
things like this."

22


Getting started"

It#s easy to get overwhelmed with
technical obstacles:"
•! devices"
•! networks"
•! frameworks "
•! the medium itself"

23


Take a deep breath."

When designing, focus on your
experience strategy"

…and deal with the obstacles later. "

24

Some Do’s and Don’ts
Avert disaster before you start"


Design for touch"

As of June 2011, Android and iOS are
responsible for almost 2/3 of the mobile
data consumed. "

26


Design for context"

In mobile, context is king."
Your users will get value from apps that
help them now, in their present state of
mind, in their current environment."

27


Try to design for all devices"

Design for everybody creates a watered
down mess that serves nobody. "
Target 2-3 devices, and make a fantastic
experience."

28


Understand mobile usage patterns"
patterns

Old thinking: “sticky” website"
New thinking: touch and go"

29


Sticky vs. Touch/Go"

30


Watch users on their phones"

•! One hand, often the right one"
•! Gripping/using thumb"
•! May not be paying attention "
•! Could be in almost any environment"

31


Design for the !
denominator”
“lowest common denominator”"

This phrase is the enemy of good design,
and should be abolished from planning
meetings. "

32


Understand mobile motivations"

•! I#m microtasking"
•! I#m local"
•! I#m bored"

33


I#m Microtasking"

Short dashes of activity: $
jotting down ideas, photos, contacts, info,
forecasts, entertainment…"

34


I#m Local"

Looking for information on surroundings. $
Movie listings, directions, music
identiﬁcation, menus, home listings…"

35


I#m Bored"

Entertainment and distraction, games,
reading."

36

Let’s do this.
Translating your experience strategy into design"


The process"
Five main steps:"
"
1.! Make a site map to organize content"
2.! Make clickstreams to show interaction"
3.! Wireframe to show the skeleton"
4.! Prototype and test"
5.! Apply look, feel and content"

38


1 - Site map: plan the content organization"

Keep your site map simple"
"
People get lost easily on their phones; $
it#s essential to scale back functionality
and edit content."

39


Bad mobile site map"

Mob Buddy
Home

Mobs News
About Landing Landing Shopping Community
Page Page

Upgrade History Monster Torches Friends
Location

Settings Ideas Boots Chat
News

Polls
Alerts

Mob List

Plan

40


Good mobile site map"

Mob Buddy News
Monster
Monster News Detail
Home Feeds
Alerts
Alerts

Mobs Mob Detail

Torch

Proﬁle

41


2 - Clickstreams: plan how users will move
through the app"
Take your time."
"
Get to know your users so you can be
educated on what they need, and in what
sequence. "

42


Mob Buddy Clickstreams"
News Detail

Home
Details Map
News,
Monster Alerts,
Mob Reminders Monster
Location Mob Detail
Time & Date
Plan a Mob
Name
Navigation
Description

Mobs Location

Invited
Torch Townspeople
List of Mobs
Contacts

Plan a Mob

Proﬁle

Name
Page
Content Area Email

Link to Page Social Media

43


3 – Wireframes: show the skeleton and
general content areas"
Mobile wireframes are different"
"
•! Web wireframes: all about content."
•! Mobile wireframes: all about
interaction and functionality."

44


Mob Buddy Wireframe"
UIStatusBar 1 Tapping a news item advances
3
to its detail page.
MobBuddy refresh
2 Swiping down refreshes the
news feed.
Monster Sighting 1
10/25/2011 3:08 pm
3 Tapping Refresh refreshes the
Mob Event Reminder news feed
10/21/2011 7:08 am
4 Tapping a nav item advances
Dr. Frankenstein News to that page
10/15/2011 3:08 pm
2
Invitation Notice
10/14/2011 12:01 am

Monster Sighting
10/07/2011 8:08 am

Mob Event Reminder
10/04/2011 3:08 pm

Monster Sighting
10/01/2011 3:08 pm

Invitation Notice
09/28/2011 3:08 pm

Monster Sighting
09/27/2011 3:08 pm

4

News Mob Schedule Torch Proﬁle

45


A few design thoughts:"

There is no concept of a
“menu” in mobile. "

46



A central idea of the
Natural User Interface
paradigm:"
The content is the action. "

47



Create a default reference
design, and alter it for your
other target devices. "

If the iPhone is one of
your targeted devices,
start with that."

48



Get acquainted with Apple#s iOS UX guidelines. "

49



Design for the touch gestures available:"

Drag Pinch
Tap Double Tap Swipe

Spread Press Press-Drag
Press-Tap Rotate

Get these at http://lukew.com/touch

50



If you#re designing a native app, make use of:"

•! Voice input"
•! Audio + Video"
•! Location services"
•! Accelerometer "
•! Bar codes/QR codes"

51



Target touch sizes:"
Apple recommends : 44 px squared. "
Windows recommends: 34 px with 8 px spacing."
44 px

44 px
!

52


4 – Prototyping and testing "

Validate your designs"
"
1.! Find the users that you#ve deﬁned in your
experience strategy who are not you."
2.! Are you sure they#re not you? "
3.! Have them all perform the same tasks and
give you honest feedback. "
4.! Plan on revisions."

53


Types of prototypes"
UIStatusBar

MobBuddy refresh

Monster Sighting
10/25/2011 3:08 pm UIStatusBar iPhone 10:15 PM

Mob Event Reminder MobBuddy refresh
10/21/2011 7:08 am
Monster Sighting The Monster was spotted at the b...
Dr. Frankenstein News 10/25/2011 3:08 pm 10/25/2011 3:08 pm

10/15/2011 3:08 pm
Mob Event Reminder
REMINDER: Fisher Castle Mob This...
10/21/2011 7:08 am
10/21/2011 7:08 am
Invitation Notice
10/14/2011 12:01 am Dr. Frankenstein News
10/15/2011 3:08 pm Dr. Frankenstein gets a perm
10/15/2011 3:08 pm
Monster Sighting Invitation Notice
10/14/2011 12:01 am
10/07/2011 8:08 am Angus Goodby accepted your mob invi...
10/14/2011 12:01 am
Monster Sighting
Mob Event Reminder 10/07/2011 8:08 am
The Monster has dinner with the mayor
10/04/2011 3:08 pm
Mob Event Reminder 10/07/2011 8:08 am
10/04/2011 3:08 pm
Monster Sighting REMINDER: Concorde Square Mob Thi...
10/01/2011 3:08 pm Monster Sighting 10/04/2011 3:08 pm
10/01/2011 3:08 pm

Invitation Notice Invitation Notice Goody Prynn accepted your mob invi...
09/28/2011 3:08 pm 09/28/2011 3:08 pm
09/28/2011 3:08 pm
Monster Sighting Monster sighting at the cobbler shop

Physical
Monster Sighting 09/27/2011 3:08 pm 09/27/2011 3:08 pm
09/27/2011 3:08 pm
Monster sighting at the milliner
09/26/2011 3:08 pm

Object"
News Mob Schedule Torch Proﬁle News Mob Schedule Torch Proﬁle


Paper"
HTML High Functioning
Clickthrough" App"

Lo-fi Hi-fi

54


5 – Apply look, feel and content "
Express the brand"
"
•! Emotional design is important, but not at the
expense of usefulness. "
•! Sync your experience strategy with brand
strategy."
•! Make visual design familiar by following
conventions and using visual systems."

55


Mob Buddy visual design"
iPhone 10:15 PM

Add brand, content"
"
The Monster was spotted at the b...
10/25/2011 3:08 pm

REMINDER: Fisher Castle Mob This...
10/21/2011 7:08 am

•! Make a lovely visual design" Dr. Frankenstein gets a perm
10/15/2011 3:08 pm

Angus Goodby accepted your mob invi...

•!
10/14/2011 12:01 am

Follow brand guidelines" The Monster has dinner with the mayor
10/07/2011 8:08 am

•! Use accurate labeling"
REMINDER: Concorde Square Mob Thi...
10/04/2011 3:08 pm

Goody Prynn accepted your mob invi...
09/28/2011 3:08 pm

•! Include representative data: Monster sighting at the cobbler shop
09/27/2011 3:08 pm

real words" Monster sighting at the milliner
09/26/2011 3:08 pm


56


Summary"

•! Have a well-researched experience strategy"
•! Prepare for hard work …but don#t freak out over
roadblocks!"
•! Small site map, essential functions, precise clickstreams"
•! Use new design and interaction concepts"
•! Test early and often"
•! Make your users fall in love with your visual design. "

57


The result:"
Happy, productive"
productive
users!"

58


Further reading"
Apple iOS Human Interface Guidelines"
http://developer.apple.com/library/IOs/#documentation/UserExperience/Conceptual/MobileHIG/
Introduction/Introduction.html"

Windows Mobile Design Guidelines"
http://msdn.microsoft.com/en-us/library/bb158602.aspx"

Video: Mobile First! by Luke Wroblewski$
http://www.lukew.com/ff/entry.asp?1137"

Mobile Design Pattern Gallery"
http://www.mobiledesignpatterngallery.com/mobile-patterns.php"

Mobile Design and Development, Brian Fling$
http://www.mobiledesign.org/toc"

Tapworthy: Designing Great iPhone Apps, Josh Clark"
http://www.amazon.com/Tapworthy-Designing-Great-iPhone-Apps/dp/1449381650"

Mobile Web Design, Cameron Moll"
http://mobilewebbook.com/"

59


Questions/"
Comments/"
Thank you."

60

Mobile Design is for Mobile Users

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (19)

Similar to Mobile Design is for Mobile Users

Similar to Mobile Design is for Mobile Users (20)

More from Gretchen Thomas

More from Gretchen Thomas (6)

Recently uploaded

Recently uploaded (20)

Mobile Design is for Mobile Users