Elements of the mobile user experience
-
Upload
lyndon-cerejo -
Category
Mobile
-
view
225 -
download
2
description
Transcript of Elements of the mobile user experience
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
Elements of the
Mobile User Experience
Lyndon Cerejo
J. Boye Web & Intranet Conference Philadelphia, May 2014
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
ABOUT LYNDON
UX Lead for Capgemini
Rapid Design & Visualization
14 years
www.linkedin.com/in/lycerejo/ http://bit.ly/appgraveyard
Gave up on Inbox Zero a long time ago
Author, writer
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
“Build Us A Sexy App“
“Help me understand what you mean“
Sexy = look and feel, visual design
Important, but only one of many aspects that impact the user experience
UI = UX
UX is...
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
Building A Sexy App Enjoyable Mobile User Experiences
Understand Mobile User Experience
Review Elements with examples
How you can use it
Links to detailed write up and resources at the end
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
MOBILE USER EXPERIENCE
A user’s perceptions and feelings before, during and after their mobile interaction
using a mobile device
Breaking it down
12 elements
( not al l may apply )
Let’s dig into each!
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
Functionality
Tools and features that enable users to complete tasks and achieve their goals
Core functionality
Mobile optimized
Relevant to category
All channel experience
kayak
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
Information Architecture
Arranging the functionality and content into a logical structure to help users find
information and complete tasks. Includes navigation, search and labeling
Main features on landing page
Concise, clear, consistent, descriptive
labels
Navigational cues
Design for touch
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
Content
Various types of material in different formats, such as text, images and video, that
provide information to the user.
Balanced content mix
User control over media (no auto-start)
Mobile appropriate content (chunk,
scale images)
Pictures, video as appropriate
supportive content
Product information Marketing C ontent
Social C ontent
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
Design
The visual presentation and interactive experience of mobile, including graphic
design, branding and layout
Glanceability and quick
scanning
Visual flow
Orientation
Cross channel visual
consistency
iOS Weather Yahoo! Weather
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
User Input
The effort required to enter data, which should be minimized on mobile devices
and not require the use of both hands
Minimize input
Smart defaults
Alternate mobile input
Appropriate keyboards
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
Mobile Context
The environment and circumstances of usage, which can change constantly and
rapidly.
Common examples are distractions,
multitasking, motion, low lighting and
poor connectivity
Use device capabilities
User-provided information
User preferences & settings
http://www.giantant.com/antenna/2007/06/design-sketch-the-context-of-m.html Nadav Savio
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
Usability
An overall measure of how well the information architecture, design, content and
other elements work together to enable users to accomplish their goals.
Affordance
Tap sized & spaced
Conventions &
platform standards
Contrast, color,
typography and font
size
Luke W, Mobile First
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
Trustworthiness
The level of confidence, trust and comfort that users feel when using a mobile
website or app.
Privacy & Security concerns
Ask permission
Explain business practices
Mobile friendly legalese
Give users control
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
Feedback
Methods for attracting the user’s attention and displaying important information
Minimize number of alerts
Brief and clear message with
options
Onscreen feedback and
confirmation
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
Help
Options that are available to assist the user in using the website or app.
First launch guide ( w/ skip)
Multiple help options (@AskCiti)
Global and contextual help
Optimize click-to-call
Weathercube
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
Social
Content and features that create a sense of social participation, that enable user
interaction and that facilitate sharing on established social networks.
Incorporate social presence and
activity on site
Generate content with your brand
Shareable content
Seed content
Red Robin Customizer
@Tweetacoffee
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
Marketing
Methods by which a user finds a website or app and the factors that encourage
repeated usage.
Optimizing for mobile search and
discovery
QR codes to mobile optimized
page
Promote app in other channels
Prompt for ratings reviews (w/
“don’t remind me”)
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
PUTTING THE ELEMENTS TO WORK
During Design, Reviews & Evaluations
Personalize it for your users, industry, competition
Framework as a starting point (DigitalGov: http://bit.ly/digitalgovmux)
Ongoing updates
Lyndon Cerejo | [email protected] | @lycerejo Strategist.Net
QUESTIONS ? RELATED RESOURCES
bit.ly/muxelem
(detailed article, links to books, articles and further reading)