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

WHY IS THIS IMPORTANT Know 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’s conceptual model User’s conceptual model Gap System Image Q: What do large gaps cause?

Three Conceptual Models Design model Designer System image 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 Roman Arial Arial Black Courier New Old English Monotype Sorts 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)? F1F2 F3F4 F5F6 F7F8

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 New Open Close Save Save 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 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 ModelUser’s Model System Image Visibility Affordances Mapping Forcing Functions Automated Learning Action Feedback

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 FileEditViewInsertWindow Help Kung Foo Search for Movies CancelOK Enter Keywords : GrasshopperOld blind guy Icon FileEditViewInsertWindowHelp Kung Foo Search for MoviesCancel OK Enter Keywords : GrasshopperOld 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 : GrasshopperOld blind guy Icon File Edit View Insert Window Help Kung Foo Search for MoviesCancel OK Enter Keywords : GrasshopperOld 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 Form Name: Address: City: State: Zip: Dues: Pubs: Total: OKCancel Membership FormName: 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 Form Name: Address: City: State: Zip: Dues: Pubs: Total: OKCancel Membership Form Name: 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: ____ 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:1Square Root of 2 - 1:1.414Golden Triangle - 1:1.618 Square Root of 3 - 1:1.732Double 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: OKCancel Membership Form Dues: Membership Form Name: Address: City: State: Zip: Pubs: Total: OK Cancel

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: OKCancel Membership Form Name: 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 Form Name: Address: City: State: Zip: Dues: Pubs: Total: OKCancel Simple Grouping Similar elements aligned vertically Vertical distance between similar objects small

Membership Form Name: Address: City: State: Zip: Dues: Pubs: Total: OKCancel Boxed Grouping Boxes add additional complexity to form Spatial arrangement adequate

Background Grouping Membership Form Name: Address: City: State: Zip: Dues: Pubs: Total: OKCancel Color adds additional visual complexity Spatial arrangement adequate