MOBILE USER EXPERIENCE

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

2

3

AGENDA

‣ Why mobile?

‣ What is mobile?

‣ Mobile mindset

‣ Best practices

‣ Design principles

‣ UI elements & gestures

WHY MOBILE?

0

25

50

75

100

2007 2008 2009 2010

Untitled 1 Untitled 2 Untitled 3Untitled 4 Untitled 5 Untitled 6

WHY MOBILE?

http://techcrunch.com/2011/10/18/meeker-mobile-pandora-twitter-square/

0

25

50

75

100

2007 2008 2009 2010

Untitled 1 Untitled 2 Untitled 3Untitled 4 Untitled 5 Untitled 6

WHY MOBILE?

http://techcrunch.com/2011/10/18/meeker-mobile-pandora-twitter-square/

0

25

50

75

100

2007 2008 2009 2010

Untitled 1 Untitled 2 Untitled 3Untitled 4 Untitled 5 Untitled 6

WHY MOBILE?

http://www.lukew.com/ff/entry.asp?1506

- Luke Wroblewski

WHAT IS MOBILE?

MOBILE IS _____

‣ Personal

‣ Intimate

‣ Convenient

‣ Effortless

http://www.flickr.com/photos/29419113@N06/6681210225/

MOBILE IS _____

‣ Dynamic

‣ Unpredictable

‣ Anywhere and everywhere Satechi Universal Bicycle Holder Wrench Mount

!CONTEXT

MOBILE IS _____

TABLET?

IS TABLET MOBILE?

‣ Personal

‣ Intimate

‣ Convenient

‣ Effortless

‣ Invisible

http://www.flickr.com/photos/whitefield_d/5886357461/

‣ Personal

‣ Intimate

‣ Convenient

‣ Effortless

‣ Invisible

‣ Dynamic

‣ Unpredictable

‣ Anywhere and everywhere

KIND OF.SORT OF.

IS TABLET MOBILE?

DO TABLETS USE MOBILE NETWORKS?‣ Only 6% of iPad sessions come from cellular network connections

‣ 29% of iPhones and 68% of Android smartphones in the US browse the Internet only using cellular networks.

‣ Globally, smartphones account for 36% of all connections to public WiFi hot spots compared to 10% for tablets.

http://www.lukew.com/ff/entry.asp?1571

- Luke Wroblewski

0

25

50

75

100

2007 2008 2009 2010

Untitled 1 Untitled 2 Untitled 3Untitled 4 Untitled 5 Untitled 6

IS TABLET MOBILE?

http://stateofthemedia.org/2012/digital-news-gains-audience-but-loses-more-ground-in-chase-for-revenue/digital-by-the-numbers/

WHEN ARE TABLETS USED?

IS TABLET MOBILE?

NO.

http://www.flickr.com/photos/bendodson/5338445045/

BUT, WHAT ABOUT...?

WHAT ABOUT...?

http://www.cio.com/article/693401/iPad_in_Healthcare_Not_So_Fast

WHAT ABOUT...?

http://www.wired.com/autopia/2010/07/ipad-popular-with-aviation-crowd-in-oshkosh/

IT DEPENDS

IT’S MORE LIKE...

MOBILE USER EXPERIENCE IS:

CONTEXT

‣ Users

‣ Business

‣ Capabilities

‣ Constraints

MOBILE MINDSET

MOBILE MINDSET

http://www.flickr.com/photos/zeldman/7956491412

MOBILE MINDSET

I’m microtasking I’m local I’m bored

MOBILE USERS ARE _______

BUSY AND DISTRACTED

http://www.flickr.com/photos/antrover/8415870158

one eyeball

!

one thumb

0

25

50

75

100

2007 2008 2009 2010

Untitled 1 Untitled 2 Untitled 3Untitled 4 Untitled 5 Untitled 6

FICKLE AND DISLOYAL

http://www.localytics.com/blog/2011/26percent-of-mobile-app-users-are-either-fickle-or-loyal/

CLUMSY

http://www.flickr.com/photos/druggedmoon/43811147

fat fingers x10

UNEDUCATED

- Josh Clark, Tapworthy

...ARE NOT NECESSARILY TABLET USERS

BEST PRACTICES

BEST PRACTICES

STRATEGY

‣ Native

‣ Native/HTML Hybrid

‣ Mobile Web

‣ Responsive

‣ Mobile First

!

!

IT DEPENDS ‣ Context

‣ Users

‣ Business

‣ Tech Capabilities and Resources

!

!

!}

BEST PRACTICES

DESIGN PROCESS

‣ Empathy!

‣ Understanding your context, users, and business is more important than ever – fewer givens than with desktop contexts.

‣ Get out of the building! Ideate in the wild. Work in the wild?

DESIGN PRINCIPLES

PRINCIPLES

DESIGN FOR SCALABILITY

‣ Easier to scale up UIs than to scale down

‣ Provide continuity across devices and touchpoints

PRINCIPLES

DESIGN FOR LESS SCREEN REAL ESTATE‣ Focus on content over navigation

‣ Focus on primary tasks (1 per screen)

!

PRINCIPLES

DESIGN FOR PARTIAL ATTENTION

‣ Provide clarity and focus

‣ You need to know what matters most i.e. You need to really know your customers and your business

!

PRINCIPLES

DESIGN FOR GLANCEABILITY

!

!

PRINCIPLES

DESIGN FOR INTERRUPTION

‣ Auto-save

‣ Multi-tasking

‣ Let users pick up where they left off

‣ Same device

‣ Other devices

‣ Other touchpoints

PRINCIPLES

DESIGN FOR CAPABILITIES‣ GPS - location

‣ Compass - direction

‣ Gyroscope - movement, acceleration

‣ Device (address book, phone, SMS, calendar integration)

‣ Input - Audio, video, image

‣ Bluetooth, RFID - connectivity and “Near Field Communication”

‣ Light sensors - environmental awareness

‣ Touch - gestures, direct manipulation (NUI

PRINCIPLES

DESIGN FOR CAPABILITIES‣ GPS - location

‣ Compass - direction

‣ Gyroscope - movement, acceleration

‣ Device (address book, phone, SMS, calendar integration)

‣ Input - Audio, video, image

‣ Bluetooth, RFID - connectivity and “Near Field Communication”

‣ Light sensors - environmental awareness

!

!

!}REIMAGINE WHAT’S POSSIBLE

UI ELEMENTS & GESTURES

BARS & BUTTONS

Status Bar

CONTENT VIEW

Popovers (iPad only)

CONTENT VIEWS (CONT.)

Table View

CONTENT VIEWS (CONT.)

Grouped Tables

CONTENT VIEWS (CONT.)

Table View Elements

CONTROLS

Date Picker

CONTROLS (CONT.)

Date Picker (embedded)

CONTROLS (CONT.)

CONTROLS (CONT.)

CONTENT VIEWS

Activity

TEMPORARY VIEWS

Action Sheet

TEMPORARY VIEWS (CONT.)

Alert

GESTURES

FRAMEWORKS & PATTERNS

NAVIGATION FRAMEWORKS

‣ Springboard

‣ List Menu

‣ Dashboard

‣ Gallery

‣ Side Drawer

‣ Tab Menu

NAVIGATION FRAMEWORKS: SPRINGBOARD

http://www.amazon.com/Mobile-Design-Pattern-Gallery-Smartphone/dp/1449363636/

NAVIGATION FRAMEWORKS: SPRINGBOARD

http://www.amazon.com/Mobile-Design-Pattern-Gallery-Smartphone/dp/1449363636/

NAVIGATION FRAMEWORKS: LIST MENU

http://www.amazon.com/Mobile-Design-Pattern-Gallery-Smartphone/dp/1449363636/

NAVIGATION FRAMEWORKS: DASHBOARD

http://www.amazon.com/Mobile-Design-Pattern-Gallery-Smartphone/dp/1449363636/

NAVIGATION FRAMEWORKS: GALLERY

http://www.amazon.com/Mobile-Design-Pattern-Gallery-Smartphone/dp/1449363636/

NAVIGATION FRAMEWORKS: SIDE DRAWER

http://www.amazon.com/Mobile-Design-Pattern-Gallery-Smartphone/dp/1449363636/

CASE STUDY: FACEBOOK

“The first big mission of the new testing framework was

rethinking how users navigate on mobile. It wondered if there

was something better than the navigation drawer that slides

out from the side of the app.

It used the new testing framework to experiment with dozens

of different interface designs, and compared them on metrics

including “engagement metrics, satisfaction metrics, revenue

metrics, speed metrics, perception of speed metrics” until it

found that when looked at holistically, the row of buttons at

the bottom of the feed or main screen was the best design.”

‣ http://techcrunch.com/2013/09/18/facebooks-new-mobile-test-framework-births-bottom-tab-bar-navigation-redesign-for-ios-5-6-7/

NAVIGATION FRAMEWORKS: TAB MENU

http://www.amazon.com/Mobile-Design-Pattern-Gallery-Smartphone/dp/1449363636/

CASE STUDY: MOBILE & RESPONSIVE WEB

‣ http://exisweb.net/mobile-menu-abtest

“Based on this and my previous AB test, a flat

hamburger icon may not be ideal on a responsive

website (remember this is a website not an app).

Using the word MENU (and making it look like a

button) could be more helpful for visitors.”

STUDY: ICONOGRAPHY AND USABILITY

“Clear labels help users make decisions faster: they give good

information scent about what will come next. Labels should

still be used for newer icons, such as the three-line menu icon

(or “hamburger” icon). The map-marker icon is another icon

with a still cloudy meaning and inconsistent use. Sometimes it

means current location, or a different particular location, or

locations in general, or nearby places.”

‣ http://www.nngroup.com/articles/magnifying-glass-icon/

‣ Users

‣ Business

‣ Capabilities

‣ Constraints

REIMAGINE WHAT’S POSSIBLE

MOBILE USER EXPERIENCE IS:

CONTEXT !

!

!}TEST EVERYTHING

‣ http://pttrns.com/

‣ http://www.mobile-patterns.com/

‣ http://inspired-ui.com/

‣ http://www.lovelyui.com/

‣ http://mobiledesignpatterngallery.com/

PATTERN LIBRARIES

FRAMEWORKS & PATTERNS

OS GUIDELINES‣ https://developer.apple.com/library/ios/documentation/userexperience/conceptual/MobileHIG

‣ https://developer.android.com/design

ADDITIONAL RESOURCES

BOOKS!‣ Mobile Frontier, Rachel Hinman

‣ (Rosenfeld Media, promo code: LICHAW)

‣ Tapworthy, Josh Clark

‣ Mobile First, Luke Wroblewski

‣ Responsive Design, Ethan Marcotte

‣ Mobile Design Pattern Gallery, Theresa Neil

QUESTIONS?