Csci310 Part 1

8/8/2019 Csci310 Part 1

1/39

The Essential Guide toUser Interface Design

Third Edition

An Introduction to GUI Design Principles andTechniques

By Wilbert O. Galitz

Power Point Slides prepared by Wilbert O. Galitz

Copyright 2007 by John Wiley & Sons, Inc. all rights reserved.

Reproduction or translation of this work beyond that permitted in Section 117 of the1976 United States Copyright act without the expression of the copyright owner is

unlawful. Request for further information should be addressed to the PermissionsDepartment, John Wiley & Sons, Inc. The purchaser may make back-up copies forhis/her own use and not for distribution or resale. The Publisher assumes noresponsibility for errors, omissions, or damages caused by the use of these programsor from the use of the materials contained herein.

8/8/2019 Csci310 Part 1

2/39

THE ESSENTIAL GUIDE TO USERINTERFACE DESIGN

Wilbert O. Galitz

PART 1 - The User InterfaceAn Introduction and Overview Chapter 1 - The Importance of the User Interface Chapter 2 - Characteristics of Graphical and Web User Interfaces

PART 2 - The User Interface Design Process Step 1 - Know Your User or Client Step 2 - Understand the Business Function Step 3 - Understand the Principles of Good Interface and Screen Design Step 4 - Develop System Menus and Navigation Schemes Step 5 - Select the Proper Kinds of Windows Step 6 - Select the Proper Interaction Devices Step 7 - Choose the Proper Screen-Based Controls

Step 8 - Write Clear Text and Messages Step 9 - Provide Effective Feedback and Guidance and Assistance Step 10 - Provide Effective Internationalization and Accessibility Step 11 - Create Meaningful Graphics, Icons and Images Step 12 - Choose the Proper Colors Step 13 - Organize and Layout Windows and Pages Step 14 - Test, Test, and Retest

8/8/2019 Csci310 Part 1

3/39

PART 1Chapter 1

THE IMPORTANCE OF THE USERINTERFACE

Overview

Defining the User Interface

The Importance of Good Design

The Benefits of Good Design

A Brief History of the Human Computer Interface

Introduction of the Graphical User Interface

The Blossoming of the World Wide Web

A Brief History of Screen Design

8/8/2019 Csci310 Part 1

4/39

Chapter 2

CHARACTERISTICS OF GRAPHICAL

& WEB INTERFACESChapter Overview Interaction Styles

The Graphical User Interface The Popularity of Graphics

The Concept of Direct Manipulation Advantages / Disadvantages Characteristics of the Graphical User Interface

The Web User Interface The Popularity of the Web Characteristics of a Web Interface

The Merging of Graphical Business Systemsand the Web

Characteristics of an Intranet vs. Internet Extranets Principles of User Interface Design Principles for the Xerox STAR

General Principles

8/8/2019 Csci310 Part 1

5/39

Chapter 2

INTERACTION STYLES

Command Line

Menu Selection

Form Fill-in Direct Manipulation

Anthropomorphic

8/8/2019 Csci310 Part 1

6/39

Chapter 2

THE CONCEPT OF DIRECT

MANIPULATION

Term Shneiderman 1982

System is portrayed as extension of real world

Continuous visibility of objects and actions Virtual reality (Nelson, 1980) WYSIWYG (Hatfield, 1981)

What you see is what you get

Actions are rapid and incremental with visible display of

results Incremental actions are easily reversible

8/8/2019 Csci310 Part 1

7/39

Chapter 2

THE CONCEPT OF DIRECT

MANIPULATIONIndirect Manipulation

Results from:

Operations being difficult to conceptualize in thegraphical system

Graphics capability of the system being limited

Amount of space available for placing manipulationcontrols in the window border being limited

Difficulties for people to learn and remember all thenecessary operations and actions

8/8/2019 Csci310 Part 1

8/39

Chapter 2

GRAPHICAL SYSTEMS

Advantages

Symbols recognized faster than text

Faster learning

Faster use and problem solving Easier remembering

More natural

Exploits visual/spatial cues

Fosters more concrete thinking Provides context

Fewer errors

Increased feeling of control

8/8/2019 Csci310 Part 1

9/39

Chapter 2

GRAPHICAL SYSTEMS

Advantages (Continued)

Immediate feedback

Predictable system responses

Easily reversible actions

Less anxiety concerning use

More attractive

May consume less space

Replaces national Easily augmented with text

Low typing requirements

Smooth transition from command language system

8/8/2019 Csci310 Part 1

10/39

Chapter 2

GRAPHICAL SYSTEMS

Disadvantages

Greater design complexity

Learning still necessary

Lack of experimentally-derived design principles

Inconsistencies in technique and terminology

Working domain is the present

Not always familiar

Human comprehension limitations Window manipulation requirements

Production limitations

8/8/2019 Csci310 Part 1

11/39

Chapter 2

GRAPHICAL SYSTEMS

Disadvantages (Continued)

Few tested icons exist

Inefficient for touch typists Inefficient for expert users

Not always the preferred style of interaction

Not always the fastest style of interaction

Increased chances of clutter and confusion

The futz and fiddle May consume more screen space

Hardware limitations

8/8/2019 Csci310 Part 1

12/39

Chapter 2

GRAPHICAL SYSTEMS

Some Studies and a Conclusion

The design of an interface, and not its interaction style, isthe best determinant of ease of use

User preferences must be considered in choosing aninteraction style

In the overwhelming majority of cases, words are moremeaningful to users than icons

The content of a graphic screen is critical to itsusefulness

The wrong presentation or a cluttered presentation may actuallylead to greater confusion, not less

The success of a graphical system depends on the skillsof its designers in following established principles ofusability

8/8/2019 Csci310 Part 1

13/39

8/8/2019 Csci310 Part 1

14/39

Chapter 2

THE WEB USER INTERFACE

The Popularity of the Web

Characteristics of a Web Interface

GUI Versus Web Page Design (Table 2.2)

Printed Pages Versus Web Pages Page Size

Page Rendering

Page Layout

Page Resolution

User Focus

Page Navigation

Sense of Place

Page Independence

8/8/2019 Csci310 Part 1

15/39

Chapter 2

MERGING OF GRAPHICAL

BUSINESS SYSTEMS AND THE WEB Characteristics of anIntranet vs. the Internet

Users

Tasks

Type of InformationAmount of

Information

Hardware andSoftware

Design Philosophy Extranets

Page Versus ApplicationDesign

Familiarity

Flexibility

Forgiveness

Predictability

Recovery

Responsiveness

Simplicity

Transparency

8/8/2019 Csci310 Part 1

16/39

Chapter 2

PRINCIPLES OFUSER INTERFACE DESIGN

Principles for the Xerox STAR

The illusion of manipulable objects

Visual order and viewer focus

A match with the medium

Revealed structure

Consistency Appropriate effect or emotional impact

8/8/2019 Csci310 Part 1

17/39

Chapter 2


General Principles

Accessibility

Aesthetically Pleasing

Availability

Clarity

Compatibility

Configurability

Consistency Control

Directness

8/8/2019 Csci310 Part 1

18/39

Chapter 2


General Principles (Continued)

Efficiency

Familiarity Flexibility

Forgiveness

Immersion

Obviousness

Operability

Perceptibility

8/8/2019 Csci310 Part 1

19/39

Chapter 2


General Principles (Continued)

Positive First Impression

Predictability

Recovery

Responsiveness

Safety

Simplicity

Transparency

Trade-offs

Visibility

8/8/2019 Csci310 Part 1

20/39

Chapter 2

GENERAL DESIGN PRINCIPLES

Accessibility

Systems should be designed to be usable,

without modification, by as many people aspossible.

8/8/2019 Csci310 Part 1

21/39

Chapter 2


Aesthetically Pleasing

Provide visual appeal by:

Providing meaningful contrast between screenelements

Creating groupings

Aligning screen elements and groups

Providing three-dimensional representation Using color and graphics effectively and simply

8/8/2019 Csci310 Part 1

22/39

Chapter 2


Availability

Make all objects available at all times.

Avoid the use of modes.

8/8/2019 Csci310 Part 1

23/39

Chapter 2


Clarity

The interface should be visually, conceptually, andlinguistically clear, including:

Visual elements

Functions Metaphors Words and text

Compatibility

Provide compatibility with the following: The user The task and job

The product

Adopt the users perspective.

8/8/2019 Csci310 Part 1

24/39

Chapter 2


Configurability

Permit easy personalization, configuration, and

reconfiguration of settings. Enhances a sense of control

Encourages an active role in understanding

8/8/2019 Csci310 Part 1

25/39

Chapter 2


Consistency

A system should look, act, and operate the samethroughout. Similar components should:

Have a similar look Have similar uses

Operate similarly

The same action should always yield the same result.

The function of elements should not change. The position of standard elements should not change.

8/8/2019 Csci310 Part 1

26/39

Chapter 2


Consistency (Continued)

Inconsistency causes: More specialization by system users

Greater demand for higher skills

More preparation time and less production time

More frequent changes in procedures

More error-tolerant systems (because errors are more likely)

More kinds of documentation

More time to find information in documents

More unlearning and learning when systems are changed

More demands on supervisors and managers

More things to do wrong

8/8/2019 Csci310 Part 1

27/39

Chapter 2


Control

The user must control the interaction.

The context maintained must be from the perspectiveof the user.

The means to achieve goals should be flexible andcompatible with the user's skills, experiences, habitsand preferences.

Avoid modes because they constrain the actionsavailable.

Permit the user to customize the interface but providedefaults.

8/8/2019 Csci310 Part 1

28/39

8/8/2019 Csci310 Part 1

29/39

Chapter 2


Familiarity

Employ familiar concepts and use a language that is familiarto the user

Keep the interface natural, mimicking the users behavior patterns

Use real-world metaphors

Flexibility

A system must be sensitive to the differing needs of its users,enabling a level and type of performance based upon:

Each users knowledge and skills

Each users experience

Each users personal preference

Each users habits

The conditions at that moment

8/8/2019 Csci310 Part 1

30/39

Chapter 2


Forgiveness Tolerate and forgive common and unavoidable

human errors

Prevent errors from occurring whenever possible

Protect against possible catastrophic errors When an error does occur, provide constructive

messages

Immersion A state of mental focus so intense that awareness

and sense of the real world is lost

Foster immersion within tasks

8/8/2019 Csci310 Part 1

31/39

Chapter 2


Obviousness

A system should be easily learned and understood: What to look at

What it is

What to do When to do it

Where to do it

Why to do it

How to do it

Flow of actions, response, visual presentations, andinformation should be:

In a sensible order

Easy to recollect

Easy to place in context

8/8/2019 Csci310 Part 1

32/39

Chapter 2


Operability

Ensure that a system's design can be used by

everyone, regardless of a person's physicalcapabilities.

Perceptibility

Ensure that a system's design can be perceived,regardless of a person's sensory capabilities.

8/8/2019 Csci310 Part 1

33/39

Chapter 2


Positive First Impression

Create a positive first impression of the system. Points of prospect

Minimal barriers

Progressive lures

8/8/2019 Csci310 Part 1

34/39

Chapter 2


Predictability

The user should be able to anticipate the

natural progression of each task. Provide distinct and recognizable screen elements Provide cues to the result of an action to be

performed

All expectations should be fulfilled uniformlyand completely.

8/8/2019 Csci310 Part 1

35/39

Chapter 2


Recovery

A system should permit: Commands or actions to be abolished or reversed

Immediate return to a certain point if difficulties arise

Ensure that users never lose their work as a result of: An error on their part Hardware, software, or communication problems

Responsiveness

The system must rapidly respond to the users requests. Provide immediate acknowledgment for all actions:

Visual Textual

Auditory

8/8/2019 Csci310 Part 1

36/39

Chapter 2


Safety

Protect the user from making mistakes.

Provide visual cues Reminders

Lists of choices

Other aids as necessary

8/8/2019 Csci310 Part 1

37/39

Chapter 2


Simplicity

Provide as simple an interface as possible.

Five ways to provide simplicity:

Use progressive disclosure, hiding things until theyare needed

Present common and necessary functions first

Prominently feature important functions Hide more sophisticated and less frequently used functions

Provide defaults Minimize screen alignment points

Make common actions simple at the expense ofuncommon actions being made harder

Provide uniformity and consistency

8/8/2019 Csci310 Part 1

38/39

Chapter 2


Transparency

Permit the user to focus on the task or job, withoutconcern for the mechanics of the interface.

Workings and reminders of workings inside the computer shouldbe invisible to the user

Trade-Offs

Final design will be based on a series of trade-offs

balancing often-conflicting design principles. Peoples requirements always take precedence over

technical requirements.

8/8/2019 Csci310 Part 1

39/39

Chapter 2


Visibility

A system's status and methods of use should be

clearly visible. Improve visibility through

Hierarchical organization

Context sensitivity

Csci310 Part 1

Documents

Transcript of Csci310 Part 1