Human Computer Interaction (HCI)

Information
Visualization

User
Interface
Design
(UID)

2
Video
 Information
Visualization

3
Video
 Information
Visualization

4
Video
 Information
Perspective wall Visualization

User
Interface
Design
(UID)

5
 Ergonomics

6
 Tangible
Interaction

 How?
 Standalone
 Remote / Indirect

7
 Tangible
Interaction

 How?
 Standalone
 Remote / Indirect

8
Video
 Tangible
Interaction

 How?
 AR Markers
 A physical object with a flat shape
 ARToolKit
 Why ARToolkit?

9
 Tangible
Interaction

• Category Design
– Two handed interaction
– Markers composition
– Navigation and Selection

10
 Tangible
Interaction

 Markers evolution
 Cube marker with handle
 ARemote
 Translational / Rotational gestures
 Navigation by rotation
 Selection by translation

11
 Tactile
Interaction

12
Video
 Tactile
Interaction

 Pistol shape (affordance)

 2D Joystick (input)
 Braille cell (output)
 Trigger button
 Power supply
 Wireless communication
 Support for both hands

13
 Tactile
Interaction

14
Video
 Tactile
Interaction

Press

Macro view Micro view

15 (Relative positioning)
(Absolute positioning)
 BCI

HCI BCI

16
Video
 HCI vs Software Engineering
 Both have separate domains but they interact closely

Software Engineering

• Feasibility study
• Software requirement analysis
• Software design
• Interface software coding
• Interaction support software coding
• Application program coding
• Software verification / validation
• Integration
• Maintenance

17
Elizabeth A. Buie et al., CHI 97
 HCI vs Software Engineering
 Both have separate domains but they interact closely

HCI

• Users
• User tasks
• User task analysis
• Information and Interaction to perform tasks
• Environment (in which users work)
• Usability evaluation
• Interaction design
• Interface design

18
 HCI vs Software Engineering
 Both have separate domains but they interact closely

Overlapping of HCI and SE

• Many application development tools include HCI

capabilities
• MS Visual Studio (toolbars, buttons,…), etc.
• Visual Basic for forms / windows, …
• Interface design tools generate code automatically
• Rational Rose, Smart Draw etc.
• HCI and SE work side by side on software projects
• HCI is mostly on the front-end (Interface + Interaction)

19
 HCI vs Software Engineering (End Result)

HCI SE

• User-Centered • System-Centered

• Users • Architectural &

• Tasks • Procedural aspects
• Environments of software design

20
 HCI Labs / Research centers / Organizations
 Abroad:
 Microsoft
 Google
 MIT Media Lab (USA)
 University of Maryland (USA)
 INFRES TELECOM PARIS
 ACM – SIGCHI
 IEEE Systems and Cybernetics
 BCS (British Computer Society)
 Many more …. (hcibib.org)

 Pakistan
 QAU
 COMSATS
 NUST

21
 Input-output channels

 User interacts with the world

 Receives information and sends information

 The output from computer is input for user

 Screen output etc.

 User responds by providing input to computer

 Keyboard, mouse etc.

22
 Input-output channels

 Using senses

 Sight, hearing, touch, taste and smell

 Sight, hearing & touch have important role in HCI

 Effectors
 Limbs (arms, legs), fingers, eyes, head and vocal system

23
 Input-output channels

 Human input / output (Example)

 User interacting with a PC using mouse and keyboard

 Manipulating objects (icons, windows, etc.)

 Receive information through vision mostly

 Receive information through ears too (e.g. beep)

 Provide input to PC through effectors

24
 Vision

25
 Vision
 Primary source of information

 Two stages in vision

 Physical reception of stimulus (event)

 Processing and interpretation of stimulus

26
 The Eye - physical reception

 Light reflects from objects

 Eyes provide a mechanism for receiving light and

 Transforming it into electrical energy

27
 The Eye - physical reception
 Two receptors in retina

 Rods

 Edges of the eye

 More densely packed at the

outer parts of our visual field

 For low (dim) light vision

 Detect changes in movement

28
 The Eye - physical reception

 Cones

 Densely packed towards the center

of our visual field

 Different types of cones for different

wavelengths

 Help in colour vision

 Help in reading and distinguishing

29
 Home work:

1- What is color blindness?

2- Types of colorblindness?

3- How colorblinds distinguish colors?

4- What are the interface design rules for colorblinds?

30