Design Theory Site Design Page Design MultiMedia Teacher Resources Table of Contents Home Page Copyright © 1999 by Bonnie Skaalid

This page is for those people who don't want to read the research and just want the final conclusions from each section. Design Theory Guidelines from human-computer interface design research: Recognize Diversity make your main navigation area fast loading for repeat users provide a detailed explanation of your topics, symbols, and navigation options for new users (FAQ or introduction page) provide a text index for quick access to all pages of the site ensure your pages are readable in many formats, to accommodate users who are blind or deaf, users with old versions of browsers, lynx users, users on slow modems or those with graphics turned off Strive for consistency in: menus help screens color layout capitalization fonts sequences of actions Offer informative feedback - rollover buttons, sounds when clicked Build in error prevention in online forms Give users control as much as possible Reduce short term memory load by providing menus, buttons or icons. If you use icons, make sure you have a section which explains what they mean. Make things obvious by using constraints - grayed out items in menus for options not available in that page Make use of web conventions such as underlined links, color change in links for visited pages, common terminology Provide a conceptual model of your site using a site map or an index Site Design Guidelines for Hypertext Creation Know the user and their tasks. Ensure that meaningful structure comes first. Apply diverse skills (by including information specialists, content specialists and technologists on the project team). Respect chunking. Organize information into chunks that deal with one topic, theme or idea. Show interrelationships (by using links to related articles). Ensure simplicity in traversal. Design the link structure so that navigation is simple and consistent throughout the system Design each screen carefully, providing on-screen prompts such as icons or menus Guidelines for Metaphor: A useful metaphor will help users navigate your site Good examples of metaphor include shopping sites based on the idea of paper catalogs and the hypercard card index which looked just like a rolodex. Guidelines for Web Site Categorization: Boling, Bichelmeyer, Squire and Kirkley identified seven profiles for web sites based on a matrix of high information, high motivation to low information, low motivation. A quick summary of their profiles are as follows: Profile 1: No Expectations - very low need to motivate users or deliver content - eg. personal home pages Profile 2: All Motivation - high need to motivate users to view site - eg. promotional commercial sites Profile 3: All Content - high need to deliver content where site may be the only provider of this information or users are highly motivated to use site already- eg. search engines or research results Profile 4: High Motivation - a need to provide some content along with motivating factors, at same time users must be able to distinguish between content and glitz Profile 5: High Content - need for content outweighs the need for high motivational factors but an attractive site is necessary - eg. government agencies, universities Profile 6: Mixed Elements & Profile 7: Great Expectations - "in both these profiles the need to deliver specific content and the need to motivate users to a specific response are highly interdependent and interrelated" - eg. commercial catalogue sites, sites devoted to charitable or political causes, or educational sites Guidelines for Navigation: Structure Hierarchical menus are useful for straightforward searching tasks, but the additional clarification available from embedded, contextual menus will aid complex search tasks. Therefore, designing menus to be more verbose, or adding information in the form of textual indexes with clarification will help users to be more successful in finding what they are looking for. Orientation It is very important to include site information on every page of a site. It is also essential to include links to the local home page on every page to accommodate users who jump into your site. Links to other pages in a sequence are also useful. Categorization of information into menus is a very difficult process as well as one which needs careful attention. Menu items need to be unique, non-overlapping and familiar. It is better, when designing a structure, to have breadth over depth (fewer long menus as opposed to many shorter menus). Orienting devices such as textual indexes, guided tours or overview diagrams are useful to help users from becoming disoriented in a site. Navigation information is easiest to use if located in a similar location on every page of a site. This helps because the user knows where things are located from page to page. Guidelines from Usability Research (Jakob Nielsen) Most users don't read, they scan for information The author's personality makes a site more attractive Web users are impatient, they don't want to be slowed down by cool features or self-promotion Search capability is very important Download factors are critical Animation is almost always annoying Frames are disliked Wild backgrounds disrupt a user's reading Although more users are scrolling (pages no longer than 3 screens are recommended), many still don't go beyond the first screen Image maps are more usable now, especially if they are broken up into smaller sections that load more quickly than one large graphic Users want sites to work and are no longer tolerant of those that don't Page Design Guidelines for Multimedia and Web Page Design Keep the design principles of simplicity, consistency, clarity, balance, harmony & unity in mind when designing web sites Guidelines for Screen Design Use a grid to design pages. Map out where your navigation elements will be located and be consistent from page to page with this layout Although results concerning screen density are conflicting, it appears from recent research that screens with too much white space are confusing Fonts - if possible, use fonts designed for the web such as Georgia or Verdana since they are easier to read - use ragged right justification on the screen as it is easier to read Buttons, boxes and menus: buttons, radio buttons, check boxes and menus should look like something you would normally press, click, put x's in, or pull down [3, 4]. HTML includes special routines which draw radio buttons, check boxes and pull down menus for you. The design of buttons is a bit trickier, since you have to draw your own graphic and make it look like a button (bevelled edges give the 3D effect which makes a graphic look like something you would press). give the user some feedback that execution is occurring after a button is pressed. This was much harder in the past, but with the addition of Javascript to the newer web browsers, icons will flash or change color when pressed, giving the user the sense that something may happen. Use of Icons: represent the object or action in a familiar and recognizable manner limit the number of different icons make the icon stand out from its background consider three dimensional icons; they are eye-catching but also can be distracting ensure that a single selected icon is clearly visible when surrounded by unselected icons make each icon distinctive from every other icon ensure the harmoniousness of each icon as a member of a family of icons Guidelines for the use of color: design conservatively, possibly starting with black and white, and consider older or color-blind users do not make color the only way to discriminate between choices use color to add reality use color to discriminate between elements of a visual use color to focus attention on relevant cues use colors to code and link logically related elements be consistent in general color choices throughout materials use colors such as highly saturated red and violet to attract attention and to create an emotional response use highly saturated colors for materials intended for young children consider commonly accepted color meanings such as red and yellow are warm, green and blue are cool, red means stop, green means go, etc. when producing materials for persons from varied cultures consider the meanings they attribute to colors Guidelines for Screen Resolution and Size Design for the smallest standard screen which is: Macintosh size (Macintosh screen area is smaller than Wintel machines) 595 pixels wide by 295 pixels high 14 inch monitor (640- x 480 pixel area) 256 colors Start your design in black and white to ensure readability for persons with color deficiency Include ALT tags on all image files to ensure that people using text-only browsers or special readers (ie blind or sight deficient users) are still able to access the information provided in your pages [2]. Guidelines for Writing Style Users like summaries and the inverted pyramid style used by journalists, where the most important information is presented first in an article Users appreciate headings which help them to scan and locate the information they are interested in Users do not appreciate flowery or "marketese" writing and want web pages to be concise Simple and informal writing is preferred over formal writing styles MultiMedia Guidelines for Multimedia Be careful that you don't overload your communication processing channels by sending information in more than one way at the same time (listening to words and trying to read text at the same time causes interference) Guidelines for using graphics and pictures Anglin, Towers, and Levie illustrated visuals used in the context of learning to read are not very helpful illustrated visuals that contain text-redundant information can facilitate learning illustrated visuals that are not text-redundant neither help nor hinder learning illustration variables (cueing) such as size, page position, style, color, and degree of realism may direct attention but may not act as a significant aid in learning there is a curvilinear relationship between the degree of realism in illustrations and the subsequent learning that takes place Schwier & Misanchuk visuals that complement the text information being presented increase the likelihood for retention of that information, but visuals which are not related to the text have no effect on retention. When bandwidth is a problem, gratuitous visuals would seem to be unnecessary in page design Guidelines for using animation Appropriate uses for animation include: showing continuity in transitions - proving the Pythagorean theorem by animating the movement of various squares and triangles as they move around to demonstrate that two areas are the same size" indicating dimensionality in transitions - animated arrows pointing left and right can indicate movement forward and back, zooming boxes can indicate one screen was enlarged from another illustrating change over time - showing population change by fading from one density map to the next over time multiplexing the display - showing more than one piece of information in the same location - ie, buttons which change color when the mouse rolls over them, help labels which appear when the cursor is on top, menus which pull down when you hold the mouse down enriching graphical representations - animated icons can give a better understanding of the function of the icon - ie. an eraser icon which erases pixels to explain its function Do not use animations that continue endlessly - they irritate users - never use the Blink command Guidelines for video, sound and response time Due to restrictions in bandwidth, video is not recommended. If used: include information about its size so that users can decide whether or not they want to wait never incorporate the automatic downloading of a video into the loading of a page If audio is incorporated in your site, make sure it is the highest quality you can produce audio can be used to give help or directions without obscuring the screen Currently the minimum goal for response times should be to get pages to users in no more than ten seconds, since that's the limit of people's ability to keep their attention focused while waiting....speed must be the overriding design criterion. To keep page sizes small, graphics should be kept to a minimum and multimedia effects should only be used when they truly add to the user's understanding of the information Main Level: [Home Page] [Design Theory][Site Design] [Page Design] [MultiMedia] [Teacher Resources] [Table of Contents]