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  

•  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  

onetooneglobal.com   21  

Mobile Technology Sets Android iOS Blackberry Windows WebOS Various     Apple     Blackberry     Various     HP  /  Palm    

Java     Objec;ve  C     Java     C#  /  C++  /  VB     HTML  /  CSS  /    JavaScript    

Open     Closed     Closed     Closed     Closed    

Yes     Limited    (iOS  4+)     Yes     Limited     Yes    

Webkit  Browser     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  detecRon  and  security    

•  Accurate  VerificaRon    •  Unaaended  ExecuRon  

Maintainable  

• Minimum  sensiRvity  to  applicaRon  and  test  case  changes  

•  Test  cases  separate  from  automaRon  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  will  drive  mobile  payments  

4. Mobile  ALM  goes  mainstream  

5.  TesRng  moves  to  the  cloud  

6.  Private  clouds  for  mobile  tesRng  

onetooneglobal.com  

26  

In Summary

•  How we got here •  Basic XD Mantras

•  Testing Methodologies

onetooneglobal.com