Chapter 20 User Interface History Graphical User Interface

Chapter 20: User Interface History

Graphical User Interface History Well known user interfaces: Windows Apple Macintosh Xerox STAR Apple I* Series

Graphical User Interface History Predecessors to the well known user interfaces: Sketchpad Mouse

Graphical User Interface History Sketchpad - 1963 Ph. D Thesis Ivan Sutherland • • Direct manipulation of objects Structures for graphical object representation Rubber-banding Zooming in and out

Sketchpad- Ivan Sutherland

User Interface History Mouse - 1965 Stanford Research Laboratory Doug Englebart

User Interface History Mouse - 1965 Stanford Research Laboratory Doug Englebart

User Interface History Xerox STAR- 1981

Graphical User Interface History Xerox PARC (Palo Alto Research Center) • • the mouse the rectangular window the scrollbar the push button “desktop” metaphor OOP pull down menus

User Interface History Apple Lisa - 1983

Graphical User Interface History PARC Legacy: 1) the global visual metaphor critical in the user’s ability to understand the system 2) modes are bad : a state into which a program enters that change the affects of the user’s action from the normal affect 3) overlapping windows easy to see what’s running and shift between them (efficiently implemented, rectangles are easy to draw, detect, etc) 4) tiling - divide screen up into uniformly sized rectangles (Windows 1. 0)

Chapter 13: Metaphors, Idioms, and Affordances

Metaphors, Idioms and Affordances Post Macintosh view of computing : graphical user interfaces are better than character based user interfaces. WHY? Humans process information better visually than textually. STOP

Metaphors, Idioms and Affordances Unconscious mind : reduces visual input into patterns Conscious mind : orders the patterns into hierarchies attaches meaning to the patterns

Metaphors, Idioms and Affordances Understanding how the mind processes visual info is a key element of effective user interface design visual pattern matching is superior to reading

Metaphors, Idioms and Affordances Effective visual interface design: 1) present program components with a recognizable visual symbol 2) use text in a secondary role accompanying the symbol STOP

Metaphors, Idioms and Affordances The visual symbols? Idiomatic patterns: Learned from the context in which they are used. Once learned, the pattern represents its context. To form a connection between a symbol and an object or function, use the symbol everywhere the object occurs

Metaphors, Idioms and Affordances GUI thought to be superior because of the graphical nature of the presentation actually it is the limited vocabulary of mouse based actions which control the interface The GUI vocabulary: • primitives (click, drag, key press) • compounds (combinations of primitives) • idioms (combining compounds w/ knowledge of the problem under consideration)

Metaphors, Idioms and Affordances Interface Design Paradigms: 1) implementation-centric based on knowing how things work, knowing something about the underlying software 2) metaphoric intuiting how things work 3) idiomatic learning how to accomplish things

Metaphors, Idioms and Affordances metaphor paradigm “intuiting” how things work (easy to learn/understand) we intuit connections - somewhere between learning and instinct we intuit how to use a waste basket icon - we learn how to use a real waste basket relies on the designer and the user perceiving things in a similar way

Metaphors, Idioms and Affordances idiomatic paradigm learning how to accomplish things Most GUI elements are idiomatic windows caption bars dropdown menus mouse - nothing about its appearance indicates its purpose or use, not comparable to anything else in our experience

Metaphors, Idioms and Affordances

Metaphors, Idioms and Affordances

Metaphors, Idioms and Affordances

Metaphors, Idioms and Affordances