Intelligent design 101

Intelligent Design Michael Morozov

Michael Morozov

Writing software since 1988

MCSD.NET, MSTS, MCPD, MCP Sql Server

Masters Degree in applied mathematics

Masters Degree in software engineering

Designed by Developer

Developer Designer

D e v i g n e r

+

Conceptual model

1. Designer creates a model to satisfy requirements or solve a problem

2. Designer model is communicated to the end user via the system image

3. User forms his own model on how the system should function

Designer

Model

User Model

System Image

Conceptual model

• Fragmented information

• Only what can be seen

• Conventional knowledge

• In-depth knowledge

• More than meets the eye

• Innovative paradigms

Playing Charades

Designer is communicating purpose using only visuals

Designer

Forming the User Model

Evaluation

Execution Feedback

Wrong user model

Will a room warm up faster if the thermostat is turned all the way to the maximum setting?

• temperature theory - thermostat controls the temperature of the expelled air

• volume theory - thermostat controls the volume of hot air coming out of the device

BOTH THEORIES ARE WRONG

Thermostat explained

• Thermostat is an on/off switch. Fully on or fully off - no in between.

• The knob sets the desired temperature at which the heater shuts off

• It will take exactly the same time to reach target temperature regardless of how far the knob is turned.

• Design gives no hint to the actual model

Lost in Design Model

• Where are we and how do we navigate this? • What is the difference between DSC and DTC? • What is “PDC” and “Comfort EDC”? • Why “Auto P” and “Auto P MFL” are so far apart? • Why “Comfort EDC” and “Auto P MFL” are indented?

Assisting with Evaluation

• Exploit known presentation patterns

• Organize content visually

• Make things discoverable

• Reduce visual noise

• Control volume of information

Evaluation of information

When we are looking at a

• web page

• application interface

• front panel of an electronics device

• dashboard of the new car

• any other unfamiliar object or control panel

WE ARE NOT READING, WE ARE SCANNING

Visual organization of information

When displaying information or controls designers need to visually convey:

• Information structure

• Relation between elements

• Importance and relevance of elements

Whitespace

• Defines spatial relationship between elements

• Balances elements on the page or panel

• Reduces informational overload, confusion

• Provides brains with visual breathing room

• Integral part of a design, not just a background

• Not necessarily white

Distance has a meaning

A group of friends Teacher and students

Spacing and Relation

Small distance is a sign of relation

Wrong Right

Too close!

Micro whitespace

• Character spacing

• Line and paragraph spacing

• Spacing around images

• Cell padding in a table

Macro whitespace

• Spacing between major elements in the composition

• Page and column margins

Active and Passive whitespace

Alignment • Elements of the user interface should align

• Human eye is tracing along straight lines or centers of gravity

• Good alignment is not noticed, misalignment is

Visual alignment

• Special case: visual (optical) alignment

Grids

• Create order from chaos

• Help align elements

• Enforce consistency

Grids and layouts

Designing the invisible (whitespace, alignment, grid structure) is as important as providing the visual content and controls.

Contrast and Relevance

Contrast conveys relevance of information

and draws attention to important elements

Where is my shampoo?

The word shampoo is arguably the most

important information on the bottle.

• It has the least contrast

• It is buried in a block of text

• The font is too small

Contrast fits information relevance

Contrast

Contrast can be achieved by changing

• Size (Weight)

• Form (Structure)

• Color (Brightness)

• Orientation (Direction)

Size

Brightness

Items that change are of higher importance than static elements

Structure

Grid is less important than data values

Color

We Repair Everything But Broken

Large Size + Low Contrast

• Attracts the eye and lets it move on

• Does not capture attention unless looked for

Small Size + Orientation Change

Smallest Effective Difference

Contrast should be clear enough to draw

attention to an element without being so

overwhelming that it draws attention to itself.

Contrast should fit information relevance. It should also adhere to the principle of the Smallest Effective Difference.

Information in series • Evaluated over time

• New info is connected with memory of old

• Difficult to remember full history of changes

Information in parallel • Evaluated instantly, can be aggregated

• Viewer controls the pace

• No need to remember older information

Visual Noise

Visual Noise

• Obscures important details

• Overwhelms perception

• Erodes productivity

• Contributes to information overload

Blocking Out Irrelevant Detail

Information overload

Functional overload

Functional overload

Visual grouping

A display containing more than four perceptual units of information cannot be understood at a glance

Visual grouping

A display containing more than four perceptual units of information cannot be understood at a glance

Perception of numbers

• 2721654230 or 2,721,654,230

• Phone: (858) 353-2311

• SSN: 737-12-4498

Clarity of information

• Consistent information delivery strategy

• No visual noise

• No informational or functional overload

• No ambiguity

Order

Alpha-numeric order

• Search direction should be obvious

• Putting 1-dimensional list in multi-dimensional space can be confusing

Undesired Associations

An unintended aberration of meaning caused by

a specific context or association with a known

object.

• Taxi or Police?

iSlate

islate.com reads “is late”

Euro Coins

Old Design New Design

Present information with clarity by choosing proper information delivery strategy, reducing visual noise and controlling volume of information.

Assisting with Execution

• Quantity and choice

• Affordances

• Constraints

• Mappings

Quantity and Choice

Human brain, when scanning for something:

• Never searches for or compares all options

• Prefers smaller sets of options (4 or less)

• Picks the first option that looks good enough

• Prefers shorter option to a longer option

• Always a compromise between speed and accuracy

How many?

How many?

Counting vs. Subitizing

• Subitizing An accurate, rapid and confident quantitative evaluation of small sets without explicit counting.

• Counting

Sequential or mathematical enumeration of larger sets of objects (5 or more)

Visual Short-Term Memory

• VSTM has capacity for 4 items

• Exceeding the capacity increases uncertainty

• It is difficult to compare more than 4 items

• Adding elements in excess of 4 increases reaction time by 250-350 milliseconds per each additional object.

Grouping by function Blocks of 4 or less menu items are easier

for the brain to consume

4 icons in a row

Affordances

• Perceived and actual properties of things that determine how it could possibly be used.

• Affordances are parts of a system that allow (or afford) us to interact with the system.

• Anything we can interact with is (has) an affordance

Examples of affordances

• When we see a door, we immediately know that we can open it and go through it

• Link has an affordance of clickability

• Buttons can be pressed

• Knobs can be turned

• Scrollbar moves the document in the window

Explicit Affordance

Something other than a button or a link can be clickable. A piece of text can be clickable (i.e. have the affordance of clickability), but the user wouldn’t know about it by just looking.

In good design affordances are explicit.

Software Affordances

• Floppy disk is for saving (when was the last time you saw one?)

• Dot-matrix printer from 1980 is for printing

• Not just the picture, but size and position too. Put a save button in the bottom right corner and nobody will find it.

Ribbon UI

• Same affordances

• Better discoverability

Where affordances come from?

• Cultural stereotypes

– Progress bar moving left-to-right or right-to-left

– Light switch up or down

• General metaphors

– Red means danger, green means safe

• Industry-specific conventions

– Picture of a floppy probably means nothing outside of computer world

Transfer Effects

People transfer their knowledge and experience of similar objects to new situations

• Positive transfer

– Prior knowledge applies to the new objects

– Example: typewriter QWERTY keyboard

• Negative transfer

– Prior knowledge conflicts with the new situation

– Example: flick direction is opposite to scroll direction

Expected behavior of scrollbar

• Moving the scroll handle down makes the document scroll up

– this is what we are used to

– reversing this behavior would lead to severe usability issues

Expected behavior of checkbox

iDrive interface from BMW

Mappings

Constraints

• Limitations that constrain possible actions

– Physical

– Semantic

– Cultural

– Logical

Physical Constraints

• Physical limitations on possible actions

– Mouse cursor doesn’t move beyond screen boundary

– Scrollbar limits how far a page can be scrolled

– The car doesn’t start unless put in Park mode

Semantic Constraints

• When the meaning of situation controls the possible action

– Modal dialog box requires attention

– Print preview window suggests printing

– Why are you sitting where you are?

– Why are you facing forward?

Cultural Constraints

• Cultural conventions define possible action

– What does red mean (stop, danger, alert)

– How does a trashcan look in your culture?

• Cultural constrains may fail

Logical Constraints

• Sequence

– Performing steps in obvious order (1, 2, 3…)

– Wizard-type workflows (Back, Forward)

• Completeness

– Filling all parts of the form

– Answering all questions

Reducing mouse travel

Position UI elements closer to mouse cursor

Reducing mouse travel

When the clicked control moves – move the cursor

Find dialog moves if it obscures the text

Affordances must be explicit and unambiguous. Mappings – natural. Implement constraints and think about subitizing limits.

Feedback

• Feedback helps evaluate state of the system after execution of tasks

• Feedback is expected

• Interpretation of feedback may vary

Evaluation

Execution Feedback

Understanding Feedback

Causality

• The thing that happens right after an action is assumed by people to be caused by that action

• When user makes an action, it expects that something will happen.

• Watch out for false causality • Incorrect effect • Invisible effect

after this therefore because of this Logical Fallacy known as “Coincidental Correlation”

Is it OK to Cancel?

Feedback via animation

• Reporting progress on lengthy operations

• Background processing indicators

• Showing progress on AJAX requests

• Animation of appearing/disappearing controls

Fade-in or slide-in?

• Slide in

– Visual Studio panels

– Browser warning bar

– Windows Phone 7 “Toast” notification

• Fade-in

– Adobe Lightroom panels

– Outlook “New Mail” tray notification

Acceleration vs. Deceleration

Unnatural

• Constant speed, robotic movement

Natural

• Acceleration followed by deceleration

Perceived vs Actual speed

Progress bar appears to go FASTER • Linear motion

• Acceleration towards the end

Progress bar appears to go SLOWER • Pauses

• Deceleration

• Non-linear motion

Click only once

Comfort of Learning

• Technology is intimidating. People are afraid to break the system or lose the data.

– Encourage experimentation, increase comfort

– Support incremental reversible actions (Undo)

– Don’t use dialogs to report normalcy

– If it’s worth asking the user, it’s worth the program remembering the answer

Steve Krug

Don’t make me think

Tom Stafford, Matt Webb

Mind Hacks

Don Norman

Design of everyday things

Edward Tufte Visual Explanations

Questions

?