Slide 1: Technical Module H
Web and Graphical User Interface Design
Interface Fundamentals
Who are the users?
Internal
External
Users’ main events
Types of interfaces
Output
Input
Input and output
Slide 2: Graphical User Interface (GUI) Fundamentals
Usability: product attributes that enable users to:
accomplish their work
in a way that meets or exceeds their expectations
The key: The metaphor – terms and associations that support how we think about something
Examples:
Electronic spreadsheet
Desktop screen
Checkbook software
Slide 3: Interface Fundamentals
GUI Requirements
Metaphor
Good organization
Quality appearance – the look
Good dialog, navigation – the feel
GUI Design Principles
Organization
Economy
Communication
Slide 4: GUI Design Principles
Organization
Internal and external consistency Fig H.1: Internal Consistency: Screens for System Have Consistent Layout
Slide 5: GUI Design Principles
Organization
Screen layout Fig H.2: Grids Provide the Framework for GUI Organization
Slide 6: GUI Design Principles
Organization
Relationships Fig H.3: Relationship Examples
Slide 7: GUI Design Principles
Organization
Navigability Fig H.4: Good Organization Assists Navigation
Slide 8: GUI Design Principles
Economy
Simplicity Fig H.5: Simple Displays Assist Understanding
Slide 9: GUI Design Principles
Economy
Clarity Table H.6: Choose Graphic Carefully
Slide 10: GUI Design Principles
Economy
Distinctiveness Fig H.7: Employ Proper Balance in Distinctiveness Emphasis (management by exception)
Slide 11: GUI Design Principles
Communication
Legibility (screen colors/brightness, room brightness) Bright: Bright, Dark: Dark
Readability (justification)
Typography ( Maximum 3 fonts, 3 sizes, no more than 60 characters per line, both upper- and lower- case)
Symbolism (culture effect; use prototyping)
Slide 12: GUI Design Principles
Communication
Multiple views (tabular/graphic/narrative, drill down) Fig H.8: The Drill Down Technique Illustrated
Slide 13: GUI Interface Development Fig H.10: The Interface Design Process
Slide 14: Web Interface Design
Basic GUI and Web layouts Fig H.12: Basic Layouts of Web and Graphic User Interfaces
Slide 15: 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)
Slide 16: Web Interface Design
Guidelines
Include a site map Fig H.13: A Site Map
Slide 17: 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
Slide 18: 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
Slide 19: 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.