1. Mobile Mantras
Experience Design Best Practices for
Mobile Development
Panel Participants
Brian Assmus Additional
Frank R Dellario Contributors
Inspiring Human Perspective Matt DiGirolamo GihanAmarasinghe
Rob Fitzgibbon SagiChaitas
Hannah Liberty Andrew Georgiou
Michelle McNulty Dr. Rob Johnson
Ryan Travis
AmitVyawahare

2. Executive Summary
• How we got here
• Basic XD Mantras
• Testing Methodologies
onetooneglobal.com
2

3. Back in the day,
internet design was so mellow
onetooneglobal.com
3

4. Everything is so @#$@#^ complicated now
onetooneglobal.com
4

5. What do we mean by “mobile”?
Apps vs. “Mobile-Friendly” Websites
onetooneglobal.com
5

6. And now…
This is what we learned while
making it up as we went along
onetooneglobal.com
6

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
7

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
8

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
9

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
10

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
11

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
12

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
13

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
14

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
15

16. Smaller Pieces Doesn’t Mean Less Consumption
onetooneglobal.com
16

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.
onetooneglobal.com
HTTP://XKCD.COM/869/
17

18. Testing Methodologies
Challenges:
• Thousands
of
Mobile
Handsets
• Different
Mobile
PlaDorms/OS
• Different
Mobile
Carriers/Manufacturers
• (Everything
is
so
@#$@#^
complicated
now)
onetooneglobal.com
18

19. Mobile Usage vs. Testing Capabilities
Smartphone
Pla2orm
Market
Share
Android
Apple
BlackBerry
Windows
Palm
onetooneglobal.com
19

20. Types of Mobile Apps Testing
• User
Interface
TesRng
• FuncRonal
TesRng
• Performance
&
Stress
TesRng
• Usability
TesRng
Addi%onal
key
tes%ng
types:
• CompaRbility
TesRng
• CerRficaRon
Compliance
• Submission
Guidelines
• InterrupRon
TesRng
• Monkey
TesRng
• Low/No
Network
TesRng
onetooneglobal.com
20

21. Mobile Technology Sets
Platforms Android iOS Blackberry Windows WebOS
Devices Various
Apple
Blackberry
Various
HP
/
Palm
HTML
/
CSS
/
Dev. Language Java
Objec;ve
C
Java
C#
/
C++
/
VB
JavaScript
Source Model Open
Closed
Closed
Closed
Closed
Limited
Multi-tasking Yes
Yes
Limited
Yes
(iOS
4+)
Webkit
Blackberry
Varies
with
WebOS
Standard Browser Browser
Safari
Browser
Device
/
Carrier
Browser
Platforms GSM CDMA LTE HSPA+ WiMAX
AT&T,
Verizon,
AT&T,
Devices Verizon
Sprint
T-­‐Mobile
Sprint
T-­‐Mobile
3G
3G
4G
4G
4G
Dev. Language
1769
/
739
848
/
506
6.44
/
5.0
2.48
/
1.05
2.15
/
.081
kbps
kbps
mbps
mbps
mbps
Source Model
Multi-tasking Yes
No
Yes
Yes
Yes
onetooneglobal.com
21

22. Mobile App Test Strategy Remote Device Access Service
• Device Anywhere (Paid)
• Dawn of a New Era – the • Perfecto Mobile (Paid)
• Nokia RDA (Free, For Symbian Phones)
handset cloud
- Significantly lower Pros
testing/development • No purchase necessary
costs • Can select different carriers
- Works with flexible/agile • More reliable than
• Automation capabilities.
development methods
Cons
• Takes time
• Reservations required
• High service costs
onetooneglobal.com
22

23. Delivering Efficiency via Automation
Test Automation Success Criteria
Reliable
Maintainable
Scalable
• Issues
detecRon
and
• Minimum
sensiRvity
to
• Test
coverage
expanded
security
applicaRon
and
test
case
efficiently
• Accurate
VerificaRon
changes
• Automated
test
cases
• Unaaended
ExecuRon
• Test
cases
separate
from
created
by
non
technical
automaRon
code
resources
onetooneglobal.com
23

24. Mobile Automation Approach
onetooneglobal.com
24

25. 6 Emerging Trends in 2012
1. Mobile
grabs
the
budget
spotlight
2. Tablets
are
here
to
stay
3. NFC
will
drive
mobile
payments
4. Mobile
ALM
goes
mainstream
5. TesRng
moves
to
the
cloud
6. Private
clouds
for
mobile
tesRng
onetooneglobal.com
25

26. In Summary
• How we got here
• Basic XD Mantras
• Testing Methodologies
onetooneglobal.com
26