20130220100249chap2 human

MMG3033 Human Computer Interaction1

Chapter 2 : Human as the User

Contents :

What is Cognition

The Senses

Human Sense : Vision

Human Sense : Hearing

Human Sense : Smell

Human Sense : Touch

Human Sense : Taste

Chapter 2 : Human As The User

2

MMG3033 Human Computer Interaction

Explain what is cognition and why it is important for interaction design.

Understand on how the processing of human memory.

Explain what are the human 5 senses and why it is important in interaction design.

Objectives


3


What is cognition? What are users good and bad at? Describe how cognition has been applied to

interaction design Theories of cognition

Mental models, theory of action Information processing External cognition, distributed cognition

Overview


4


Interacting with technology is cognitive

We need to take into account cognitive processes involved and cognitive limitations of users

We can provide knowledge about what users can and cannot be expected to do

Identify and explain the nature and causes of problems users encounter

Supply theories, modelling tools, guidance and methods that can lead to the design of better interactive products

Why do we need to understand users?


5


What is goes on in our heads when we carry out our everyday activities.

It involves cognitive processes, like thinking, remembering, learning, daydreaming, decision making, seeing, reading, writing and talking.

Norman (1993) distinguishes between 2 general modes; experiential and reflective cognition

What is Cognition?


6


What goes on in the mind?


7


Attention Perception and recognition Memory Learning Reading, speaking and listening Problem-solving, planning, reasoning and decision-

making

Most relevant to interaction design are attention, perception and recognition, and memory

Core cognitive aspects


8


Attention

Selecting things to concentrate on at a point in time from the mass of stimuli around us

Allows us to focus on information that is relevant to what we are doing

Involves audio and/or visual senses Focussed and divided attention enables us to be selective

in terms of the mass of competing stimuli but limits our ability to keep track of all events

Information at the interface should be structured to capture users’ attention, e.g. use perceptual boundaries (windows), colour, reverse video, sound and flashing lights


9


Activity 1

Find the price of a double room at the Holiday Inn in Bradley

First screen

Second screen


10


Tullis (1987) found that the two screens produced quite different results 1st screen - took an average of 5.5 seconds to search 2nd screen - took 3.2 seconds to search

Why, since both displays have the same density of information (31%)?

Spacing In the 1st screen the information is bunched up together,

making it hard to search In the 2nd screen the characters are grouped into vertical

categories of information making it easier

Activity 1


11


Design implications for attention

Make information salient when it needs attending to at a given stage of task.

Use techniques like animated graphics, color, underlining, ordering of items, sequencing of different information and spacing of items

Avoid cluttering the interface with too much information.

Interfaces that are plain are much easier to use, like the Google search Engine.


12


An example of over-use of graphics

Our Situation

State the bad news

Be clear, don’t try to obscure thesituation


13


Perception and recognition

How information is acquired from the environment, via different sense organs, e.g : eyes, ears, fingers and transformed into experiences of objects, events, sound and tastes.

Obvious implication is to design representations that are readily perceivable, e.g. Text should be legible Icons should be easy to distinguish and read


14


Is color contrast good? Find italian


15


Are borders and white space better? Find french


16


Activity 2

Weller (2004) found people took less time to locate items for information that was grouped using a border (2nd screen) compared with using

color contrast (1st screen) Some argue that too much white space on web

pages is detrimental to search Makes it hard to find information

Do you agree?


17


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?


18


Design implications : Perception

Representations of information need to be designed to be perceptible and recognizable

Icons and other graphical representations should enable users to readily distinguish their meaning

Bordering and spacing are effective visual ways of grouping information

Sounds should be audible and distinguishable Speech output should enable users to distinguish

between the set of spoken words Text should be legible and distinguishable from the

background


19


Memory

Involves first encoding and then retrieving knowledge We don’t remember everything - involves filtering and

processing what is attended to Context is important in affecting our memory (i.e.,

where, when) Well known fact that we recognize things much better

than being able to recall things

Better at remembering images than words Why interfaces are largely visual


20


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, and the more it

is processed in terms of thinking about it and comparing it with other knowledge, and

The more likely it is to be remembered e.g., 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


21


Activity 3 Try to remember the dates of all the members of your

family’s and your closest friends’ birthdays. How many can you remember?

Try to remember the cover of the last two magazines you bought or rented

Which was easiest? Why? 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


22


Design implications : Memory

Don’t overload users’ memories with complicated procedures for carrying out tasks.

Design interfaces that promote recognition rather than recall by using menus, icons and consistently placed objects.

Provide users with a variety of ways of encoding digital information to help them remember where they have stored them e.g., categories, color, flagging, time stamping


23


The Senses

Human and the 5 senses :

1) Eyes :83%

2) Ear :10%

3) Nose : 4%

4) Haptic : 2%

5) Tongue : 1%


24


The Human Eye

• Light retina Change shape (accommodation) rods & cones fovea colour detection electric impluse brain interpretation

• Fovea (area of highest resolution): about 2 degrees of arc 75% of the human visual operations are related to the fovea.


25


Human Vision

Light reception takes place in the retina, which contains 2 types of photoreceptors:

Three types of cones: red-sensitive: 64%, high concentration in fovea area green-sensitive: 32%, high concentration in fovea

area blue-sensitive: 2%, evenly distributed over retina;

none in the center of the fovea.

Cones Rods

Mediated visual impression Colors degrees of brightness

Distribution over retina Fovea only not in the fovea

Sensitivity for brightness Low High


26


Certain cell in the eye’s retina produce the sensation of shades of gray and other cells produce the sensation of color using receptors of red, green and blue.

These receptors are located in different areas of the retina, so some color especially blue are perceived to be deeper than red.

Human Vision


27


Vision : Main Characteristic

When light enters the eye it has two main characteristics:

Brightness (intensity) Colour (wavelength)

In software development, avoid creating any confusing effects.

This can occur with certain types of 3D icons, example : can be caused by the misuse of colour.


28


VisionThis effects are called optical illusion.

http://www.at-bristol.org.uk/Optical/default.htm


29


Gestalt Theories

Here twelve dots have been arranged to form a directional symbol.

We can “see” each dot separately but the

arrow is greater than the sum of the dots and becomes the collective

Gestalt.

In this illustration you can test your natural tendency to organize visual patterns. See how you group the

titled squares and see a cross plus.


30


Definition of Visual Field is the size of a display screen, the layout of the display and of any controls.

Too much movement of the head can cause discomfort and also increase the chances of eye strain if re-focusing needs to occur.

Usually movement is allowed for and thus provides a range of about 100-120º from the straight-ahead position (periphery of vision).

Vision : Visual Field


31


Color is particularly effective in calling attention to specific information on a display, differentiating information types and grouping similar items.

Color is an important component in design. Some people are unaware of their colour blindness

– about 8% of men and 1% of women. The most common form of colour blindness is red-green.

Children like bright colours – catch the imagination.

Vision : Color


32


Psychological Implications

Color Implications

Red associated with blood, and with feelings that are energetic, exciting, passionate or erotic

Orange color of flesh, or the friendly warmth of the hearth fire

Green positive mode, nature (plant life, forests), life, stability, restfulness, naturalness.

Blue coolness, distance, spirituality, or perhaps reserved elegance

Violet fantasy, playfulness, impulsiveness, and dream states


33


Color is classified to: Hue Brightness Saturation

Red Green Blue

Vision : Color


34


Hue is an aspect of chromatic colors such as red and green. Achromatic colors such as black, white and neutral grey, do not have hue.

Hue corresponds to the

normal meaning color –

changes in wavelength. Hue is located along the

border of the color wheel.

These are spectral colors.

Color : Hue


35


Brightness (intensity or luminance) refers to the shades of gray going from white (very high brightness) through gray (medium brightness) to black (very low brightness).

Brightness varies amongst the chromatic and achromatic colors.

Area of dark and light meetit is possible to see strangeeffects – optical illusion. Example : Hermann Grid

Color : Brightness


36


Saturation (or chromatic) is the relative amount of pure light that must be mixed with the white light to produce the perceived color.

The more black, white or grey that is mixed with the color then the less saturated it becomes.

When the color is entirely white, saturation is said to be zero.

Color : Saturation


37


Color : Saturation


38


Colour : Design


39


Colour : Design


40


Colour : Design


41


Classification of colour in physically and culturallyhave to be determined. Societies classify colourdifferently.

Colour : Design


42


Do not use blue for small objects (since human sensitivity for blue is very low, particularly in the fovea)

Blue is a good background color (since human sensitivity for blue is very low and since receptors for blue are roughly evenly distributed over the retina)

Neighboring objects should not merely differ by their amount of blue. a a a (red, red with 50% blue, red with 100% blue)

If red and green are used for small objects, these should be in the center (since the sensitivity for these colors is far higher in the center).

If red and green are used as signals (warnings) in the periphery, they should have additional emphasis (like blinking or change in size).

Black, white, yellow and blue can be used in the periphery since the sensitivity of the retina is roughly the same.

Color : The Implication


43


Font : Design1. Some people argue that san serif fonts are easier to

read than serif fonts. But anyway, it is a bad practice to mix too many fonts. (san serif ; without extra strokes, serif fonts ; have extra strokes)

2. The size of the screen will dictate how much information can be comfortably contained. A cluttered screen is difficult to interpret because it is a lot for the eye and brain to absorb.

3. The important items should be displayed according to their priority and should be occupy the same place on the screen.


44


Font : Design


45


Font : Types


46


Classic

Traditional

Aggresive

Mode Font

Sometimes the type of fonts can also means expression of human feeling.

Font : Design


47


Hearing

In HCI, the second most important means of communication is sound.

Hearing or audition is a response to pressure. It tells us about changes that occur at various distance away from us.

When these sound waves reach the ears, they cause a series of mechanical pressure changes which trigger the auditory receptors


48


This causes responses in the brain and the sensation of hearing.

Hearing


49


Sound waves vary in :

1. Amplitude The height of the wave crest : ‘Loudness’ Sound appears to be louder as its amplitude

increase.

2. Wavelength The distance apart between each wave crest.

3. Frequency The number of waves per second : ‘Pitch’ Pitch increases with the increase in frequency. Pitch is how high or how a sound is.

Hearing : Sound Waves


50


Frequency is measured in hertz (Hz) while the loudness of sound is decribed in decibles.

Sensitivity to frequency and loudness varied between individuals and can be different for the same person at different time.

Hearing : Pitch & Loudness


51


Sound is used as a locator i.e. locating things.

“You cannot decide not to listen whereas you can decide not to look”.

Use sound for feedback and attracting attention when : The information is short and simple. The information will not be referred later. For alerts and warnings when an immediate

response is needed. The visual system is already overburdened. The user is moving about from place to place. A verbal response is needed. Poor illumination makes vision unreliable.0

The use of the Sound


52


Touch or haptic channel is a very important sense for the blinds.

It is useful in noisy (either visual or audio) environments.

Tactile feedback is important in the use of keyboard – spongy or heavy touch

Touch is important in the development of devices such as keyboards.

The speed at which a typist can type will be affected by the feel of the keyboard and how it responds to key press.

Touch


53


The sense of taste provides information about what should or should not be eaten.

The receptors are the taste buds which respond to chemicals that are dissolved in water.

On average, a human being has about 10,000 taste buds mostly on the tongue and some other regions of the mouth.

Messages are passed from these receptors to the brain.

Taste


54


There are 4 basic tastes :

1. Bitter2. Salty3. Sour4. Sweet

Taste


55


Smell or olfaction provides information about chemicals in the air. These excite receptors located at the top of the nasal cavity.

Taste and smell are not well developed in people. As yet there are not real uses for either of these senses though both can evoke strong emotional responses.

Smell


56


Cognition comprises many processes including thinking, attention, learning, memory, perception, decision making, planning, reading, speaking and listening.

The way an interface is designed can greatly affect how well people can perceive, attend, learn and remember how to carry out their tasks.

Of the 5 sense, vision and hearing are the most important for human computer systems at present, though touch is being used for some systems and has a part to play in input devices.

Too many colors can be confusing for the user. Avoid color combinations like red and green which may confusing for color-blind users.

Summary

20130220100249chap2 human

Documents

senses human sense

vision human sense

hearing human sense

touch human sense

processing of human

events information

information salient

density of information