Designing Rich Mobile Apps

in a Fragmented World
WorkLight Webinar Series
pure user experience

© 2011 WorkLight, Inc. All rights reserved. The information contained herein is the proprietary and confidential information of WorkLight.
 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
 Mobile App Design and UX
Guidelines
The Mobile User Experience

© 2011 WorkLight, Inc. All rights reserved. The information contained herein is the proprietary and confidential information of WorkLight.
 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

And then the train arrives…

6
 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

1 2 3

8
 Users Accomplish Tasks Using Gestures

9
 Scale of Intuitiveness of Gestures

Gesture Visual Cue? Is it a Metaphor? Intuitive

1 Yes Physical world metaphors

2 No Vaguely resembles physical

3 No No physical interpretation

10
 Using Less Intuitive Gestures

Long press
On a link, on the
keypad’s <.COM> key…
Right swipe Call
Left swipe SMS

Shortcuts Non-critical actions

11
 Mimic Gestures – Live Up to Users’ Expectations

Swipe

12
 The Comfort Zone

REACH

• Frequently used controls

EASY

• “Costly-error” controls
MEDIUM

13
 Comfort Zones
iPhone Android

14
 The Evolution of the Minimal Tap Target Area

mm Inch
2000 [Namahn] : 22 0.86
2004 [Colle & Hiszem] : 20 0.78

2006 [Parhi & Bederson] : 9.6 0.37

Now [Nokia guidelines] : 8 0.31

Now [Win Phone guidelines] : 7 0.27
Now [iPhone guidelines] : 6.9 0.27

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

15
 Mobile App Design and UX
Guidelines
UI Responsiveness in Limited Bandwidth Network

© 2011 WorkLight, Inc. All rights reserved. The information contained herein is the proprietary and confidential information of WorkLight.
 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

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

18
 Gradual Retrieve
Provide additional information only as needed

19
 Background Retrieve

20
 Concurrent Retrieve

21
 App Design in a Fragmented
Mobile Landscape
Overcoming Cross-Device and OS Challenges

© 2011 WorkLight, Inc. All rights reserved. The information contained herein is the proprietary and confidential information of WorkLight.
 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
 Using Skins to Optimize for Tablets
Skins - Multiple form factors in a single executable for
devices of the same OS family

27
 Using Skins to Optimize for Tablets
Skins - Multiple form factors in a single executable for
devices of the same OS family

phone Android

common

tablet iOS

28
 Customization per Device

29
 Unique Mobile OS Navigation Controls

Tabs Accessible Hardware Back

Permanent Tab Bar Software Back Button via Options Menu Button

30
 Unique Mobile OS Form Controls

31
 Unique Mobile OS Controls

Navigation bar Pivot control

Badges

32
 Mobile OS Fonts

Helvetica Droid Sans

33
 Option 1 – Replicate UI

34
 Option 2 – Create Your Own
High risk, high reward

35
 Option 3 – Adjust UI to the OS

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

36
 HTML Controls Rendered Natively

<select>
<input type="checkbox"/>
<input type="range"/>
<optiontype="radio"
<input value="Option 1">Option 1</option>
<inputvalue="Radio
type="date">1" /> Radio 1
<option value="Option 2">Option 2</option>
</select>

37
 Using a JavaScript Toolkit – jQuery Mobile
Create natively looking controls with
simple HTML markup

<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
 Using a JavaScript Toolkit – Sencha Touch
Create natively looking controls with
simple JavaScript

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
 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
Location
WorkLight Resources – www.worklight.com
Developer Zone – dev.worklight.com

5IVE Resources – 5ive.co.il

45