BUE - HCI - Week 4

7/29/2019 BUE - HCI - Week 4

1/19

11/13/201

D R . A N N N O S S E I R

Who is My User?

Why Do We Need to UnderstandUsers?

Understanding people is important, morespecifically, their psychology would help in arrangingthe interface so it is easy, efficient, error free andenjoyable.

Cognitive Psychology

Compromises those aspects of our mental lifeconcerned with

Language

Attention Memory

ReasoningPerception

Why Cognitive Psychology

It has given us the information processparadigmwhich draws very strong parallelsbetween the functioning of the brain and computers.
http://images.google.co.uk/imgres?imgurl=http://www.secondpicture.com/tutorials/3d/modeling_human_head_in_3ds_max.png&imgrefurl=http://www.secondpicture.com/tutorials/3d/3d_modeling_of_a_human_head_3ds_max_01.html&usg=__tFKDZZ6J7ft7qq4lzDlZhD270dM=&h=320&w=420&sz=31&hl=en&start=7&um=1&tbnid=47RVh9Vtnr784M:&tbnh=95&tbnw=125&prev=/images%3Fq%3Dhumanhead%26um%3D1%26hl%3Den%26rlz%3D1T4RNWN_enGB225GB225%26sa%3DNhttp://images.google.co.uk/imgres?imgurl=http://www.secondpicture.com/tutorials/3d/modeling_human_head_in_3ds_max.png&imgrefurl=http://www.secondpicture.com/tutorials/3d/3d_modeling_of_a_human_head_3ds_max_01.html&usg=__tFKDZZ6J7ft7qq4lzDlZhD270dM=&h=320&w=420&sz=31&hl=en&start=7&um=1&tbnid=47RVh9Vtnr784M:&tbnh=95&tbnw=125&prev=/images%3Fq%3Dhumanhead%26um%3D1%26hl%3Den%26rlz%3D1T4RNWN_enGB225GB225%26sa%3DNhttp://images.google.co.uk/imgres?imgurl=http://www.secondpicture.com/tutorials/3d/modeling_human_head_in_3ds_max.png&imgrefurl=http://www.secondpicture.com/tutorials/3d/3d_modeling_of_a_human_head_3ds_max_01.html&usg=__tFKDZZ6J7ft7qq4lzDlZhD270dM=&h=320&w=420&sz=31&hl=en&start=7&um=1&tbnid=47RVh9Vtnr784M:&tbnh=95&tbnw=125&prev=/images%3Fq%3Dhumanhead%26um%3D1%26hl%3Den%26rlz%3D1T4RNWN_enGB225GB225%26sa%3DNhttp://images.google.co.uk/imgres?imgurl=http://www.secondpicture.com/tutorials/3d/modeling_human_head_in_3ds_max.png&imgrefurl=http://www.secondpicture.com/tutorials/3d/3d_modeling_of_a_human_head_3ds_max_01.html&usg=__tFKDZZ6J7ft7qq4lzDlZhD270dM=&h=320&w=420&sz=31&hl=en&start=7&um=1&tbnid=47RVh9Vtnr784M:&tbnh=95&tbnw=125&prev=/images%3Fq%3Dhumanhead%26um%3D1%26hl%3Den%26rlz%3D1T4RNWN_enGB225GB225%26sa%3DNhttp://images.google.co.uk/imgres?imgurl=http://www.secondpicture.com/tutorials/3d/modeling_human_head_in_3ds_max.png&imgrefurl=http://www.secondpicture.com/tutorials/3d/3d_modeling_of_a_human_head_3ds_max_01.html&usg=__tFKDZZ6J7ft7qq4lzDlZhD270dM=&h=320&w=420&sz=31&hl=en&start=7&um=1&tbnid=47RVh9Vtnr784M:&tbnh=95&tbnw=125&prev=/images%3Fq%3Dhumanhead%26um%3D1%26hl%3Den%26rlz%3D1T4RNWN_enGB225GB225%26sa%3DNhttp://www.bue.edu.eg/index.aspxhttp://images.google.co.uk/imgres?imgurl=http://www.secondpicture.com/tutorials/3d/modeling_human_head_in_3ds_max.png&imgrefurl=http://www.secondpicture.com/tutorials/3d/3d_modeling_of_a_human_head_3ds_max_01.html&usg=__tFKDZZ6J7ft7qq4lzDlZhD270dM=&h=320&w=420&sz=31&hl=en&start=7&um=1&tbnid=47RVh9Vtnr784M:&tbnh=95&tbnw=125&prev=/images%3Fq%3Dhumanhead%26um%3D1%26hl%3Den%26rlz%3D1T4RNWN_enGB225GB225%26sa%3DNhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspx

7/29/2019 BUE - HCI - Week 4

2/19

11/13/201

Figure 5.1 The information processing paradigm (in its most simple form).

What is Human InformationProcessing?

Information process is a simplified model from theprospective of the psychological knowledge at thattime and task-based approach to human-computer

Human Information Processing

Figure 5.2 A more detailed information processing paradigm.

So, What is Human InformationProcessing?

It simplifies people abilities into A sensor input subsystem

A central information processing subsystem

A motor output subsystem

Human Information Processing

cont.
http://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspx

7/29/2019 BUE - HCI - Week 4

3/19

11/13/201

Figure 5.3 Normans seven-stage model of activity.

Source: after Norman, 1988.

Normans Seven-Stage Model ofActivity. Normans Seven-Stage Model ofActivitycont.

We begin with a goal (check sports results).

In the next step, we form a set of intentions toachieve this goal (finding a computer, mobile to browseInternet)

Then, this is translated into a sequence of actions(go to a computer lab or Internet caf then log on to thecomputer, double click on web browser)

At each step on the way, we perceive the new state ofthe world, interpretwhat we see and compare aagainst what we intended to change

We may repeat these actions if our goals were not met.

Figure 5.3 Normans seven-stage model of activity.

Source: after Norman, 1988.

Normans Seven-Stage Model ofActivity.

Gulf of execution: refers to the problem of how anindividual translates intentions into action

A gap between the psychological language (or mental model) of theuser's goals and the very physical action-object language of thecontrols of the VCR via which it is operated.

Normans Seven-Stage Model of Activity

UserHit the record button

VCR1. Hit the record button.

2. Specify time of recording viathe controls X, Y, and Z.

3. Select channel via thechannel-up-down control.

4. Press the OK button.
http://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspx

7/29/2019 BUE - HCI - Week 4

4/19

11/13/201

Gulf of evaluation: is the converse and refers tohow an individual understands, or evaluates theeffects of actions and knows when his or her goalsare satisfied. when recording, the 'record' control should signal that is

activated or a display should

Normans Seven-Stage Model of Activity Cognitive Psychology

Here we focus on

1. Attention,

2. Perception & recognition

3. Memory

Language

Attention Memory

ReasoningPerception

Attention

Selecting things to concentrate on from the massaround us, at a point in time

Attention is pivotally important human ability. Itis the central to learning, perception,operating machine, using computer.

Attention and awareness is closely linked

(people are aware of other people and theiractivities )

Attention cont.

Practice reduces the amount of attentionrequired (e.g driving car)

Attention can be directed at a particular taskand or divided between a number of differenttasks. (e.g watching TV and hold conversation)

Failure in attention can be a threat and cause

accident. Using mobile while driving, pilots paytoo much attention to wrong cockpit warning.
http://images.google.co.uk/imgres?imgurl=http://www.secondpicture.com/tutorials/3d/modeling_human_head_in_3ds_max.png&imgrefurl=http://www.secondpicture.com/tutorials/3d/3d_modeling_of_a_human_head_3ds_max_01.html&usg=__tFKDZZ6J7ft7qq4lzDlZhD270dM=&h=320&w=420&sz=31&hl=en&start=7&um=1&tbnid=47RVh9Vtnr784M:&tbnh=95&tbnw=125&prev=/images%3Fq%3Dhumanhead%26um%3D1%26hl%3Den%26rlz%3D1T4RNWN_enGB225GB225%26sa%3DNhttp://images.google.co.uk/imgres?imgurl=http://www.secondpicture.com/tutorials/3d/modeling_human_head_in_3ds_max.png&imgrefurl=http://www.secondpicture.com/tutorials/3d/3d_modeling_of_a_human_head_3ds_max_01.html&usg=__tFKDZZ6J7ft7qq4lzDlZhD270dM=&h=320&w=420&sz=31&hl=en&start=7&um=1&tbnid=47RVh9Vtnr784M:&tbnh=95&tbnw=125&prev=/images%3Fq%3Dhumanhead%26um%3D1%26hl%3Den%26rlz%3D1T4RNWN_enGB225GB225%26sa%3DNhttp://images.google.co.uk/imgres?imgurl=http://www.secondpicture.com/tutorials/3d/modeling_human_head_in_3ds_max.png&imgrefurl=http://www.secondpicture.com/tutorials/3d/3d_modeling_of_a_human_head_3ds_max_01.html&usg=__tFKDZZ6J7ft7qq4lzDlZhD270dM=&h=320&w=420&sz=31&hl=en&start=7&um=1&tbnid=47RVh9Vtnr784M:&tbnh=95&tbnw=125&prev=/images%3Fq%3Dhumanhead%26um%3D1%26hl%3Den%26rlz%3D1T4RNWN_enGB225GB225%26sa%3DNhttp://images.google.co.uk/imgres?imgurl=http://www.secondpicture.com/tutorials/3d/modeling_human_head_in_3ds_max.png&imgrefurl=http://www.secondpicture.com/tutorials/3d/3d_modeling_of_a_human_head_3ds_max_01.html&usg=__tFKDZZ6J7ft7qq4lzDlZhD270dM=&h=320&w=420&sz=31&hl=en&start=7&um=1&tbnid=47RVh9Vtnr784M:&tbnh=95&tbnw=125&prev=/images%3Fq%3Dhumanhead%26um%3D1%26hl%3Den%26rlz%3D1T4RNWN_enGB225GB225%26sa%3DNhttp://images.google.co.uk/imgres?imgurl=http://www.secondpicture.com/tutorials/3d/modeling_human_head_in_3ds_max.png&imgrefurl=http://www.secondpicture.com/tutorials/3d/3d_modeling_of_a_human_head_3ds_max_01.html&usg=__tFKDZZ6J7ft7qq4lzDlZhD270dM=&h=320&w=420&sz=31&hl=en&start=7&um=1&tbnid=47RVh9Vtnr784M:&tbnh=95&tbnw=125&prev=/images%3Fq%3Dhumanhead%26um%3D1%26hl%3Den%26rlz%3D1T4RNWN_enGB225GB225%26sa%3DNhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://images.google.co.uk/imgres?imgurl=http://www.secondpicture.com/tutorials/3d/modeling_human_head_in_3ds_max.png&imgrefurl=http://www.secondpicture.com/tutorials/3d/3d_modeling_of_a_human_head_3ds_max_01.html&usg=__tFKDZZ6J7ft7qq4lzDlZhD270dM=&h=320&w=420&sz=31&hl=en&start=7&um=1&tbnid=47RVh9Vtnr784M:&tbnh=95&tbnw=125&prev=/images%3Fq%3Dhumanhead%26um%3D1%26hl%3Den%26rlz%3D1T4RNWN_enGB225GB225%26sa%3DNhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspx

7/29/2019 BUE - HCI - Week 4

5/19

11/13/201

How Attention Works?Schneider and Shiffrin (1977)

Automatic processing: makes no demandattentional resources, is fast, unaffected by capacitylimitations, unavoidable, and difficult to modify andis not subject to conscious awareness ....... Automatic Processing is sort of like muscle memory. When you

start to do something that you have done many times, and youcan complete it successfully without giving it any thought,that's automatic processing.

While playing the piano, or knitting a scarf, you knowhow your hands seem to move on their own, while your mindgoes somewhere else

How Attention Works?Schneider and Shiffrin (1977)

Controlled processing: makes heavy demands onattentional resources is slow and limited in capacityand involves consciously directing attention towardstasks Controlled processing is a comparatively slow, serial process

limited by short term memory. Controlled processing requiressubject effort, permits a large degree of subject control, butneeds little training to develop.

Factors Affecting Attention

Stress is the effect of external and psychological stimuli such as,

Anxiety, fatigue, anger, threat, lack of sleep, and fear.

It affects our level of arousal

Figure 15.18 The YerkesDodson law.

Factors Affecting Attention cont

There is arelationshipbetweenperformance ofthe task and thelevel of arousal.

Simple task ismore resistant toincreasing the

level of arousal
http://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspx

7/29/2019 BUE - HCI - Week 4

6/19

11/13/201

So, How to Design for Attention Attract and Hold Attention

As a result, dont overwhelm users with moreinformation they can respond to

Dont distract users from the main task unless it is animportant information

Mental Workload

It is about how busy the user is, how difficult the taskis, and can s/he hold another task?

See table 15-2 (p.379) in (designing interactive system, Benyon etal.)

Attention and Vigilance

Vigilance is an aspect in the attention which refers torare event or a signal in a desert of inactivity ornoise.
http://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://images.google.co.uk/imgres?imgurl=http://www.thoughtleader.co.za/wp-content/uploads/2007/12/nigerian-scammer-cartoon-lr.JPG&imgrefurl=http://www.thoughtleader.co.za/gavinfoster/2007/11/24/spammer-scammers-can-be-fun/&usg=__nuKvSHzvR19KAydsujN5L-7I7Hg=&h=600&w=453&sz=153&hl=en&start=2&tbnid=W9zSqCKk24VxVM:&tbnh=135&tbnw=102&prev=/images%3Fq%3Dbing%2Btogether%2Bcartoon%26gbv%3D2%26hl%3Denhttp://www.bue.edu.eg/index.aspx

7/29/2019 BUE - HCI - Week 4

7/19

11/13/201

Visual Search

Refers to our ability to locate particular items in avisual scene.

Where is letter B?

Figure 5.5 Attracting attention.

Design Alerts and Warnings


Here we focus on

1. Attention,


3. Memory

Language

Attention MemoryReasoningPerception

Visual Perception

People perceive a stable, three dimensional (3D), fullcolour world filled with objects. The brain isextracting and making sense of the sensor datapicked by our eye.

How we perceive the world ?

7/29/2019 BUE - HCI - Week 4

8/19

11/13/201

How We Perceive the World

Constructivist:we construct our perception of theworld from some sensory data falling on our senses(Gregory 1973).

A red car appears red in normal day light because it reflects thered elements of light. At night with street light, it would appearred (colour constancy).

Shape constancy (a coin-shape would remain the same nomatter how is it handled)

Perceptual constancy or Perceptual illusions

Figure 5.6 The MllerLyer illusion.

Perceptual or Visual Illusions

Which one is longer?


So, We infer incorrect information

Figure 5.8 A pair of Necker cubes.


Which way they are facing ? (Right or left)

7/29/2019 BUE - HCI - Week 4

9/19

11/13/201

Perceptual or Visual illusions

When we are faced with an ambiguous shape, it is aform of unconscious inference or form ahypothesis testing

Figure 5.6 The MllerLyer illusion.

Direct Perception

Optic flowsuppliesunambiguously (clearly) allinformation relevant to theposition, speed andattitude of aircraft to thepilot (Gibson 1950).

Figure 5.9 Flow of optic array.

Gestalt laws of perception

Gestaltists were a group of psychologists workingin early twentieth century who identified a numberof laws of perceptions.

1. Proximity

2. Continuity

3. Part-whole relationship

4. Similarity

5. Closure

Figure 5.10 Proximity.

1.Proximity

Objects appearing close together in space or timetend to be perceived together.

organized into columns or rows

7/29/2019 BUE - HCI - Week 4

10/19

11/13/201

1

Figure 5.11 Continuity.

2.Continuity

We tend to perceive smooth and continuous pattern

rather than disjoint .we see fig 5.11 as a continuouscurve rather than five semi-circles

Figure 5.12 Partwhole relationships.

3.Part-Whole Relationship

The whole is greater than the sum, although fig 1has the same parts of fig 2

Figure 5.13 Similarity.

4. Similarity

Similar figures tend to be grouped together

Figure 5.14 Closure.

5.Closure

Closer figures areperceived more easierthan incomplete or openfigures.

7/29/2019 BUE - HCI - Week 4

11/19

11/13/201

1

Figure 5.15 Equally spaced buttons Windows XP.

1.Proximity in Design

We see (save or cancel) group

from ambiguous (dont save)Figure 5.17 Organizing files using

similarity.

2. Similarity in Design

Figure 5.18 Disorganized files.

Figure 5.19 A Microsoft Windows XP scrollbar.

3.Continuity in Design

Moreelementsare hidden

Figure 5.22 The lunar module (LM) ascent stage instrument panel.

Source: Apollo Program Press Information Notebook (1972). NASA.

4.Part-Whole Relationship in Design

We dontsee interiordetails butwe see averycramped

space
http://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspx

7/29/2019 BUE - HCI - Week 4

12/19

11/13/201

1

Figure 5.23 An exploded view of the LMs instrument panels.

Source: Apollo Operations Handbook Block II Spacecraft (O ctober 15, 1969). NASA.

4.Part-whole Relationship in Design Depth Perception

Depth perception is essential to the effective design of games,multimedia and virtual reality. It is divided into primary andsecondary depth cues Primary depth cues, which allow us to pick up information about

the environment. They rely on the interpretation of images seen byeach eye.

Secondary depth cues rely only one eye. They are

1. Light and shade,

2. linear perspective,

3. height in the horizontal plane,

4. motion parallax,

5. overlap,

6. relative size, and

7. textural gradient

1.Light and Shade

Object with shade improves the sense of depth

Figure 5.25 Examples of linear perspective, using shadow and wire-frame.

2.Linear Perspective

Impression of depth
http://images.google.co.uk/imgres?imgurl=http://www.singleservecoffee.com/images/Senseo%2520Travel%2520Mug%2520-%25201.jpg&imgrefurl=http://www.singleservecoffee.com/archives/002863.php&usg=__EIuIBRQY0Qp2k2SKks23SPQR5oU=&h=300&w=300&sz=30&hl=en&start=86&tbnid=6AS0n3i1sXOUXM:&tbnh=116&tbnw=116&prev=/images%3Fq%3Dmug%2Bwith%2Bshade%26start%3D80%26gbv%3D2%26ndsp%3D20%26hl%3Den%26sa%3DNhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspx

7/29/2019 BUE - HCI - Week 4

13/19

11/13/201

1

3.Height in the Horizontal Plane

Distant objects appear higher than near by

4.Motion Parallax

While you are in the train, you see the telegraph polesnearby means the train is very fast. In contrast, thedistant buildings appear to move slower.

Figure 5.27 Overlapping documents.

5. Overlap

Appear to be nearer

Figure 5.28 Relative size.

6.Relative Size

Small objects are seen to be farer
http://www.bue.edu.eg/index.aspxhttp://images.google.co.uk/imgres?imgurl=http://upload.wikimedia.org/wikipedia/commons/c/c3/Chess_board_opening_staunton.jpg&imgrefurl=http://commons.wikimedia.org/wiki/File:Chess_board_opening_staunton.jpg&usg=__A55mHlKFpzJHa7knj29IwKu-Ub0=&h=1699&w=2611&sz=2937&hl=en&start=51&tbnid=z3phAD1L5I52vM:&tbnh=98&tbnw=150&prev=/images%3Fq%3Dchess%2B%2Bboard%26start%3D40%26gbv%3D2%26ndsp%3D20%26hl%3Den%26sa%3DNhttp://www.bue.edu.eg/index.aspx

7/29/2019 BUE - HCI - Week 4

14/19

11/13/201

1

Figure 5.29 Texture gradient.

7.Textural Gradient

Texture surfaces appear closer

Factors Affecting perception

Refer to the effect of such things on our expectation orour past experience on how we perceive others,objects, and situations

Box 5.3 Effects of expectation of perception.

Source: after Bruner and Postman, 1949, pp. 206 23.

Colour

Is very important to us. Describing someone ascolourless means without character or interest

Table 5.1 Some Western colour conventions.

Source: after Marcus, A. (1992) Graphic Design for Electronic Documents and User Interfaces, p. 84. 1992 ACM, Inc.

Reprinted by permission.

Colour
http://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspx

7/29/2019 BUE - HCI - Week 4

15/19

11/13/201

1

Colour

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?

Figure 5.31 Microsoft default colours.

Colour

Mental Model (Perception)

Is a cognitive representation of our understanding. Itmay have structure and it is larger and more complexthan knowing a fact.

Norman on Mental Model

Mental models are incomplete Peoples ability to run their models are severely

limited Mental models do not have firm boundaries. Similar

devices and operations get confusedwith one another

Mental models are unstable and subject to change.People forget details

Mental models are unscientific, exhibitingsuperstitiousbehaviour

People are willing to undertake additional physicaloperationsto minimize mental effort
http://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspxhttp://www.bue.edu.eg/index.aspx

7/29/2019 BUE - HCI - Week 4

16/19

11/13/201

1

What are Mental ModelsGood for?

Predictingwhat will happen whenuser performssome actions for the first time

Understandingwhat has happened when systemshows some unexpected behavior

Mental Model

A good design is mapping between user mentalmodel and designer mental model


Here we focus on

1. Attention,


3. Memory

Language

Attention MemoryReasoningPerception

3.Memory

Divided into a set of processes and a number ofdifferent storages (Chunks)

7/29/2019 BUE - HCI - Week 4

17/19

11/13/201

1

Designing for Working Memory

Chunking Miller found that short term memory is limited to only 7+-2

bits of information

Grouping information into meaningful information unitsminimize the demand on working memory

Figure 15.2 A chunked dialogue.


Figure 15.5 The status bar from Microsoft Word.


Time limitations

Working memory persist for only 30 sec.

Make important information present tothe user

Figure 15.8 Spelling checker.

Recall and recognition

Pick list and are good examples thatsupport recognition over recall

http://www.bue.edu.eg/index.aspx

7/29/2019 BUE - HCI - Week 4

18/19

11/13/201

1


Icons Metaphor

Direct mapping

Figure 15.13 An icon

representing a floppy disc. (Save)

Figure 15.15 Two icons which are

difficult to distinguish.Figure 5.4 A formatting palette.


Use recognition (dropdown menu)

Use of chunking

Use of meaningful B forbold and / for italic

Slips and Mistakes

e.g. (forget to switch ..off, reply to allsenderetc) (we can fix)

What can we do?

Preventing, detecting, fixing

Error

On input with specificformatting (e.g. time)

Provide fields as to whatformat should be

Provide default values

Provide explanatory

messages for expected fieldinputs

09.00

09.30

10.00

10.30

Preventing errors

7/29/2019 BUE - HCI - Week 4

19/19

11/13/201

Detecting

Validation of input (thus not trapping theuser into an error in the first place)

Detecting and FixingError

What can we do? (Benyon et al p. 389-390)

Error avoidance design guidelines

Error message design guidelines

Memory design guidelines

Summary

Information processing paradigm

Normans seven-stage model of activity. (gulf ofexecution and evaluation)

Cognitive psychology Attention,

Perception,

Gestalt laws of perception,

depth perception, mental model & Norman on mental model,

Memory

Error

Date post:	03-Apr-2018
Category:	Documents
Upload:	007wasr
View:	220 times
Download:	0 times