interface design guidelines web design l.
Skip this Video
Loading SlideShow in 5 Seconds..
Interface Design Guidelines & Web Design PowerPoint Presentation
Download Presentation
Interface Design Guidelines & Web Design

Loading in 2 Seconds...

play fullscreen
1 / 68

Interface Design Guidelines & Web Design - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

Interface Design Guidelines & Web Design

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
general design principles
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
General HCI Design Concepts
  • Visible affordances
  • Visible constraints
  • Mapping
  • Causality
  • Transfer effects
  • Population stereotypes/idioms
  • Individual differences
  • How do the following objects provide affordance?
visible constraints
Visible Constraints
  • Limitations of the actions possible perceived from object’s appearance

Eg 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.
  • Why is this a poor mapping of video control buttons?
  • Is this better?
  • 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
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
  • 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
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
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
General Interface Design guidelines.

1. Consistency and predictability

2. Provide shortcuts

3. Provide helpful feedback

4. Completions and exits clearly indicated

5. Prevent errors

6. Allow action reversal

7. Give user a sense of control

8. Minimize memory/cognitive load

(Shneiderman, 1998)

be consistent
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







Never Mind





be consistent14
Be Consistent

These are labels with a raised appearance.

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

  • 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
  • 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

> Doit

> Doit

This will take5 minutes...

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

What’s it doing?

Time for coffee.

  • 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)
6 provide clearly marked exits
6. Provide clearly marked exits

How do I get out of this?

  • 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
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
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
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
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 load25
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
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
I1 Content is king
  • Ultimately, users visit your website for itscontent. Everything else is just the backdrop.
  • Jakob NielsenDesigning Web Usability, p. 99
i2 essential strategies for web writing
I2 Essential strategies for web writing
  • concise
  • easy to scan
  • 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
I3 Be concise
  • “Every sentence, every phrase, every word has to fight for its life”
  • Crawford KilianWriting 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
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
i7 be concise
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
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
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
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
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
I12 Eye movement during reading

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

  • left to right
  • top to bottom
i13 eye movement and shapes
I13 Eye movement and shapes

Position elements to minimise eye movement

Source:Yale Style Manual

i14 design above the fold
I14 Design ‘above the fold’

‘above the fold’ = newspaper term

Make sure important informationcan be seen in first screen view

i15 scrolling behaviour
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
i18 page length and scrolling
I18 Page length and scrolling

as 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
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

Format of variable contents

Widget to widget spacing

Message text in Arial 14, left adjusted

Standard icon set

Window to widget spacing



Fixed components

g2 grids

Message text in Arial 14, left adjusted

Standard icon set


The file was destroyed




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



G2 Grids

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




g3 another grid
G3 Another grid
  • Two-level Hierarchy
  • indentation
  • contrast

Logic of organizationalflow

Alignment connects visual elements in a sequence

Grouping by white space

g4 visual consistency


Tip of the day: Monday, Mar 12

mmmm mmm



mmmm mmm





mmmm mmm

mmm mmm



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
g5 relationships between screen elements
















G5 Relationships between screen elements
  • Link related elements, disassociate unrelated elements
    • proxemic clusters
    • white (negative) space
    • alignment
    • explicit structure

G6 Webforms

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



No regard fororder andorganization

IBM's Aptiva Communication Center

g8 text alignment and readability
G8 Text alignment and readability

Left alignment is most commonly used:

  • eye scans from left to right
  • easier to read
g10 legibility
G10 Legibility
  • Factors that affect legibility
  • font size, face
  • use of colours
  • contrast
g11 font size and face 1
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
G12 Font size and face (2)

tested for

  • speed
  • accuracy

tested between

  • Arial vs Times New Roman
  • 10 points vs 12 points
  • anti-aliased vs dot matrix fonts
g13 what fonts do we use
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 text
G14 More on text

Text is harder to read when

  • it is blinking
  • it is moving (marquee style)
  • it is zooming
g15 colour and contrast
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
G16 Contrast – example (1)

colour contrast insufficient

g17 contrast example 2
G17 Contrast – example (2)
  • busy background image
  • insufficient colour contrast
  • how can window navigation be reduced?
    • avoid long paths
    • avoid deep hierarchies
what is microcontent
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
Graphics and multimedia content


  • 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 content68
Graphics and multimedia content


  • can convey information quickly
  • enhance e-commerce
  • useful for cognitively impaired
  • useful for deaf community