Q

Q
Human Computer Interaction - 1
Dr. Mohammed Alabdulkareem
Kareem@ksu.edu.sa

Human Computer

2005 Mohammed

Q
Q Human Computer Interaction
Why HCI?
Human Information Processing.
Technology Supporting User Interface.
Window system design.
Screen Layout and Design.

Human Computer

2005 Mohammed

Q
Q Human Computer Interaction
Dialog Styles.
Evaluation of User Interface.
Error Handling.
Documentation.

Human Computer

2005 Mohammed

Q
Q

Why HCI?

Human Computer

2005 Mohammed

Q
Q

Why HCI?

Human Computer

2005 Mohammed

Q
Q

Why HCI?

Human Computer

2005 Mohammed

Q
Q

Why HCI?

Human Computer

2005 Mohammed

Q
Q

Why HCI?

Human Computer

2005 Mohammed

Q
Q Human Computer Interaction
Why HCI?
Human Information
Processing.
Technology Supporting
User Interface.
Window system design.
Screen Layout and
Design

Dialog Styles.
Evaluation of User
Interface.
Error Handling.
Documentation.

Human Computer

2005 Mohammed

Q
Q

Input

Human Information Processing

Encoding

Comparison

Human Computer

Response
selection

Response
execution

Response

2005 Mohammed

Q
Q

Human Information Processing

Attention

Input

Encoding

Comparison

Response
selection

Response
execution

Response

Memory
Human Computer

2005 Mohammed

Q
Q

Human Information Processing

Visual Perception
What we see is not what we
recognize.
Constructivist (stored knowledge).
Ecological (no stored knowledge).

Human Computer

2005 Mohammed

Q
Q

Human Information Processing

What we see is not what we recognize.

Human Computer

2005 Mohammed

Q
Q

Human Information Processing

Constructivist (stored knowledge).

Human Computer

2005 Mohammed

Q
Q

Human Information Processing

Constructivist (stored knowledge).

Human Computer

2005 Mohammed

Q
Q

Human Information Processing

Ecological (no stored knowledge).

Affordance

Human Computer

2005 Mohammed

Q
Q

Human Computer

2005 Mohammed

Q
Q Human Computer Interaction
Why HCI?
Human Information
Processing.
Technology Supporting
User Interface.
Window system design.
Screen Layout and
Design

Dialog Styles.
Evaluation of User
Interface.
Error Handling.
Documentation.

Human Computer

2005 Mohammed

Q
Q

Technology Supporting User

Interface.
Input Devices.
Output Devices.
High-speed Processing.
Networking.

Human Computer

2005 Mohammed

Q
Q

Technology Supporting User

Interface.

Input Devices.
Keyboard.
Pointing devices.
3D Input.
Recognized Input.

Human Computer

2005 Mohammed

Q
Q

Technology Supporting User

Interface.
Input Devices.
Keyboards.

QWERTY
DVORAK
Split

Human Computer

2005 Mohammed

Q
Q

Technology Supporting User

Interface.
Input Devices.
POINTING
DEVICES

Mouse
Trackball
Touch-screen

Human Computer

2005 Mohammed

Q
Q

Technology Supporting User

Interface.
Input Devices.
3D Input.

Data Glove
3D-Mouse

Human Computer

2005 Mohammed

Q
Q

Technology Supporting User

Interface.

Input Devices.
Recognized Input.

OCR
Eye-Gaze
Barcode Scan

Human Computer

2005 Mohammed

Q
Q

Technology Supporting User

Interface.
Output Devices.
CRT.
LCD.
Sound.
Printers
3D display

Human Computer

2005 Mohammed

Q
Q

Technology Supporting User

Interface.
High-Speed Processing
GUI (Windows).
VR.
3D Graphics.

Networking
Sharing resources.
Web & Internet
Human Computer

2005 Mohammed

Q
Q

Technology Supporting User

Interface.
Matching Devices with Work
Accuracy level.
Task requirements.
Direct mapping.

Human Computer

2005 Mohammed

Q
Q

Human Computer

2005 Mohammed

Q
Q Human Computer Interaction
Why HCI?
Human Information
Processing.
Technology Supporting
User Interface.
Window system design.
Screen Layout and
Design
Human Computer

Dialog Styles.
Evaluation of User
Interface.
Error Handling.
Documentation.

2005 Mohammed

Q
Q

Windows System Design

Windows was designed to support more

than one output on the same physical screen.
Windows supports multitasking.
Working with windows takes more time!
Many lessons learned from the users.
Each window system has its flavor of
control.
Human Computer

2005 Mohammed

Q
Q

Windows System Design

Windows Basic Components
Windows:

Title bar.
Close Box.
Zoom Box.
Size Box.
Scroll Control.

Menu.
Dialogue Boxes.
Cursor.
Control & Control Panels.

Human Computer

2005 Mohammed

Q
Q

Windows System Design

Windows Basic
Components
Windows:

Title bar.
Close Box.
Zoom Box.
Size Box.
Scroll Control.
Human Computer

2005 Mohammed

Q
Q

Windows System Design

Human Computer

2005 Mohammed

Q
Q

Windows System Design

Menus
Pop-UP
Pull Down
Submenu

Human Computer

2005 Mohammed

Q
Q

Windows System Design

Dialog box

Human Computer

2005 Mohammed

Q
Q

Windows System Design

Cursor
Change cursor
with context.
Lost Cursor.
The pointing edge.
Cursor-on help
text.

Human Computer

2005 Mohammed

Q
Q

Windows System Design

Controls
Buttons.
Sliders.
Check box.
Radio buttons.

Human Computer

Check Box

Radio Button

2005 Mohammed

Q
Q Human Computer Interaction
Why HCI?
Human Information
Processing.
Technology Supporting
User Interface.
Window system design.
Screen Layout and
Design
Human Computer

Dialog Styles.
Evaluation of User
Interface.
Error Handling.
Documentation.

2005 Mohammed

Q
Q

Screen Layout and Design

Screen is our Real Estate.
The space should be utilized with goals in
mind.
Think of the user (User Centered Design).
Think of the task (Task Analysis).
Human Computer

2005 Mohammed

Q
Q

Screen Layout and Design

Screen space is limited.

Use windows.
Use more than one screen.
Arrange information.

Human Computer

2005 Mohammed

Q
Q

Screen Layout and Design

Set measurable usability goals early.
Usability and user needs should drive the
design.
Define types of users (Expert/Novice).
Consider the personal differences.
Use the matching dialog style.
Testing throughout the design process.
Human Computer

2005 Mohammed

Q
Q

Screen Layout and Design

Guide lines
Include only essential information.
Include all essential information.
Start at the upper left corner.
Design : follow formatting standard.
Apply logical grouping of items.
Human Computer

2005 Mohammed

Q
Q

Screen Layout and Design

Guide lines
Symmetry & balance of white spaces.
Avoid heavy use of uppercase.
Distinguish caption & fields.
The level of Detail is the same as user
knowledge.
Avoid color pollution.
Human Computer

2005 Mohammed

Q
Q

Human Computer

2005 Mohammed

Q
Q Human Computer Interaction
Why HCI?
Human Information
Processing.
Technology Supporting
User Interface.
Window system design.
Screen Layout and
Design
Human Computer

Dialog Styles.
Evaluation of User
Interface.
Error Handling.
Documentation.

2005 Mohammed

Q
Q

Dialog Styles

D ia lo g S ty le s
(In te r a c tio n S ty le s )

Com m and
E n try

M enus &
N a v ig a tio n

Human Computer

Q u e s tio n &
Answ er

F o rm s &
S p r e a d s h e e ts

D ir e c t
M a n ip u la tio n

2005 Mohammed

Q
Q

Dialog Styles
Command
Good for
experts.
Exact spelling.
Hard to
remember
(GREP).

Human Computer

2005 Mohammed

Q
Q

Dialog Styles

Menus
Options &
Enhanceme
nts are
visible.
Grouping:

Access
Time (Sec)
Errors.

Human Computer

2005 Mohammed

Q
Q

Dialog Styles
Q&A
Old style.
Used with setup.
Answer selected (menu).

Human Computer

2005 Mohammed

Q
Q

Dialog Styles

Forms:
Different categories
of data.
Helps the users to
place data correctly.
It should help the
user about what
type of data is
expected.
Allows going back.
Allow Validation.

Human Computer

2005 Mohammed

Q
Q

Dialog Styles

Direct Manipulation:
Visibility of the
objects.
Rapid, reversible,
incremental actions.
Simulate real life.
Allow Validation.

Human Computer

2005 Mohammed

Q
Q

Human Computer

2005 Mohammed

Q
Q Human Computer Interaction
Why HCI?
Human Information
Processing.
Technology Supporting
User Interface.
Window system design.
Screen Layout and
Design
Human Computer

Dialog Styles.
Evaluation of User
Interface.
Error Handling.
Documentation.

2005 Mohammed

Q
Q Evaluation of User Interface
The Keyword is the user.
The User The Programmer.
Never forget the TASK.

Human Computer

2005 Mohammed

Q
Q Evaluation of User Interface
The Keyword is the user.
The user is the final evaluator of your
product.
User Profile:

Psychological Characteristics.
Knowledge and experience.
Job and Task Characteristics.
Physical Characteristics.
Human Computer

2005 Mohammed

Q
Q Evaluation of User Interface
The User The Programmer.
The mental Model is different.
Experiences are different.
Background.

Human Computer

2005 Mohammed

Q
Q Evaluation of User Interface
The User The Programmer.

Human Computer

2005 Mohammed

Q
Q Evaluation of User Interface
Never forget the TASK.

Human Computer

2005 Mohammed

Q
Q Evaluation of User Interface
How to evaluate?
User Observation.
Verbal Protocol (Think aloud).
Software Logging.
Users Opinion (Interview,
Questionnaire).
Experiments & Benchmark.
Human Computer

2005 Mohammed

Q
Q Evaluation of User Interface
Predictive Evaluation:
Inspection methods (experts in technology
& the intended users).
Usage simulation (experts simulate less
experienced users).
Structured reviewing.

Heuristic evaluation (only key issues).

Discount usability evaluation (Scenarios).
Cognitive walkthrough.

Human Computer

2005 Mohammed

Q
Q Evaluation of User Interface
Key Issues:
Validity: Evaluation Purpose &
Method.
Reliability: Experiments yield the
same results.
Biases: Avoid selective data
gathering.
Human Computer

2005 Mohammed

Q
Q

Human Computer

2005 Mohammed

Q
Q Human Computer Interaction
Why HCI?
Human Information
Processing.
Technology Supporting
User Interface.
Window system design.
Screen Layout and
Design
Human Computer

Dialog Styles.
Evaluation of User
Interface.
Error Handling.
Documentation.

2005 Mohammed

Q
Q

Error Handling
What types of errors:
Perceptual Errors (B8, Z2, I1).
Cognitive Errors (Memory, Link,
Inconsistent).
Motor Errors (Hand, Eye).

Human Computer

2005 Mohammed

Q
Q

Error Handling
Perceptual Errors (B8, Z2, I1).

B8 B8 B8
Human Computer

2005 Mohammed

Q
Q

Error Handling

Cognitive Errors (Memory, Link,

Inconsistent).

Human Computer

2005 Mohammed

Q
Q

Error Handling

Motor Errors (Hand, Eye).

Options very close to each other.
The selection is very sensitive.

Human Computer

2005 Mohammed

Q
Q Human Computer Interaction
Why HCI?
Human Information
Processing.
Technology Supporting
User Interface.
Window system design.
Screen Layout and
Design
Human Computer

Dialog Styles.
Evaluation of User
Interface.
Error Handling.
Documentation.

2005 Mohammed

Q
Q

Documentation

User manual vs. Technical guide.

User manual guidelines.
Online Help.

Human Computer

2005 Mohammed

Q
Q

Documentation
User manual vs. Technical guide.
User manual intended for non
technical users. (Part of the user
interface)
Technical guide is intended for
technical people.(How to develop)
Human Computer

2005 Mohammed

Q
Q

Documentation
User manual guidelines.
Easy to navigate.

Organize chapters according to

users goal.
TOC should present high level
overview.
Provide an index.
Use consistent cues for different
type of information.
Human Computer

2005 Mohammed

Q
Q

Documentation
User manual guidelines.
Ease of learning

Provide a foundation and build on

it.
Use examples.
Use illustrations.
Make consistent use of spatial and
visual cues.
Human Computer

2005 Mohammed

Q
Q

Documentation
User manual guidelines.
Ease of reading

Use the white space wisely.

Write using low grade level.
Avoid expert jargons.

Human Computer

2005 Mohammed

Q
Q

Documentation
Online Help.
Make help visible (but not annoying).
Complete & accurate.
Multiple Access Method.
Make it easy to return to problem
context.
Make it fast.
Provide different levels of details.
Human Computer

2005 Mohammed