fat Finger

\\\\\\\\\\\\
\\\\

What is the fat finger problem

Solutions
Design exercise
Motivation

2/27/2013 Com p 4020 - HCI 2 (PPI) 2

 Advantages of pen input

Pen Finger

unique contact point ambiguous contact point

remove hand from screen finger occludes target

2/27/2013 Com p 4020 - HCI 2 (PPI) 3

Small targets

2/27/2013 Com p 4020 - HCI 2 (PPI) 4

Mapping from 6D to 2D

2/27/2013 Com p 4020 - HCI 2 (PPI) 5

Hard to say where the finger is landing?

2/27/2013 Com p 4020 - HCI 2 (PPI) 6

User-System mismatch

2/27/2013 Com p 4020 - HCI 2 (PPI) 7

Perceived Input Point Correction

Users expect selection point to be higher.

input point

input point

users view hardwares view

2/27/2013 Com p 4020 - HCI 2 (PPI) 8

Solutions
1. Fix target size
2. Iceberg targets
3. Offset cursor
4. Manage selection events
5. Expand targets
6. Reduce contents
7. Input with back-of-device

2/27/2013 Com p 4020 - HCI 2 (PPI) 9

Fix target size
Targets on larger surfaces can be as
1
small as 1.6 cms

On smaller surfaces down to 0.9 cm

2/27/2013 Com p 4020 - HCI 2 (PPI) 10

Fix target size
1

2/27/2013 Com p 4020 - HCI 2 (PPI) 11

Iceberg targets
2

2/27/2013 Com p 4020 - HCI 2 (PPI) 12

Cursor off-setting
Offset cursor (Potter et al., 1988)
3
Shift (Vogel & Baudisch, 2007)

2/27/2013 Com p 4020 - HCI 2 (PPI) 13

Cursor off-set

Pen Offset Cursor

3

2/27/2013 Com p 4020 - HCI 2 (PPI) 14

Disadvantages
No visual feedback until contact, need to
3
estimate offset

Makes some display areas inaccessible

Unexpected offset affects walk-up-and-use

scenarios

2/27/2013 Com p 4020 - HCI 2 (PPI) 15

Shift
3
Benefit 1: Aim for the Target
3

Users expect to click on the target itself

allows switching between pen and touch
walk-up and use with kiosk
2/27/2013 Com p 4020 - HCI 2 (PPI) 17
Benefit 2: All Areas Accessible
3

Callout is relative to finger, so it can go anywhere

no edge problems

2/27/2013 Com p 4020 - HCI 2 (PPI) 18

Benefit 3: Fast For Large Targets
3

Callout only used when necessary

same speed as unaided touch screen for large targets

2/27/2013 Com p 4020 - HCI 2 (PPI) 19

Design Iterations
3
Video
3

2/27/2013 Com p 4020 - HCI 2 (PPI) 21

Experimental Design
3 techniques (Shift, Touch, Offset Cursor) x
3
2 finger styles (nail, tip) x
3 blocks x
6 target sizes (6, 12, 18, 24, 48, 96px) x
4 target directions (NW, NE, SW, SE)

2/27/2013 Com p 4020 - HCI 2 (PPI) 22

Error
100
Tip Nail
3
Touch Screen
80 Offset Cursor
Mean Error Rate (%)

Shift

60

40

20

0
6 12 18 24 48 96
Square Target Size (px)

2/27/2013 Com p 4020 - HCI 2 (PPI) 23

Time
2.5
Selection Time: Fingernail

Touch Screen
3
Offset Cursor
2.0 Shift
Median Time (s)

1.5

1.0

0.5

0.0
6 12 18 24 48 96
Square Target Size (px)

2/27/2013 Com p 4020 - HCI 2 (PPI) 24

Time
2.5
Selection Time: Finger Tip

Touch Screen
3
Offset Cursor
2.0 Shift
Median Time (s)

1.5

1.0

0.5

0.0
6 12 18 24 48 96
Square Target Size (px)

2/27/2013 Com p 4020 - HCI 2 (PPI) 25

Manage selection events
Four events can be managed for a
4
selection:
A. slide-in,
B. land-in,
C. land-off,
D. slide out (B) (C)

(A) (D)

2/27/2013 Com p 4020 - HCI 2 (PPI) 26

Approach 1: select on lift-off
4

2/27/2013 Com p 4020 - HCI 2 (PPI) 27

Approach 2: Select on slide - Escape
4

The Escape target selection technique. (a) The user presses her
thumb near the desired target. (b) The user gestures in the direction
indicated by the target. (c) The target is selected, despite several
nearby distracters.

2/27/2013 Com p 4020 - HCI 2 (PPI) 28

Escape
4

Sample icon designs from the first pilot study. Designs were evaluated
by showing study participants paper prototypes taped to the screen
of a functional mobile device.

2/27/2013 Com p 4020 - HCI 2 (PPI) 29

Escape
4

The icon designs of the second pilot study. (a) A beak icon in
which a beak and a color represent the direction of a gesture;
(b) A pushpin icon; (c) A two-beak icon. The two beaks of
each two-beak icon represent a multi-level gesture (e. g.,
going downward and then going leftward).
2/27/2013 Com p 4020 - HCI 2 (PPI) 30
Escape
4

Determination of the gesture location. (a) The initial contact point

determines the location of the gesture. (b) An alternative in which
the gesture midpoint determines the gesture location.

2/27/2013 Com p 4020 - HCI 2 (PPI) 31

Escape
4

2/27/2013 Com p 4020 - HCI 2 (PPI) 32

Escape

Video
4

2/27/2013 Com p 4020 - HCI 2 (PPI) 33

Target expansion
Provision of extra sensing can allow for
5
expanding targets before landing

2/27/2013 Com p 4020 - HCI 2 (PPI) 34

TouchZoom
Video 5

2/27/2013 Com p 4020 - HCI 2 (PPI) 35

Content Reduction
TouchCuts
6
video

2/27/2013 Com p 4020 - HCI 2 (PPI) 36

Back-of-device
Pushing further, target selection may be
7
enhanced through sensors on the back of
the device
Lucid touch
Nano touch

2/27/2013 Com p 4020 - HCI 2 (PPI) 37

PlayStationVita 3G/Wi-Fi

2/27/2013 Com p 4020 - HCI 2 (PPI) 38

LucidTouch
7

Concept sketch of LucidTouch: a pseudotransparent device.

2/27/2013 Com p 4020 - HCI 2 (PPI) 39

LucidTouch
pointer (x,y) tracked by camera
touch detected by fingerworks, but not (x,y)
7
during dragging (dx,dy) from fingerworks

2/27/2013 Com p 4020 - HCI 2 (PPI) 41

NanoTouch
7
touch

pointer

2/27/2013 Com p 4020 - HCI 2 (PPI) 45

Design principles
Ensure users can precisely select objects in your UI

Consider the physical and not pixel size of content

0.9 cms for small screens, 1.6 cms for large screens

Subdivisioning of space could work in some

applications

Consider limiting the role of land-on event

Consider cursor positioning capability

2/27/2013 Com p 4020 - HCI 2 (PPI) 48

Solutions for fat finger
Design challenge:
Reflect on the myriad of challenges presented for the fat
finger problem. Using the 10 plus 10 technique brainstorm
10+10 novel ways to assist users with improved target
selection, and particularly for small sized objects. Generate 10
very different design concepts.

Assumptions:
You can make any sort of assumption on the type (s) of sensory input you
wish to have your mobile device handle

2/27/2013 Com p 4020 - HCI 2 (PPI) 49

Recap

2/27/2013 Com p 4020 - HCI 2 (PPI) 50