Graphic Design and Gestalt

Principles
CS160: User Interfaces
Maneesh Agrawala

Keepin' it Real: Pushing the Desktop Metaphor with Physics, Piles and the Pen [Agarawala 06]

VIDEO

1
 Due Soon
Interactive Prototype (due Apr 6)
– Redesign interface based on lofi feedback
– Create first working implementation
• Can include Wizard of Oz parts where justified
• Can include pre-built (canned) functionality but only if
heavily justified

In class Presentations (Apr 13, 15, 20)

– 10 min slide presentation (be careful about timing)
– Focus on showing prototype
– Feedback from class (you will need to provide
feedback on each presentation on the wiki)

Upcoming Lectures
Apr 6: Stephen Few
– Information display

Apr 8: Aaron Marcus

– UI design consultant
– Elected to CHI Academy
this year

2
 Talk You Should Attend
Bjoern Hartmann
– HCI faculty candidate
– Works on design, implementation and
evaluation of authoring tools for UIs

Mon Apr 13: 1-2:30pm Wozniak Lounge

Lofi Prototype
Graded: Pick up at end of lecture
– Avg 67.13 Stdev: 5.77

Videos great!
– Example: Dashr
Carol Chen
Timofey Titov
David Burban
Matthew Can

– Some videos lacked context

3
 Topics
• Graphic design
• Simplicity and elegance
• Color
• Gestalt principles
• Grid-based design

Graphic Design

4
Design is about Communication

Design is about Communication

Principal organs & vasculature Strange immersion of torus in 3-space

[Leonardo da Vinci ca. 1490] [Curtis 92]

5
Design is about Form and Function
• Form – good designs should be a pleasure to use
• Function – good design supports users’ tasks

Modern Design
Russian constructivism (1920s) was the first big
influence. It had two themes:
• Technology
• Human behavior and rhythms

6
 Modern Design
The biggest influence on 20th century design was the
Bauhaus School in Germany.

Formed after the collapse of the

German monarchy and loss in
WWI, it was part of a cultural
renaissance in Germany.

The Russian and German movements sought to escape

“ornamentation” which linked to their imperial past.

Principles of Modern Design

1. Form follows function

7
 Principles of Modern Design
2. Economy of form - limited vocabulary - minimalism

Principles of Modern Design

3. Integrity of materials
– Use materials’ natural affordances, don’t hide them

8
 Principles of Modern Design
3. Integrity of materials – not just a modern principle

Shaker Furniture Wood Veneer

Principles of Modern Design

4. Integrity of structure
– Show the structure how it supports and shapes the object

9
 Principles of Modern Design
4. Integrity of structure

Steal Good Design Ideas

“Good artists borrow (from other artists), but great
artists steal !” - Pablo Picasso

Compelling visual design takes

practice and experience –a
natural part of which is study
and critique of other’s work

10
 Simplicity and Elegance

Simplicity
Simple, minimalist, designs are usually the most effective

11
 Elegance
Reduction: Only include essential elements
Regularization: Use one set of shapes, colors, forms etc.
Leverage: Use elements in multiple roles
– scrollbar allows scrolling and indicates
position in document

Benefit: Approachability

Visual elements rapidly understood - invite further exploration

12
 Benefit: Recognizability

Less visual clutter makes it easier to recognize what is there

Benefit: Immediacy

Eye is immediately drawn to important visual elements

– Details that remain are more prominent

13
 Unity
One path to simplicity & elegance is through unifying themes:
– Forms, colors, components with like qualities

Refinement

London Underground [Beck 33] Geographic version of map

Draw viewers’ attention to essential information

– Straighten subway lines to emphasize sequence of stops

14
 Fitness
Match design to capabilities of technology and user

Chicago screen font designed for early low-res Macintosh display

– Thick verticals ensure visibility after applying 50% gray pattern
– Used as default font 1984-1997

Mistakes: Clutter & Noise

15
 Mistakes: Interference

Shortcuts interfere with menu labels in (a) not in (b).

Different shapes cause confusion in alignment tools

Mistakes: Too Much Structure

Bounding boxes in (a) adds unnecessary structural information

Simpler structure in (b) using space rather than lines is better

16
Mistakes: Belaboring the Obvious

Mistakes: Gratuitous use of 3D

17
Mistakes: Excessive Embellishment

Minimalists hate it, but sometimes users like embellishments (i.e. Apple’s designs)

Color

18
 Color Spaces

RGB CMY
Additive Subtractive
Electronic Media Printed Media

Parameters of color space driven by technology

Technology-Centered Colors
• Nice RGB Hex codes, “evenly” distributed
• But, lime green and hot pink?

19
 Perceptual Organization

Lightness

Colorfulness

Hue

Parameters of color space driven by perception

Munsell Color Space

Perceptually uniform book of painted chips

Hue Chroma vs. Value

Munsell Color Utility: www.wallkillcolor.com

20
 Tips for Picking Colors
• Use a small palette (6 color Java look and feel)

• Don’t use all fully saturated colors

• Ensure good color contrast for text

Let Someone Else Pick For You

Imhof, Cartographic Relief Projection

21
Let Someone Else Pick For You

ColorBrewer.org

Gestalt Principles

22
 Principles
• figure/ground
• proximity
• similarity
• symmetry
• connectedness
• continuity
• closure
• common fate
• transparency

Figure/Ground

Principle of surroundedness

Principle of relative size

Ambiguous

http://www.aber.ac.uk/media/Modules/MC10220/visper06.html

23
 Figure/Ground

Ambiguous Unambiguous

http://www.aber.ac.uk/media/Modules/MC10220/visper06.html

Proximity

Dots that are near one another are grouped

Dots that are concentrated are grouped

[from Ware 00]

24
 Proximity
Elements that are near each other will seem to be
related…

Dinner Farm
Bison Calf
Chicken Elk
Salmon Goat
Crab Rabbit
Pork Deer

Proximity
Elements that are near each other will seem to be
related…

Farm Dinner
Bison Calf
Chicken Elk
Salmon Goat
Crab Rabbit
Pork Deer

25
 Proximity
Think about which elements are logically related –
draw a graph if necessary. Then lay them out so that
the graph is as untangled as possible.

Use size and typeface to allow scanning for groups.

Proximity
Tuesday, November 4
Election Day

An American Menu $75

Caesar salad with anchovies, egg,

and Parmesan cheese
Clam chowder with Maine lobster
and pancetta
Grilled chicken with house-made barbeque
sauce with potato purée and greens
Apple and raspberry pecan crisp
with vanilla ice cream

26
 Similarity

Rows dominate due to similarity [from Ware 04]

Symmetry

Bilateral symmetry gives strong sense of figure [from Ware 04]

27
 Connectedness

Connectedness overrules proximity, size, color shape [from Ware 04]

Continuity

We prefer smooth not abrupt changes [from Ware 04]

Connections are clearer with smooth contours [from Ware 04]

28
 Continuity: Vector Fields

Prefer field that shows smooth continuous contours [from Ware 04]

Closure

We see a circle behind a rectangle, not a broken circle [from Ware 04]

Illusory contours [from Durand 02]

29
 Common Fate

Dots moving together are grouped

http://coe.sdsu.edu/eet/articles/visualperc1/start.htm

Transparency

Requires continuity and proper color

correspondence [from Ware 04]

30
Grid-Based Design

Grid Systems

31
 Web Page Layout
Grids can shape layout without over constraining it
– Grid is not always obvious from page layout
– Produces good repetition of size and shape

Alignment
Every item on a screen has a relationship to the other
items. Elements that are almost collinear should be
aligned.

Left, right and both-justified alignments create strong

boundaries around a piece of text.

Its best to stick with one kind of justification within a

page.

32
 Common Mistakes
• Arbitrary component positions and dimensions
• Random window sizes and layouts
• Unrelated icon sizes and imagery
• Poor alignment

Techniques
Reinforce structure through repetition
– Repeat design elements across the layout
– Stylesheets can help

33
 Techniques
Canonical Grid
– Six-column grid with column separators and label templates
– Covers most common grid-based layouts
– Can be implemented with HTML tables

Summary
• Design is about communication, form and function
– Simplicity and elegance are keys to good design
– Minimalism constrains you and reduces chances of bad design
• Use a small palette of colors
– Let others pick them for you (colorbrewer.org)
• Human vision is organized by Gestalt Principles
– Be aware of these principles as you design the visual look
• Avoid common layout mistakes using grid-based
design

34
 Next Time
Visualization
– Information Visualization. Readings in Information
Visualization. Chap 1. Card, Mackinlay, Schneiderman.

35