spring 20116.813/6.831 user interface design and implementation1 lecture 18: graphic design gr3 due...
TRANSCRIPT
![Page 1: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/1.jpg)
Spring 2011 6.813/6.831 User Interface Design and Implementation 1
Lecture 18: Graphic Design
GR3 due tonight at midnight
PS3, RS3 released, due Sunday
GR4 released, due in 2 weeks
![Page 2: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/2.jpg)
UI Hall of Fame or Shame?
Spring 2011 6.813/6.831 User Interface Design and Implementation 2
![Page 3: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/3.jpg)
6.813/6.831 User Interface Design and Implementation 3
Nanoquiz
• closed book, closed notes• submit before time is up (paper or web)• we’ll show a timer for the last 20 seconds
Spring 2011
![Page 4: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/4.jpg)
6.813/6.831 User Interface Design and Implementation 4
1. A good prototyping technique for evaluating efficiency is: (choose one best answer)A. task analysisB. scenarioC. computer prototypeD. paper prototypeE. Wizard of Oz
2. Which of the following are advantages of paper as a prototyping technique? (choose all good answers)
A. It’s cheaper than codingB. A paper prototype can’t be shipped as the final productC. Users may act more deliberately when using a paper prototypeD. Hand-sketching encourages different kinds of feedback from users
3. Suppose you’re designing a new tab bar for Internet Explorer, and you build a paper prototype of the tab bar. Which of the following areas will have the best fidelity in this prototype? (choose one best answer)
A. lookB. feelC. breadthD. depth
2019181716151413121110 9 8 7 6 5 4 3 2 1 0
Spring 2011
![Page 5: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/5.jpg)
Today’s Topics
• Human perception– Chunking– Visual variables– Gestalt principles of grouping
• Graphic design guidelines– Simplicity– Contrast– White space– Balance– Alignment
Spring 2011 6.813/6.831 User Interface Design and Implementation 5
![Page 6: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/6.jpg)
Simplicity
• “Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away.”– Antoine de St-Exupery
• “Simplicity does not mean the absence of any decor… It only means that the decor should belong intimately to the design proper, and that anything foreign to it should be taken away.”– Paul Jacques Grillo
• “Keep it simple, stupid.” (KISS)
• “Less is more.”
• “When in doubt, leave it out.”
Spring 2011 6.813/6.831 User Interface Design and Implementation 6
![Page 7: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/7.jpg)
Techniques for Simplicity: Reduction
• Remove inessential elements
Spring 2011 6.813/6.831 User Interface Design and Implementation 7
![Page 8: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/8.jpg)
Techniques for Simplicity: Regularity
• Use a regular pattern• Limit inessential variation among elements
Spring 2011 6.813/6.831 User Interface Design and Implementation 8
![Page 9: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/9.jpg)
Techniques for Simplicity: Double-Duty
• Combine elements for leverage– Find a way for one element to play multiple roles
Spring 2011 6.813/6.831 User Interface Design and Implementation 9
title barscrollbar thumb
help promptselection handles
![Page 10: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/10.jpg)
Chunking
• “Chunk”: unit of perception or memory• Chunking depends on:
– What you already know – How the information is presented
Hard: M W B C R A L O A B I M B F I
Easier: MWB CRA LOA BIM BFI
Easiest: BMW RCA AOL IBM FBI
• 3-4-character chunking is good for presenting unrelated digits or letters
Spring 2011 6.813/6.831 User Interface Design and Implementation 10
![Page 11: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/11.jpg)
Contrast & Visual Variables
• Contrast encodes information along visual dimensions
Spring 2011 6.813/6.831 User Interface Design and Implementation 11
sizevalue hue orientationtexture shape position
![Page 12: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/12.jpg)
Characteristics of Visual Variables
• Scale = kinds of comparisons possible– Nominal (=)
• All variables– Ordered (<, >)
• Ordered: position, size, value, texture granularity• Not ordered: orientation, hue, shape
– Quantitative (amount of difference)• Quantitative: position, size• Not quantitative: value, texture, orientation, hue, shape
• Length = number of distinguishable levels– Shape is very long (infinite variety)– Position is long and fine-grained– Orientation is very short (~ 4 levels)– Other variables are in between (~ 10 levels)
Spring 2011 6.813/6.831 User Interface Design and Implementation 12
![Page 13: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/13.jpg)
Selectivity
• Selective perception: can attention be focused on one value of the variable, excluding other variables and values?– Selective: position, size, orientation, hue, value,
texture– Not selective: shape
Spring 2011 6.813/6.831 User Interface Design and Implementation 13
![Page 14: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/14.jpg)
N
N
N N
N
N
N
NN
N
NZ
Z
Z
Z
Z
Z
ZZ
ZK
KK
KK
K
K
K
KK
K
MM
M
M M
M
M
M
M
M
M
Spring 2011 146.813/6.831 User Interface Design and Implementation
![Page 15: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/15.jpg)
Associativity
• Associative perception: can variable be ignored when looking at other variables?– Associative: position, hue, value, texture, shape,
orientation– Not associative: size, value
• Small size and low value interfere with ability to perceive hue, value, texture, and shape
Spring 2011 6.813/6.831 User Interface Design and Implementation 15
![Page 16: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/16.jpg)
Techniques for Contrast
• Choose appropriate visual variables• Use as much length as possible• Sharpen distinctions for easier perception
– Multiplicative scaling, not additive – Redundant coding where needed– Cartoonish exaggeration where needed
• Use the “squint test”
Spring 2011 6.813/6.831 User Interface Design and Implementation 16
![Page 17: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/17.jpg)
Choosing Visual Variables for a Display
Spring 2011 6.813/6.831 User Interface Design and Implementation 17
![Page 18: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/18.jpg)
Designing Information Displays
Spring 2011 6.813/6.831 User Interface Design and Implementation 18
![Page 19: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/19.jpg)
Contrast in Publication Styles
TitleHeadingThis is body text. It’s smaller than the heading, lighter in weight, and longer in line length. We’ve also changed its shape to a serif font, because serifs make small text easier to read. Redundant encoding produces an effective contrast that makes it easy to scan the headings and distinguish headings from body text.1
1This is a footnote. It’s even smaller, and positioned at the bottom of the page.
Spring 2011 6.813/6.831 User Interface Design and Implementation 19
Figure 1. This is a caption, which issmaller than body text, and set off byposition, centering, and line length.
![Page 20: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/20.jpg)
Simplicity vs. Contrast
Spring 2011 6.813/6.831 User Interface Design and Implementation 20
min
25%
50%
75%
max
Tukey Tufte #1 Tufte #2
![Page 21: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/21.jpg)
Contrast Problems
Spring 2011 6.813/6.831 User Interface Design and Implementation 21
Source: Interface Hall of Shame
![Page 22: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/22.jpg)
White Space
• Use white space for grouping, instead of lines• Use margins to draw eye around design• Integrate figure and ground
– Object should be scaled proportionally to its background
• Don’t crowd controls together– Crowding creates spatial tension and inhibits
scanning
Spring 2011 6.813/6.831 User Interface Design and Implementation 22
![Page 23: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/23.jpg)
Crowded Dialog
Spring 2011 6.813/6.831 User Interface Design and Implementation 23
Source: Mullet & Sano, p. 110
![Page 24: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/24.jpg)
Using White Space to Set Off Labels
Spring 2011 6.813/6.831 User Interface Design and Implementation 24
Source: Mullet & Sano, p. 96
(a)
(b)
![Page 25: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/25.jpg)
The Gestalt Principles of Grouping
• Gestalt principles explain how eye creates a whole (gestalt) from parts
Spring 2011 6.813/6.831 User Interface Design and Implementation 25
proximity similarity continuity
closure area symmetry
![Page 26: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/26.jpg)
White Space Avoids Visual Noise
Spring 2011 6.813/6.831 User Interface Design and Implementation 26
0
10
20
30
40
50
Winter Spring Summer Fall
0
10
20
30
40
50
Winter Spring Summer Fall
![Page 27: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/27.jpg)
Balance & Symmetry
• Choose an axis (usually vertical)• Distribute elements equally around the axis
– Equalize both mass and extent
Spring 2011 6.813/6.831 User Interface Design and Implementation 27
![Page 28: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/28.jpg)
Symmetry Example
Spring 2011 6.813/6.831 User Interface Design and Implementation 28
![Page 29: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/29.jpg)
Alignment
• Align labels on left or right
• Align controls on left and right– Expand as needed
• Align text baselines
Spring 2011 6.813/6.831 User Interface Design and Implementation 29
![Page 30: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/30.jpg)
Grids Are Effective
Spring 2011 6.813/6.831 User Interface Design and Implementation 30
Source: Mullet & Sano, p. 165
![Page 31: Spring 20116.813/6.831 User Interface Design and Implementation1 Lecture 18: Graphic Design GR3 due tonight at midnight PS3, RS3 released, due Sunday GR4](https://reader035.vdocuments.net/reader035/viewer/2022062300/56649d9f5503460f94a8ad4f/html5/thumbnails/31.jpg)
Summary
• Use contrast to emphasize important distinctions– Choose appropriate visual variables– Squint test
• Simplify unimportant distinctions• Remember Gestalt grouping
– Alignment, balance, symmetry
Spring 2011 6.813/6.831 User Interface Design and Implementation 31