Designing Rich Mobile Apps in a Fragmented World

© 2011 WorkLight, Inc. All rights reserved. The information contained herein is the proprietary and confidential information of WorkLight.

Designing Rich Mobile Apps in a Fragmented World

WorkLight Webinar Seriespure user experience

Agenda

Introduction

Mobile App Design and UX Guidelines

Overcoming Cross-Device and OS Challenges

Q&A

2

Introduction

5IVE | pure user experience

• User experience design firm specializing in mobile, web and Windows applications

• Used by over 100 million users worldwide

WorkLight• Mobile application platform for rich cross-platform smartphone and

tablet apps

• Used to deliver apps for customers, partners and employees

3



The Mobile User Experience

While On the Go

Users are always in a hurry

Sessions are quick and short

Accomplish task – and back to main activity

“Micro-tasking”

5

Distractions

Notifications

Phone calls

Messages

Other people interfere

6

And then the train arrives…

The Mobile State of Mind

Visual simplicity

Few taps – and you’re done

Distinct focus

• Optimizing for the primary task

• Getting rid of superfluous features

7

Example – Shazam Music App

Primary task – identify any song and provide info

8

21 3

Users Accomplish Tasks Using Gestures

9

Scale of Intuitiveness of Gestures

10

Physical world metaphors

Vaguely resembles physical

Yes

No

No No physical interpretation

IntuitiveVisual Cue? Is it a Metaphor?Gesture

1

2

3

Right swipe Call

Left swipe SMS

Using Less Intuitive Gestures

11

Long press

On a link, on the

keypad’s <.COM> key…

Shortcuts Non-critical actions

Mimic Gestures – Live Up to Users’ Expectations

12

Swipe

The Comfort Zone

13

• Frequently used controls

• “Costly-error” controls

REACH

EASY

MEDIUM

Comfort Zones

14

iPhone Android

The Evolution of the Minimal Tap Target Area

15

mm Inch

22 0.86

20 0.78

9.6 0.37

8 0.31

7 0.27

6.9 0.27

2000 [Namahn] :

2004 [Colle & Hiszem] :

2006 [Parhi & Bederson] :

Now [Nokia guidelines] :

Now [Win Phone guidelines] :

Now [iPhone guidelines] :

Recommended Size – No less than 7mm, but aim for 9mm



UI Responsiveness in Limited Bandwidth Network

The Evolution of Response Time

Past

• ‘84: [Schneiderman] 15 Sec = TWT (Tolerable Wait Time)

• ‘96: [Nielsen] 10 sec max before user loses interest

• ‘99: [Zona Research] 33% of visitors are lost if response time > 8 sec ‘03

• ‘03: [King] TWT = 8.6 Sec

Now

• ‘06: [AKAMAI] 33% of visitors are lost if response time > 4 Sec

• ‘08: [Nebraska University] TWT = 2 Sec

Insight

• ‘06: [Linden] Google’s attempt to change from 10 results per page to 30, caused extra 0.5 Sec download time. Result: traffic and ad revenues drop of 20%

• ‘07: [Kohavi] Amazon: 100ms increase in response time decreases sales by 1%

17

Networks with Limited Bandwidth are a Challenge

Every 0.1 second in response time counts

Slow response time is one of top 2 user complaints

Impact• Efficiency

• Perceived efficiency poor experience

• After past a certain "attention threshold," users bail out

18

Let’s look at some techniques to address the issue…

Gradual Retrieve

19

Provide additional information only as needed

Background Retrieve

20

Concurrent Retrieve

21


App Design in a Fragmented Mobile Landscape

Overcoming Cross-Device and OS Challenges

Tablets – Mere UI Stretch Does Not Work

23

Tablets – Flattening Hierarchies

24

Tablets – Even Richer Visualization

25

Optimizing for Tablets – CSS3, JS Mechanisms

Using CSS3 Media query

<link href="css/ipad.css" rel="stylesheet" media="screen and (min-width: 768px)" />

<link href="css/portrait.css" rel="stylesheet" media="screen and (orientation: portrait)" />

Or using JavaScript

Window.onorientationchange = function {

// apply style here…

};

26

Skins - Multiple form factors in a single executable for devices of the same OS family

Using Skins to Optimize for Tablets

27

Skins - Multiple form factors in a single executable for devices of the same OS family

Using Skins to Optimize for Tablets

28

iOS

common

tablet

phone Android

Customization per Device

29

Unique Mobile OS Navigation Controls

30

Permanent Tab BarTabs Accessible

via Options MenuSoftware Back ButtonHardware Back

Button

Unique Mobile OS Form Controls

31

Unique Mobile OS Controls

32

Pivot control

Badges

Navigation bar

Mobile OS Fonts

33

Helvetica Droid Sans

Option 1 – Replicate UI

34

High risk, high reward

35

Option 2 – Create Your Own

Option 3 – Adjust UI to the OS

36

A mobile app […] won’t get used unless it’s part of an integrated user experience hosted by the device.

Jacob Nielsen, May 2010

HTML Controls Rendered Natively

37

<input type="checkbox"/><input type="radio" value="Radio 1" /> Radio 1

<select><option value="Option 1">Option 1</option><option value="Option 2">Option 2</option>

</select>

<input type="range"/><input type="date">

Using a JavaScript Toolkit – jQuery Mobile

<ul data-role="listview">

<li><img src="images/gf.png" alt="France" class="ui-li-icon"><a href="index.html">France</a> <span class="ui-li-count">4</span></li>

<li><img src="images/de.png" alt="Germany" class="ui-li-icon"><a href="index.html">Germany</a> <span class="ui-li-count">4</span></li>

…

</ul>

38

Create natively looking controls with simple HTML markup

Using a JavaScript Toolkit – Sencha Touch

var listStore = {

data: [

{firstName: 'Alana', lastName: 'Wiersma'}, …

]}

var myList = new Ext.Container({

items: [{

height: 500,

xtype: 'list',

store: listStore,

itemTpl: '<div class="contact">

{firstName} {lastName} </div>',

grouped: true,

indexBar: true

}]

});

39

Create natively looking controls with simple JavaScript

UI Abstraction – Simple Dialog Box

40

UI Abstraction – Busy Indicator

41

UI Abstraction – Tab Bar

42

UI Abstraction – Options Menu

43

Web-Native Integration

Uniform API for displaying native pages

Data transfer between web and native contexts

Cookie sharing allowing seamless client-server integration

44

For More Information

45

Location

WorkLight Resources – www.worklight.comDeveloper Zone – dev.worklight.com

5IVE Resources – 5ive.co.il

Technology

Designing Rich Mobile Apps in a Fragmented World