asdf

CS3240 - Human Computer InteractionLecture 2 : Guidelines Principles and TheoriesLecture 2 : Guidelines , Principles and Theories

Lecturer : Dr Bimlesh Wadhwadcsb @n s ed sgdcsbw@nus.edu.sg

Last week…

1-2

2-2

“Know thy user”

• Age, gender, physical and cognitive abilities, education cultural or ethnic backgroundeducation, cultural or ethnic background, training, motivation, goals and personality

• Multi-layer designs based on skill level– Novice or first-time users– Knowledgeable intermittent users– Expert frequent users

1-3

2-3

Identify the tasksIdentify the tasks

• Task Analysis usually involve long hours observing and interviewing users

• Relative task frequencies

1-4

2-4

Today …Today …

Guidelines, Principles, and Theories

1-5

5

Guidelines

1-6

2-6

Insights by practitioners -g y pcaution against poor quality.

1-7

2-7

http://msdn.microsoft.com/en-us/library/aa511258.aspx

1-8

2-8

http://developer.apple.comhttp://developer.apple.com

1-9

2-9

htt // h / / t l/ bilithttp://www.hq.nasa.gov/pao/portal/usability

1-10

2-10

Navigating the interface

• Sample guidelines#:p g– Standardize task sequences– Ensure that embedded links are descriptive

U i d d i ti h di– Use unique and descriptive headings– Use check boxes for binary choices– Develop pages that will print properlyDevelop pages that will print properly– Use thumbnail images to preview larger images

# NCI 2006 : National Cancer Institute’s guidelines on design of informative web pages

1-11

2-11

Organizing the display

• High-level goals#

Consistency of data display– Consistency of data display• terminology, colors, format, capitalization

– Efficient information assimilation by the userEfficient information assimilation by the user• Neat columns of data, left & right justification,

spacing– Minimal memory load on the user

• minimize recallFl ibilit f t l f d t di l– Flexibility for user control of data display

• order of columns & sorting of rows to be changeable by users

1-12

changeable by users

#Smith and Mosier (1986) 2-12

Getting the user’s attention• Intensity

– use levels to draw attention• Marking

– underline, enclose in box, use an indicator/sign• Size• Size

– large size attract attention, use upto 4 sizes• Choice of fonts

– Use upto 3 fonts• Blinking

C l

Inverse Video: A computer display technique whereby the background and text colour• Color

• Audio

gvalues are swapped, .

On older computers this was1-13

2-13

On older computers, this was the way text was displayed by default.

PrinciplesMore fundamental, widely applicable, & enduring.

Application of principles lead to (established)guidelines.

1-14

2-14

10 Golden rules

tym

iliar

itFa

m

1-15

2-15

1 Visibility

User should see what functions are available and what the system is currently doing.

1-16

1-17

2-17

2 Consistency

Ensure consistent use of colours namesEnsure consistent use of colours, names, layout and so on.

delete/insert characterdelete/insert word

delete/insert characterremove/insert word

delete/insert characterremove/bring worddelete/insert word

delete/insert lined l t /i t h

remove/insert worddelete/insert lined l t /i t h

remove/bring worddestroy/create linekill/bi th h

1-18delete/insert paragraph delete/insert paragraphkill/birth paragraph

3 Familiarity

Use language and symbols that the user will be f ili ith it bl t h t h lfamiliar with or use a suitable metaphor to help them transfer similar and related knowledge from a more familiar domaina more familiar domain.

1-19

Metaphors3 Familiarity

– Metaphora : to carry over, transfer

– The transference of the relation between one set of objects to another set for the purpose of brief explanation.

– A resemblance , an agreement or likeness between things in some circumstances or effects, when the things are th i ti l diff totherwise entirely different.

1-20

Metaphor – Example 3 Familiarity

• The Desktop - started at Xerox PARC

• Idea was to organize information in a way to allow people to use it in the way they use information onpeople to use it in the way they use information on their desktops.

– make the screen act as if there were objects on it.

Computer objects as visible, moveable objects. p j , jObjects represented as icons. Objects can be “picked up” and “moved” on a surface. Objects can be “copied”

1-21

p

3 Familiarity

1-22

Evolving Desktop3 Familiarity

Evolving Desktop

1-23

Evolving Desktop3 Familiarity

Evolving Desktop

1-24

Evolving DesktopCoffee Table-Top

3 Familiarity

Coffee Table Top

1-25

Metaphors - Mis-matched 3 Familiarity

p

VCR buttons on print interfaceVCR buttons on print interface.

1-26

Metaphor - Key points3 Familiarity

Metaphors help borrow behaviors from systems familiar to p p yusers.

Metaphor isn't always necessary.

Some metaphors don't cross cultural/local boundaries wellSome metaphors don't cross cultural/local boundaries well.

1-27

4 Affordance

Design things so it is clear what they are for

1-28

5 Constraints

• Provide constraints so that people do not try to do things that are inappropriatedo things that are inappropriate.

1-29

6 Navigation

Provide support to enable users to move d th t f th taround the parts of the system.

1-30

7 Feedback

Rapidly feed back information from theRapidly feed back information from the system to people so that they know what effect their actions have hadeffect their actions have had.

The user should never have to think "did th t k?""did that work?"

1-31

8 Recovery

Enable recovery from actions particularlyEnable recovery from actions, particularly mistakes and errors, quickly and effectivelyeffectively.

1-32

9 Flexibility

Allow multiple ways of doing things so asAllow multiple ways of doing things so as to accommodate users with different levels of experience and interest in thelevels of experience and interest in the systems.

1-33

10 Style – Aesthetically Pleasing

Designs should be visuallyDesigns should be visually appealing, polite, pleasant, friendly.

1-34

Th iTheories

D i ti E l t P di tiDescriptive, Explanatory or PredictiveMotor, perceptual, or cognitiveMotor, perceptual, or cognitive

D R YD R Y1-35

2-35

Descriptive , Explanatory, Predictive

H l f l i d l i i t t• Helpful in developing consistent terminology for objects and actions.

Descriptive

D ib f t d• Describe sequence of events and where possible cause and effectExplanatory

• Enable designers to compare d d i f tiP di ti 1-36

proposed designs for execution time or error rates

Predictive2-36

• Helpful in developing consistent terminology for objects and actions

Descriptiveactions.

User interface styles : menus, form fill-ins, commands

User personality styles :Technical attitude: novice, knowledgeable, expert, g , p

Technical aptitude: spatial visualization, reasoning1-37

2-37

• Describe sequence of events qand where possible cause and effect

Explanatory

Norman’s Action Theory;State and Action alternatives should be visible.

•Forming the goalF i th i t ti

There should be a good conceptual model and

•Forming the intention•Specifying the action•Executing the action

consistent system image.

Interface should reveal goodExecuting the action•Perceiving the system state•Interpreting the system state

Interface should reveal good mappings that reveal the relationship between stages.

1-38

2-38

p g y•Evaluating the outcome Users should receive

continuous feedback.

• Enable designers to compare proposed designs for execution Predictive p p gtime or error rates

Predictive

Fitts’ Law

It is a model of human psychomotor p ybehavior developed in 1954.

1-39

2-39

Fitts’ Law

It is a model of human psychomotorIt is a model of human psychomotor behavior developed in 1954.

1-40

2-40

Fitts’ Law

It is a mathematical model that predictsIt is a mathematical model that predicts how long will it take to point at a target.

It takes into account the size of the object d h f f th it iand how far from the mouse it is.

1-41

2-41

Fitts’ Law

If the target is larger , the user can use large movements of mouse to get to the object despite th di t

1-42the distance.

2-42

Fitts’ Law

If the target is small, the user can use large movements to cover the distance and then make fi t t t t th bj t

1-43fine movements to get to the object.

2-43

Fitts’ Law

As designers, we want to keep objects large enoughkeep objects large enough and close enough to where people are ‘looking’ !people are looking !

If the target is kept near, the time to reach the target reduces

1-44

2-44

the target reduces.

Fitts’ LawThe time to move and point to a target of width W at a distance

A is a logarithmic function of the spatial relative error (A/W)

MT = a + b log2(A/W + c)2

• MT is the movement time• a and b are device dependent constants.• c is a constant of 0, 0.5 or 1 • A is the distance (or amplitude) of movement from start to

target centerW is the width of the target which corresponds to “accuracy”

1-45• W is the width of the target, which corresponds to accuracy

2-45

Fitts’ Law

1-46

2-46

Fitts’ Law

1-47

2-47

Fitts’ Law

1-48

2-48

Motor, Perceptual, Cognitive Theories

• Motor skill performance predictions Motor e.g. key stroking, pointing times. Motor

• Predicting reading times for free text, lists formatted displays auditoryPerceptual lists, formatted displays, auditory tasks

Perceptual

• In understanding short term, long term, sensory memory; its role in problem Cognitive

1-49

2-49

y y; psolving and play ; and productivity as a function of response time

Cognitive

Lecture 2- key points

Design principles and guidelines emerge from practical experience.p p

Golden rules of Interface Design – VCFAC gNFRFS

1-50

2-50

Lecture 2- key points

T diti l h l i l th i t bTraditional psychological theories must be extended and refined to accommodate complex human learning memory and problem solvinghuman learning, memory and problem solving required in user interfaces.

In spite of growing set of theories, guidelines and principles user interface is a complex and

1-51

2-51

and principles user interface is a complex and highly creative process.