The document discusses designing desktop applications for tablet devices. It notes that tablets have different characteristics than desktops that require design adaptations, such as touch-based input instead of mouse and keyboard. The document outlines factors to consider in multi-screen design like navigation patterns, gestures, screen layouts and visual elements. It emphasizes usability testing and adapting designs based on a user's goals, situation and mode of interaction.
1. Desktop apps on tablet devices
Miriam Dobner, Christian Campo
compeople AG, EclipseCon Europe 2012
one size doesn‘t fit all!
desktop
tablet
2. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 2
Desktop
Monitor, Keyboard, Mouse
Tablets
Tablet
Monitor, Keyboard, Mouse in
ONE Device
3. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 3
Desktop à tablet
4. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 4
How are Tablets different?
5. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 5
hard to touch
Keyboard & touch
6. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 6
wasted
space
How are tablets different?
7. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 7
Widgets... that don‘t exist on tablets
8. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 8
Target group (personas)
Digital outsider Occational user Business user
Trend user Digital professional Digital avant-garde
9. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 9
Goals
Bildquelle: http://www.justintarte.com/2011/06/my-10-goals-as-1st-year-administrator.html
10. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 10
User mode
Lean forward Lean backLean forward
11. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 11
Situation
stationary mobile
12. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 12
Pattern for Multiscreen Strategies
Bildquelle: http://www.biophysics.org/MembershipSubgroups/WhatisBiophysicsVideoContest/tabid/3860/Default.aspx
13. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 13
Beispiel
14. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 14
Coherence
15. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 15
Coherence
16. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 16
Synchronisation
17. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 17
Synchronisation
18. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 18
Simultaneity
19. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 19
Simultaneity
20. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 20
Screen sharing
21. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 21
Screen sharing
22. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 22
Device shifting
23. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 23
Device shifting
24. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 24
Complementarity
25. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 25
Complementarity
26. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 26
Direct vs Indirect Manipulation
Bildquelle: http://smallbusiness.chron.com/
27. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 27
Mouse
28. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 28
Direct Manipulation
Bildquelle: http://insysd.com/web-technology/
29. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 29
Ergonomics of interactive Gestures
Ergonomics of
interactive gestures
Henry Dreyfuss (1955)
Designers need to be
aware of the limits of
the human body when
interfaces are controlled
by it
The more complicated
the gesture, the fewer
the people who will be
able to perform it.
30. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 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)
31. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 31
Cognitive basics
Bildquelle: http://scopeblog.stanford.edu/files/2012/01/baby-and-mom-finger.jpg
32. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 32
Distance
d
start target
d
targetstart
33. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 33
Size
34. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 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 device
log2 = Index of difficulty
s
target d
Distance from the
starting point to the
center of the target
Differs for input
devices
35. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 35
Menu at the border
36. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 36
Context menus
37. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 37
Sorting and filtering
39. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 39
The more complicated the gesture, the fewer the
people who will be able to perform it!
Dan Saffer
Tiny collection of gestures
40. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 40
Hidden gestures
41. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 41
Left handed
Bildquelle: http://www.sciencedaily.com/releases/2010/01/100128101901.htm
7-10% of all adults
42. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 42
43. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 43
Avoid similar gestures
Avoid similar gestures for different actions
in the same system!
Dan Saffer
44. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 44
Avoid similar gestures
Tap hold
Tap
45. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 45
Placing menus and controls
46. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 46
Iceberg tip
Invisible edge of touch target
Bildquelle: http://www.greenbookblog.org/wp-content/uploads/2012/08/tip_of_the_iceberg.jpg
47. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 47
Adaptive Targets
48. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 48
Navigation Patterns
Bildquelle: http://www.weltwunderer.de/wp-content/uploads/2002/09/Wegweiser-2002.jpg
49. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 49
• Linear
• Tree structure
• Graph
Basic Navigation Patterns
50. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 50
Linear Navigation
51. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 51
Linear
Flat pages
52. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 52
Tree
53. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 53
Tree
54. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 54
Graph
55. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 55
Graph
56. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 56
Tree / graph navigation
57. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 57
Combination
58. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 58
Combination
Tree
Linear
Graph
59. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 59
When to use which pattern?
Pattern Pro Con
Linear directed restricted
Tree clear structure no links,
Limited
hierarchy
Graph Complex
structures
possible
Overwhelming
complexity
60. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 60
Do I always use the same pattern?
61. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 61
Do I always use the same pattern?
62. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 62
Elements of visual design
Bildquelle: http://keyfruit.net/Assets/Imgs/Base/01UDB/Design_Visual_Design.jpg
63. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 63
Layout and grids
64. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 64
Screen size
larger smaller
65. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 65
NavigationNavigation
Content Side
information
67. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 67
Importance of elements
1
2
3
4
68. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 68
Importance of elements
123 4
69. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 69
Importance of elements
• If it‘s important: Make it always visible, on the left
or on top!
• If it‘s 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!
70. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 70
Animations & Transitions
71. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 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 concept
72. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 72
Q & A
Questions & Answers
Miriam Dobner
eMail: miriam.dobner@compeople.de
Christian Campo
eMail: christian.campo@compeople.de
73. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 73
• Designing Mobile Interfaces, Steven Hoober & Eric Berkmann, O‘Reilly,
November 2011, First Edition, June 2010
• Tapworthy – Designing great iPhone Apps, Josh Clark, O‘Reilly
• Designing Gestural Interfaces, Dan Saffer, O‘Reilly, 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/Juli
Resources