Human-Computer Interaction

IST 5885

Administrative Items

Group information finalized and posted, group page created

Start working on your group project proposal

Tentative course schedule posted on the blackboard

Project proposal due on Feb 12

Description of the project

Client and client expectations
Expected deliverables
How do you expect to get access to the users?
Brief timeline: requirements gathering, prototyping, evaluation

IST 385 HCI

Exercises
Missouris S&Ts website follows similar structure for
different pages, which design principle is it following?
When you search a travel website for a specific
itinerary, it constantly updates on how many options
have been searched. What design principle is it?
A trashcan is used to delete files. In Mac, it was used
for ejecting a disc. What design principles did it
violate?

IST 385 HCI

What design principles were applied

in this design?

IST 385 HCI

What goes on in the mind?

Why do we need to understand users?

What humans are good at and bad at
Inform the design of technology
Extend human capabilities
Compensate for their weakness

02/27/15

Attention
http://www.youtube.com/watch?v=vJG698U2
Mvo
Selecting things to concentrate on from the
mass around us, at a point in time
Attention is selective
Competition for attention theory

Focus on information that is relevant to what

we are doing

02/27/15

Lets look at some websites

www.google.com
www.cnn.com/
www.mst.edu

02/27/15

Attention
Depend on
Goals
Information presentation, such as
Size of the object
Distance to the salient object
Graphics help to form overall impression
(Tractinsky and Meyer, 1995)

02/27/15

Multitasking and attention

10

www.id-book.com

Multitasking and attention

Is it possible to perform multiple tasks without
one or more of them being detrimentally
affected?
Ophir et al (2009) compared heavy vs light
multi-taskers
Heavy multi-taskers were more prone to being
distracted than those who infrequently multitask
heavy multi-taskers are easily distracted and find it
difficult to filter irrelevant information

11

www.id-book.com

Design implications for attention

Make information salient when it needs
attending to
Use techniques that make things stand out
like colour, ordering, spacing, underlining,
sequencing and animation
Avoid cluttering the interface
Avoid using too much because the software allows
it

02/27/15

12

Perception
How information is acquired from the
world and transformed into experiences
Complex process that involves other
cognitive processes
Vision is most dominant

02/27/15

13

Design implications
Design representations that are readily
perceivable, e.g.
Text should be legible
Icons should be easy to distinguish and
read
Bordering and spacing are effective visual
ways of grouping information to make it
easier to perceive and locate items

IST 385 HCI

14

Which is easiest to read and why?

What is the time?

What is the time?

What is the time?

What is the time?

What is the time?

02/27/15

15

Pick Non-adjacent Colors on the Hue

Circle

16

02/27/15

Color Sensitivity
Retina has photopigments
mainly reds (64%) & very few blues (4%)
Center of retina (high acuity) has no blue
cones
disappearance of small blue objects you
fixate on
http://newopticalillusions.blogspot.com/2009
/11/blue-dot-disappering-optical-illusion.ht
ml
Dont rely on blue for text or small objects!
17

02/27/15

Color Sensitivity (cont.)

As we age
Sensitivity to blue is even more reduced
Fluid between lens and retina absorbs
more light
perceive a lower level of brightness

Implications?
Older users need brighter colors

18

02/27/15

Color Deficiency Example

19

02/27/15

Color Deficiency
(also known as color blindness)
Trouble discriminating colors
besets about 9% of population

Two major types

Different photopigment response
reduces capability to discern small color differences
particularly those of low brightness

Red-green deficiency is best known

lack of either green or red photopigment ?
cant discriminate colors dependent on Red & Green

20

02/27/15

Color Guidelines
Avoid simultaneous display of highly saturated, spectrally
extreme colors
Opponent colors go well together

But be careful with red-green combination

Avoid pure blue for text, lines, & small shapes

blue makes a fine background color

avoid adjacent colors that differ only in blue

Avoid single-color distinctions

mixtures of colors should differ in 2 or 3 colors

e.g., 2 colors shouldnt differ only by amount of red

21

helps color-deficient users

02/27/15

Processing in memory
Encoding is first stage of memory
determines which information is attended to in the
environment and how it is interpreted
The more attention paid to something
The more it is processed in terms of thinking about it and
comparing it with other knowledge
The more likely it is to be remembered
For example, when learning about HCI, it is much better to
reflect upon it, carry out exercises, have discussions with
others about it, and write notes than just passively read a
book, listen to a lecture or watch a video about it

Context is important
An example:
You are on a train and someone comes up to you and says
hello. You dont recognize him for a few moments but then
realize it is one of your neighbours. You are only used to
seeing your neighbour in the hallway of your apartment
block and seeing him out of context makes him difficult to
recognize initially

Context affects the extent to which information can

be subsequently retrieved
Sometimes it can be difficult for people to recall
information that was encoded in a different context

Some exercise on memory

3, 1, 6, 19, 0, 4, 8, 37, 14, 97, 2
Cat, house, paper, laugh, people, red,
yes, shadow, broom, rain, plant, lamp
Hot chocolate, ice cream, banana split,
rock music, online shopping, tree fern,
laser printer, cold rain, fluffy duckling
02/27/15

24

Memory
We dont remember everything - involves filtering
and processing
George Millers theory (1956) of how much
information people can remember
Working memory (short-term memory) has small
capacity (7 2 chunks)

5733414418 vs. (573) 341-4418

DECIBMGMC vs. DEC IBM GMC

02/27/15

25

What some designers get up to

Present only 7 options on a menu

Display only 7 icons on a tool bar
Have no more than 7 bullets in a list
Place only 7 items on a pull down menu
Place only 7 tabs on the top of a website page

But this is wrong? Why?

02/27/15

26

Recognition over Recall

Recall
info reproduced from memory

Recognition
presentation of info provides knowledge
that info has been seen before
easier because of cues to retrieval

27

02/27/15

Discrimination Principle
Retrieval of information is determined by
knowledge that exist in memory relative to
retrieval cues
People are very good at remembering visual cues
about things
e.g., the color of items, the location of objects and marks
on an object

They find it more difficult to learn and remember

arbitrary material
e.g., birthdays and phone numbers

02/27/15

28

Memory
Interference
two strong cues in working memory
link to different chunks in long term
memory

29

02/27/15

Simple Experiment
Volunteer
Start saying colors you see in list of words
when slide comes up
as fast as you can

Say done when finished

Everyone else time it

30

02/27/15

Paper
Home
Back
Schedule
Page
Change

02/27/15

31

Simple Experiment
Do it again
Say done when finished

32

02/27/15

Blue
Red
Black
White
Green
Yellow

02/27/15

33

Design implications for memory

Do not overload users memory with complicated
procedures for carrying out tasks
Design interface that promote recognition rather than
recall
Use menus, icons, objects etc.

Help user to encode information

E.g, color, flagging, time stamping etc.

02/27/15

34