Chap10 Interface Design

Layout

The structure of the screen divided into navigation (top), work (middle), and status (bottom) areas.

Content Awareness

Ensuring users always know where they are, where they came from, and what information is displayed.

Aesthetics

The visual appeal of an interface; includes balanced white space, readable fonts, limited colors/patterns.

Ease of Learning vs. Ease of Use

Balancing design for frequent users (efficiency) and infrequent users (simplicity).

Consistency

Keeping elements uniform across screens and applications to reduce learning time and confusion.

Minimize User Effort

Interfaces should require minimal steps to perform actions (the "three-click rule").

User Interface Design Process

Steps: Understand users → Organize interface → Define standards → Develop prototypes → Evaluate/test.

Personas

Fictional user profiles that represent different user types, goals, and behaviors.

Scenarios

Narratives describing how users perform tasks and interact with the system

Interface Structure Diagram (ISD)

Diagram showing relationships and navigation paths between all screens, forms, and reports.

Interface Standards

Rules defining consistent interface elements (metaphors, icons, actions, templates).

Interface Metaphor

Familiar concept used to represent system functions (e.g., calendar, shopping cart).

Interface Objects

Represent real-world entities within the interface (e.g., customer, employee).

Interface Actions

Common user operations such as buy, save, delete, or exit

Interface Icons

Visual symbols representing actions or status (e.g., trash can = delete, disk = save).

Interface Templates

Layout guides ensuring consistency across all screens and forms.

Inline CSS

Style rules written directly within an HTML file.

External CSS

Style rules stored in a separate stylesheet linked to an HTML file.

Prototyping

Creating mockups or simulations of screens, forms, and reports to test usability.

Paper Prototype

Hand-drawn sketches used to visualize the interface quickly.

Wireframe Diagram

Basic screen layout showing placement of elements without design detail.

Storyboard

Sequence of screens showing navigation flow or user interaction steps.

Wireflow Diagram

Combines wireframes with navigation arrows to illustrate user paths.

Language Prototype

Functional prototype built using actual programming or markup languages (e.g., HTML).

Navigation Design

Ensuring users can move through the system intuitively and recover easily from mistakes.

Types of Menus

Includes drop-down, pop-up, tab, ribbon, or icon-based menus guiding user navigation.

Input Design

Focuses on accurately capturing user data while minimizing effort and errors.

Online Processing

Transactions recorded and updated in real-time.

Batch Processing

Transactions collected and processed together at a later time.

Source Data Automation

Using devices like barcode scanners or RFID to capture data directly from its origin.

Minimize Keystrokes

Reduce manual typing by using dropdowns, defaults, or lookup fields.

Input Validation

Checks ensuring data entered meets required criteria (e.g., format, range, completeness).

Output Design

Ensuring system reports and outputs provide the right amount of information in a usable format.

Report Types

Include detail, summary, exception, and graphical reports.

International & Cultural Issues

Interface considerations for language, color meaning, time perception, and cultural values.

Multilingual Requirements

Support for multiple languages or localized content.

Cultural Dimensions (Hall & Hofstede)

Frameworks addressing cultural differences (e.g., context, time, power distance, collectivism).

Nonfunctional Requirements

Interface must support web, mobile, and customizable local adaptations.

Interface Evaluation/Testing

Assessing usability through heuristic, walkthrough, interactive, A/B, or formal lab testing.

Heuristic Evaluation

Comparing design against established usability principles or checklists.

Interactive Evaluation

Users directly interact with the system prototype and provide feedback.

A/B Testing

Comparing multiple interface versions to determine which performs best.

Walkthrough Evaluation

Team walkthrough simulating user interactions step-by-step.

Formal Usability Testing

Controlled lab testing involving detailed observation and performance measurement.