Technology behind touch user interfaces - Limitations and Opportunities by symbian-freak.com

UIQ | Touch | 2008-10-22

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Technology behind touch user interfaces - Limitations and Opportunities by symbian-freak.com

3 comments

Notes on slide 1

18 Favorites