Transcript Fig H.12: Basic Layouts of Web and Graphic User Interfaces

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.