User Interface Design and Modelling (Web) Design Guidelines.

User Interface Design and Modelling

(Web) Design Guidelines


Norman's Design Guidelines(more information available in Course Documents, HCI basics)


Lecture Objectives

Norman’s Design Guidelines10 ten web design mistakes10 good deeds of web designPrinciples of using colour in Interaction Design


Colour in Interaction Design Norman's Design Guidelines

A. Good visibility means you can: tell the state of the system by looking at it tell what the alternatives for actions are identify controls to make the system perform the available actions

Affordance+

B. Good conceptual models provide: consistent presentation of the system’s state consistent controls, possible actions and results

System image=

C. Good mappings mean you can determine the: relationship between actions and results relationship between controls and actions system state from what is visible

User’s model of system.

D. Good feedback involves: full and continuous presentation of the results of actions timely, i.e. rapid, response times

A ‘good’ user model makes the user feel:

in control of the systemconfident of getting the required

result(s).


Colour in Interaction Design


Colour in Interaction DesignUse Colour Sparingly

Overusing color:makes the display look cluttered (Williges & Williges, 1982) can confuse users (Narborough-Hall, 1985), Makes user tasks more complex, increases errors, and reduce user productivity (Keister, 1983).

Once you use the color red to warn the user, don't use red for any other purpose.

Najjar (1990)


Colour in Interaction DesignBackground colour

Avoid using a solid, black, untextured background. - this type of background can cause colored characters to appear to float at different distances relative to the background (Narborough-Hall, 1985). If you have to use a solid, black, untextured background, then use white and desaturated red, desaturated yellow, desaturated green, and desaturated blue colors (Weitzman & Neri, 1986). A good choice for a background color is a neutral, textured, dull, light grey (Narborough-Hall, 1985) because it:helps people keep their attention on the foreground text and graphicsreduces the likelihood of floating charactersallows the designer to use the color black in the display

Najjar (1990)


Colour in Interaction DesignUse colour consistentlywith user expectationsCulture and experience make us associate colours with states/things.

Some well-known expectations follow:Red = warning stop, error, hotGreen = go, goodYellow = caution, slowBlue = cold

So, make red a warning that data will be deleted if an action is performed. Use green text or graphics to tell the user that a requested process worked. Make yellow a caution that the next process will be slow. Indicate cold, application-specific objects, like ice, with blue. Use your colors in a way that is consistent with the expectations of your users.

Najjar (1990)


Colour in Interaction DesignUse Colours that Contrast Well

Note contrast in Highway signsBlack on whiteWhite on brownBlack on yellow

Opponent colour theoryhttp://faculty.washington.edu/chudler/eyecol.html -

Our sense of sight


Colour in Interaction DesignDon't use Blue for Text

The eye cannot understand clearly saturated blue for text, thin lines and high resolution informationThe lens absorbs some light transmitted through it, more in

the blue region than yellow and red. This gets worse with age.

To focus light on the retina, muscles change the thickness of the lens. In a relaxed state they focus mid wavelength light of yellow and green on the retina. For blue, the muscles have to work really hard to make the lens thin, with saturated blue the focus is in front of the retina because the lens can’t get thin enough, therefore it appears blurry.


Colour in Interaction DesignDon't use Saturated Colours

Saturated bright colours should be used only to grab attention Visual fatigue as the muscles have to work hard to refocus

the lensChromostereopsis – where colours appear to float in front or

behind the computer screen because of the refocusing required

Difficult for colour defective people to differentiate – especially red

Air traffic controllers reported seeing red or pink for up to 15 mins after viewing strongly saturated green characters for several hours


Colour in Interaction DesignUse Colour Redundantly

Colour defective is a better term than colour blind – only 0.005% are truly colour blind

8% of men and .4% of women are colour defective (Robertson, 1979)Red/green – may be distinguished only as red looking darker

than green (due to a deficiency in red photopigment cones)

Use brightness, shape, texture, blink to help colour defective people

Use desaturated colours which have a mixture of red, green and blue


Top 10 mistakes in Web Designsee Norman at http://www.useit.com/alertbox/9605.html


Top 10 Mistakes Over literal search facilities Content

Titles and headings with low Search Engine Visibility Content that's not Written for the Web Non-Scannable Text PDF Files for Online Reading Undated Content Outdated Content Long Lists Long Scrolling Pages No Prices Products Sorted Only by Brand Legibility Problems e.g. using serif fonts & Fixed Font size Pages with "Under Construction"

Derived from: Neilsen http://www.useit.com/alertbox/designmistakes.html


Top 10 Mistakes Links

Not Changing the Color of Visited Links Non-Standard Links URL > 75 Characters Changing page names (breaking inbound links) JavaScript in Links

Browser Window Browser Incompatibility Frozen Layouts with Fixed Page Widths Horizontal Scrolling Breaking or Slowing Down the Back Button Opening New Browser Windows

Derived from: Neilsen http://www.useit.com/alertbox/designmistakes.htm


Top 10 Mistakes

Forms Cumbersome Form Not making require fields clear Collecting unnecessary data Overly Restrictive Form Entry Collecting Email Addresses Without a Privacy Policy

Graphics Inappropriate Animations Small Thumbnail Images of Big, Detailed Photos Inadequate Photo Enlargement Overly detailed ALT Text



Top 10 Mistakes

Questions No "What-If" Support Frequently Asked Questions in FAQ Infrequently Asked Questions in FAQ

General No Contact Information or Other Company Info Unclear Statement of Purpose Violating Design Conventions Non-Standard Use of GUI Widgets and controls Overly Long Download Times



Top 10 Good Deedssee Norman at http://www.useit.com/alertbox/991003.html


Top 10 Good Deeds

Name and logo on every page unusually top-left make the logo a link to the home page (except on the home page

itself: never have a link that points to the current page Provide search facility if the site has more than 100 pages. Structure the page to facilitate scanning Use hypertext to structure the content space Use product photos Use relevance-enhanced image reduction Use link titles (rhetoric of departure and arrival) Ensure that at least key pages are accessible for users with disabilities Do the same as everybody else

Derived from: Neilsen http://www.useit.com/alertbox/991003.html


Lecture Objectives

Norman’s Design Guidelines10 ten web design mistakes10 good deeds of web designPrinciples of using colour in Interaction

Design

User Interface Design and Modelling (Web) Design Guidelines.

Documents

Transcript of User Interface Design and Modelling (Web) Design Guidelines.