Mobile User Experience: A Primer

27 %
73 %
Information about Mobile User Experience: A Primer
Design

Published on April 3, 2014

Author: dlichaw

Source: slideshare.net

Description

This is a class I've taught at General Assembly and NYU in New York City. It touches upon everything you ever need to know about mobile user experience including:
‣ Why mobile matters
‣ What mobile is
‣ Mobile mindset
‣ Best practices & strategies
‣ Design principles
‣ UI elements & gestures

MOBILE USER EXPERIENCEThis 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 3 Untitled 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 3 Untitled 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 3 Untitled 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 3 Untitled 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 3 Untitled 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?

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

7 Best Practices for Designing a Mobile User Experience

Richa Jain discusses 7 of her favourite tips for designing a mobile user experience to give your mobile users an ... Here’s a primer to fluid layouts ...
Read more

Mobile UX Primer: Principles - Ghost in the Pixel

Mobile UX Principles. Below are a set of user experience principles based upon writings and presentations by various mobile design experts, trying to ...
Read more

Designing the Editorial Experience | A Primer for Print ...

A Primer for Print, Web, and Mobile. ... Designing the Editorial Experience. A Primer for ... the University of Vermont and user experience design at ...
Read more

Mobile User Experience (UX) Design » Interaction Design ...

That means that mobile user experience is no longer an optional extra, ... By delivering a great user experience on mobile devices.
Read more

Mobile and Tablet Design: Articles, Training & Reports | NN/g

Basic Patterns for Mobile Navigation: A Primer ... Good mobile user experience requires a different design than ... Mobile and Tablet Design ; User ...
Read more

Mobile User Experience

Mobile User Experience: ... Very few people have the impressive experience Adrian has with the evolution of mobile devices and designing user experiences ...
Read more

Primer Wants To Help Companies Customize A First-Time App ...

Primer Wants To Help Companies Customize A First-Time App ... the first time user experience of mobile apps ... Primer is based on building ...
Read more

Basic Patterns for Mobile Navigation: A Primer

Basic Patterns for Mobile Navigation: ... While the navigation menu is becoming standard and many mobile users are ... User Experience for Mobile ...
Read more