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

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

3. Interface Fundamentals GUI Requirements Metaphor Good organization Quality appearance – the look Good dialog, navigation – the feel GUI Design Principles 1.Organization 2.Economy 3.Communication

4. GUI Design Principles Organization Internal and external consistency Fig H.1: Internal Consistency: Screens for System Have Consistent Layout

5. GUI Design Principles Organization Screen layout Fig H.2: Grids Provide the Framework for GUI Organization

6. GUI Design Principles Organization Relationships Fig H.3: Relationship Examples

7. GUI Design Principles Organization Navigability Fig H.4: Good Organization Assists Navigation

8. GUI Design Principles Economy Simplicity Fig H.5: Simple Displays Assist Understanding

9. GUI Design Principles Economy Clarity Table H.6: Choose Graphic Carefully

10. GUI Design Principles Economy Distinctiveness Fig H.7: Employ Proper Balance in Distinctiveness Emphasis (management by exception)

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)

12. GUI Design Principles Communication Multiple views (tabular/graphic/narrative, drill down) Fig H.8: The Drill Down Technique Illustrated

13. GUI Interface Development Fig H.10: The Interface Design Process