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