Design & Screen Organization

Some Basic Human Characteristics

• Humans are limited in their capacity to process information.

• People are always learning.

• People use prior learning to support new learning.

• People often learn by doing

• People like to solve problems

• People don’t like unsolvable problems.

Some Basic User Characteristics

• Mental Models– Users are always building models

of their world.– Users don’t mind if something doesn’t

make sense • they build their own model to make it make

sense

– Users prefer simple models • simple and working solution (even it is not

completely correct)

Good & Bad toolbar icons

http://www.vbaccelerator.com/home/Resources/Graphics_Library/index.asp

http://www.vbaccelerator.com/home/Resources/Graphics_Library/Icons/Toolbar/Standard/article.asp

WHY IS THIS IMPORTANTKnow Your User

• Consider the Individuals using the system (i.e. target user)

• Skill– Computer knowledge, other systems they use,

education, keyboarding skills

• Job – Tasks – Needs– Frequency of use, importance to job, structure of

job, training, culture

• Psychological characteristics– Motivation, patience, expectations, learning style

• Physical attributes– Age, gender,disabilities

Norman’s Design Principles

• The Design principles are based on– Understanding of psychology of users.– Understanding of how people interact with

the environment– Understanding of how people response to

good design and bad design

Norman’s Design Principles

• Providing a good conceptual model• Make things visible• Managing a natural mapping• Providing feedback• Supporting automatic learning• Providing forcing functions

– Utilizing constraints

Conceptual Model

• the underlying understanding of how a technology or device works

Designer’sconceptual model

User’sconceptual model

Gap

System Image

Q: What do large gaps cause?

Three Conceptual Models

Design modelDesigner

Systemimage

System

User’s model

User

Mapping

• Mapping indicates the relationship between the action of the user and the result of the action.

• Natural mapping– The user’s natural understanding of action

results• RED for stop and GREEN for go (cultural

understanding)

Mapping Example

• Present the font choices using the fonts themselves

Times New RomanArialArial BlackCourier NewOld English Univers

Mapping Example

• Function keys – the mapping is somewhat

arbitrary• F3 for CUT and F4 for PASTE ?

– Not a natural mapping!– No memory aids– What happens when you want to

cut but you click on F4 (paste)?

F1 F2

F3 F4

F5 F6

F7 F8

• What mappings are present in a game control such as this joystick?

Forcing Function

• Design that prevents users from taking actions which are inappropriate or which would lead to error– Appliance shut off when opened

• Microwaves• Washing Machines

– Radio buttons• Choose one and one only

Forcing Function

• Good example of a forcing function design:– Menu bar - grays out and prevents the

selection of those items inapplicable to the current context

NewOpenCloseSaveSave as...

Forcing Function

• Lack of Forcing Function– DOS - every command is allowed as long

as it is typed correctly

– del *.*– deletes all files

Feedback

• Gives a user an immediate indication of the result of an action– Pick up the phone

• Hear the tone

– Select text• reverse video for selected text

Affordance

• Make things visible

• Provide indication of how something can be used

Affordances

• What do you need to know?– Which side opens?– Do I push or pull?

• Affordances– Knobs, Plates, Bars

• Size and placement

Affordances

• Buttons– Flat– Shadowed

• Hyperlinks– Plain text– Marked

• Cursor shapes

Automatic Learning

• People automatically connect their actions with screen displays through repetitive patterns of actions (reinforce learning).– A design should provide consistencies that

help the user learn to use the device

File Edit View Insert Format ToolsFile Edit View Insert Format Tools

Automatic Learning

• Good example of Automatic Learning:– user actions always involve same

number of steps, e.g., select object, select general action to perform on object, select specific case of action

– Consistence and standards• If you know how to use one window

application, it will be easy for you to learn another one.

Automatic Learning

• Example of non-use of Automatic Learning :

– Screens which change standard menu item locations from display to display

Three Conceptual Models

Design Model User’s Model

System Image

Visibility

Affordances

Mapping

ForcingFunctions

Autom

ated L

earn

ingActi

on

Feedb

ack

Mismatch between Designer’s & User’s Conceptual Models

• Errors

• Slow

• Frustration

• ...

Knowledge in the Head and in the World

• Knowledge in the world– is the information in the environment

• Knowledge in the head– is the information that stored in memory

• Most of the time we need to combine the two types knowledge to operate things. Why?

Coin Examples

• One Cent Coins– We recognize coins

easily.– But we don’t

remember all the details.

What do you see?

What information do you memorize?

• Location of element• Shape of element• Relationship of element to other elements

on screen• Pictures of icons• Colors

What do you see?

Human Processing of Complex Visual Scenes

• The time it takes to visually understand a scene depends on the number of unique elements that we must visually identify in the scene– If we have already learned the scene, we

record it as one element• Words are recorded as a single element.

– One graphical component many have several unique components.

An Example of a Complex Visual Scene

Control Panel for Desktop Video Conferencing

• Too many elements to learn

• Elements located all over screen – each individual location and relationship to

other elements has to be learned

• Elements not clustered or ordered so that sub-groupings can be learned

Organization of Screen Elements

• Balance• Symmetry• Regularity• Predictability• Sequentiality• Economy• Unity• Proportion• Simplicity• Groupings

Balance

• Equal weight of screen elements– Left to right, top to bottom

Balance

Unstable

Balance

• Left column processed - Right column noted as same

• Both columns need to be understood by visual processing system

Symmetry

• Replicate elements left and right of the center line

Symmetric

Asymmetric

Symmetry

• Left column processed - Right column noted as same

• Both right & left columns processed plus relationship of right to left

Regularity

• Create standard and consistent spacing on horizontal and vertical alignment points

Regular

Irregular

Regularity

• Left column processed - 2 right columns noted as same

• Location & size of each object processed

Predictability

• Put things in predictable locations on the screen

Predictable

Spontaneous

Icon

File Edit View Insert Window Help

Kung Foo

Search for Movies

CancelOK

Enter Keywords:Grasshopper Old blind guy

Icon

File Edit View Insert Window Help

Kung Foo

Search for Movies Cancel

OK

Enter Keywords:Grasshopper Old blind guy

Predictability

• User expects title & menu bar on top of screen

• Visual scene needs to be completely processed - objects not in expected places

Icon

File Edit View Insert Window Help

Kung Foo

Search for Movies

CancelOK

Enter Keywords:Grasshopper Old blind guy

Icon

File Edit View Insert Window Help

Kung Foo

Search for Movies Cancel

OK

Enter Keywords:Grasshopper Old blind guy

Sequentiality

• Guide the eye through the task in an obvious way– The Eye is attracted to:

• bright elements over less bright• Isolated elements over grouped• graphics before text• color before monochrome• saturated vs. less saturated colors• dark areas before light• big vs. small elements• unusual shapes over usual ones

Sequential

Random

Membership FormName:

Address:City:State:Zip:

Dues:Pubs:Total:

OK Cancel

Membership Form Name:

Address:

City:State:

Zip:

Dues:Pubs:

Total:

OKCancel

Economy

• Use as few styles, fonts, colors, display techniques, dialog styles, etc., as possible

Economical

Busy

Membership FormName:

Address:City:State:Zip:

Dues:Pubs:Total:

OK Cancel

Membership FormName:

Address:City:State:Zip:

Dues:Pubs:Total:

OK Cancel

Economy of visual elements

•minimize number of controls

•include only those that are necessary– eliminate, or relegate others to secondary

windows

•minimize clutter – so information is

not hidden

NNNN

MMMM

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

xxx: ____

MMMM

NNNN

Unity

• Make items appear as a unified whole (for visual coherence)– Use similar shapes, sizes, or colors– Leave less space between screen elements

than at the margin of the screen

Unity

Fragmentation

Proportion

• Create groupings of data or text by using aesthetically pleasing proportions

Square - 1:1 Square Root of 2 - 1:1.414 Golden Triangle - 1:1.618

Square Root of 3 - 1:1.732 Double Square - 1:2

Pleasing Proportions

Simplicity

• Minimize the number of aligned points– Use only a few columns to display screen

elements

• Combine elements to minimize the number of screen objects– Within limits of clarity

Simple

Complex

Name:Address:

City:State:Zip:

Dues:Pubs:Total:

OK Cancel

Membership Form

Dues:Membership Form

Name:Address:City:

State:Zip:

Pubs:Total:

OKCancel

Simplicity

• Only four alignments need to be processed

• A total of nine alignments need to be processed

Name:Address:

City:

State:Zip:

Dues:Pubs:

Total:

OK Cancel

Membership Form

Membership FormName:

Address:

City:State:

Zip:

Pubs:

Total:OK

Cancel

Simple

Complex

Size:Uniformity:

Height:Width:

Preserve Proportions% of original% of original

Size::Preserve Proportions% of original height% of original width

Redesigning a layout using alignment and factoring

The importance of negative space and alignment

Groupings

• Use visual arrangements to provide functional groupings of screen elements– Align elements in a group– Evenly space elements in a group– Provide separation between groups

• Use additional group elements sparingly– color & borders add complexity

Membership FormName:

Address:City:State:Zip:

Dues:Pubs:Total:

OK Cancel

Simple Grouping

• Similar elements aligned vertically

• Vertical distance between similar objects small

Membership FormName:

Address:City:State:Zip:

Dues:Pubs:Total:

OK Cancel

Boxed Grouping

• Boxes add additional complexity to form

• Spatial arrangement adequate

Background Grouping

Membership FormName:

Address:City:State:Zip:

Dues:Pubs:Total:

OK Cancel

• Color adds additional visual complexity

• Spatial arrangement adequate