Graphical Screen Design CRAP – contrast, repetition, alignment, proximity Grids are an essential tool for graphical design...
CRAP <ul><li>C ontrast   </li></ul><ul><ul><li>make different things different </li></ul></ul><ul><ul><li>brings out domin...
 
 
Original
Proximity
Alignment
Contrast
Repetition
Grids <ul><li>Horizontal and vertical lines to locate window components </li></ul><ul><ul><li>aligns related components </...
No Ok Do you really want to delete the file “myfile.doc” from the folder “junk”? ? <ul><li> </li></ul>Apply Cancel The fi...
<ul><li>Two-level Hierarchy </li></ul><ul><li>indentation </li></ul><ul><li>contrast  </li></ul>Grouping by white space Al...
Visual consistency (repetition) <ul><li>internal consistency </li></ul><ul><ul><li>elements follow same conventions and ru...
Relating screen elements <ul><li>proximal clusters  </li></ul><ul><li>alignment </li></ul><ul><li>white (negative) space <...
<ul><li>Terrible alignment  </li></ul><ul><ul><li>no flow </li></ul></ul><ul><li>Poor contrast  </li></ul><ul><ul><li>cann...
IBM's Aptiva Communication Center No regard for order and organization
Haphazard layout Mullet & Sano
Repairing the layout Mullet & Sano
Spatial Tension Mullet & Sano
Using explicit structure as a crutch Mullet & Sano
Overuse of 3-d effects makes the window unnecessarily cluttered WebForms
How do you chose when you cannot discriminate screen elements from each other ? GIF Construction Set Microsoft Access 2.0
Navigational cues <ul><li>provide initial focus </li></ul><ul><li>direct attention as appropriate to important  2ndary, or...
Redesigning a layout using alignment and factoring  Mullet & Sano
The importance of negative space and alignment  Mullet & Sano
Economy of visual elements <ul><li>minimize number of controls </li></ul><ul><li>include only those that are necessary </l...
Repairing excessive display density Mullet & Sano
<ul><li>Tabs </li></ul><ul><ul><li>excellent means for factoring related items </li></ul></ul><ul><ul><li>but can be overd...
Legibility and readability <ul><li>Characters, symbols, graphical elements should be easily noticable and distinguishable ...
Legibility and readability <ul><li>Proper use of typography  </li></ul><ul><ul><li>1-2 typefaces (3 max) </li></ul></ul><u...
Legibility and readability <ul><li>typesetting </li></ul><ul><ul><li>point size </li></ul></ul><ul><ul><li>word and line s...
Popkin Software’s System Architect
These choices must be really important,  or are they? Time & Chaos
Greyed-out example text hard to read. Why not make it black? Regional preferences in Windows 95
Text orientation difficult to read Microsoft Word
Imagery <ul><li>Signs, icons, symbols </li></ul><ul><ul><li>right choice within spectrum from concrete to abstract </li></...
Choosing levels of abstraction <ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> <...
Refined vs excessive literal metaphors  <ul><li> </li></ul><ul><li> </li></ul>Mullet &  Sano
<ul><li>What do these images mean?   </li></ul><ul><li>no tooltips included </li></ul><ul><li>one of the tabs is a glossar...
Idioms <ul><li>Familiar ways of using GUI components </li></ul><ul><ul><li>appropriate for casual to expert users </li></u...
How to choose between widgets <ul><li>What components must be in the display? </li></ul><ul><ul><li>necessary visual affor...
Displaying core functionality Apple MacPaint & Macwrite, from mullet & Sano
Widgets and complexity <ul><li>how can window navigation be reduced? </li></ul><ul><ul><li>avoid long paths </li></ul></ul...
Exercise <ul><li>Graphical redesign </li></ul><ul><li>Create a grid emphasising: </li></ul><ul><ul><li>visual consistency ...
<ul><li>Constructing a grid </li></ul><ul><ul><li>Maintain consistency with GUI style </li></ul></ul><ul><ul><ul><li>locat...
<ul><li>Using the grid </li></ul><ul><ul><li>Determine relationships, navigational structure  </li></ul></ul><ul><ul><ul><...
<ul><li>Using the grid </li></ul><ul><ul><li>Evaluate by displaying actual examples </li></ul></ul><ul><ul><li>Economize f...
What you now know <ul><li>CRAP </li></ul><ul><li>Grids are an essential tool for graphical design </li></ul><ul><li>Other ...
<ul><li>Articulate: </li></ul><ul><li>who users are </li></ul><ul><li>their key tasks </li></ul>User and task descriptions...
Upcoming SlideShare
Loading in...5
×

Grapical Design

1,576

Published on

Published in: Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,576
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
64
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Grapical Design

  1. 1. 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 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. Major sources: Designing Visual Interfaces, Mullet & Sano, Prentice Hall / Robin Williams Non-Designers Design Book, Peachpit Press
  2. 2. CRAP <ul><li>C ontrast </li></ul><ul><ul><li>make different things different </li></ul></ul><ul><ul><li>brings out dominant elements </li></ul></ul><ul><ul><li>mutes lesser elements </li></ul></ul><ul><ul><li>creates dynamism </li></ul></ul><ul><li>R epetition </li></ul><ul><ul><li>repeat design throughout the interface </li></ul></ul><ul><ul><li>consistency </li></ul></ul><ul><ul><li>creates unity </li></ul></ul><ul><li>A lignment </li></ul><ul><ul><li>visually connects elements </li></ul></ul><ul><ul><li>creates a visual flow </li></ul></ul><ul><li>P roximity </li></ul><ul><ul><li>groups related elements </li></ul></ul><ul><ul><li>separates unrelated ones </li></ul></ul>Robin Williams Non-Designers Design Book, Peachpit Press
  3. 5. Original
  4. 6. Proximity
  5. 7. Alignment
  6. 8. Contrast
  7. 9. Repetition
  8. 10. Grids <ul><li>Horizontal and vertical lines to locate window components </li></ul><ul><ul><li>aligns related components </li></ul></ul><ul><li>Organization </li></ul><ul><ul><li>contrast for dominant elements </li></ul></ul><ul><ul><li>element groupings by proximity </li></ul></ul><ul><ul><li>organizational structure </li></ul></ul><ul><ul><li>alignment </li></ul></ul><ul><li>Consistency </li></ul><ul><ul><li>location </li></ul></ul><ul><ul><li>format </li></ul></ul><ul><ul><li>element repetition </li></ul></ul><ul><ul><li>organization </li></ul></ul>window to widget spacing Widget to widget spacing No Ok Message text in Arial 14, left adjusted Standard icon set Fixed components Format of variable contents
  9. 11. No Ok Do you really want to delete the file “myfile.doc” from the folder “junk”? ? <ul><li> </li></ul>Apply Cancel The file was destroyed No Ok Message text in Arial 14, left adjusted Standard icon set <ul><li> </li></ul>Ok Cannot move the file “myfile.doc” to the folder “junk” because the disc is full. !
  10. 12. <ul><li>Two-level Hierarchy </li></ul><ul><li>indentation </li></ul><ul><li>contrast </li></ul>Grouping by white space Alignment connects visual elements in a sequence Logic of organizational flow
  11. 13. Visual consistency (repetition) <ul><li>internal consistency </li></ul><ul><ul><li>elements follow same conventions and rules </li></ul></ul><ul><ul><li>set of application-specific grids enforce this </li></ul></ul><ul><li>external consistency </li></ul><ul><ul><li>follow platform and interface style conventions </li></ul></ul><ul><ul><li>use platform and widget-specific grids </li></ul></ul><ul><li>deviate only when it provides a clear benefit to user </li></ul>Warning mmmm mmm mmm Okay ! Help mmmm mmm mmm mmm Okay ? Tip of the day: Monday, Mar 12 mmmm mmm mmm Dismiss <ul><li> </li></ul><ul><li> </li></ul>
  12. 14. Relating screen elements <ul><li>proximal clusters </li></ul><ul><li>alignment </li></ul><ul><li>white (negative) space </li></ul><ul><li>explicit structure </li></ul>Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: <ul><li> </li></ul>Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: <ul><li> </li></ul>Mmmm: Mmmm: Mmmm: Mmmm: Mmmm:
  13. 15. <ul><li>Terrible alignment </li></ul><ul><ul><li>no flow </li></ul></ul><ul><li>Poor contrast </li></ul><ul><ul><li>cannot distinguish colored labels from editable fields </li></ul></ul><ul><li>Poor repetition </li></ul><ul><ul><li>buttons do not look like buttons </li></ul></ul><ul><li>Poor explicit structure </li></ul><ul><ul><li>blocks compete with alignment </li></ul></ul>Webforms
  14. 16. IBM's Aptiva Communication Center No regard for order and organization
  15. 17. Haphazard layout Mullet & Sano
  16. 18. Repairing the layout Mullet & Sano
  17. 19. Spatial Tension Mullet & Sano
  18. 20. Using explicit structure as a crutch Mullet & Sano
  19. 21. Overuse of 3-d effects makes the window unnecessarily cluttered WebForms
  20. 22. How do you chose when you cannot discriminate screen elements from each other ? GIF Construction Set Microsoft Access 2.0
  21. 23. Navigational cues <ul><li>provide initial focus </li></ul><ul><li>direct attention as appropriate to important 2ndary, or peripheral items as appropriate </li></ul><ul><li>order should follow a user’s conceptual model of sequences </li></ul><ul><li> </li></ul><ul><li> </li></ul>
  22. 24. Redesigning a layout using alignment and factoring Mullet & Sano
  23. 25. The importance of negative space and alignment Mullet & Sano
  24. 26. Economy of visual elements <ul><li>minimize number of controls </li></ul><ul><li>include only those that are necessary </li></ul><ul><ul><li>eliminate, or relegate others to secondary windows </li></ul></ul><ul><li>minimize clutter </li></ul><ul><ul><li>so information is not hidden </li></ul></ul><ul><li> </li></ul><ul><li> </li></ul>NNNN MMMM xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ MMMM NNNN
  25. 27. Repairing excessive display density Mullet & Sano
  26. 28. <ul><li>Tabs </li></ul><ul><ul><li>excellent means for factoring related items </li></ul></ul><ul><ul><li>but can be overdone </li></ul></ul>
  27. 29. Legibility and readability <ul><li>Characters, symbols, graphical elements should be easily noticable and distinguishable </li></ul>Text set in Braggadocio Text set in Helvetica Text set in Courier TEXT SET IN CAPITOLS <ul><li> </li></ul><ul><li> </li></ul>Text set in Times Roman
  28. 30. Legibility and readability <ul><li>Proper use of typography </li></ul><ul><ul><li>1-2 typefaces (3 max) </li></ul></ul><ul><ul><li>normal, italics, bold </li></ul></ul><ul><ul><li>1-3 sizes max </li></ul></ul>Large Medium Small Large Medium Small <ul><li> </li></ul><ul><li> </li></ul>Readable Design components to be inviting and attractive Design components to be inviting and attractive Unreadable Design components to be inviting and attractive Design components to be inviting and attractive
  29. 31. Legibility and readability <ul><li>typesetting </li></ul><ul><ul><li>point size </li></ul></ul><ul><ul><li>word and line spacing </li></ul></ul><ul><ul><li>line length </li></ul></ul><ul><ul><li>Indentation </li></ul></ul><ul><ul><li>color </li></ul></ul><ul><li> </li></ul><ul><li> </li></ul>Unreadable: Design components to be easy to interpret and understand. Design components to be inviting and attractive Readable Design components to be inviting and attractive Design components to be inviting and attractive
  30. 32. Popkin Software’s System Architect
  31. 33. These choices must be really important, or are they? Time & Chaos
  32. 34. Greyed-out example text hard to read. Why not make it black? Regional preferences in Windows 95
  33. 35. Text orientation difficult to read Microsoft Word
  34. 36. Imagery <ul><li>Signs, icons, symbols </li></ul><ul><ul><li>right choice within spectrum from concrete to abstract </li></ul></ul><ul><li>Icon design very hard </li></ul><ul><ul><li>except for most familiar, always label them </li></ul></ul><ul><li>Image position and type should be related </li></ul><ul><ul><li>image “family” </li></ul></ul><ul><li>Consistent and relevant image use </li></ul><ul><ul><li>identifies situations, offerings... </li></ul></ul>Partial icon family
  35. 37. Choosing levels of abstraction <ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul>Mullet & Sano
  36. 38. Refined vs excessive literal metaphors <ul><li> </li></ul><ul><li> </li></ul>Mullet & Sano
  37. 39. <ul><li>What do these images mean? </li></ul><ul><li>no tooltips included </li></ul><ul><li>one of the tabs is a glossary explaining these images! which one? </li></ul>Novell GroupWise 5.1
  38. 40. Idioms <ul><li>Familiar ways of using GUI components </li></ul><ul><ul><li>appropriate for casual to expert users </li></ul></ul><ul><ul><li>builds upon computer literacy </li></ul></ul><ul><ul><li>must be applied carefully in walk up and use systems </li></ul></ul>Pulldown menus Cascading menu Dialog box item Toolbars and tooltips Window manipulation Standard typographic controls Files What you see is what you get displays Microsoft Powerpoint
  39. 41. How to choose between widgets <ul><li>What components must be in the display? </li></ul><ul><ul><li>necessary visual affordances </li></ul></ul><ul><ul><li>frequent actions </li></ul></ul><ul><ul><ul><li>direct manipulation for core activities </li></ul></ul></ul><ul><ul><ul><li>buttons/forms/toolbar/special tools for frequent/immediate actions </li></ul></ul></ul><ul><ul><ul><li>menus/property window for less frequent actions </li></ul></ul></ul><ul><ul><ul><li>secondary windows for rare actions </li></ul></ul></ul><ul><li>How are components related? </li></ul><ul><ul><li>organize related items as “chunks” </li></ul></ul><ul><li>What are familiar and expected idioms? </li></ul><ul><ul><li>cross application look and feel </li></ul></ul>
  40. 42. Displaying core functionality Apple MacPaint & Macwrite, from mullet & Sano
  41. 43. Widgets and complexity <ul><li>how can window navigation be reduced? </li></ul><ul><ul><li>avoid long paths </li></ul></ul><ul><ul><li>avoid deep hierarchies </li></ul></ul><ul><li> </li></ul><ul><li> </li></ul>
  42. 44. Exercise <ul><li>Graphical redesign </li></ul><ul><li>Create a grid emphasising: </li></ul><ul><ul><li>visual consistency </li></ul></ul><ul><ul><li>relationships between screen elements </li></ul></ul><ul><ul><li>navigational cues </li></ul></ul><ul><ul><li>economy </li></ul></ul><ul><ul><li>legibility and readability </li></ul></ul><ul><ul><li>imagery </li></ul></ul>
  43. 45. <ul><li>Constructing a grid </li></ul><ul><ul><li>Maintain consistency with GUI style </li></ul></ul><ul><ul><ul><li>locate standard components - title bar, window controls, … </li></ul></ul></ul><ul><ul><li>Decide navigational layout + white space + legibility + typography </li></ul></ul><ul><ul><ul><li>annotated grid shows location of generic components </li></ul></ul></ul><ul><ul><ul><li>these generic components may have their own grids. </li></ul></ul></ul>
  44. 46. <ul><li>Using the grid </li></ul><ul><ul><li>Determine relationships, navigational structure </li></ul></ul><ul><ul><ul><li>map navigational structure onto the grid </li></ul></ul></ul><ul><ul><li>Economize </li></ul></ul><ul><ul><ul><li>collapse two windows into one </li></ul></ul></ul><ul><ul><ul><li>trim sound dialog </li></ul></ul></ul>
  45. 47. <ul><li>Using the grid </li></ul><ul><ul><li>Evaluate by displaying actual examples </li></ul></ul><ul><ul><li>Economize further </li></ul></ul><ul><ul><ul><li>decide which we prefer </li></ul></ul></ul>vs
  46. 48. What you now know <ul><li>CRAP </li></ul><ul><li>Grids are an essential tool for graphical design </li></ul><ul><li>Other visual concepts include </li></ul><ul><ul><li>visual consistency </li></ul></ul><ul><ul><ul><li>repetition </li></ul></ul></ul><ul><ul><li>visual organization </li></ul></ul><ul><ul><ul><li>contrast, alignment and navigational cues </li></ul></ul></ul><ul><ul><li>visual relationships </li></ul></ul><ul><ul><ul><li>proximity and white space </li></ul></ul></ul><ul><ul><li>familiar idioms </li></ul></ul><ul><ul><li>legibility and readability </li></ul></ul><ul><ul><ul><li>typography </li></ul></ul></ul><ul><ul><li>appropriate imagery </li></ul></ul>
  47. 49. <ul><li>Articulate: </li></ul><ul><li>who users are </li></ul><ul><li>their key tasks </li></ul>User and task descriptions Goals: Methods: Products: Brainstorm designs Task centered system design Participatory design User-centered design Evaluate tasks Psychology of everyday things User involvement Representation & metaphors low fidelity prototyping methods Throw-away paper prototypes Participatory interaction Task scenario walk- through Refined designs Graphical screen design Interface guidelines Style guides high fidelity prototyping methods Testable prototypes Usability testing Heuristic evaluation Completed designs Alpha/beta systems or complete specification Field testing Interface Design and Usability Engineering
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×