Mobile User Experience
71
MOBILE USER EXPERIENCE This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
-
Upload
donna-lichaw -
Category
Design
-
view
1.603 -
download
1
description
A primer to mobile user experience. You'll learn: ‣ Why mobile matters ‣ What mobile is ‣ Mobile mindset ‣ Best practices & strategies ‣ Design principles ‣ UI elements & gestures
Transcript of Mobile User Experience
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?
