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

38. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 38
Touch & Gestures
Bildquelle: http://www.hp-braunjudith.de/page5.php

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

66. compeople AG | EclipseCon 2012 | Desktop apps on tablet devices | 24.10.12 | 66
Navigation
Navigation
Content
Content (& Navigation)

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