Guidelines for Website Design

Transcription

1 CS 418/518 Web Programming Spring 2014 Website Design Dr. Michele Weigle Guidelines for Website Design! Make a Great First Impression! copyedit! Maintain Consistency! color, layout, fonts, spacing! Use the Right Images! avoid stock photography! Create a Solid Navigation System! make it easy to use! Limit Flash and Animation! Make it Accessible

2 Browsershots.org Background and Foreground Colors Should Differ In Brightness M. Stone, "Choosing Colors for Data Visualization",

3 Background and Foreground Colors Should Have Appropriate Contrast Choose Attractive Colors

4 Practitioner's Summary! Pay attention to organizing the structure and sequence of menus and forms to match the users' tasks, priorities, and environment.! Each menu or form should be a meaningful, task-related unit, and individual items should be distinctive and comprehensible. Display Design! Think about what operations (mouse, keyboard) a user must perform to use your site.

5 Error Messages! Phrasing of error messages or diagnostic warnings is critical, especially when dealing with novices! Avoid! imperious tone that condemns user! messages that are too generic (e.g. WHAT? or SYNTAX ERROR)! messages that are too obscure (e.g. FAC RJCT )! Specificity Poor SYNTAX ERROR ILLEGAL ENTRY Better Unmatched left parenthesis Type first letter: Send, Read, or Drop INVALID DATA Days range from 1 to 31 BAD FILE NAME File names must begin with a letter Error Messages! Constructive guidance and positive tone! Indicate what users should do to correct the problem! Unnecessarily hostile messages using violent terminology can disturb non-technical users:! FATAL ERROR, RUN ABORTED! CATASTROPHIC ERROR: LOGGED WITH OPERATOR! Negative terms such as ILLEGAL, ERROR, INVALID, BAD should be eliminated or used infrequently Poor Resource Conflict Bus: 00 Device: 03 Function: 01 Network connection refused. Bad date. Better Remove your compact flash card and restart Your password was not recognized. Please retype. Drop-off date must come after pickup date.

6 Error Messages! User-centered phrasing! Suggests user controls the interface, initializing more than responding! Think about the telephone company! We re sorry, but we are unable to complete your call as dialed. Please hang up, check your number, or consult the operator for assistance! vs. Illegal telephone number. Call aborted. Error number 583-2R6.9. Consult your user manual for further information. Error Messages! Appropriate physical format! only use all caps for brief, serious warnings! avoid code numbers! if required, include at end of message! best location of messages?! near where problem arose! placed in consistent position on bottom of screen! near to, but not obscuring relevant information

7 Tune Web Apps to Improve Performance Designers can optimize web pages to reduce byte counts and numbers of files or provide previews of materials available in digital libraries or archives to help reduce the number of queries and accesses to the network Frustrating Experiences! Three initial strategies can reduce user frustration:! Reduce short-term and working memory load! Provide information-abundant interfaces! Increase automaticity! Automaticity - processing of information (in response to stimuli) in a way that is automatic and involuntary, occurring without conscious control.! An example is when a user performs a complex sequence of actions with only a light cognitive load, like a driver following a familiar route to work with little apparent effort.

8 Poor Design/Usability! Pages that contain typos or grammatical errors! Poor, unattractive color choices! Forms that aren't spaced well! Forms that delete all user-entered information if there's an error! Pages where user has to scroll a lot! Pages where user has to go back and forth on the page to perform a common operation! Lists aren't ordered in a meaningful way! Error messages that aren't helpful US Dept of Health and Human Services! Usability Guidelines for Websites! lots of good information! but, actually is a great example of poor navigation

9 What's the problem with this form? Examples of Poor Design/Usability! Note: These lists will be edited right up until class time. All links will be on class "Useful Links" page.

10 Examples of Good Design/Usability! Note: These lists will be edited right up until class time. All links will be on class "Useful Links" page. Up Next Project 2 demos and SPRING BREAK!