Presentation is loading. Please wait.

Presentation is loading. Please wait.

User Interface Design and Modelling (Web) Design Guidelines.

Similar presentations


Presentation on theme: "User Interface Design and Modelling (Web) Design Guidelines."— Presentation transcript:

1 User Interface Design and Modelling (Web) Design Guidelines

2 User Interface Design and Modelling Norman's Design Guidelines (more information available in Course Documents, HCI basics)

3 User Interface Design and Modelling Lecture Objectives Norman’s Design Guidelines 10 ten web design mistakes 10 good deeds of web design Principles of using colour in Interaction Design

4 User Interface Design and Modelling 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 system confident of getting the required result(s).

5 User Interface Design and Modelling Colour in Interaction Design

6 User Interface Design and Modelling Colour in Interaction Design Use 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)

7 User Interface Design and Modelling Colour in Interaction Design Background 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 graphics reduces the likelihood of floating characters allows the designer to use the color black in the display Najjar (1990)

8 User Interface Design and Modelling Colour in Interaction Design Use colour consistently with user expectations Culture and experience make us associate colours with states/things. Some well-known expectations follow: Red = warning stop, error, hot Green = go, good Yellow = caution, slow Blue = 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)

9 User Interface Design and Modelling Colour in Interaction Design Use Colours that Contrast Well Note contrast in Highway signs Black on white White on brown Black on yellow Opponent colour theory http://faculty.washington.edu/chudler/eyecol.html http://faculty.washington.edu/chudler/eyecol.html - Our sense of sight

10 User Interface Design and Modelling Colour in Interaction Design Don't use Blue for Text The eye cannot understand clearly saturated blue for text, thin lines and high resolution information The 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.

11 User Interface Design and Modelling Colour in Interaction Design Don'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 lens Chromostereopsis – 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

12 User Interface Design and Modelling Colour in Interaction Design Use 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

13 User Interface Design and Modelling Top 10 mistakes in Web Design see Norman at http://www.useit.com/alertbox/9605.htmlhttp://www.useit.com/alertbox/9605.html

14 User Interface Design and Modelling 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

15 User Interface Design and Modelling 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

16 User Interface Design and Modelling 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 Derived from: Neilsen http://www.useit.com/alertbox/designmistakes.html

17 User Interface Design and Modelling 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 Derived from: Neilsen http://www.useit.com/alertbox/designmistakes.html

18 User Interface Design and Modelling Top 10 Good Deeds see Norman at http://www.useit.com/alertbox/991003.htmlhttp://www.useit.com/alertbox/991003.html

19 User Interface Design and Modelling 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

20 User Interface Design and Modelling Lecture Objectives Norman’s Design Guidelines 10 ten web design mistakes 10 good deeds of web design Principles of using colour in Interaction Design


Download ppt "User Interface Design and Modelling (Web) Design Guidelines."

Similar presentations


Ads by Google