ACS 367 Interface Design

Introduction & Text Overview

Galitz, Wilbert O. The Essential Guide to User Interface Design

Table of Contents

Part I: Introduction to Screen Design for the Graphical User Interface (GUI)

Part II: The GUI Screen Design Process

Introduction to Screen Design for the Graphical User Interface

Importance of Good Screen Design

Characteristics of a Graphical User Interface (GUI)

The GUI Screen Design Process

Step 1: Know your user Step 2: Understand the business function Step 3: Understand the principles of good

screen design Step 4: Select the proper kinds of windows Step 5: Develop system menus Step 6: Select the proper device-based

controls

The GUI Screen Design Process

Step 7: Choose proper screen-based controls

Step 8: Organize & layout windows Step 9: Choose proper colors Step 10: Create meaningful icons Step 11: Provide effective messages,

feedback, guidance & language translation

The GUI Screen Design Process

Step 12: Test,

Test and

Retest

Importance of Good Screen Design

Screen design code more than 50% of application’s code

Packages include style guides

Why Bad Design?

Don’t care Lack common sense Don’t have time Don’t know what makes good design

Benefits of Good Design

Seconds Years per 4.8 Million Screens

1 .7

5 3.6

10 7.1

20 14.2

Benefits (cont.)

More white space ( Dunsmore): – 20% increase in

productivity

Redesign (Keister & Gallaway):

– 25 % increase in productivity– 25% decrease in errors

Student Objectives

Understand the many considerations that apply to design process

Understand rationale & rules for effective screen design methodology

Be able to identify components of graphical screens– windows

– menus

– controls

Student Objectives (2)

Be able to design & organize screens – fastest & most accurate comprehension &

execution Be able to choose appropriate colors Be able to design/select appropriate icons Be able to utilize/apply GUI design process

Brief History

Early research – SRI in 1960s

» The very system that I am using to access this information has its intellectual roots in the "Augmented Human Intellect Center" that Doug Engelbart set up at SRI in the 60's

» Engelbart invented the multi-window display, the mouse, and groupware. His demonstration of these capabilities at the Fall Joint Computer Conference in San Francisco in 1968 started the process of development that led, via Xerox PARC and Apple, to the system you are using today.

Knee Positioning Device (1967)

Joystick, Grafacon, and Mouse

Basic Interactions

The now ubiquitous direct manipulation interface, where visible objects on the screen are directly manipulated with a pointing device, was first demonstrated by Ivan Sutherland in Sketchpad, which was his 1963 MIT PhD thesis.

Ivan Sutherland (left) receives the 1996 Smithsonian ComputerWorld Award

SketchPad

SketchPad supported the manipulation of objects using a light-pen, including grabbing objects, moving them, changing size, and using constraints. It contained the seeds of myriad important interface ideas.

AMBIT/G

It employed, among other interface techniques, iconic representations, gesture recognition, dynamic menus with items selected using a pointing device, selection of icons by pointing, and moded and mode-free styles of interaction. – (Implemented at MIT's Lincoln Labs, 1968,

ARPA funded.)

ICONS

David Canfield Smith coined the term "icons" in his 1975 Stanford PhD thesis on Pygmalion

Smith later popularized icons as one of the chief designers of the Xerox Star.

Many of the interaction techniques popular in direct manipulation interfaces, such as how objects and text are selected, opened, and manipulated, were researched at Xerox PARC in the 1970's. – In particular, the idea of "WYSIWYG"

Direct Manipulation

The concept of direct manipulation interfaces for everyone was envisioned by Alan Kay of Xerox PARC in a 1977 article about the "Dynabook"

The first commercial systems to make extensive use of Direct Manipulation were the Xerox Star (1981), the Apple Lisa (1982) and Macintosh (1984).

Ben Shneiderman at the University of Maryland coined the term "Direct Manipulation" in 1982 and identified the components and gave psychological foundations.

Windows

Multiple tiled windows were demonstrated in Engelbart's NLS in 1968.

Early research at Stanford on systems like COPILOT (1974) and at MIT with the EMACS text editor (1974) also demonstrated tiled windows.

Alan Kay proposed the idea of overlapping windows in his 1969 University of Utah PhD thesis and they first appeared in 1974 in his Smalltalk system at Xerox PARC

Windows (Continue)

The Cedar Window Manager from Xerox PARC was the first major tiled window manager (1981), followed soon by the Andrew window manager by Carnegie Mellon University's Information Technology Center (1983).

The main commercial systems popularizing windows were the Xerox Star (1981), the Apple Lisa (1982), and most importantly the Apple Macintosh (1984).

Application Types

Drawing Programs– Suteherlands’ SketchPad

(1963) Text Editing

– In 1962 at the Stanford Research Lab, Engelbart proposed, and later implemented, a word processor with automatic word wrap, search and replace, user-definable macros, scrolling text, and commands to move, copy, and delete characters, words, or blocks of text.

Spreadsheets– The initial spreadsheet

was VisiCalc which was developed by Frankston and Bricklin (1977-8) for the Apple II while they were students at MIT and the Harvard Business School.

HyperText– The idea for hypertext is

credited to Vannevar Bush's famous MEMEX idea from 1945.

– Ted Nelson coined the term "hypertext" in 1965.

– Engelbart's NLS system at the Stanford Research Laboratories in 1965 made extensive use of linking…

CAD Video Games

– The first graphical video game was probably SpaceWar by Slug Russel of MIT in 1962 for the PDP-1 including the first computer joysticks.

Development of Guidelines

Designers of Lisa & Macintosh – importance of good user interface design– publish ideas to others

» development of set of human interface guidelines

Development of Guidelines

Most important guidelines were the design principles -- universal

Design principles not tied to platform– based on human abilities and psychology– not dependent on conventions of a particular

platform