Your SlideShare is downloading. ×
0
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Designing Rich Mobile Apps in a Fragmented World
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Designing Rich Mobile Apps in a Fragmented World

1,315

Published on

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

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

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,315
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
88
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Designing Rich Mobile Apps in a Fragmented World WorkLight Webinar Seriespure 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&A2
  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 employees3
  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 features7
  8. Example – Shazam Music App Primary task – identify any song and provide info 1 2 38
  9. Users Accomplish Tasks Using Gestures9
  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 interpretation10
  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 actions11
  12. Mimic Gestures – Live Up to Users’ Expectations Swipe12
  13. The Comfort Zone REACH • Frequently used controls EASY • “Costly-error” controls MEDIUM13
  14. Comfort Zones iPhone Android14
  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 9mm15
  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 needed19
  20. Background Retrieve20
  21. Concurrent Retrieve21
  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 Work23
  24. Tablets – Flattening Hierarchies24
  25. Tablets – Even Richer Visualization25
  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 family27
  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 iOS28
  29. Customization per Device29
  30. Unique Mobile OS Navigation Controls Tabs Accessible Hardware Back Permanent Tab Bar Software Back Button via Options Menu Button30
  31. Unique Mobile OS Form Controls31
  32. Unique Mobile OS Controls Navigation bar Pivot control Badges32
  33. Mobile OS Fonts Helvetica Droid Sans33
  34. Option 1 – Replicate UI34
  35. Option 2 – Create Your Own High risk, high reward35
  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 201036
  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 Box40
  41. UI Abstraction – Busy Indicator41
  42. UI Abstraction – Tab Bar42
  43. UI Abstraction – Options Menu43
  44. Web-Native Integration Uniform API for displaying native pages Data transfer between web and native contexts Cookie sharing allowing seamless client-server integration44
  45. For More Information Location WorkLight Resources – www.worklight.com Developer Zone – dev.worklight.com 5IVE Resources – 5ive.co.il45

×