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

Introduction

Touch affordance

Invite the user to touch the screen

Benefits with touch

Direct manipulation

Screen technology

The Fundamentals for User Satisfaction hasn't Changed

Easy to learn & remember how to use

Right set of functions that fulfill your needs

Fun & attractive

Designing for Interaction on the Move

Offer direct access which can increase effectiveness and efficiency Offer direct access which can increase effectiveness and efficiency

Design for quick and short interaction Design for quick and short interaction

Fit everything onto a small screenFit everything onto a small screen Touch demands large hit areasTouch demands large hit areas

TouchTouch

Easy to learn and useEasy to learn and use Intuitive interaction where it’s obvious how to interact with objects on screen

Intuitive interaction where it’s obvious how to interact with objects on screen

TouchTouch

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

http://media.bestofmicro.com/4/Z/156995/original/How%20projected%20capacitiv e%20touch%20technology%20works%20-%20Elo%20TouchSystems%20-

%20Tyco%20Electronics-1.jpg

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 0works%20-%20Elo%20TouchSystems%20-

%20Tyco%20Electronics.pnghttp://www.wacom-

components.com/english/technology/index.html

29 October 2008 12

Resistive vs. Capacitive

Resistive

Pros:• Low Price (~$1) due to competition • High Resolution• Small-target activation• Not affected by dirt, dust, water or light

Cons:• Image clarity • Durability (PET plastic front)• Not good for finger touch

Capacitive

Pros:• Very high durability (depending on the

cover material)• No optical loss (longer battery life, higher

contrast)• Multi-touch (depending on the controller)• Good for finger touch

Cons:• Higher costs, but now rapidly dropping from

$6-10 to $2-3• No stylus (not good for handwriting

recognition).

Touch Screens Technologies

• Optical– Infrared– Optical Imaging

• Magnetic– EMR (electro-magnetic resonance)

• Acoustic:– SAW (surface acoustic wave)– APR (acoustic wave recognition)– DST (dispersive signal technology)

• Others

http://www.japancorp.net/Article.Asp?Art_ID=15247

29 October 2008 14

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 pitchdecrease

Resolutionincrease

Year: 2000dot pitch: 0.22-0.26 mmscreen size: 5.5 cm x 7.5 cm

20060.14-0.165 mm3.5 x 5.0 cm2

Today0.08 mm3.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

Average Time

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

TimeUse no less than 7x7 mm target size

User points

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

Use white space between objectsLike

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

Conclusion

Minimum 7.7 x 7.7 mm hit area

Whitespace between objects

The graphic can preferably be smaller than the hit area

1 = most comfortable region

Resolution Versus Physical size

WVGA 480x864

3.2”(16:9)

QVGA 240x320

2.6”(4:3)

QVGA 240x320

2.4”(4:3)

HVGA 320x480

3.0”(3:2)

50x50 pixels50x50 pixels

7,7 mm 8,25 mm 6,6 mm 4,1 mm

Resolution Versus Physical size

WVGA 480x864

3.2”(16:9)

QVGA 240x320

2.6”(4:3)

QVGA 240x320

2.4”(4:3)

HVGA 320x480

3.0”(3:2)

7,7 mm7,7 mm

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)

|29 October 2008 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

Touch Affordance

Use space between objects

Invite to Touch

Objects look touchable

Reduce number of objects

Obvious size & shape

Invite to Touch

Feedback

Performance examples

From when a pen/finger touches the display until feedback is provided

< 50 ms

Open an applications from main menu. New view is completely updated

< 500 ms

Key Event

Pointer Event

trol S

Event Path Key Event

PointerEvent

PointerDown Handling

Child Control

Control 1(initially non-focused)

PointerDown

ControlObserver

SetFocus(ETrue)

RequestFocus

Control 2(initially focused)

SetFocus(EFalse)

HandleE

vent SetFocus

PrepFocusTransition

PointerDown

HandleP

ointerEvent

HitTest

SetFocus

ProcessP

ointerEvent() Rect

Contains

PointerGrab(ETrue)

29 October 2008 37

PointerUp Handling

Child Control

Control 1(focused)

PointerUp

ControlObserver

PointerUp

HandleP

ointerEvent

HitTest

ProcessP

ointerEvent() Rect

Contains

PointerGrab(EFalse)

29 October 2008 38

What should you do?

• Touch down– Take Active Focus

• Touch release– Perform Function

• Touch down and cancel– Dragging away cancels the function

• Touch down and drag– Selecting multiple objects in lists– Highlighting text

• Touch down and hold:– Hidden functionality

(simulating right mouse)

Performance Tips

• Goal:– Fast feedback

• Possible solutions:– Remove unnecessary tasks– Move expensive tasks– Optimize– Fake– Less functionality

29 October 2008 39

Touch Interaction Styles

Touch Screen Products

No navigation hardware keysFocus or non focus driven UI

Navigation hardware keysFocus driven UI

Touch Interaction Style

“Double tap” “Drill down”

Focus driven UI

“Drill down”

Non focus driven UI

• Visible focus

Touch Interaction Style “Double tap”

• 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

• A second tap on the focused object launch a pop-out menu where object commands are available

• Object specific commands are also available from the Options menu

Touch Interaction Style

“Double tap” “Drill down”

Focus driven UI

“Drill down”

Non focus driven UI

• Immediate access to the primary action on tap

Touch Interaction Style “Drill down”

• 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

|29 October 2008 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

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 ABSoftCenter VIIIS-37225 RonnebySweden

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

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

Devices & Hardware

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

Keek for symbian

Symbian Web Runtime

Symbian application development

Distributed Development at Symbian - Perforce · Symbian Ltd Distributed Development at Symbian. ... • Record deliveries of Symbian OS by info from Perforce • ODC still had limited

symbian os ppt

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

Brain-Machine Interfaces: Electrophysiological Challenges ... · 9 6,7 Brain-Machine Interfaces: Electrophysiological Challenges and Limitations 7 recently expanded to other neurological

Symbian Introduction

Symbian os presentation

Anoop Symbian OS

Linguistic Adaptations in Spoken …€“Computer Dialogues ... 2.2 Limitations of Speech Interfaces ... 6.1.1 Designing Speech Interfaces ...Authors: Linda BellAffiliation: Royal

SYMBIAN OS report

Exploiting Symbian - MUlliNER.ORG · Collin Mulliner Exploiting Symbian 25C3 Berlin 2008

Symbian Ppt

Mobile Operating Systems Symbian The Symbian OS home page ...

Symbian Tricks

Symbian Doc

Symbian OS

Nokia symbian strategy

Symbian OS Localization