1. Graphic Design, part 1

2. Graphical Screen Design
CRAP – contrast, repetition, alignment, proximity
Grids are an essential tool for graphical design
Other visual design concepts
consistency relationships
organization legibility and readability navigational cues appropriate imagery
familiar idioms
Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press
Slide deck by Saul Greenberg. Permission is granted to use this for non-commercial purposes as long as general credit to Saul Greenberg is clearly maintained. Warning: some material in this deck is used from other sources without permission. Credit to the original source is given if it is known.

3. CRAP Contrast Repetition Alignment Proximity
make different things different
brings out dominant elements
mutes lesser elements
creates dynamism
Repetition
repeat design throughout the interface
consistency
creates unity
Alignment
visually connects elements
creates a visual flow
Proximity
groups related elements
separates unrelated ones
Robin Williams Non-Designers Design Book, Peachpit Press

6. Original

7. Proximity

8. Alignment

9. Contrast

10. Repetition

11. Graphic Design, part 2

12. Copyright © 2004 by Prentice Hall
5. Visual Organization
In this chapter you will learn about:
Four principles of visual organization and how to apply them
Proximity
Alignment
Consistency
Contrast
At several places in the chapter we show how these principles tie in with the ideas of Gestalt psychology discussed in Chapter 2.
Also: for any student who shows a flair for this part of the subject, recommend getting Robin Williams’ marvelous and highly accessible book, The Non-Designer’s Design Book. See chapter references for details.
Williams uses “repetition” instead of “consistency.” Rosalee Wolfe says that her students found the term “repetition” confusing, since it seemed to suggest bland uniformity. Read Williams’ book and you’ll see this isn’t so, but we made the change anyway. A pity, in a small way: with Proximity, Alignment, Repetition, and Contrast you have the simple acronym PARC, which of course is French for “park.” Williams hints, but does not say, that an anagram of this would also be an acronym. You figure it out.
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall 12

13. Four organizing principles: proximity
See next slide for a tongue-in-cheek example: mindless application of alphabetic organization
Preview: the result is a hodge-podge as seen by the user
Sneak a peek at the notes on the last slide, about teaching this stuff.
Note that in this chapter I have not tied the PowerPoint slides to the Section numbers in the text at all. Sometimes that’s helpful, I think, but not here.
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall 13

14. Dan’s Clothing: the mindless version
Note the handwriting. This is not the main point here, but the choice is entirely deliberate: we want students to think in terms of sketching things out, quickly. We want students to be comfortable with sketches and handwriting when they come to paper prototyping.
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall 14

15. What groups would make sense?
Women’s clothes, Men’s clothes, Kid’s clothes, Special sizes
July Specials, Sales on rainwear, Closeout on pink socks
Store locations, Store hours
Open an account, Your account status
Check out
us.
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall

16. Dan’s Clothing: with sensible groups
As review, ask what Gestalt psychology principle is related to this. Some people will remember Chapter 2, and say “Proximity!” Of course, such a student might also have read this chapter, where the point is made explicitly.
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall 16

17. Avoid centered alignment for lines that are of nearly equal length
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall

18. Copyright © 2004 by Prentice Hall
Lines are now greatly different in length: reader knows it’s intentional
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall

19. Orpheus Chamber Orchestra: nice use of proximity and alignment
Ask students how they see the principles being applied. Maybe use the pen tool (Ctrl-P) to draw in lines showing alignment. You will want to right-click, once you have the pen tool, and change the color to yellow or white.
Note the darker gray background. The regular light gray background takes the punch out of this image. Also, the background graphic was removed; it was a total distraction. If you want to do any of this kind of thing, go to Format/Background. Be sure to use Apply, unless you really mean Apply to All. But if you make a mistake, Ctrl-Z undoes it. And you can repeat the Undo, to the depth of the stack of changes. The default is 20, but you can change that in Options/Edit. 19

20. The principles are seen in combination
Eddie Bauer site (next slide) has
Horizontal alignment
Vertical alignment
Proximity, to group like items
Consistency, in type size and font for links
Contrast, between SALE and most else
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall

21. Copyright © 2004 by Prentice Hall
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall

22. Don’t be a slave to centered alignment . . .
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall

23. . . . which is OK, but isn’t this better?
There is no accounting for taste. Some students may say, “No!” We are not doing exact science here. A graphic designer would see a dozen other ways to do it. Maybe right align the top text. Or try putting “Annual Digital Art Show” in biggest type that will fit with the line printed vertically.
In a graphic design course the instructor would say, “Let a hundred flowers bloom! Each of you: reformat this at least six other ways, and we’ll see what we like.” That’s the essence of the studio method, used for centuries in teaching art and architecture.
There will rarely be time to do much of that in an HCI course, but you may be able to encourage a little experimentation. Once you establish the groundrule that criticism is expected to be constructive, students will help each other—with your guidance, of course.
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall 23

24. Note the consistent layout in the next few slides
Figure 5.12 and following were drawn by Rosalee Wolfe. We wanted to use the New York Public Library site, but we could not get permission. That doesn’t stop you from going there live.
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall 24

25. One of the pages reachable from the previous slide
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall 25

26. One of the pages reachable from the previous slide
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall 26

27. How can we make this more interesting?
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall

28. Copyright © 2004 by Prentice Hall
Use more contrast
Or a lot of other ways. The goal here isn’t to provide algorithms, which don’t exist, but get students to think about visual impact, and to get them to experiment. And to be bold. Most of your students will have no background in graphic design, and will tend to be tentative about this stuff. (If you do have a student with a broader background, find some way to exploit it. Encourage the CS/graphic design combination, which has market value. Showcase that student’s work, in some way that doesn’t embarrass him. Maybe let her give a ten minute mini-lecture about something. I’ve had a handful of such students in my Web design course, and they can be a delight.
One of Williams’ slogans is, “Don’t be a wimp!” Translation: if you’re going to use contrast, make it a LOT of contrast, so people will know you meant it.
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall 28

29. Copyright © 2004 by Prentice Hall
Talk about boring!
This is drawn from Exercise 12. See the Instructor’s manual for a discussion of the various changes shown in the exercise, where the changes are considered one at a time.
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall 29

30. This is a quiz! (Not really)
Look again at the previous slide.
How many ways can you improve it?
Can you put all four principles to work?
Next slide shows one possible way
You can find lots of others
I used this example on a quiz, simply asking students to show how all four principles are used. Most got it, and it made for a good review.
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall 30

31. Here’s one way, but there are many other possibilities
If your course involves any kind of implementation, students will have prototypes at some point (see Chapter 7, Prototyping). If their designs are boring visually, that’s a good chance to remind them of the ideas in this chapter.
BUT: if your course involves Web implementation, sizes contrast like this must never be achieved by skipping heading levels, e.g., using <h1> for the Title, <h3> for the Chapter, and <h6> for the Section. This makes things harder for blind users who are listening the a screen narrator. Use styles!
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall 31

32. Copyright © 2004 by Prentice Hall
Summary
In this chapter you learned:
Four principles of visual organization
Proximity
Alignment
Consistency
Contrast
Some ways they can be applied
The message:
There are principles; you can learn them and use them
Be sure at some point to make the connections between this chapter and Chapter 2 (the Gestalt psychology part), Chapter 4 ( Content Organization), and the upcoming Chapter 6 (Navigation Design). The whole subject makes more sense if students can see the connections, the way it all hangs together.
The last bullet is not to be taken too literally. We don’t encourage “font madness” or gratuitous color changes. The thing is, many students, at least in computer science, have to be given a shove to do anything innovative. They tend to color inside the lines, so to speak. Not all, of course. I think, on balance, it’s good to push these folks outside the box, and then rein them in if they go too far. It’s hard to say, “Experiment, but not too much.” Let them do “too much,” and then help them pull back a bit.
One fruitful approach: give a relatively free-form assignment, then let the class look at everybody’s work. The timid folks will get encouragement to be bolder; the ones who were too bold will see that. Quiet, non-judgmental peer guidance.
This is the studio approach again. We couldn’t very well do it in the book, but you can do it in class. Without being an art teacher! I’ve taken Graphic Design 101, and I know this is how it’s done, but you don’t have to do that to set up a classroom situation where the students mostly teach each other. Sound like smoke & mirrors? Try it. You might be surprised.
Chapter 5: Visual Organization
Copyright © 2004 by Prentice Hall 32

33. Graphic Design, part 3

34. Grids Horizontal and vertical lines to locate window components
aligns related components
Organization
contrast for dominant elements
element groupings by proximity
organizational structure
alignment
Consistency
location
format
element repetition
organization
Format of variable contents
Message text in Arial 14, left adjusted
Standard icon set
Widget to widget spacing No Ok
window to widget spacing
Fixed components 34

35. ? ! The file was destroyed No Ok
Message text in Arial 14, left adjusted
Standard icon set ?
Do you really want to delete the file “myfile.doc” from the folder “junk”? No Ok Ok
Cannot move the file “myfile.doc” to the folder “junk” because the disc is full. !
Apply
The file was destroyed
Cancel

36. Grouping by white space
Two-level Hierarchy
indentation
contrast
Logic of organizational flow
Alignment connects visual elements in a sequence
Grouping by white space

37. Visual consistency (repetition)
internal consistency
elements follow same conventions and rules
set of application-specific grids enforce this
external consistency
follow platform and interface style conventions
use platform and widget-specific grids
deviate only when it provides a clear benefit to user
Warning
mmmm mmm
mmm
Okay !
Help
mmm mmm ?
Tip of the day: Monday, Mar 12
Dismiss 37

38. Relating screen elements
proximal clusters
alignment
white (negative) space
explicit structure
Mmmm:
Mmmm:
Mmmm: 38

39. Poor explicit structure
Terrible alignment
no flow
Poor contrast
cannot distinguish colored labels from editable fields
Poor repetition
buttons do not look like buttons
Poor explicit structure
blocks compete with alignment
Webforms

40. No regard for order and organization
IBM's Aptiva Communication Center

41. Haphazard layout
Mullet & Sano

42. Repairing the layout
Mullet & Sano

43. Using explicit structure as a crutch
Mullet & Sano

44. Overuse of 3-d effects makes the window unnecessarily cluttered
WebForms

45. Navigational cues provide initial focus
direct attention as appropriate to important 2ndary, or peripheral items as appropriate
order should follow a user’s conceptual model of sequences 45

46. Redesigning a layout using alignment and factoring
Mullet & Sano

47. The importance of negative space and alignment
Mullet & Sano

48. Economy of visual elements
minimize number of controls
include only those that are necessary
eliminate, or relegate others to secondary windows
minimize clutter
so information is not hidden
xxx: ____
MMMM
NNNN
NNNN
MMMM
xxx: ____ 48

49. Repairing excessive display density
Mullet & Sano

50. Tabs
excellent means for factoring related items
but can be overdone

51. Legibility and readability
Characters, symbols, graphical elements should be easily noticeable and distinguishable
Text set in Helvetica
TEXT SET IN CAPITALS
Text set in Braggadocio
Text set in Times Roman
Text set in Courier 51

52. Legibility and readability
Proper use of typography
1-2 typefaces (3 max)
normal, italics, bold
1-3 sizes max
Large
Medium
Small
Large
Medium
Small
Readable
Design components to be
inviting and attractive
Unreadable
Design components to be
inviting and attractive 52

53. Legibility and readability
typesetting
point size
word and line spacing
line length
Indentation
color
Readable
Design components to be
inviting and attractive
Unreadable: Design components
to be easy to interpret and
understand. Design components to
be inviting and attractive 53

54. These choices must be really important, or are they?
Time & Chaos

55. Greyed-out example text hard to read. Why not make it black?
Regional preferences in Windows 95

56. Text orientation difficult to read
Microsoft Word

57. Imagery Signs, icons, symbols Icon design very hard
right choice within spectrum from concrete to abstract
Icon design very hard
except for most familiar, always label them
Image position and type should be related
image “family”
Consistent and relevant image use
identifies situations, offerings...
Partial icon family 57

58. Choosing levels of abstraction
Mullet & Sano

59. Refined vs excessive literal metaphors
Mullet & Sano

60. What do these images mean?
no tooltips included
one of the tabs is a glossary explaining these images! which one?
Novell GroupWise 5.1

61. Standard typographic controls
Idioms
Familiar ways of using GUI components
appropriate for casual to expert users
builds upon computer literacy
must be applied carefully in walk up and use systems
Files
Window manipulation
Standard typographic controls
Toolbars and tooltips
What you see is what you get displays
Pulldown menus
Cascading menu
Dialog box item
Microsoft Powerpoint

62. Widgets and complexity
how can window navigation be reduced?
avoid long paths
avoid deep hierarchies 62

63. Exercise Graphical redesign Create a grid emphasising:
visual consistency
relationships between screen elements
navigational cues
economy
legibility and readability
imagery

64. Constructing a grid Maintain consistency with GUI style
locate standard components - title bar, window controls, …
Decide navigational layout + white space + legibility + typography
annotated grid shows location of generic components
these generic components may have their own grids.

65. Using the grid Determine relationships, navigational structure
map navigational structure onto the grid
Economize
collapse two windows into one
trim sound dialog

66. Using the grid Evaluate by displaying actual examples
Economize further
decide which we prefer vs