User experience and design best practices for the development of high-quality and engaging cross-platform smartphone and tablet applications that meet users' expectations.

1. 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.

2. Agenda
Introduction
Mobile App Design and UX Guidelines
Overcoming Cross-Device and OS Challenges
Q&A
2

3. 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

4. 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.

5. 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

6. Distractions
Notifications
Phone calls
Messages
Other people interfere
And then the train arrives…
6

7. 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

8. Example – Shazam Music App
Primary task – identify any song and provide info
1 2 3
8

9. Users Accomplish Tasks Using Gestures
9

10. 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

11. 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

12. Mimic Gestures – Live Up to Users’ Expectations
Swipe
12

13. The Comfort Zone
REACH
• Frequently used controls
EASY
• “Costly-error” controls
MEDIUM
13

14. Comfort Zones
iPhone Android
14

15. 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

16. 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.

17. 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

18. 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

19. Gradual Retrieve
Provide additional information only as needed
19

20. Background Retrieve
20

21. Concurrent Retrieve
21

22. 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.

23. Tablets – Mere UI Stretch Does Not Work
23

24. Tablets – Flattening Hierarchies
24

25. Tablets – Even Richer Visualization
25

26. 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

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

28. 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

29. Customization per Device
29

30. Unique Mobile OS Navigation Controls
Tabs Accessible Hardware Back
Permanent Tab Bar Software Back Button via Options Menu Button
30

31. Unique Mobile OS Form Controls
31

32. Unique Mobile OS Controls
Navigation bar Pivot control
Badges
32

33. Mobile OS Fonts
Helvetica Droid Sans
33

34. Option 1 – Replicate UI
34

35. Option 2 – Create Your Own
High risk, high reward
35

36. 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

37. HTML Controls Rendered Natively
<select> type="checkbox"/>
<input <input type="range"/>
<input type="radio" value="Radio 1</option> 1
<option value="Option type="date"> /> Radio
<input 1">Option 1"
<option value="Option 2">Option 2</option>
</select>
37

38. 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

39. 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

40. UI Abstraction – Simple Dialog Box
40

41. UI Abstraction – Busy Indicator
41

42. UI Abstraction – Tab Bar
42

43. UI Abstraction – Options Menu
43

44. Web-Native Integration
Uniform API for displaying native pages
Data transfer between web and native
contexts
Cookie sharing allowing seamless
client-server integration
44

45. For More Information
Location
WorkLight Resources – www.worklight.com
Developer Zone – dev.worklight.com
5IVE Resources – 5ive.co.il
45