Inspiring Human Perspective Inspiring Human Perspective Additional Contributors GihanAmarasinghe SagiChaitas Andrew Georgiou Dr. Rob Johnson Mobile Mantras Experience Design Best Practices for Mobile Development Panel Participants Brian Assmus Frank R Dellario Matt DiGirolamo Rob Fitzgibbon Hannah Liberty Michelle McNulty Ryan Travis AmitVyawahare
26
Embed
Mobile Mantras: Experience Design Best Practices for Mobile Development
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Inspiring Human PerspectiveInspiring Human Perspective
Additional Contributors
GihanAmarasinghe SagiChaitas
Andrew Georgiou Dr. Rob Johnson
Mobile Mantras
Experience Design Best Practices for Mobile Development
Panel Participants Brian Assmus
Frank R Dellario Matt DiGirolamo Rob Fitzgibbon Hannah Liberty
Michelle McNulty Ryan Travis
AmitVyawahare
2
• How we got here • Basic XD Mantras
• Testing Methodologies
Executive Summary
onetooneglobal.com
Back in the day, internet design was so mellow
3 onetooneglobal.com
Everything is so @#$@#^ complicated now
4 onetooneglobal.com
What do we mean by “mobile”?
Apps vs. “Mobile-Friendly” Websites
5 onetooneglobal.com
And now…
This is what we learned while making it up as we went along
6 onetooneglobal.com
7
Basic Mantras/Guidelines • Keep in mind that
mobilization is content, context, and taskspecific
• Mobile requires a smaller, simpler version of a website that focuses on information and services
• Make the redirection to the mobile site automatic but allow access to the full site, ideally permitting mobile users to follow deep links into the site
onetooneglobal.com
8
UX • Define the use cases (for
example, find a product price, find a store near you, call us, or perform a search).
• Order the use cases by the most frequent for a mobile user. Use your best guess, statistical information, and usability tests to keep this order updated.
• Simplify: Do your best to make every use case successful in no more than three clicks or at a page depth of no more than three.
• Touch/Swipe Friendly onetooneglobal.com
9
IA • Search is the most important
• Minimize the amount of user text input required
• Group large lists by categories, each with no more than 10 items
• Provide the most-used features at the top
• Provide a Go to Top link in the footer
• Provide a Back link
• Use location services if useful onetooneglobal.com
10
IA
Use top aligned labels for forms.
Not only does this allow users to fill out the form faster, but it
is also better for field zooming.
onetooneglobal.com
11
IA
• Provide a link to full desktop site on all pages
• Use all the available width (i.e., not columns) for links, list elements, text inputs, and all possible focusable elements
• Maintain the total link count at no more than 10 per page
• Keep the main navigation to 3 or 4 links
• Avoid horizontal scrolling
onetooneglobal.com
12
Visual • Try your color palette in
different environments (low light, bright sunlight, fluorescent lights)
• Keep graphics limited
• No to Low multimedia
• Maintain visual consistency with your desktop site or brand
• Think Condensed from the visual standpoint
onetooneglobal.com
13
Visual • Only essential
elements are found on the home page
• Use background colors to separate sections
• Use legible fonts on every screen; don’t rely on the resolution
onetooneglobal.com
14
Content • Mobilize content –
not just layout
The ski resort of St. Moritz refocuses the content on their mobile website to be task based (what’s the weather, what lifts are open)
• Personalization & Localization
onetooneglobal.com
15
Content
Take it Easy With Ads
• Small space can become easily cluttered.
• The New York Times is a good example of not porting all ads from the desktop version
onetooneglobal.com
16
Smaller Pieces Doesn’t Mean Less Consumption
onetooneglobal.com
17
Content Don’t skimp on the content!
Having a “light” site doesn’t mean you should leave out content from it. Some service providers
apparently think that mobile users don’t need all that content – wrong! It’s a sure way to annoy and cause problems for people if you put one tenth of your content or shortened versions of articles on
the mobile site.
HTTP://XKCD.COM/869/ onetooneglobal.com
18
Testing Methodologies
Challenges:
• Thousands of Mobile Handsets
• Different Mobile PlaDorms/OS
• Different Mobile Carriers/Manufacturers
• (Everything is so @#$@#^ complicated now)
onetooneglobal.com
19
Mobile Usage vs. Testing Capabilities
Smartphone Pla2orm Market Share
Android
Apple
BlackBerry
Windows
Palm
onetooneglobal.com
20
Types of Mobile Apps Testing • User Interface TesRng