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

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.

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.

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


Touch Ergonomics


Portrait- One-handed Finger Touch

Low precision for finger touch

Some regions of the screen are
harder to use


Portrait- Two-handed Use

Improved precision for finger touch

Not always practicable on the move


Landscape- two-handed use


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


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).


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


Touch Screens Technologies Future

• Combination
– Will compensate for individual problems

• Integration
– Tighter integration with screen
– Touch logic integrated
• Gestures handled already by hardware


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


Size of Hit Area Evaluation

• Prototype
• Random number combination
• Measured time to enter a sequence of
numbers
• User opinion ranked on scale 0-10


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


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


*Target Size Study for One-Handed Thumb Use on Small Touchscreen Devices. http://www.mediateam.oulu.fi/publications/pdf/1076.pdf


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


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


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


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


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)


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


Touch Affordance


Invite to Touch

Obvious size &
shape

Objects look
touchable

Use space between
objects

Reduce number of
objects


Feedback


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


Key Event


Pointer Event


Key Pointer
Event Path Event Event

2
1

3 2 1
3
Control Stack

4


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


PointerUp Handling
ControlObserver Control 1 Child
(focused) Control

ProcessPointerEvent()
PointerUp

PointerGrab(EFalse)

HandlePointerEvent
HitTest
Rect
Contains

Pointer

...
Up


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)


Touch Interaction Styles


Touch Screen Products

Navigation hardware keys No navigation hardware keys
Focus driven UI Focus or non focus driven UI


Touch Interaction Style
Focus driven UI

“Double tap” “Drill down”

Non focus driven UI

“Drill down”


Touch Interaction Style “Double tap”

• Visible focus


• Tap an object sets the focus


• Object specific commands are
then accessed from a toolbar


• Or from the Options menu


• A second tap on the focused
object launch the details


• Visible focus


object launch a pop-out menu
where object commands are
available


also available from the Options
menu


Touch Interaction Style
Focus driven UI

“Double tap” “Drill down”

Non focus driven UI

“Drill down”


Touch Interaction Style “Drill down”

• Immediate access to the primary
action on tap


action on tap


• Alternative actions available for
each object


• Non focus UI Greatly
decreased Options menu


Benefits with Touch


Place Functions on Screen, Not in a Drawer

• Touch gives direct access to primary functions

• A toolbar is an open drawer on screen


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


• Drag down


• Set picture


• Select


• Drag & drop


• Grab & drag


• Pan


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


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


Questions?

UIQ Technology AB
SoftCenter VIII
S-37225 Ronneby
Sweden

Phone: +46 457 46 47 00
Email: info@uiq.com
Web: www.uiq.com


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

Recommended

Recommended

More Related Content

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

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.com