Professors d’IDI - UPC

IDI – Interaction Design (II)

Session 1:
 Understanding the fundamentals of basic interaction in UI
◦ Background (Information Theory)
◦ Hick-Hyman Law: Measuring Choice-Reaction Time
◦ Fitts’ Law: Measuring Pointing Time
◦ Crossing and Steering Laws: Continuous Gestures
 Fitts’ Law in UI Design
◦ Applications in UI Design
◦ Accelerating Target Acquisition
 Exercises

Session 2:
 Pointing Devices
 Typing & Keyboards
 Mobile Interaction Design
Session 1:
 Understanding the fundamentals of basic interaction in UI
◦ Background (Information Theory)
◦ Hick-Hyman Law: Measuring Choice-Reaction Time
◦ Fitts’ Law: Measuring Pointing Time
◦ Crossing and Steering Laws: Continuous Gestures
 Fitts’ Law in UI Design
◦ Applications in UI Design
◦ Accelerating Target Acquisition
 Exercises

Session 2:
 Pointing Devices
 Typing & Keyboards
 Mobile Interaction Design
 Direct-control devices:
◦ Work directly on the surface of the screen
◦ Direct “touch” in VR

 Indirect-control devices:
◦ Work away from the surface
◦ Mapping of the user movement to a pointing
element (cursor/ray).
 Direct-control devices:
◦ Old
 Lightpen worked back in 1976

◦ May produce fatigue:

 Moving the lightpen on the screen required much
effort
 Should have a surface to rest the arm

5
 Direct-control devices. Issues:
◦ Imprecision in pointing. Many factors:
 Quality of the screen:
Capacitive screens less precise than resistive
 Size of the pointer
Fat and not-so-fat fingers
 Direct-control devices. Issues:
◦ Land-on strategy:
 Select on clicking point
 Faster feedback
 Prone to errors

◦ Lift-off strategy:
 Initial click creates “cursor”, dragging used for
precision pointing, lift-off selects
 More time consuming
 Direct-control devices. Advantages:
◦ Touch screens can be designed with no moving parts
 Durable
 Only device that has survived Walt Disney’s theme parks

◦ Multi-touch allows for complex data entry or

manipulation
 Pinch-to-zoom gestures
 Direct-control devices. Other issues:
◦ Pens may be more suitable for some tasks
 Reduce occlusion
 Familiar to users
 But require to be picked up and put down
 Pens are more accurate than fingers

◦ Fingers are less precise than wrist-based

movement
 Indirect-control devices:
◦ Examples:
 Mouse, trackball, joystick, graphics tablets…

◦ Issues:
 Alleviate hand fatigue
 Eliminate screen occlusion
 Mouse is the clear king
– Cost-effective
– Precise
– Hand has a surface to rest on
– Buttons easy to press
– Long movements require to pick up mouse and replace
 May be improved using accelerated moves
Session 1:
 Understanding the fundamentals of basic interaction in UI
◦ Background (Information Theory)
◦ Hick-Hyman Law: Measuring Choice-Reaction Time
◦ Fitts’ Law: Measuring Pointing Time
◦ Crossing and Steering Laws: Continuous Gestures
 Fitts’ Law in UI Design
◦ Applications in UI Design
◦ Accelerating Target Acquisition
 Exercises

Session 2:
 Pointing Devices
 Typing & Keyboards
 Mobile Interaction Design
 12

 QWERTY keyboard layout:

◦ Design by Christopher Latham Shole.
◦ The placement of the keys reduces key jams.
◦ Keys commonly typed together are placed
at large physical distance
 In a typing machine
 Changing hands
 Assuming language is English

◦ Does not make sense with computers

◦ Not everybody writes in English

https://www.youtube.com/watch?time_continue=3&v=WEyCINkkR-Q&feature=emb_logo
 13

 QWERTY keyboard layout:

 Other ergonomic layouts: AZERTY

optimized for French

 Dvorak layout:
◦ Vowels in one hand
 Combinations with consonants impose hand change
◦ Most common letters at the places the fingers rest
on the keyboard
 Dvorak layout:
◦ Invented with the objective of reducing travel distances
 10-finger typing
◦ Improvements of up to 30%
 Other researchers say 5-10%
 Typing Guinness world record held by Barbara Blackburn with a
DVORAK keyboard in a typewriter for many years (until 2023)
 216 wpm for 50 minutes, maximum speed of 227 wpm over shorter periods
◦ Less errors

◦ Also optimized for English

◦ Low level of acceptance
◦ MythicalRocket, broke the 300 WPM barrier in 2023 at just 16 years old,
using a standard QWERTY layout on a SteelSeries Apex Pro keyboard.

◦ TRY YOURSELF: https://typingspeedtest.academyoflearning.com/take-the-test.php

 Keyboard layouts
◦ Improves posture and reduces tension
◦ No proven advantage
 Keyboard arrangements should be designed so that:
1. Balance the loads on the right and left hands
2. Maximize the load on the home row
3. Maximize the frequency of alternating hand sequences
 Alternating fingers avoids the need to wait for the end of
the movement of the first finger before starting the second
movement.
4. Minimizing the frequency of same finger typing

Especially good job: 1 & 2 Especially good job: 3

 Experiment with keyboards layouts is difficult
◦ Users get their proficiency for practice
◦ It requires months of training in any layout
◦ The same people would require to be training back
to original arrangement for starting a new
experiment

 It is commonly accepted formal results based as

predictive human performance model rather
than user testing for evaluation
 Touchable layouts (some issues)
Source: http://minuum.com/


◦ Size depends on screen size

◦ Limited and occluded text
◦ Require significant visual attention
 No physical feedback. Sometimes sound
◦ Distance from the keyboard to the insertion point
 Especially on larger form factors
◦ Errors: accidentally touching the screen
◦ Touch and stylus based may be a good combined with
stroke gestures or other ideas…
 Expert typing model [Bi2013]:
◦ Based on Fitts’ Law
◦ Time to move the tapping device with a single finger
from one key (i) to another (j) depends on the distance
and the width of the keys:
 Dij 
MTij = a + b log 2  + 1
W 
 ij 
◦ Dij is the distance between keys i and j,
◦ Wij is the width of each key

◦ Bi et al. also use the effective width

 Fitts Law accurately predicts pointing movement
◦ If improvement required, it can help us modify our UI
 Change target width:
– Increase size for faster reach
 Change distance:
– Move targets closer to reduce movement time
 Change pointer movement:
– Increase speed
 Dij 
MTij = a + b log 2  + 1
W 
 ij 
 Improving mobile layouts:
◦ Different parameters to take
into account:
 10-finger typing? As of tablets
 2-thumb typing? Mobiles/tablets.
 1-finger typing? Most commonly mobile

 Optimize for the number of fingers

◦ Tactile screen form factor
◦ Maybe hand positions too
  Proposed mobile layouts. Minuum:
◦ Two or one finger typing
◦ Compressing the three key rows into one
 Reduction of distances (in vertical)
 Larger targets
(the whole region of e. g. QAZ)
 Proficient word prediction/correction
is required
◦ More room in your screen

A new (old) idea?

 Minuum is intended to type everywhere:
 Digram-based layout for single-finger typing
[Lewis99]:
◦ Optimized distances
◦ Up to 25 wpm (over the typical 20 wpm on a complete
QWERTY)

Source: norvig.com
 Single finger gesture typing [Kristensson2012,
Zhai2012]
◦ The finger traverses all the letters of a word without
lifting off the screen
◦ More comfortable (subjective evaluation) in tablets
[Nguyen2012]
◦ Not faster than regular typing (objective evaluation) in
tablets [Nguyen2012]. Not so negative
 Proposed mobile layouts. KALQ:
◦ Optimize layout for better 2 thumb typing
◦ Analyzed hand position, digram frequency, tablet
orientation…
 Two finger gesture typing [Bi2012]
◦ The two thumbs swipe to compose a word
 Lifting the finger when a part of the word belongs to the
other thumb
 Or with a continuous trace
◦ Finger traveling shortened by 50%
◦ Speed does not increase over one finger entry (objective
evaluation). Not so negative
◦ High demand of attention (subjective evaluation)
Designing virtual keyboards. Elements to
consider for usability:
 Auto-correction
 Auto-capitalization
 Input data type & custom keyboards
 (Multiple-)Language support
1. Auto-correction:
 Only suitable if proper dictionaries:
◦ Commonly, users do not notice the corrections
◦ Some data such as address very prone to wrong
correction
◦ 92% sites do it wrong
 Best practices:
◦ Skip auto-correction for certain fields
◦ Usually, it is safer to opt for a predictive approach and
let the user to choose the best option.
2. Auto-capitalization:
◦ In e-mail addresses, disable auto-capitalization
 Even if correct, people tries to fix
3. Appropriate layouts for the input data type:
 Virtual keyboards are small
◦ An iPhone 4 character (portrait) measures 4 × 5.9 mm
 Minimum recommended clickable size is 6.85 × 6.85 mm
◦ Increase typos, validation errors…
◦ 60% top mobile websites do it wrong

 Dedicated keyboards may increase the size enough

(phone numbers, ZIP codes, currency…)
◦ Invoke them, and do it consistently
Dedicated keyboards examples (space gain):

Email address Phone number URL

35
4. (Multiple-)Language support:
 Most custom keyboards provide the possibility of
changing the language on demand
◦ In many cases correctors or word predictions mix
languages
Session 1:
 Understanding the fundamentals of basic interaction in UI
◦ Background (Information Theory)
◦ Hick-Hyman Law: Measuring Choice-Reaction Time
◦ Fitts’ Law: Measuring Pointing Time
◦ Crossing and Steering Laws: Continuous Gestures
 Fitts’ Law in UI Design
◦ Applications in UI Design
◦ Accelerating Target Acquisition
 Exercises

Session 2:
 Pointing Devices
 Typing & Keyboards
 Mobile Interaction Design