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 [email protected] @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?"

7

People who used computers asked for a better experience:"

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


And nothing#s changed."

8

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


Experience matters."

9

In today#s mobile world where:"

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

months"


Experience matters."

10

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

Get Your Strategy Right How to approach mobile design"


First things first."

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

12


A what now?"

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

13


Flickr has a really nice one:"

14


What do our users

need, and what do

they want?

First, ask these questions:"

15

Who are our end

users?

What do our users

need, and what do

they want?

How do we want their

experience to feel?

How do we want their

What kinds of things

should we build to

meet those needs?


Then write down the answers."

16

Who are our end users?"

How do we want their experience to feel?"

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

What kinds of things should we build to meet those needs?"

Old-timey townspeople"

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

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

Monster notifications, illumination function, a way to communicate, town square locator"town square locator


Mobile App: Experience Strategy"

17

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


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

18

FOR ANGRY TOWNSPEOPLE

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

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


It#s easy to get overwhelmed with technical obstacles:"

•! devices"•! networks"•! frameworks "•! the medium itself"

23

Getting started"


Take a deep breath."

When designing, focus on your experience strategy"

24

…and deal with the obstacles later. "

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


Design for touch"

26

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


Design for context"

27

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."


Try to design for all devices"

28

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

experience."


Understand mobile usage patterns"

29

Understand mobile usage patterns

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


Sticky vs. Touch/Go"

30


Watch users on their phones"

31

•! One hand, often the right one"•! Gripping/using thumb"•! May not be paying attention "

•! Could be in almost any environment"


Design for the !“lowest common denominator”"

32

“lowest common denominator”

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


Understand mobile motivations"

33

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


I#m Microtasking"

34

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


I#m Local"

35

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


I#m Bored"

36

Entertainment and distraction, games, reading."

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"

40

MonsterLocation

Mob BuddyHome

NewsLanding

PageShopping CommunityAbout

Upgrade

MobsLanding

Page

Settings

History

Ideas

Polls

Mob List

Plan

News

Alerts

Torches

Boots

Friends

Chat


Good mobile site map"

41

Monster

Alerts

Monster

Alerts

Mob BuddyHome

News

Feeds

Mobs

Torch

Mob Detail

News Detail

Profile


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"

43

Home

Navigation

News, Monster Alerts, Mob Reminders

Page

Content Area

Link to Page

Mobs

List of Mobs

Plan a Mob

Mob Detail

Time & Date

Name Description

InvitedTownspeople

Location

Torch

News Detail

Plan a Mob

Details

MonsterLocation

Map

Contacts

Profile

Name

Email

Social Media


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"

45

UIStatusBar

Monster Sighting10/25/2011 3:08 pm

Mob Event Reminder10/21/2011 7:08 am

Dr. Frankenstein News10/15/2011 3:08 pm

Invitation Notice10/14/2011 12:01 am

Monster Sighting10/07/2011 8:08 am

Mob Event Reminder10/04/2011 3:08 pm


Invitation Notice09/28/2011 3:08 pm


MobBuddy refresh

News Mob Schedule Torch Profile

Monster Sighting 1

2

refresh

3

1

2

3

Tapping a news item advances to its detail page.

Swiping down refreshes the news feed.

Tapping Refresh refreshes the news feed

4

4 Tapping a nav item advances to that page


46

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

A few design thoughts:"


47

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



48

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."



49

Get acquainted with Apple#s iOS UX guidelines. "



50

Design for the touch gestures available:"

Tap Double TapDrag

Swipe Pinch

Spread PressPress-Tap

Press-DragRotate

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



51

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


•! Voice input"

•! Audio + Video"

•! Location services"

•! Accelerometer "

•! Bar codes/QR codes"


52

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

!

44 px

44 px



4 – Prototyping and testing "

Validate your designs""1.! Find the users that you#ve defined 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"

54

Lo-fi Hi-fi

UIStatusBar










MobBuddy refresh


Paper"

iPhone 10:15 PM

Dr. Frankenstein gets a perm10/15/2011 3:08 pm

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

The Monster was spotted at the b...10/25/2011 3:08 pm

Angus Goodby accepted your mob invi...10/14/2011 12:01 am

The Monster has dinner with the mayor10/07/2011 8:08 am

REMINDER: Concorde Square Mob Thi...10/04/2011 3:08 pm

Monster sighting at the cobbler shop09/27/2011 3:08 pm

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

Monster sighting at the milliner09/26/2011 3:08 pm


High Functioning App"

Physical Object"

HTML Clickthrough"

UIStatusBar










MobBuddy refresh



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"

56

iPhone 10:15 PM

Dr. Frankenstein gets a perm10/15/2011 3:08 pm

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

The Monster was spotted at the b...10/25/2011 3:08 pm

Angus Goodby accepted your mob invi...10/14/2011 12:01 am

The Monster has dinner with the mayor10/07/2011 8:08 am

REMINDER: Concorde Square Mob Thi...10/04/2011 3:08 pm

Monster sighting at the cobbler shop09/27/2011 3:08 pm

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

Monster sighting at the milliner09/26/2011 3:08 pm


Add brand, content""•! Make a lovely visual design"•! Follow brand guidelines"•! Use accurate labeling"•! Include representative data:

real words"


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"users!"

58

Mobile Design is for Mobile Users

Happy, productive


59

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/"


Questions/"Comments/"Thank you."

60

mobile design is for mobile users

Design

mobile usersa

mobile medium

mobile trends

mobile web

mobile designwhat

mobile data

mike presentation mobile

mike presentation design