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
Importance of Good Screen Design
Screen design code more than 50% of application’s code
Packages include style guides
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.
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