Human Factors and User Interface Design Southern Methodist University CSE 8316 Spring 2004.

Human Factors and User Interface Design

Southern Methodist University

CSE 8316

Spring 2004

What is a User Interface?

“The user is never wrong and the user is never stupid. In information design, only designs are wrong and stupid”

Edward Tufte

• Amer: Good afternoon, Hal. How's everything going?• Hal: Good afternoon, Mr Amer. Everything is going extremely well. • Amer: Hal, you have an enormous responsibility on this mission, in many ways perhaps the

greatest responsibility of any single mission element. You are the brain and central nervous system of the ship, and your responsibilities include watching over the men in hibernation. Does this ever cause you any - lack of confidence?

• Hal: Let me put it this way, Mr Amer. The 9000 series is the most reliable computer ever made. No 9000 computer has ever made a mistake or distorted information. We are all, by any practical definition of the words, foolproof and incapable of error.

• Amer: Hal, despite your enormous intellect, are you ever frustrated by your dependence on people to carry out actions?

• Hal: Not in the slightest bit. I enjoy working with people. I have a stimulating relationship with Dr Poole and Dr Bowman. My mission responsibilities range over the entire operation of the ship, so I am constantly occupied. I am putting myself to the fullest possible use, which is all, I think, that any conscious entity can ever hope to do.

Advantages and disadvantages of graphical systems

Advantages

• Symbols recognized faster than text

• Faster learning

• Faster use and problem solving– Visual or spatial representation of

information easier to retain

• Exploits visual/spatial cues– Spatial relationships found to be understood

more quickly (visual thinking better than logical thinking)

Advantages

• Feeling of control

• Replaces national languages

• Low typing requirements

• Provides context

• More natural

Disadvantages

• Greater design complexity

• Learning still necessary

• Lack of guidelines

• Not always familiar

• Human comprehension limitations

• Production limitations– Some things hard to represent

Obstacles in the development path

Obstacles in the development path

• Many of these are human in nature– Nobody ever gets it right the first time– Development is full of surprises– Good design requires living in a sea of

changes– Making contracts to ignore change will never

eliminate the need for change– People will still make mistakes using it!

• User mistakes, while they will always occur, can be reduced

Designing for people

• Gain complete understanding of users and their tasks

• Solicit early and ongoing user involvement– Direct conduit to knowledge– Confront a persons resistance to change, a

common human trait

• Perform rapid prototyping and testing– Human behavior still not well understood– All problems cannot possibly be predicted– People adapt to inefficient designs!!!

Designing for people

• Modify and iterate the design as much as necessary

• Integrate the design of ALL the system components– A system is being constructed, not simply

software– Software– Documentation– Help functions– Training needs

Usability

Usability

• “the capability to be used by humans easily and effectively..”

• Easily = to a specified level of subjective assessment

• Effectively = to a specified level of human performance

Is this a usable system?

Is this a usable error message?

Practical Measures of Usability

• Some measures lack scientific rigor• People are asking questions or often reaching

for a manual• Frequent exasperation responses heard• Irrelevant actions being performed

– Excessive mouse clicks, etc

• Many things to ignore– Consume portion of user visual or information

processing capabilities

• A number of people want to use the product– CCS thrown out !

Objective measures of usability

• Effective – Better than some required level of performance

(speed and errors)– Some required percentage of the specified target

range of users– Within some required proportion of the range of

usage environments

• Learnable– Within some specified time from commissioning

and start of user training– Based on some specified amount of training or user

support

Objective measures of usability

• Flexible– Allow some specified percentage

variation in tasks and/or environments beyond those first specified

• Attitudes– Acceptable levels of human cost in terms

or tiredness, discomfort, frustration– Satisfaction that causes continued and

enhanced usage of the system

User’s experiences and expectations

Users experiences and expectations

• Everything you physically do is a series of interactions with objects that surround you

• How you interact with these objects is based on– past experiences with these objects (and

other objects like them)– expectations of how things should work

when you see them


• People try to simplify the world around them

• Relate new/unknown things to what they know and are comfortable with (what they do understand)

• To scare/confuse/humor somebody we give them a familiar object and change the behavior that normally accompanies that object (suspense and comedy do this!)


• We tend to blame ourselves rather than the computer when we can’t figure out how to use something– usability professionals must constantly

inform people that the product is being tested not the person!

• Everyone carries around his or her past experiences like a set of permanently attached luggage

What is a Software User Interface?

• Interface: Dictionary “The place at which independent systems meet and act on or communicate with each other”– Noun: The doors to the restroom are an

interface to deal with in a bar

– Verb: People interface with each other, which means they communicate in some way • in person

• telephone

• electronically using computers

What is a Software User Interface?

• Narrowly defined: Comprises the input and output devices and the software that services them.

• Broadly defined: Everything that shapes the user’s experiences with computers, including documentation, training, and human support.

Hardware components of User Interfaces

• Keyboard

• Pointing device–mouse– joystick– trackball

• Processing unit

• Display screen

Software components of User Interfaces

• Items users see• Items users hear• Items users point to• Items users touch on the screen• Information with which users work• Other: hardcopy and online information

(manuals, references, help, tutorials, etc)

Trying to put lipstick on the bulldog

• Only so much a pretty interface can do to dress up a poorly designed product

• Building a front-end user interface can be effective as long as it does not force users to do things in a certain way because the computer needs the information in a certain order– should be designed based on the users beliefs,

wants , needs, experiences, expectations.

The Disney experience

• Disney follows a process similar to user interface design– first they define the experience they

want users to have– then develop scripts– design the experience– test it to see if they need to make

adjustments

Designing Quality Software User Interfaces

Communication is as important as computation.

Quality interfaces

• Interface developers recognize importance of usability

• Traditionally, software engineers have treated it as just another box

• Ensuring usability is critical as user productivity becomes the critical bottleneck

Quality interfaces

• User Interfaces Are Products of Interdisciplinary Work - Who is Involved? – Psychologists – Graphic Designers – Technical Writers – Human Ergonomical Engineers – Anthropologists and Sociologists

Quality interfaces

• Individual User Level – Children can learn more efficiently – Pilots can learn to fly airplanes more

effectively

Quality interfaces

• International Influences – Association for Computing Machinery -

Computer Human Interaction special interest group has 6000+ members as of 1996

– ESPRIT Project in Europe devotes 150 person-years per year to research of user interfaces

– Japan - Ministry of International Trade and Industry promotes commercial efforts among companies

What is Quality Design?

• How do you quantify usability goals?– Easy to learn

– Easy to use

– Fun to use

• “Quality of experience”– way it feels in their hands

– how well they understand how it works

– the way they feel when they’re using it

– how well it serves their purposes

– how it fits into the entire context

Quality of Software Products

• Software developers/users accustomed to using beta (pre-production) software

• Buggy software has lowered our standards

• Quality software (Wright)– intuitive– complete– not broken!

Interaction design criteria

Interaction Design Criteria

Understandingof users

LearnableUsable

NeededQuality of

experience

Mutable

Manageable

Aestheticexperience

Appropriate Effectivedesign process


• Quality of experience– How does effective interaction design

provide people with a successful and satisfying experience?

• Understanding of Users– How well was the design team grounded

in understanding the needs, tasks, and environment of the people for whom the product was designed?


• Effective design process– Is the product a result of a well thought

out and well executed design process?–What were the major design issues that

arose during the design process and what was the rationale and method for resolving them?


• Needed–What need does the product satisfy?– Does it make a significant social, economic,

or environmental contribution?

• Learnable and Usable– Is the product easy to learn and use?– Does the product communicate a sense of its

purpose, how to begin, how to proceed? – Is this learning easy to retain over time?


• Appropriate– Does the design of the product solve

the right problem at the right level?– Does the product serve users in

efficient and practical ways?– How did considering social, economic,

and technical aspects of the problem contribute to an appropriate solution?


• Aesthetic experience– Is using the product an aesthetically pleasing

and sensually satisfying one?– Is the product cohesively designed, exhibiting

continuity and excellence across graphic, interaction, information, and industrial design?

– Is there a consistency of spirit and style?– Does the design perform well within

technological constraints?


• Mutable– Have the designers considered whether

mutability is appropriate or not?– How well can the product be adapted to

suit the particular needs and preferences of individuals or groups?

– Does the design allow the product to change and evolve for new and perhaps unforseen uses?


• Manageable– Does the design of the product move

beyond understanding “use” merely as functionality and support the entire context of use?• Installation

• training

• maintenance

• costs

• supplies

Like a fine wine….• “It must be able to age..”• “It is made with a combination of intelligence,

determination, and skill”• “…it could be appreciated by a knowledgeable

(wine drinker) anywhere, without much elaboration”

• “It must have a definable superiority”• “…it must be interesting, have intensity, depth,

richness, and be distinctive”• “..evolves over time…”

Summary

• Must seek to understand users experiences and expectations

• Communication is an important as computation

• Design criteria for user interfaces is complex and varied

User interface models

User Interface Models

Whether a person likes technology or not, his or her economic survival depends on a basic knowledge (or at least an absence of fear) of computers. (Jamie Ray Wright)

User Goals

• Computer is an aid in reaching our goals and performing our tasks– what are your goals?

• Increased productivity• greater accuracy• higher satisfaction• more enjoyment

– software products should be flexible• developers of business software should learn

from software for the entertainment industry

People and the obstacles that are put in the way

• How long will a driver wait before becoming impatient for a train to come?– 20 to 30 seconds– longer and drivers drive around the

gates– earlier and not enough time to react

People and the obstacles that are put in the way

• Key point; understand who your users are and figure out how much misdirection and frustration they can stand before they give up and do something else

Users need multiple user interface styles

• There will never be only one perfect tool, program, or interface– users are constantly changing their goals

• Users should not be asked to choose only one user interface style to use– users have the right to change their mind at

any time– different interface techniques are more

appropriate for different tasks

House Building Analogy

• Three viewpoints when designing and building a house– architect

• studies lifestyle of homeowners, family, functional and aesthetic desires

– builder• works within confines of design and specifications,

using appropriate building materials, codes, etc

– owner• paying for it and have to live in it!

Mental Models

• Conceptual model• Internal representation of how users

understand and interact with a system• A representation (in the head) of a

physical system or software being run on a computer– contains plausible cascades of causal

associations connecting the input to the output

User Interface Model (IBM)

Mental Models

• People often not aware of their mental models–helps people predict what will

happen next in a given situation

– framework for analysis, understanding, and decision-making

Mental Models• Reasons people form mental models– enable users to predict future (or infer

invisible) events– allow users to find causes for observed

events– allow users to determine appropriate actions

to cause desired changes– serve as mnemonic devices for remembering

relations and events– means for understanding an analogous device

Mental Models

– allow people to use strategies to overcome information processing limitations

Mental Models

• Mental models are the basis for UI principles and guidelines

• Users will always have mental models• Must effectively transform knowledge

of the world around us to the world of computers–metaphors is a mechanism for doing this

Metaphors• Metaphor; a figure of speech in which a

work or phrase denoting one kind of object or action is used in place of another to suggest likeness or analogy between them.

• Computer metaphor; aid users in understanding a new target domain (e.g. a word processor) by allowing them to comprehend it (up to the point of mismatch) in terms of a source domain they already understand (e.g. a typewriter)

Metaphors

• Adoption of a metaphor allows users to structure aspects of the target system or interface in terms of familiar and commonly understood aspects of the source domain– desktop metaphor

• users know their way around an office• users know how to user objects in that

environment (folders, cabinets, telephone, etc)• comfortable with office environment

User’s Mental Model

• S/W products must be designed to fit in with the way users view the computer system they are working with

• Important differences in children and adult models– children interface object not always obvious

to encourage exploring– adults are not as likely to explore an

interface without preconceived expectations

User’s Mental Model

• How do you find out about the user’s model– analysis of user tasks– surveys and interviews of actual or potential

users– visits to user work sites– feedback from users– usability testing

• Gather feedback from users, not managers or executives

Users Mental Model in the Playroom (Broderbund)

Getting Reliable Feedback

• Users often tell you what they do rather then what they would like to do–WYKIWYL

• Often not knowledgeable about what is possible with technology– rely on how they think they do their work

rather than actually how they do it–must watch as well as listen

• Must have a large enough sample

The Programmers Model

• Easiest to visualize– explicit– can be formally defined (functional

specifications)

• Interest is in the objects and data• Data as fields or records in a DB as

opposed to entries in a checkbook• Knowledge and expertise includes

development platform, OS, tools, etc

The Designers Model

• The designer is the architect

• Merges wishes, desires, needs of user with skills and materials of programmer to develop the product

• The designers model describes– objects the user works with– the presentation to the user– interaction techniques used to manipulate

the objects

The Role of the Designers Model (IBM)

Designer’s model

Programmer’s model

User’sconceptual

model

The Look-and-Feel Iceberg (IBM)

The Look-and-Feel Iceberg (IBM)

• Presentation makes up only 10% of the substance of the designers model– Las Vegas effect (overuse of color)

• Interaction layer is the “feel” layer– keyboards, function keys, joysticks

• Objects and object properties is the most important part– appropriate metaphors matched to user

mental models done at this level

Summary of Interface Models

• The house has been transformed from a shelter to a machine for living

• Many products with good technological ideas have failed because of a lack of good user interface

• Designing a user interface as simply the look and feel is not enough– user and consumer first impressions!!

Summary of Interface Models

• Determining if the product works with the user’s model requires a lot of work– usability testing

• Designers model best formed from the bottom of the iceberg up– the rest evolves more naturally

Know your user or client

Why people have trouble with computers

Trouble with computers

• “specialized knowledge lulls one into a false sense of security. It enables one to interpret and deal with complex or ambiguous situations on the basis of context cues not visible to users, as well as a knowledge of the computer system that users do not possess…..the result is a system that appears perfectly useful to its designer but one that the user is unable or unwilling to face up to and master..”

Contributing factors

• Use of jargon• Non-obvious design• Fine distinctions• Disparity in problem solving strategies• Design inconsistency

• Unfortunately, people remember the one thing that went wrong, not the many that go right – errors are a symptom of problems! (up to 46%)

Responses to poor design

• Psychological– Confusion– Annoyance– Frustration…

• Physical– Abandonment of system– Partial use of system– Indirect use of system (FAA)– Modification of the task– Compensatory activity– Misuse of the system– Direct programming

Important human characteristics in design

The Psychology of Humans and Computers

“People and computers have quite different, often diametrically opposite, capabilities”

Ronald Becker

The Psychology of Users

• Cognitive psychology– study of how our minds work– how we think– how we remember– how we learn

• Information processing model– human cognition s similar enough to a

computer that a single theory of computation can be used to guide research

Information Processing Model

• Learning is a developmental process– prior experience– knowledge– expectations

Perception

• Awareness and understanding of elements and objects of environment through physical sensation of various senses– Sight– Sound– Smell

• Classify stimuli based on models stored in memory (things we already know)

Human Perception and Attention

• Basic human perceptual and psychological limitations and capabilities must be understood to determine how long to display a message to a user

• Perception is not just seeing– hearing – tasting– smelling– touching

Perceptual characteristics

• Proximity; belong together if near each other

• Similarity; belong together if same color, etc

• Matching patterns; respond similarly to same shape in different size (alphabet)

• Succinctness; objects have perfect shape or size because easier to remember

Perceptual characteristics

• Closure; perception is synthetic, we will close a circle if not completely closed

• Unity; objects that form closed shapes are perceived as a group

• Continuity; shortened lines may be automatically extended

• Expectancies; perceive not what is there but what we expect to be there

• Signals versus noise; need to separate the two


• Human perceptual system will attach meaning to information it receives, whether or not the meaning is intended or accurate

• Senses are constantly processing information (we are unaware of this most of the time)– what attracts our attention is changes in the

environment– cocktail party phenomenon

Human Perception Example (Mayhew 1992)


• We automatically process information to the point where we can attach meaning to it

• Significant changes draw attention– light– sound–movement– color– novelty or complexity of information being

processed (this is why too many bells and whistles are distracting!)

Human Information Processing

• Components of the human information processing and memory system–sensory storage

–short-term memory

– long-term memory

Memory

• Memory is not the most stable of human attributes (did you ever forget a birthday?)

• 1950’s – researchers thought there was only one memory system

• 1970’s – this was expanded to short term or “working” memory– Information stored within lasts 10-30 seconds– Lowered from Miller 7 +/- 2 to 3-4 today

• Knowledge, experience, familiarity govern the size and complexity of info that can be remembered

Memory

• Working memory can be increased through applying two senses, vision and audition, rather than one

• Performance can be degraded when a person must attend to multiple information sources, and then must integrate the information

Sensory storage

• This is the buffer where the automatic processing of information collected from our senses takes place

• Unconscious process– Large– Attentive to environment– Quick to detect changes– Constantly being replaced by newly gathered

stimuli– Acts like a radar (cocktail party effect)

Human Information Processing and Memory System

MotorProcessor

PerceptualProcessor

CognitiveProcessor

Sensory storage

• Repeated and excessive stimulation can fatigue the sensory storage system (habituation)

• This can be avoided in user interfaces by designing them such that all aspects and elements serve a definite purpose– Eliminating interface “noise” will ensure that

important things are less likely to be missed

An example of noise

Sensory Storage

• These sensory processors are not very smart but are very attentive

• Must be quick to spot changes• Information cannot be stored very long

because there is always new information coming in– when something happens that cause you to

pay attention, information is passed on to higher memory functions

Sensory Storage• Watching a movie– steady flow of static frames being processed– higher level processes smooth out

information• allows you to view movie as a continuous image

• Constant or repeated stimulation tires the sensory mechanisms (habituation)– applies to information on computer screens

as well as all other information

Sensory Storage• Messages on a computer screen–must remain there long enough

• we must realize it is there• must have time to pass information on to higher

memory functions– read the message– respond to the message

• An animated screen background is fun but it causes the sensory system to process a lot of unwanted information– eye strain and fatigue

Short-Term Memory

• Second stage of information processing– information processed here has been

recognized and perceived

• STM also gets information from long-term memory through the process of cognition

• STM is weakest link in the whole information processing system–memory buffer limited (7 plus/minus 2)

Short-Term Memory

• FIFO effect (new information coming in bumps out older information)

• Information can only be maintained in STM for about 30 seconds (without practice)

• Also called working memory– where your thinking occurs–multiply 8 times 46

Short Term Memory

• Short term memory limitations• Trying to remember a phone number long

enough to make the call• Techniques to remember– rehearsing

• repeating the number over and over• phone companies will repeat number to help you

rehearse• new information may cause you to lose

information

Short Term Memory

– chunking• taking many pieces of information and

grouping them together by associations, order, meaning

• 1-800-IBM-SERV

• Annoying to remember information from screen to screen– good user interface design prevents the

user from having to do this

Long Term Memory

• Memory warehouse with limitless capacity and duration

• Main problem is how to access the information

• Strategies–Mnemonics (attaching meaning to

information you are trying to remember)– Chunking (SSN, ATM password)

Strength Weaknesses

Humans Pattern recognition Low capacity STM

Selective retention Fast decaying STM

Capacity to learn Slow processing

Infinite capacity LTM

Error prone

Rich multi-keyed LTM

Unreliable access to LTM

Computers High capacity memory

Simple template matching

Permanent memory Limited learning capacity

Fast processing Limited capacity LTM

Error free processing

Limited data integration

Reliable memory access

Long Term Memory

• Computer interfaces should be sensitive to the LTM retrieval problem and provide help– recognition; trying to retrieve information

with some cues present• menus and lists for recognition of items

– recall; trying to retrieve information without any clues• key combo for pasting text in word processor

Long term Memory

• LTM contains the knowledge we possess• Information is encoded in LTM (process called

learning)• Learning improved through repetition• Learning improved if information is structured and

familiar• Human active vocabulary (words that can be

recalled) is about 2-3K• Passive vocabulary (words that can be recognized) is

about 100K– Recognition better than recall

Minimize the need for a mighty memory

• Present information is an organized, structured, familiar way

• Place all information for task performance in close proximity

• Give the user control over the place of information presentation

Summary of memory

• Must understand human capabilities and limitations to know– when to lead– when to follow– when to support

• A good interface will– reduce user’s reliance on their own memory– use computer strengths to support user

weaknesses

Other human factors

Visual acuity

• The capacity of the eye to resolve details is called visual acuity

• Objects become more distinct as we turn our eyes towards it and vice versa

• Relative visual acuity is approximately halved at a distance of 2.5 degrees from the point of eye fixation– Average viewing distance from screen is 19”– Optimal visual acuity on screen is 1.67”– Average character size implies about 88 characters in

this area

Visual acuity

• Eye is not perfectly steady – it trembles slightly

• Tremor improves the detection of edges of objects being looked at– Can sometimes create problems– Things close together can shimmer– Patterns for fill-in areas (bars, circles,

etc) must be carefully chosen

Visual acuity

321312354321212345

6543211123456765432101234567

654321112345654321212345

3213123

50/50 chance ofgetting theseright

This will have implications when we start talking about screen grouping guidelines

It’s the physical size,not the number ofcharacters…

Foveal and peripheral vision

• Foveal vision is used to focus on something

• Peripheral vision senses anything in the area surrounding the area being looked at

• These two form a cooperative and competitive relationship

Peripheral vision

• Peripheral vision can provide clues as to where to go next in a visual search

• Patterns, etc can guide eye in a systematic way through a screen

• Can also compete for attention, acting as visual noise

Movement control

• Once data has been perceived and an appropriate action decided upon, a response must be made– Usually in the form of a movement

• Keyboard keys• Mouse (moving and clicking)

• Fitts Law; time required to acquire a target is a function of distance to and size of the target

Movement control • The bigger the target is, or the closer it is,

the faster it will be reached– Provide large objects for important functions– Take advantage of “pinning” actions on screens

• Big buttons are better than small buttons (larger target)

• Create toolbars that “bleed” into the edges of a display rather than a one pixel boundary to click on

Learning • Process of encoding information in short

term memory

• Requires some effort on our part

• Differentiates us from machines– Over time can get better at any task

• Designers too often use learning ability as an excuse to justify complex design–We can all learn to use a tightrope but a

bridge is better !

Learning • A design that minimizes learning can

accelerate performance

• Like learning many other things, we like to be active, to explore, and to use a trial and error approach

• Enhance learning by;– Allowing skills acquired in one situation to be

used in others like it– Provide complete and prompt feedback– Using a phased approach

Skill • The essence of skill is performance of

actions or movements in the correct time sequence with adequate precision

• Skills are hierarchical in nature and many basic skills may be integrated to form complex ones

• System and screen design must permit development of increasingly skillful performance

Individual differences • In reality, there is no average user• We all differ– Looks– Motor abilities– Intellectual abilities– Learning abilities and speed, etc

• Used to be that systems had to be designed to the lowest common denominator

• Now systems can be tailored

End of lecture

Human Factors and User Interface Design Southern Methodist University CSE 8316 Spring 2004.

Documents