PxS’12 - week 8 - mobile i/o
-
Upload
hendrikknoche -
Category
Technology
-
view
1.450 -
download
0
description
Transcript of PxS’12 - week 8 - mobile i/o
![Page 1: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/1.jpg)
EPFL, spring 2012 – week 8!mobile i/o
![Page 2: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/2.jpg)
overview
➝ types of mobile device ➝ design challenges ➝ in: text entry ➝ in: overcoming finger occlusion ➝ in: movement ➝ out: overviews ➝ out: off-screen visualizations ➝ out: audio & haptic output
✱this lecture is based on Will Seager’s (UCL) lecture of mobile systems
![Page 3: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/3.jpg)
handhelds: three broad categories
![Page 4: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/4.jpg)
why touchscreens?
➝ larger screens for video, maps, websites, documents etc
➝ easier to point
![Page 5: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/5.jpg)
finger vs stylus
advantages of finger… ➝ can’t lose stylus ➝ fast response to alerts e.g.
phone calls ➝ one-handed operation
disadvantages… ➝ low pointing accuracy ➝ finger occlusion ➝ dirty screen
![Page 6: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/6.jpg)
design challenge: screen space
![Page 7: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/7.jpg)
design challenge: context
![Page 8: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/8.jpg)
in: text entry
➝ > 1 billion text messages sent per day ➝ most common type of mobile interaction ➝ companies are looking for improvements to mobile text
entry methods ➝ many methods currently exist
![Page 9: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/9.jpg)
Text entry research timeline
Mackenzie 2008
![Page 10: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/10.jpg)
three broad categories
Physical Virtual Keyboards
key-based finger-based stylus-based
![Page 11: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/11.jpg)
physical vs virtual keyboards
➝ physical keyboards ➝ mobile phone keypad, mobile qwerty (e.g. Blackberry), 5 button
pager, 3-key date stamp, 1 key input etc
➝ virtual keyboards ➝ aka “soft keyboards” or “on-screen keyboards” ➝ similar to clicking buttons in a GUI ➝ used with a stylus or a finger (but also with other input mechanisms
e.g. eye tracking)
➝ design issues ➝ number of keys, key layout, key size, key shape, activation force,
feedback, disambiguation, language modelling, word prediction etc
![Page 12: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/12.jpg)
number of keys & layout
➝ both physical & virtual keyboards vary in number of keys & layouts
➝ for mobile text input, 26 key qwerty & 9/12 key ABC are by far the most common
➝ other 26-key layout variations include Opti, Dvorak & Fitaly
➝ other 9/12 key variations include 9/12 key qwerty
QWERTY
MOBILE
![Page 13: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/13.jpg)
number of keys & layout
➝ other layouts have been shown to lead to better performance BUT familiarity a crucial factor
opti outperforms qwerty (faster, fewer errors) after a few hours practice
QWERTY
OPTI
![Page 14: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/14.jpg)
number of keys continuum
more less ambiguity continuum
![Page 15: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/15.jpg)
ambiguity
➝ ambiguity occurs if there are fewer keys than symbols in the language => disambiguation is needed to select the intended word from the possibilities.
➝ disambiguation methods include multi-tap and T9
or, is it SUMMER, is it STONES ?
7 PQRS
8 TUV
6 MNO
6 MNO
3 DEF
7 PQRS
?
![Page 16: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/16.jpg)
virtual keyboards
stylus methods ➝ tapping on virtual
keyboards ➝ handwriting recognition
finger methods ➝ tapping on virtual
keyboards
new method for stylus & finger
➝ sliding stylus/finger across the screen
SWYPE
![Page 17: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/17.jpg)
virtual keyboards: feedback
➝ performance with virtual keyboards improves with vibro-tactile feedback
➝ visual and audio feedback may also be useful
![Page 18: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/18.jpg)
➝ finger/thumb occludes ➝ lower precision when
pointing
![Page 19: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/19.jpg)
offset cursor
![Page 20: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/20.jpg)
“shift” target selection technique
➝ “shift” – a technique for enabling fine cursor pointing using fingers
![Page 21: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/21.jpg)
“escape” target selection technique
a) the user presses his/her thumb near the desired target b) the gestures in the direction indicated by the target c) the target is selected, despite several nearby distractors.
![Page 22: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/22.jpg)
behind touch
![Page 23: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/23.jpg)
pseudo transparency
![Page 24: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/24.jpg)
tilting
(Rekimoto uist 96)
![Page 25: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/25.jpg)
“chameleon”
(Fitzmaurice 1993)
![Page 26: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/26.jpg)
peephole display
(Yee 2003)
![Page 27: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/27.jpg)
camera phone based motion sensing
(Whang, Zhai & Canny 2006)
![Page 28: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/28.jpg)
viewing large documents on small displays
![Page 29: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/29.jpg)
overviews
(O’Hara et al 1999) (Woobrock et al 2002)
![Page 30: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/30.jpg)
off-screen visualizations: edge radar
![Page 31: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/31.jpg)
off-screen visualizations
(Baudisch & Rosenholtz 2003 Gustafson et al 2008)
![Page 32: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/32.jpg)
audio & haptic output
➝ non speech audio output ➝ bleeps, earcons,
auditory icons
➝ haptics ➝ refers to interaction
via sense of touch and/or motor activity.
Example earcons from (Brewster et al 2008)
![Page 33: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/33.jpg)
why use audio and/or haptic output?
➝ attention grabbing ➝ saves screen real
estate ➝ can provide
information without requiring visual attention
![Page 34: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/34.jpg)
earpod
![Page 35: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/35.jpg)
head-mounted displays
➝ user can look at environment & display at the same time
➝ potentially good for location based and augmented reality servies as potential for clear link between information & the environment
but… ➝ require separate input device
e.g. trackball or else speech only input
![Page 36: PxS’12 - week 8 - mobile i/o](https://reader036.fdocuments.us/reader036/viewer/2022062615/547cf732b37959822b8b50bb/html5/thumbnails/36.jpg)
summary: some key points
➝ Key design challenges: small screens & context ➝ mobile text entry research ongoing, in particular for
finger-based input via touch screens ➝ movement as input ➝ importance of overviews when browsing documents on
small screens ➝ off-screen visualizations ➝ audio & haptic output is a way to reduce demand on
visual attention