1

Designing for Humans

(Part I)

Control-Display Relationships1

1 Aka “mappings”

Controls and Displays (1)

“Control” An input device “manipulated” by a human responder

Examples: keyboard, mouse, joystick, button, microphone, touchscreen, etc.

“Display” An output device stimulating a human sense

Visual display (e.g., CRT, LCD, any light)

Auditory display (e.g., speaker)

Tactile display (e.g., a solenoid-driven pin)

Smell display (?)

2

Controls and Displays (2)

(review)

Tactile Displays Sense of touch extremely important in user interfaces When an input sense is stimulated due to a response

output, the simulation is called feedback

Passive tactile feedback is everywhere E.g., contour of keys on a keyboard

Active tactile feedback is not everywhere, but still common E.g., vibro-tactile feedback on mobile phones

Next few slides

3

Passive Tactile Feedback(examples)

Missing Tactile Feedback!!!(Beware the designer!)

No tactile feedback at edge of touchpad!

4

The Fix!

Active Tactile Feedback (1)

Tactile Mouse A mouse re-engineered to include tactile feedback on

the button

Improved target selection

Employs a solenoid-driven pin embedded in the button

http://www.yorku.ca/mack/Ergonomics.html

5

Active Tactile Feedback (2)

Tactile Touchpad Button clicks without separate buttons or

tapping the pad surface

Just press down (like a mouse button)

Video

http://www.yorku.ca/mack/CHI97b.html

http://www.yorku.ca/mack/CHI98.html

6

Active Tactile Feedback (3)

Tilt Mazea:

a Constantin, C. I., & MacKenzie, I. S. (2014). Tilt-controlled mobile games: Velocity-control vs. position-control. Proceedings of the 6th IEEE Consumer Electronics Society Games, Entertainment, Media Conference - IEEE-GEM 2014, pp. 24-30. New York: IEEE. doi: 10.1109/GEM.2014.7048091.

Device vibrates when ball hits wall.

Auditory Displays

Useful… For the visually challenged

To reduce visual demand in mobile computing

Example Eyes-free text entry on a touchscreen phone

Video

7

http://www.yorku.ca/mack/tic2009.html

Control-Display Compatibility

Compatibility refers to the “correctness” of the relationship between the way the control is manipulated and the way the display responds

“Correct” example: Move a mouse right, cursor moves right

“Incorrect” example: Move a mouse right, cursor moves left

Next slide

8

Example – Cursor Control (1D)

Control Display

Compatibility

Compatibility is (arguably) not inherent

It is a learned relationship

“Learned” examples:

Move mouse forward,cursor moves up

Press down key,image moves up

9

Compatibility (2)

x

yz

Example – Object Manipulation (1D)

DisplayControl

10

Example – Object Manipulation (2D)

DisplayControl

DisplayControl

Dimensions vs. Degrees of Freedom

In 2D there are 3 dof (degrees of freedom) x position or displacement y position or displacement Θz – z-axis angle or rotation

A mouse is a 2 dof device Senses x displacement Senses y displacement Does not sense z-axis rotation

The problem: generating z-axis rotation data with a mouse

11

Solution #1 – Rotate Tool

Demo

Move object to new location

12

Solution #2 – Build a 3 dof Mouse

Solution #2 – We did it!

Two-ball mouse with 3 degrees of freedom

Video

13

http://www.yorku.ca/mack/CHI97a.html

Design Issues for 3 dof Mouse

Switching between 2 dof and 3 dof modes Solution: use a modifier key (e.g., SHIFT) to

enable 3 dof mode

Yielding 360° of rotation from limited wrist movement Solution: use a modifier key (e.g., CTRL to

“amplify” rotational mapping

14

3D Interaction (6 dof)

In class demo: Open 3DManipulationExample.xls and manipulate image

CD Compatibility & Cultural Bias

Question:• Is the light on or off?

Answer:• Off (in England)• On (in Canada)

Control (switch) Display (light)

15

Control-Display Relationships

What does thisbutton do?

Answer:• moves the selected field“backward” in time.

Yes, but…

“up” = earlier

“down” = later

16

Thank you