desktop apps on tablet devices

73
Desktop apps on tablet devices Miriam Dobner, Christian Campo compeople AG, EclipseCon Europe 2012 one size doesn‘t fit all! desktop tablet

Upload: miriam-dobner

Post on 22-Jan-2015

431 views

Category:

Design


1 download

DESCRIPTION

Tablets and touch devices are getting more and more popular. They are obviously the next cool thing. First Apple and later Google with Android made tablets a reality that more and more...

TRANSCRIPT

  • 1. desktoptabletDesktop apps on tablet devices one size doesnt fit all!Miriam Dobner, Christian Campocompeople AG, EclipseCon Europe 2012

2. Tablets Desktop Tablet Monitor, Keyboard, MouseMonitor, Keyboard, Mouse in ONE Devicecompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 2 3. Desktop tabletcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 3 4. How are Tablets different?compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 4 5. Keyboard & touchhard to touchcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 5 6. How are tablets different? wasted spacecompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 6 7. Widgets... that dont exist on tabletscompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 7 8. Target group (personas)Digital outsiderOccational userBusiness userTrend user Digital professionalDigital avant-gardecompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 |8 9. Goals Bildquelle: http://www.justintarte.com/2011/06/my-10-goals-as-1st-year-administrator.htmlcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12| 9 10. User mode Lean forwardLean backforwardcompeople AG| EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 10 11. Situation stationary mobilecompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 11 12. Pattern for Multiscreen StrategiesBildquelle: http://www.biophysics.org/MembershipSubgroups/WhatisBiophysicsVideoContest/tabid/3860/Default.aspxcompeople AG| EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 12 13. Beispielcompeople AG| EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 13 14. Coherencecompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 14 15. Coherencecompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 15 16. Synchronisationcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 16 17. Synchronisationcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 17 18. Simultaneitycompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 18 19. Simultaneitycompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 19 20. Screen sharingcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 20 21. Screen sharingcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 21 22. Device shiftingcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 22 23. Device shiftingcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 23 24. Complementaritycompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 24 25. Complementaritycompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 25 26. Direct vs Indirect ManipulationBildquelle: http://smallbusiness.chron.com/compeople AG| EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 |26 27. Mousecompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 27 28. Direct Manipulation Bildquelle: http://insysd.com/web-technology/compeople AG| EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12|28 29. Ergonomics of Ergonomics of interactive Gesturesinteractive gesturesHenry Dreyfuss (1955) Designers need to be aware of the limits ofthe human body when interfaces are controlled by it The more complicated the gesture, the fewer the people who will be able to perform it.compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 |29 30. Fingers Adult fingers: 16-20 mm( 0.6 - 0.8 inches) Fingertips: 8-10 mm (0.3 0.4 inches) Finger pads: 10-14 mm(0.4 - 0.55 inches)compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 30 31. Cognitive basicsBildquelle: http://scopeblog.stanford.edu/files/2012/01/baby-and-mom-finger.jpgcompeople AG| EclipseCon 2012 | Desktop apps on tablet devices| 24.10.12| 31 32. Distancedstart targetdstarttargetcompeople AG| EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 |32 33. Sizecompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 33 34. Fitts Law t = a + b log2 * (d / s+1)t = average time taken to complete the movement a = start/stop time of the device b = inherent speed of the deviceDiers for input devices log2 = Index of diculty s Distance from the target d starting point to thecenter of the targetcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 34 35. Menu at the bordercompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 35 36. Context menuscompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 36 37. Sorting and lteringcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 37 38. Touch & Gestures Bildquelle: http://www.hp-braunjudith.de/page5.phpcompeople AG| EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 38 39. Tiny collection of gestures The more complicated the gesture, the fewer the people who will be able to perform it! Dan Saer compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12|39 40. Hidden gesturescompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 40 41. Left handed 7-10% of all adults Bildquelle: http://www.sciencedaily.com/releases/2010/01/100128101901.htmcompeople AG| EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12| 41 42. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 42 43. Avoid similar gestures Avoid similar gestures for different actions in the same system!Dan Saffercompeople AG | EclipseCon 2012| Desktop apps on tablet devices | 24.10.12 | 43 44. Avoid similar gestures Tap hold Tapcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 44 45. Placing menus and controlscompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 45 46. Iceberg tip Invisible edge of touch target Bildquelle: http://www.greenbookblog.org/wp-content/uploads/2012/08/tip_of_the_iceberg.jpgcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices| 24.10.12 | 46 47. Adaptive Targetscompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 47 48. Navigation PatternsBildquelle: http://www.weltwunderer.de/wp-content/uploads/2002/09/Wegweiser-2002.jpgcompeople AG| EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 |48 49. Basic Navigation Patterns Linear Tree structure Graphcompeople AG| EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 49 50. Linear Navigationcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 50 51. Linear Flat pagescompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 51 52. Treecompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 52 53. Treecompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 53 54. Graphcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 54 55. Graphcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 55 56. Tree / graph navigationcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 56 57. Combinationcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 57 58. CombinationLinear Tree Graphcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 58 59. When to use which pattern? Pattern ProCon Lineardirected restricted Treeclear structureno links,Limitedhierarchy Graph ComplexOverwhelming structures complexity possiblecompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 59 60. Do I always use the same pattern?compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 60 61. Do I always use the same pattern?compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 61 62. Elements of visual designBildquelle: http://keyfruit.net/Assets/Imgs/Base/01UDB/Design_Visual_Design.jpgcompeople AG| EclipseCon 2012 | Desktop apps on tablet devices| 24.10.12 |62 63. Layout and gridscompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 63 64. Screen size larger smallercompeople AG | EclipseCon 2012| Desktop apps on tablet devices | 24.10.12 | 64 65. Navigation NavigationContent Side informationcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 |65 66. NavigationContent Content (& Navigation) Navigationcompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 66 67. Importance of elements 2 1 3 4compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 67 68. Importance of elements231 4compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 68 69. Importance of elements If its important: Make it always visible, on the leftor on top! If its not important: Hide it or place it on the right! The importance of elements can change:Make use of the dynamic shown hiding! Focus on the main task the user wants to do!compeople AG| EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 69 70. Animations & Transitionscompeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 70 71. Summary Analyze the influencial factors Select a multiscreen pattern Choose the suitable navigation pattern Choose the right layout Use suitable controls Consider limitations by touch control User testing to prove the conceptcompeople AG| EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 71 72. Questions & AnswersQ&A Miriam Dobner Christian Campo eMail: [email protected] eMail: [email protected] AG| EclipseCon 2012 | Desktop apps on tablet devices| 24.10.12 | 72 73. Resources Designing Mobile Interfaces, Steven Hoober & Eric Berkmann, OReilly,November 2011, First Edition, June 2010 Tapworthy Designing great iPhone Apps, Josh Clark, OReilly Designing Gestural Interfaces, Dan Saffer, OReilly, November 2008 Designing for interaction Creating Smart Application and Clever Devices,Dan Saffer, New Riders, 2007 Interaktive Systeme, Band 1, Grundlagen, Graphical User Interfaces,Informationsvisualisierung, Bernhard Preim & Reimund Dachselt, Springer,2. Auflage 1999, 2010 Die Digitale Gesellschaft 2011 Die digitalte Gesellschaft in Deutschland Sechs Nutzertypen im Vergleich, [www.initiatived21.de] Weave, 03.12 Juni/Julicompeople AG| EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 |73