Interface design guidelines web design
1 / 68

Interface Design Guidelines & Web Design - PowerPoint PPT Presentation

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

PowerPoint Slideshow about 'Interface Design Guidelines & Web Design' - benjamin

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 l.jpg
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 l.jpg
General HCI Design Concepts

  • Visible affordances

  • Visible constraints

  • Mapping

  • Causality

  • Transfer effects

  • Population stereotypes/idioms

  • Individual differences

Affordance l.jpg

  • How do the following objects provide affordance?

Visible constraints l.jpg
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.

Mapping l.jpg

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

  • Is this better?

Causality l.jpg

  • 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 l.jpg
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 l.jpg

  • 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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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

  • Ok






    Never Mind





    Be consistent14 l.jpg
    Be Consistent

    These are labels with a raised appearance.

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

    Shortcuts l.jpg

    • 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 l.jpg

    • 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 l.jpg

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

    Feedback18 l.jpg

    • 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 l.jpg
    6. Provide clearly marked exits

    How do I get out of this?

    Exits l.jpg

    • 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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    I13 Eye movement and shapes

    Position elements to minimise eye movement

    Source:Yale Style Manual

    I14 design above the fold l.jpg
    I14 Design ‘above the fold’

    ‘above the fold’ = newspaper term

    Make sure important informationcan be seen in first screen view

    I15 scrolling behaviour l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg

    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 l.jpg
    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 l.jpg


    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 l.jpg
















    G5 Relationships between screen elements

    • Link related elements, disassociate unrelated elements

      • proxemic clusters

      • white (negative) space

      • alignment

      • explicit structure

    Slide50 l.jpg

    G6 Webforms

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

    Slide51 l.jpg


    No regard fororder andorganization

    IBM's Aptiva Communication Center

    G8 text alignment and readability l.jpg
    G8 Text alignment and readability

    Left alignment is most commonly used:

    • eye scans from left to right

    • easier to read

    G10 legibility l.jpg
    G10 Legibility

    • Factors that affect legibility

    • font size, face

    • use of colours

    • contrast

    G11 font size and face 1 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    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 l.jpg
    G16 Contrast – example (1)

    colour contrast insufficient

    G17 contrast example 2 l.jpg
    G17 Contrast – example (2)

    • busy background image

    • insufficient colour contrast

    Navigation l.jpg

    • how can window navigation be reduced?

      • avoid long paths

      • avoid deep hierarchies

    What is microcontent l.jpg
    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 l.jpg
    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 l.jpg
    Graphics and multimedia content


    • can convey information quickly

    • enhance e-commerce

    • useful for cognitively impaired

    • useful for deaf community