Interface Design Guidelines &Web Design

General design principles

• Design principles apply to everything.Some principles are of particular importance to computer interfaces.

• Following general design principles can ensure meeting basic human factors evaluation criteria.

General HCI Design Concepts

• Visible affordances

• Visible constraints

• Mapping

• Causality

• Transfer effects

• Population stereotypes/idioms

• Individual differences

Affordance

• How do the following objects provide affordance?

Visible Constraints

• Limitations of the actions possible perceived from object’s appearanceEg date field example (which format??)

• Sim City2000 (see “hall of shame”) where some toolbar buttons (not all!) have submenus associated with them, available only when the user holds the mouse button down for a period of time after clicking on the toolbar button.

Mapping

•Why is this a poor mapping of video control buttons?

• Is this better?

Causality

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

• interpretation of “feedback” (more on this later)

• false causality– incorrect effect

• starting up an unfamiliar application just as computer crashes• causes “superstitious” behaviors

– invisible effect• command with no apparent result often re-entered repeatedly• e.g. mouse click to raise menu on unresponsive system

Transfer effects

• People transfer their learning/expectations of similar objects to the current objects

– positive transfer: previous learning's also apply to new situation

– negative transfer: previous learning's conflict with the new situation

Idioms

• Populations learn idioms that work in a certain way

• red means danger• green means safe

– But idioms vary in different cultures!• Light switches

– America: down is off– Britain: down is on

• Icons may not transfer well eg trash (word and symbol)

Individual differences

• There is no average user =>Difficult/impossible? to cater for everyone well, so design often a compromise

• Rule of thumb:– design should cater for 95% of audience (ie for 5th or 95th

percentile)• but means 5% of population may be (seriously!) compromised

– Designing for the average is a mistake• may exclude half the audience

• Examples:– computers and visibility:

• font size, line thickness, color for color blind people?

Interface Design Guidelines

• Human factors design principles provide good basis for design. More specific computer interface design guidelines have also been developed by evaluating common design problems across many systems.

• These guidelines can be used in the design process and also to evaluate an interface for usability.

General Interface Design guidelines.

1. Consistency and predictability2. Provide shortcuts 3. Provide helpful feedback4. Completions and exits clearly indicated5. Prevent errors 6. Allow action reversal 7. Give user a sense of control8. Minimize memory/cognitive load

(Shneiderman, 1998)

Be consistent• Consistency of effects

– same words, commands, actions will always have the same effect in equivalent situations

• Predictability

• Consistency of language and graphics• same information/controls in same location on all screens / dialog boxes

• forms follow boiler plate• same visual appearance across the system (e.g. widgets)

– e.g. different scroll bars in a single window system!

• Consistency of input• consistent syntax across complete system CONNECT MODEM

Ok Cancel OkCancel Done Never Mind Accept Dismiss

Cancel

Ok

Be Consistent

These are labels with a raised appearance.

Is it any surprise that people try and click on them?

Shortcuts

• Should provide fast way for experienced users – eg:

• Auto completion of commands

• Functions keys

• Skipping instructions - Eg bill paying over phone, choice for new/experienced users

Feedback

• Keep user informed about what is happening

• Includes sound, highlighting, animation and combinations of these

• Eg. The hourglass tells user something is happening, but not how long its going to take. Has it hung? Or is it just taking a long time?

5: Provide feedback

• Continuously inform the user about – what it is doing– how it is interpreting the user’s input– user should always be aware of what is going on

•

•

> Doit

What’s it doing? > Doit

This will take5 minutes...

Time for coffee.

Feedback

• Should be as specific as possible, based on user’s input

• Get users attention (is the feedback noticed?) but don’t drive them crazy! (eg harsh tones, large intrusive pop-ups, constantly blinking text)

How do I get

out of this?

6. Provide clearly marked exits

Exits

• Users often change mind, are interrupted, or become confused about a process => Offer easy way out wherever possible

– Cancel button (for dialogs waiting for input)– Undo (can get back to previous state)– Quit (for leaving the program at any time) – Defaults (for restoring to known state)

Prevent errors!

• Design it so its hard to make mistakes!!• Menu selection vs form fill-in • No alphabetic characters where numbers

expected• Check before proceeding with major actions

(eg save before exit prompt)• Feedback for errors including simple

specific instructions for recovery

Designing for error

Many strategies for reducing error problems• Make errors detectable

– feedback on effects of action; evaluation of goal

• Reduce potential for slips– E.g., simplify and indicate modes

• Reduce potential for mistakes– E.g., make system state visible

• Reduce consequences of error– E.g., make actions undo-able

Give user sense of control.

• Use the user’s own language - simple, user- friendly - e.g cd player vs DNS configuration ( “techspeak”)

• Present exactly and obviously the information the user needs– remove or hide irrelevant or rarely needed information

as it competes with important information on screen

• Provide help Online, context-driven help

Short term memory/Cognitive load

• Don’t make navigation and window management excessively complex

• Use meaningful mnemonics, icons, and abbreviations ie promote Promote recognition over recall

– eg File / Save

• Cf icon with Ctrl/S

Short term memory/Cognitive Load

• Describe required input format using example, and provide default eg calendar

• Don’t require users to remember data from one screen for use on another

Web Design• Knowing basic interface design guidelines is just

the beginning of designing a good interface. • Web design has three main components:

– Information Architecture (site content)

– Navigation Structure (site navigation)

– Graphical Design• General screen layout, Legibility and readability (typefaces),

Icons, Colour, Data Display & Data Entry (eg menus, forms, dialog boxes)

• Must also consider use of specific guidelines for: Other interface components such as

• Use of animations, audio, video

• Degree of automation

I1 Content is king• Ultimately, users visit your

website for its content. Everything else is just the backdrop.

• Jakob NielsenDesigning Web Usability, p. 99

I2 Essential strategies for web writing

1. concise2. easy to scan3. objective

"A common thread between conciseness, scannability, and objectivity is that each reduces the user's cognitive load, which results in faster, more efficient processing of information.”

Morkes & Nielsen, 1998

I3 Be concise• “Every sentence, every phrase, every word has

to fight for its life”• Crawford Kilian

Writing for the Web, pp. 58-9

• omit unnecessary sentences in a paragraph

• omit unnecessary words in a sentence

• use a short word over a long one

I4 Be concise

“Happy talk must die”Steve Krug

Don't Make Me Think, p. 46

• get rid of welcome messages and introductory text

• don’t waste words telling users where they are or what they can do

• don’t waffle on with explanations of what’s on the site

I5 Example of ‘happy talk’

I6 Getting rid of ‘happy talk’

I7 Be concise

• “Instructions must die”• Steve Krug

• Don't Make Me Think, p. 46

“The main thing you need to know about instructions is that no one is going to read them--at least not until after repeated attempts at 'muddling through' have failed”.

I8 Improve scanning

• use simple sentence structures

• keep paragraphs short

• one-topic per paragraph1

• opening sentence in a paragraph should be the topic sentence

I9 Techniques for longer text

normal style of writing…• introduction

• background material

• details/facts

• conclusions

… needs to be reversed

•Conclusion first, then details, then other background info.

I10 Online documentation

“help doesn’t!”

“It’s just not acceptable for web sites to come with documentation”.

Jakob Nielsen, Designing Web Usability, p. 129.

user interface problems can not be corrected in the documentation

I11 Minimise eye movement

Need to minimise eye movement is even more important online:

• users’ attention span is short

• harder to read from screen

• users’ don’t read, they scan

I12 Eye movement during reading

• left to right

• top to bottom

The way we are taught to read has implications for how we scan a screen:

I13 Eye movement and shapes

Position elements to minimise eye movement

Source:Yale Style Manual

I14 Design ‘above the fold’

‘above the fold’ = newspaper term

Make sure important informationcan be seen in first screen view

I15 Scrolling behaviour

Early studies (19954/5) showed that users would not scroll

Not true of users now, but…

• users will only scroll if they think they are on the right page

I16 ‘Above the fold’ (example 1a)

I17 ‘Above the fold’(example 1b)

I18 Page length and scrollingas a rule of thumb

level one page – one screenful

level two page – two screensful

beyond that – ok to be longer

Caution: pages can be directly accessed!

G1 Grids• Horizontal and vertical lines to locate window

components– aligns related components

• Organization– contrast to bring out dominant elements– grouping of elements by proximity– show organizational structure– alignment

• Consistency– location– format– repetition– organization

Window to widget

spacing

Widget to widget

spacing

No Ok

Message text in Arial 14, left adjusted

Standard icon set

Fixed components

Format of variable contents

G2 Grids

No Ok

Message text in Arial 14, left adjusted

Standard icon set

No Ok

Do you really want to delete the file “myfile.doc” from the folder “junk”?

?

Ok

Cannot move the file “myfile.doc” to the folder “junk” because the disc is full.

!

Apply

Cancel

The file was destroyed

G3 Another gridTwo-level Hierarchy•indentation•contrast

Grouping by white space

Alignment connects visual elements in a sequence

Logic of organizationalflow

G4 Visual Consistency– internal consistency

• same conventions and rules for all elements of the GUI unless strong reason

• set of application-specific grids enforce this

– external consistency• follow platform and interface style conventions• use platform and widget-specific grids• deviate from conventions only when it provides a clear benefit

to user

Warning

mmmm mmmmmm

Okay

!

Help

mmmm mmmmmm mmm

Okay

?

Tip of the day: Monday, Mar 12

mmmm mmmmmm

Dismiss

G5 Relationships between screen elements– Link related elements, disassociate unrelated elements

• proxemic clusters

• white (negative) space

• alignment

• explicit structure

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Mmmm:

Bad alignment Poor choice of colors to distinguish labels from editable fields

G6 Webforms

IBM's Aptiva Communication Center

G7 No regard fororder andorganization

G8 Text alignment and readability

Left alignment is most commonly used:

• eye scans from left to right

• easier to read

G9 Text alignment example (1)

G10 Legibility

• Factors that affect legibility

• font size, face

• use of colours

• contrast

G11 Font size and face (1)

Study of font faces and sizes by Software Usability Research LabWichita State University, 2000

• 35 participants

• all 20/20 vision

• read 8 short passages of text

G12 Font size and face (2)

• speed

• accuracy

• Arial vs Times New Roman

• 10 points vs 12 points

• anti-aliased vs dot matrix fonts

tested for

tested between

G13 What fonts do we use?

for users with good vision

- TNR vs Arial not critical- 10 vs 12 point not critical

but not all users have good vision

- 12 pt would be a safer default- allow user to override

G14 More on textText is harder to read when

• IT’S ALL IN UPPERCASE

• it is blinking

• it is moving (marquee style)

• it is zooming

G15 Colour and contrast

use colours with good contrast

- white on black (‘positive text’) is best

- black on white (‘negative text’) is next best

use plain backgrounds

G16 Contrast – example (1)

colour contrast insufficient

G17 Contrast – example (2)• busy background image

• insufficient colour contrast

Navigation

– how can window navigation be reduced?• avoid long paths

• avoid deep hierarchies

Navigation -1

Navigation-2

Navigation-3

What is microcontent?

• page titles

• page headings & sub-headings

• text hyperlinks

‘microcontent’ – very small amount of space to make your message clear

Graphics and multimedia content

disadvantages

• take more time to download

• (some) require special plug-ins

• not accessible to all users

- non-graphical browsers- don’t have/don’t want/can’t install plug-in- sight/hearing disabilities

Graphics and multimedia content

advantages

• can convey information quickly

• enhance e-commerce

• useful for cognitively impaired

• useful for deaf community