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

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

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

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

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

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

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

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

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

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

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)

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

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