Mobile Design is for Mobile Users

Mobile Design is for Mobile Users a MADE at MiKE presentation

Gretchen Thomas User Experience Strategist, Johnson Controls gretchen@gretchen-thomas.com @gretchen414

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

We won’t talk about:

!! Device strategy

!! Native app vs. mobile web

!! Development

!! Performance

!! Anything under the hood

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

Pretty much everything.

Why make portable computers?"

People who used computers asked for a better experience:"

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

And nothing#s changed."

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

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"

Experience matters."

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

A what now?"

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

Flickr has a really nice one:"

What do our users

need, and what do

they want?

First, ask these questions:"

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

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"

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

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 "

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.

If it were easy,"

we#d never see things like this."

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

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

Getting started"

Take a deep breath."

When designing, focus on your experience strategy"

…and deal with the obstacles later. "

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

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

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

Understand mobile usage patterns"

Understand mobile usage patterns

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

Sticky vs. Touch/Go"

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"

Design for the !“lowest common denominator”"

“lowest common denominator”

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

Understand mobile motivations"

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

I#m Microtasking"

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

I#m Local"

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

I#m Bored"

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"

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

Bad mobile site map"

MonsterLocation

Mob BuddyHome

NewsLanding

PageShopping CommunityAbout

Upgrade

MobsLanding

Settings

History

Mob List

Alerts

Torches

Friends

Good mobile site map"

Monster

Alerts

Monster

Alerts

Mob BuddyHome

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

Mob Buddy Clickstreams"

Navigation

News, Monster Alerts, Mob Reminders

Content Area

Link to Page

List of Mobs

Plan a Mob

Mob Detail

Time & Date

Name Description

InvitedTownspeople

Location

News Detail

Plan a Mob

Details

MonsterLocation

Contacts

Profile

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

Mob Buddy Wireframe"

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

refresh

Tapping a news item advances to its detail page.

Swiping down refreshes the news feed.

Tapping Refresh refreshes the news feed

4 Tapping a nav item advances to that page

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

A few design thoughts:"

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

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

Get acquainted with Apple#s iOS UX guidelines. "

Design for the touch gestures available:"

Tap Double TapDrag

Swipe Pinch

Spread PressPress-Tap

Press-DragRotate

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

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

•! Voice input"

•! Audio + Video"

•! Location services"

•! Accelerometer "

•! Bar codes/QR codes"

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

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

Types of prototypes"

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

Mob Buddy visual design"

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

The result:"Happy, productive"users!"

Mobile Design is for Mobile Users

Happy, productive

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

Mobile Design is for Mobile Users

Design

Transcript of Mobile Design is for Mobile Users

Analytics for mobile users

Principles of Mobile App Design: Engage Users and Drive Conversions by Google

Bangladeshi Mobile Users in Facebook

Mobile Device Users

Mobile Phone Banking Users Guide

Principles of Mobile Site Design: Delight Users and Drive Conversions

How To Deliver Fast, Engaging Responsive Web Design Sites · How To Deliver Fast, Engaging Responsive Web Design Sites 1 Mobile Impacts The Bottom Line Engaging mobile users with

Mobile App Design and Functionality for Low Vision Users

Sybil Attacks Against Mobile Users

Principles of mobile app design engage users and drive conversions

FirstClass Support for Mobile Users

Best Practices for Mobile Application Design · Best Practices for Mobile Application Design Higher-End Devices •Design for user preferences and patterns: –Often users will use

Providing web services to mobile users: the architecture design …mason.gmu.edu/~mchen/web/papers/IJMC V3 N1 2005 Chen_Zhang_Z… · Providing web services to mobile users: the architecture

2012 Email Design · email design where the content displayed changes according to the device. Desktop users see a full-width version, while mobile users see a ... Full width email

Responsive Web Design Delivers a Positive Customer ... Web Design Delivers a Positive Customer Experience for Mobile Users Allen Solomon CEO, Pinnacle Creative Studio What is a Mobile

GeoInfo Mobile Users Manual v3geoinfomobile.com/Downloads/GeoInfo Mobile Users Manual.pdf · 2014. 4. 3. · GeoInfo Mobile Users Manual 14 Double Click / Touch Optimization Double

A Personalizable Mobile Sound Detector App Design for …dkbragg/papers/Personalizable... · A Personalizable Mobile Sound Detector App Design for Deaf and Hard-of-Hearing Users Danielle

Mobile MENA Internet users Survey

Beyond “yesterday’s tomorrow”: future-focused mobile ... · Beyond “yesterday’s tomorrow”: future-focused mobile interaction design by and for emergent users ... South

Based on mobile Internet users to search the experience design