GUI

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.