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