mobile mantras: xd best practices for mobile development
TRANSCRIPT
![Page 1: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/1.jpg)
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
![Page 2: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/2.jpg)
2
• How we got here
• Basic XD Mantras
• Testing Methodologies
Executive Summary
onetooneglobal.com
![Page 3: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/3.jpg)
Back in the day,
internet design was so mellow
3onetooneglobal.com
![Page 4: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/4.jpg)
Everything is so @#$@#^ complicated now
4onetooneglobal.com
![Page 5: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/5.jpg)
What do we mean by “mobile”?
Apps vs. “Mobile-Friendly” Websites
5onetooneglobal.com
Native vs. web development
![Page 6: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/6.jpg)
And now…
This is what we learned while
making it up as we went along
6onetooneglobal.com
![Page 7: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/7.jpg)
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
![Page 8: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/8.jpg)
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
![Page 9: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/9.jpg)
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
![Page 10: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/10.jpg)
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
![Page 11: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/11.jpg)
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
![Page 12: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/12.jpg)
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
![Page 13: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/13.jpg)
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
![Page 14: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/14.jpg)
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
![Page 15: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/15.jpg)
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
![Page 16: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/16.jpg)
16
Smaller Pieces Doesn’t Mean Less Consumption
onetooneglobal.com
![Page 17: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/17.jpg)
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
![Page 18: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/18.jpg)
18
Testing Methodologies
Challenges:
• Thousands of Mobile Handsets
• Different Mobile Platforms/OS
• Different Mobile Carriers/Manufacturers
• (Everything is so @#$@#^ complicated now)
onetooneglobal.com
![Page 19: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/19.jpg)
19
Mobile Usage vs. Testing Capabilities
Smartphone PlatformMarket Share
Android
Apple
BlackBerry
Windows
Palm
onetooneglobal.com
![Page 20: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/20.jpg)
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
![Page 21: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/21.jpg)
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
![Page 22: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/22.jpg)
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
![Page 23: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/23.jpg)
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
![Page 24: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/24.jpg)
24
Mobile Automation Approach
onetooneglobal.com
![Page 25: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/25.jpg)
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
![Page 26: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/26.jpg)
26
In Summary
• How we got here
• Basic XD Mantras
• Testing Methodologies
onetooneglobal.com
![Page 27: Mobile Mantras: XD Best Practices for Mobile Development](https://reader034.vdocuments.net/reader034/viewer/2022042817/55a9ce901a28abf03c8b486e/html5/thumbnails/27.jpg)
onetooneglobal.com 27
Join Our Conversation!
@Onetooneglobal
#MobileUsability#ExperienceDesign