mobile mantras: xd best practices for mobile development
TRANSCRIPT
Additional
Contributors
Gihan Amarasinghe
Sagi Chaitas
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
Amit Vyawahare
2
• How we got here
• Basic XD Mantras
• Testing Methodologies
Executive Summary
onetooneglobal.com
Back in the day,
internet design was so mellow
3onetooneglobal.com
Everything is so @#$@#^ complicated now
4onetooneglobal.com
What do we mean by “mobile”?
Apps vs. “Mobile-Friendly” Websites
5onetooneglobal.com
Native vs. web development
And now…
This is what we learned while
making it up as we went along
6onetooneglobal.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 Friendlyonetooneglobal.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 usefulonetooneglobal.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
ContentDon’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 Platforms/OS
• Different Mobile Carriers/Manufacturers
• (Everything is so @#$@#^ complicated now)
onetooneglobal.com
19
Mobile Usage vs. Testing Capabilities
Smartphone PlatformMarket Share
Android
Apple
BlackBerry
Windows
Palm
onetooneglobal.com
20
Types of Mobile Apps Testing
• User Interface Testing• Functional Testing
• Performance & Stress Testing• Usability Testing
Additional key testing types:• Compatibility Testing
• Certification Compliance• Submission Guidelines• Interruption Testing
• Monkey Testing• Low/No Network Testing
onetooneglobal.com
onetooneglobal.com 21
Mobile Technology Sets
Android iOS Blackberry Windows WebOS
Various Apple Blackberry Various HP / Palm
Java Objective C Java C# / C++ / VB HTML / CSS /
JavaScript
Open Closed Closed Closed Closed
Yes Limited (iOS 4+)
Yes Limited Yes
WebkitBrowser Safari
Blackberry Browser
Varies with Device / Carrier
WebOSBrowser
Platforms
Devices
Dev. Language
Source Model
Multi-tasking
Standard Browser
Platforms
Devices
Dev. Language
Source Model
Multi-tasking
GSM CDMA LTE HSPA+ WiMAX
AT&T, T-Mobile
Verizon, Sprint
Verizon AT&T,
T-Mobile Sprint
3G 3G 4G 4G 4G
1769 / 739 kbps
848 / 506 kbps
6.44 / 5.0 mbps
2.48 / 1.05 mbps
2.15 / .081 mbps
Yes No Yes Yes Yes
22
Mobile App Test Strategy Remote Device Access Service• Device Anywhere (Paid)
• Perfecto Mobile (Paid)
• Nokia RDA (Free, For Symbian Phones)
Pros
• No purchase necessary
• Can select different carriers
• More reliable than
• Automation capabilities.
Cons
• Takes time
• Reservations required
• High service costs
• Dawn of a New Era – the
handset cloud
- Significantly lower
testing/development
costs
- Works with flexible/agile
development methods
onetooneglobal.com
23
Delivering Efficiency via Automation
Test Automation Success Criteria
Reliable
• Issues detection and security
• Accurate Verification
• Unattended Execution
Maintainable
• Minimum sensitivity to application and test case changes
• Test cases separate from automation code
Scalable
• Test coverage expanded efficiently
• Automated test cases created by non technical resources
onetooneglobal.com
24
Mobile Automation Approach
onetooneglobal.com
25
6 Emerging Trends in 2012
1. Mobile grabs the budget spotlight
2. Tablets are here to stay
3. NFC (near field communications) will drive mobile payments
4. Mobile ALM (application lifecycle management) goes mainstream
5. Testing moves to the cloud
6. Private clouds for mobile testing
onetooneglobal.com
26
In Summary
• How we got here
• Basic XD Mantras
• Testing Methodologies
onetooneglobal.com
onetooneglobal.com 27
Join Our Conversation!
@Onetooneglobal
#MobileUsability#ExperienceDesign