Web Interface Design Basic GUI and Web layouts Fig H.12: Basic Layouts of Web and Graphic User Interfaces

Web Interface Design Guidelines The home page should convey the big picture. Each page should be designed for scanning, not reading. Provide for consistent navigation  An identification of the site and the page  A clear delineation of the sections and options  A clear indication of what is clickable  A clear picture of where the user is in the overall scheme of things  An ability to conduct a search  A way to perform the necessary utilities  A way to return home  A sense of control (provide tabs to eliminate the need for continuous scrolling)

Web Interface Design Guidelines Include a site map Fig H.13: A Site Map

Color Design Principles Organization Be consistent across screens, systems Carry over to hardcopy training materials Economy No more than 3 to 7 colors when user must remember meaning Design technique 1: First B&W, then color Design technique 2: Combine color with shape

Color Design Principles Communication Keep bright colors in center of the screen Use brighter colors for older viewers Room is dark: Background: Blue, green, dark gray Foreground: White, yellow, red Room is bright: Background: Light – magenta, blue, white, yellow Foreground: Blue, black

Color Design Principles Web page color guidelines Use color to add emphasis, never as a primary cue for information. Ensure that text has good brightness in contrast with its background. Use colors for followed and unfollowed links that are far apart. Select colors from a Web-safe color palate, or Browser-Safe Color Palate.