More Related Content Similar to Technology behind touch user interfaces - Limitations and Opportunities by symbian-freak.com (20) Technology behind touch user interfaces - Limitations and Opportunities by symbian-freak.com2. Welcome!
• General
– Mobile phones
– Questions
• About UIQ:
– Company background
– Touch background
• About us:
– Fredrik Sjölin, Senior Interaction Architect
– Matthias Reik, Chief System Architect
29 October 2008 2 | © UIQ Technology AB 2008. All rights reserved.
3. Introduction
Screen technology
Touch affordance
Invite the user to touch the screen
Benefits with touch
Direct manipulation
29 October 2008 3 | © UIQ Technology AB 2008. All rights reserved.
4. The Fundamentals for User Satisfaction hasn't Changed
Easy to learn & Right set of functions
remember how to use that fulfill your needs
Fun & attractive
29 October 2008 | 4 | © UIQ Technology AB 2008. All rights reserved.
5. Designing for Interaction on the Move
Design for quick and short Offer direct access which can
interaction Touch increase effectiveness and efficiency
Easy to learn and use Intuitive interaction where it’s
Touch obvious how to interact with objects
on screen
Fit everything onto a small screen Touch demands large hit areas
Touch
29 October 2008 | 5 | © UIQ Technology AB 2008. All rights reserved.
7. Portrait- One-handed Finger Touch
Low precision for finger touch
Some regions of the screen are
harder to use
29 October 2008 | 7 | © UIQ Technology AB 2008. All rights reserved.
8. Portrait- Two-handed Use
Improved precision for finger touch
Not always practicable on the move
29 October 2008 | 8 | © UIQ Technology AB 2008. All rights reserved.
11. Conclusion
One-handed interaction means
thumb usage and low finger
precision
Decide which use cases that are
most important to perform on the
move i.e. practical for one
handed use
29 October 2008 | 11 | © UIQ Technology AB 2008. All rights reserved.
12. Touch Screens Technologies
• Resistive
• Capacitive
– PCT (projected)
– RRFC (reversing ramp field)
http://media.bestofmicro.com/5/5/157001/origi
nal/How%20AccuTouch%20five-
wire%20resistive%20touch%20technology%2
http://www.wacom- 0works%20-%20Elo%20TouchSystems%20-
components.com/english/technology/index.html %20Tyco%20Electronics.png
http://media.bestofmicro.com/4/Z/156995/original/How%20projected%20capacitiv
e%20touch%20technology%20works%20-%20Elo%20TouchSystems%20-
29 October 2008 | 12 %20Tyco%20Electronics-1.jpg | © UIQ Technology AB 2008. All rights reserved.
13. Resistive vs. Capacitive
Resistive Capacitive
Pros: Pros:
• Low Price (~$1) due to competition • Very high durability (depending on the
• High Resolution cover material)
• Small-target activation • No optical loss (longer battery life, higher
contrast)
• Not affected by dirt, dust, water or light
• Multi-touch (depending on the controller)
• Good for finger touch
Cons:
Cons:
• Image clarity
• Higher costs, but now rapidly dropping from
• Durability (PET plastic front) $6-10 to $2-3
• Not good for finger touch • No stylus (not good for handwriting
recognition).
29 October 2008 | 13 | © UIQ Technology AB 2008. All rights reserved.
14. Touch Screens Technologies
• Optical
– Infrared
– Optical Imaging
• Magnetic
– EMR (electro-magnetic resonance)
• Acoustic:
– SAW (surface acoustic wave)
http://www.japancorp.net/Article.Asp?Art_ID=15247
– APR (acoustic wave recognition)
– DST (dispersive signal technology)
• Others
29 October 2008 | 14 | © UIQ Technology AB 2008. All rights reserved.
15. Touch Screens Technologies Future
• Combination
– Will compensate for individual problems
• Integration
– Tighter integration with screen
– Touch logic integrated
• Gestures handled already by hardware
29 October 2008 | 15 | © UIQ Technology AB 2008. All rights reserved.
16. Screen technology
Dot pitch Resolution
decrease increase
Year: 2000 2006 Today
dot pitch: 0.22-0.26 mm 0.14-0.165 mm 0.08 mm
screen size: 5.5 cm x 7.5 cm 3.5 x 5.0 cm2 3.5 cm x 5.0 cm
29 October 2008 | 16 | © UIQ Technology AB 2008. All rights reserved.
17. Size of Hit Area Evaluation
• Prototype
• Random number combination
• Measured time to enter a sequence of
numbers
• User opinion ranked on scale 0-10
29 October 2008 | 17 | © UIQ Technology AB 2008. All rights reserved.
18. 1
Average Time
Use no less than 7x7 mm target size
Time
2,5
2
1,5
1
0,5
0
5*5 hit,5*5 Button 7*7 hit,7*7 button 9*9 hit, 9*9 button 7*7 hit, 5*5 button 9*9 hit, 7*7 button
29 October 2008 | 18 | © UIQ Technology AB 2008. All rights reserved.
19. User points
Use white space between objects
Like
8
7,5
7
6,5
6
5,5
5
4,5
4
5*5 hit,5*5 Button 7*7 hit,7*7 button 9*9 hit, 9*9 button 7*7 hit, 5*5 button 9*9 hit, 7*7 button
29 October 2008 | 19 | © UIQ Technology AB 2008. All rights reserved.
20. *Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices. http://www.mediateam.oulu.fi/publications/pdf/1076.pdf
29 October 2008 | 20 | © UIQ Technology AB 2008. All rights reserved.
21. Conclusion
8 4 5 Minimum 7.7 x 7.7 mm hit area
Whitespace between objects
6 1 2 The graphic can preferably be
smaller than the hit area
1 = most comfortable region
9 3 7
29 October 2008 | 21 | © UIQ Technology AB 2008. All rights reserved.
22. Resolution Versus Physical size
50x50 pixels
WVGA
480x864
HVGA
3.2”
320x480
(16:9)
QVGA 3.0”
QVGA 240x320 (3:2)
240x320 2.6”
2.4” (4:3)
(4:3)
7,7 mm 8,25 mm 6,6 mm 4,1 mm
29 October 2008 | 22 | © UIQ Technology AB 2008. All rights reserved.
23. Resolution Versus Physical size
7,7 mm
WVGA
480x864
HVGA
3.2”
320x480
(16:9)
QVGA 3.0”
QVGA 240x320 (3:2)
240x320 2.6”
2.4” (4:3)
(4:3)
50x50 pixels 46x46 pixels 58x58 pixels 93x93 pixels
29 October 2008 | 23 | © UIQ Technology AB 2008. All rights reserved.
24. Design by Pixels (static)
• Allows different Industrial Designs
(with different screen sizes)
• Easy for programmers
(natural unit)
• Easy for UI & Graphic designers
(allows pixel perfect results)
• Controls can become unusable
• Fonts can become unreadable
• Wasted screen estate
29 October 2008 | 24 | © UIQ Technology AB 2008. All rights reserved.
25. Design by Size (dynamic)
• Easy for Usability Engineers
• The screen is build up of pixels
(Half pixel lines won’t look good)
• Unpredictable outcome
• Complete re-validation of the software
stack (extremely expensive)
29 October 2008 | 25 | © UIQ Technology AB 2008. All rights reserved.
26. Combination is the solution
• Use static elements but combine dynamically
• Logical dimensions
• Icon sizes
• Font sizes
• Line heights
• Margins
• Relate things to logical sizes
• Allow for product specific optimizations
– UI configurations
29 October 2008 | 26 | © UIQ Technology AB 2008. All rights reserved.
28. Invite to Touch
Obvious size &
shape
Objects look
touchable
Use space between
objects
Reduce number of
objects
29 October 2008 | 28 | © UIQ Technology AB 2008. All rights reserved.
29. Invite to Touch
Obvious size &
shape
Objects look
touchable
Use space between
objects
Reduce number of
objects
29 October 2008 | 29 | © UIQ Technology AB 2008. All rights reserved.
30. Invite to Touch
Obvious size &
shape
Objects look
touchable
Use space between
objects
Reduce number of
objects
29 October 2008 | 30 | © UIQ Technology AB 2008. All rights reserved.
33. Performance examples
From when a pen/finger touches the < 50 ms
display until feedback is provided
Open an applications from main menu. < 500 ms
New view is completely updated
29 October 2008 | 33 | © UIQ Technology AB 2008. All rights reserved.
36. Key Pointer
Event Path Event Event
2
1
3 2 1
3
Control Stack
4
29 October 2008 | 36 | © UIQ Technology AB 2008. All rights reserved.
37. PointerDown Handling
ControlObserver Control 1 Child Control 2
(initially non-focused) Control (initially focused)
ProcessPointerEvent()
PointerDown
PrepFocusTransition
PointerGrab(ETrue)
HandlePointerEvent
HitTest
Rect
Contains
Pointer
...
Down
HandleEvent
RequestFocus
SetFocus
SetFocus(EFalse)
SetFocus(ETrue)
SetFocus
29 October 2008 | 37 | © UIQ Technology AB 2008. All rights reserved.
38. PointerUp Handling
ControlObserver Control 1 Child
(focused) Control
ProcessPointerEvent()
PointerUp
PointerGrab(EFalse)
HandlePointerEvent
HitTest
Rect
Contains
Pointer
...
Up
29 October 2008 | 38 | © UIQ Technology AB 2008. All rights reserved.
39. What should you do?
• Touch down
– Take Active Focus Performance Tips
• Touch release
– Perform Function • Goal:
– Fast feedback
• Touch down and cancel
– Dragging away cancels the function • Possible solutions:
• Touch down and drag – Remove unnecessary tasks
– Selecting multiple objects in lists – Move expensive tasks
– Highlighting text – Optimize
– Fake
• Touch down and hold: – Less functionality
– Hidden functionality
(simulating right mouse)
29 October 2008 | 39 | © UIQ Technology AB 2008. All rights reserved.
41. Touch Screen Products
Navigation hardware keys No navigation hardware keys
Focus driven UI Focus or non focus driven UI
29 October 2008 | 41 | © UIQ Technology AB 2008. All rights reserved.
42. Touch Interaction Style
Focus driven UI
“Double tap” “Drill down”
Non focus driven UI
“Drill down”
29 October 2008 | 42 | © UIQ Technology AB 2008. All rights reserved.
43. Touch Interaction Style “Double tap”
• Visible focus
29 October 2008 | 43 | © UIQ Technology AB 2008. All rights reserved.
44. • Tap an object sets the focus
29 October 2008 | 44 | © UIQ Technology AB 2008. All rights reserved.
45. • Object specific commands are
then accessed from a toolbar
29 October 2008 | 45 | © UIQ Technology AB 2008. All rights reserved.
46. • Or from the Options menu
29 October 2008 | 46 | © UIQ Technology AB 2008. All rights reserved.
47. • Or from the Options menu
29 October 2008 | 47 | © UIQ Technology AB 2008. All rights reserved.
48. • A second tap on the focused
object launch the details
29 October 2008 | 48 | © UIQ Technology AB 2008. All rights reserved.
50. • Tap an object sets the focus
29 October 2008 | 50 | © UIQ Technology AB 2008. All rights reserved.
51. • Tap an object sets the focus
29 October 2008 | 51 | © UIQ Technology AB 2008. All rights reserved.
52. • A second tap on the focused
object launch a pop-out menu
where object commands are
available
29 October 2008 | 52 | © UIQ Technology AB 2008. All rights reserved.
53. • A second tap on the focused
object launch a pop-out menu
where object commands are
available
29 October 2008 | 53 | © UIQ Technology AB 2008. All rights reserved.
54. • Object specific commands are
also available from the Options
menu
29 October 2008 | 54 | © UIQ Technology AB 2008. All rights reserved.
55. • Object specific commands are
also available from the Options
menu
29 October 2008 | 55 | © UIQ Technology AB 2008. All rights reserved.
56. Touch Interaction Style
Focus driven UI
“Double tap” “Drill down”
Non focus driven UI
“Drill down”
29 October 2008 | 56 | © UIQ Technology AB 2008. All rights reserved.
57. Touch Interaction Style “Drill down”
• Immediate access to the primary
action on tap
29 October 2008 | 57 | © UIQ Technology AB 2008. All rights reserved.
58. • Immediate access to the primary
action on tap
29 October 2008 | 58 | © UIQ Technology AB 2008. All rights reserved.
59. • Immediate access to the primary
action on tap
29 October 2008 | 59 | © UIQ Technology AB 2008. All rights reserved.
60. • Immediate access to the primary
action on tap
29 October 2008 | 60 | © UIQ Technology AB 2008. All rights reserved.
61. • Immediate access to the primary
action on tap
29 October 2008 | 61 | © UIQ Technology AB 2008. All rights reserved.
62. • Alternative actions available for
each object
29 October 2008 | 62 | © UIQ Technology AB 2008. All rights reserved.
63. • Alternative actions available for
each object
29 October 2008 | 63 | © UIQ Technology AB 2008. All rights reserved.
64. • Non focus UI Greatly
decreased Options menu
29 October 2008 | 64 | © UIQ Technology AB 2008. All rights reserved.
65. • Non focus UI Greatly
decreased Options menu
29 October 2008 | 65 | © UIQ Technology AB 2008. All rights reserved.
67. Place Functions on Screen, Not in a Drawer
• Touch gives direct access to primary functions
• A toolbar is an open drawer on screen
29 October 2008 | 67 | © UIQ Technology AB 2008. All rights reserved.
68. Direct Touch Manipulation
• But the most effective way is direct and natural
manipulation with the objects on screen
• Touch interaction involve your muscle memory
together with your cognitive memory
29 October 2008 | 68 | © UIQ Technology AB 2008. All rights reserved.
69. • Drag down
29 October 2008 | 69 | © UIQ Technology AB 2008. All rights reserved.
70. • Set picture
29 October 2008 | 70 | © UIQ Technology AB 2008. All rights reserved.
72. • Drag & drop
29 October 2008 | 72 | © UIQ Technology AB 2008. All rights reserved.
73. • Grab & drag
29 October 2008 | 73 | © UIQ Technology AB 2008. All rights reserved.
75. Conclusion
• The future:
– Mobiles with touch screen
– New hardware
– New interaction paradigms
• Stay close to the platform you are targeting
– Caution with using the wrong paradigm
– Caution with new innovative interaction models.
• Prepare your application/platform
– Consider the following when you write your model
• (Multi-) Touch
• Gestures
• KeyEvents
– Thin UI layer
29 October 2008 | 75 | © UIQ Technology AB 2008. All rights reserved.
76. Designing for touch
• Reduce number of objects and functions on screen
• Give access to the most used actions directly on screen
• Represent them in a recognizable way
• Design for direct manipulation with the objects on screen
29 October 2008 | 76 | © UIQ Technology AB 2008. All rights reserved.
77. Questions?
UIQ Technology AB
SoftCenter VIII
S-37225 Ronneby
Sweden
Phone: +46 457 46 47 00
Email: info@uiq.com
Web: www.uiq.com
29 October 2008 | 77 | © UIQ Technology AB 2008. All rights reserved.