# Presentation: 484142

## Graphic Design for Usability

- by Steve Sabia

## A Website is ...

- An information architecture,  a navigational system,  and a graphic design that organizes and presents the former 2 aspects.
-  An effective graphic design is a combination of a strong** visual hierarchy **unified in a **composition **that leads the eye through it, making the information’s structure clear, easy to assimilate, and therefore easy to use.
- In this talk you will learn what a visual hierarchy is, what composition is,  and how to use these concepts to create and evaluate web graphic designs.

## Discuss graphic design concepts that enhance usability NOT graphic design in general.
Discuss graphic design concepts NOT implementation details. Many books on the latter (see resources section). FEW on the former.
Show that graphic design is more than making things pretty, it’s crucial to quality, visually organized, usable web sites.
 Show that graphic design is based on well understood concepts that can be learned and applied to increase site usability.
 Teach a few graphic design concepts and guidelines for usability.
 Supply guidelines for evaluating graphic designs.
 Show that graphic designers should be part of any team with a UI or web site.

- Discuss **graphic design concepts NOT implementation details**. Many books on the latter (see resources section). FEW on the former.
- Show that graphic design is more than making things pretty, it’s crucial to quality, visually organized, usable web sites.
** **Show that graphic design is based on well understood concepts that can be learned and applied to increase site usability.
** **Teach a few graphic design concepts and guidelines for usability.
-  Supply guidelines for evaluating graphic designs.
** **Show that graphic designers should be part of any team with a UI or web site.

**Agenda and Goals**

## Why is this Important Now?

- In this new, graphically rich computing/programming environment, almost everyone is trying to communicate visually *with greatly varying results**. *
- Few who are making graphics have training in the visual arts and the use of graphic artists is still the exception.
- Most people are trying to imitate what they’ve seen out there on the web without knowing the concepts behind it. Its not unlike kids trying to imitate a foriegn language. It sounds close to them, but there’s little chance for communication.

## Graphic Design : Definitions

**GRAPHIC DESIGN **is the use of 2 dimensional design principles and an understanding of human visual perception to build a piece of visual communication that meets a certain goal or has a particular message.
**ENTERTAINMENT DESIGN **applies GD principles to amuse you.  That’s the only goal. High on wow content, low on informational content.
**ADVERTISING DESIGN **applies GD principles to make a product look cool and make you think you’ll be cool if you use it. High on emotional content low on informational content. ***Most people think this is what ALL graphic design is!  And that this is what they must do with their websites.***
**INFORMATIONAL DESIGN **applies GD principles to organize factual information, present its structure, assist the reader in navigating its structure and finding the information needed. It should **make the assimilation and use of the information fast, easy, obvious**. Generally not selling/persuading.
**DATA DESIGN **(ala Edward Tufte) is use of graphic design concepts to present/visualize data. Depicting data graphically, such as a plot of ocean surface tempuratures.
- These types of design represent points on a spectrum of design.

## Graphic Design Space

**Sites can vary on this scale**
**Web Pages within a site can vary on the scale.**
**Graphics within a web page can vary within this scale.**
***Know where you are aiming when you set out to design.***

**• ****more sales, persuasion **
**• ****greater emotional content**
**• ****more “feeling” oriented**
**• ****more flash/glitz**

**• ****more factual**
**• ****greater informational content**
**• ****more thinking oriented**
**• ****more organization/readability**
**• ****less glitz - more structure**

- advertising
- design

- “informational”
- design

- data design/
- visualization

- entertainment
- design

- splash page

- home page

- 1st level pages

- detail pages

- data graphic

## What if We Don’t Use graphics?

- The layout of titles, subtitles and body text is STILL visual communication.
- The vast majority of graphic design is text design: titles, subtitles, body copy. Its how you organize it that gives it style and personality.
- The layout of widgets in a UI is visual communication.
- Any arrangement of items on a page (screen) to be consumed visually is a graphic design and is subject to the same concepts and guidelines!
- All visual communication (information/ideas/emotions comsumed thru the eyes) benefits from proper graphic design.

## Graphic Design Concepts

- Will cover 4 Basic Concepts:
- Visual Hierarchy
-  creating visual structure to imply information structure.
- Grouping in Visual Hierarchies
- Modulating Visual Cues
-  mechanisms of implementing visual structure
- Composition
- guiding the eye through/around the structure

## Visual Hierarchy - What is it?

- - Human visual perception has evolved from reading the landscape.
- - There are subtle visual cues that tell the eye/mind how to build a mental model of what is seen.
- - Implicit in this is the notion of things being CLOSER or FARTHER and therefore MORE or LESS IMPORTANT.
- - In the landscape, not everything carries the same VISUAL and therefore MENTAL weight. This helps the mind organize its model and then ACT by using it.
- - If we want to build images for the eye/mind to consume, move through, use, we must learn this visual language.
- -What visual clues let us know that those wildebeasts are closer than the trees, that the ground is relatively flat, that we are not at the edge of a cliff?

## Visual Hierarchy - What is it? 

- The Wildebeasts have the highest value contrast relative to their enclosing background-they are close. The value difference being great tells us that background is some distance away.
-  The Wildebeasts overlap the trees - they are closer than the trees.
-  The trees all have roughly the same low value , they are in roughly the same plane and distant.
-  The bushes that overlap the trees and are overlapped by the wildebeasts have a slightly heavier value than the trees but less than the beasts - they are in between the 2.
-  The ground has a fairly uniform texture that varies little and there are NO dramatic contrast edges in it - it is flat and fairly uniform - there are no cliffs only small bumps as small variations in shape and value.

- lumpy ground
- (next step - careful)

- wilde beasts (food)

- if i don’t catch
- them by those
- bushes

- they’ll escape in the woods (not trees!)

- that’s a big tree

- its sunny today

- hey  - there’s an ant

## Visual Hierarchy - Visual Cues

-  The mind applies visual clues to build a mental model like this:
-  Closer = Important, Farther= Less important
-  You will do the same with your web pages!
-  Visual cues are based largely on Linear Perspective and Atmospheric Perspective.
-  In linear perspective:
-  things closer overlap things distant
-  things closer appear larger than the same things distant
-  parallel lines converge in the distance
-  In atmospheric perspective:
-  things closer are brighter/more intense in color
-  things closer have more value and color contrast
-  things closer have warmer colors
-  things close have hard edges in crisp focus, things in distance are fuzzy.
- The eye is attracted to the point of highest contrast. This is THE MOST IMPORTANT thing in the scene. It is usually close. From there the eye wanders to assimilate the rest of the scene.
-  Use these rules to analyze a web page.

## Visual Hierachy - Web Example 1

## Visual Hierachy - Web Example 1 notes.

**The visual hierachy is immediately apparent. **Yet it is built on the same cues that we  use to understand the landscape.
**The point of highest contrast, the drop cap, **immediately attracts the eye - it has visual and mental importance!
- The **variation in size and weight of the subtitles **cause relative value and contrast to cue the viewer to their relative importance.
- The **relative size and overlapping of the body subsections **cue the viewer to the “distance” i.e. relative importance.
**An outline - is the simplest visual hierarchy. **It’s very effective.
- When in doubt, or when information is complex, build an outline.
- Text masses align vertically and give your eye implied lines to follow.
- Text masses become grey “blocks” until the eye is ready to “enter” into them. Once entered bullets and internal indentions cue the viewer to more structure.
- Most informational web designs are enhanced outlines.

## Visual Hierachy - Web Example 2

- site credits    contact: webmaster  copyrightnotice

## Visual Hierachy - Web Example 2 - notes.

**A more sophistcated visual hierarchy. **
- Note that **NOT everything hits you at once visually, **there is variation in visual weight.
**What grabs your first? **What moves forward (important) ? What moves back? What whispers? *Why?*
- Note how the same visual cues from the landscape are used to organize this page.
- visual weight
- relative size in visual field,
- contrast, intensity (value and color),
- repetition of shapes
- Also note how the **grouping **of elements helps to define its structure
- Good visual hierarchies make the structure obvious, easy to use.
**The faster a user can assimilate a page, the sooner s/he can act, the sooner s/he get their data = user satisfaction!**

- MacroMedia
- (title - big - intense )

- major options group

- web credits,  copy rights, small print (whisper)

- major options

- options descriptions

- news
- section

- news items

- item descriptions

- shock
- wave

- language
- choice

## Grouping in Visual Hierarchies

-  The mind always seeks to simplify the visual field, its mental model and its mental load.
-  Due to human short term memory constraints of 7+-2 things it must do this. If it cannot it gets confused or overwhelmed.
-  When building a visual hierarchy the mind uses grouping to ignore details and elements within a group.
-  Grouping occurs when objects have similarities in:
**shape, color, size, location, proximity, containment in other shapes,  organized along lines (real and implied), touching, overlapping, repetition of shape, pattern, texture.**

## Grouping in Visual Hierarchies

-  The outline’s chief attribute is that it has **strong, clear grouping**.
-  This fact allows the mind to build a mental model **ignoring the details **by having a **hierarchy of groups**.
-  Once a particular group becomes interesting, the eye/mind “enters” that group and builds a new visual hierarchy model within it.
-  All this allows the mind to manage short term memory load (7+-2 things) which facilitates quick decisions and action.
-  Note: pages that become overwhelming usually have too many stray, ungrouped elements or too many groups.
-  Proximity, alignment of indents, weight of subheads cue the grouping here.

## Grouping in Visual Hierarchies

**Grouping **in Visual Hierarchies

## Grouping in Visual Hierarchies - notes

- This elegant example ***employs many of the above ques ***to create 4 efficient groups out of the **26 options on this page!**
- If I asked you to find the 4Runner details you could do it quickly. **That’s usable design.**
- Grouping along with relative vertical and horizontal positioning provides a **clear visual hierarchy here that is quickly assimilated.**
- Use grouping to simplify and order complex pages/information into easy to understand visual hierarchies.
- The ques used to build these groups:
- top menu: repeating pattern of font face, size, value, in line and proximity.
- vehicle menu: containment, repeating pattern of font face, size
- current models: containment, repeating pattern of shape/size, proximity, repeating pattern of font face, size, value

## Ineffective Grouping Example

**Ineffective Grouping **Example

## Ineffective Grouping Example - notes.

- • **There are over 50 options  in 12 groups on this page and its cut off! When in doubt simplify! **This page also has 2 loop  animations!
- • How quickly can you find the Andover News Column?
- • There is some grouping but not much indication of the purpose of the groups. It could be worse with NO grouping so this is not all bad.
- • The 7+- 2 rule still applies at the top level and within groups!
- • Do you get a clear sense of **what’s more important, what’s less important?**
- 	• everything has a nearly equal visual weight
- • How quickly can you find what you need?
- • Time on task - is a key usabilty metric. This design does nothing to shorten it.
- • Dave wanted to “get it all on the home page” fearing he’d lose people if they didn’t find what they need right off. He’ll lose them anyway with this design.
- • Dave’s a programmer, not a visual designer.

## Accidental Grouping Example

- Beware of accidentally creating groups that confuse you viewers.
- I don’t know about you but I keep trying to read the word in the **circles which are the strongest elements **on the page. They are all of the same shape, weight, in line and close proximity - 4 clues which makes **my mind says GROUP! THIS IS A GROUP.**
- So I group. But  then I think, “ hey,  AMPSRE’s, not a word”!  I’m confused and wasting time. I’m fighting a subliminal cue/tendency that’s wrong!
- Then I look at the subtitles below ... some time later ...
- I realize the letters in circles are the first initial of the subtitles. Utterly meaningless and  useless, and wasting my time.
- Compare this to the **effective use of circles in Macromedia page **to create groups.

## Visual Weight: Modulating Visual Cues

- The key to building a visual hierarchy is to **make some things stand out, others recede**.  Close = Important, Distant = Less Important.
***How? ***Modulate visual weight and visual cues.
**1**: Don’t have everything on page at same intensity.
**2 **: What’s most important? - give it max intensity/weight.
**3 : **What groups can you build? What cues will you use to ensure strong grouping.
**4: **Decide the order of importance the groups - modulate intensity to create visual hierarchy of GROUPs. Modulate cues, maybe multiple cues to strengthen grouping.
**5: **Within each group create a visual hierarchy that may contain other groups.
**6: **Take a stab at it. Evaluate it. Adjust. Reevaluate.
- What moves forward (important) - what moves back (less important).

## Example 1: Modulation Visual Cues

## Example 1: Modulating Visual Cues notes

- This is the state of most web pages - all their colored graphics are at **full intensity or equal visual weight - **creating a flat hierarchy.
- There is NO MOST IMPORTANT item(s). **They all hit you at once.**
- Its like hitting a wall. The viewers eye doesn’t know where to go.
- There are 16 or more elements of the same visual weight here. My mind tries to group, to simplify but can’t
- Short term memory is overloaded.
- I feel overwhelmed a bit, scattered, unfocused. That’s your clue that the design is not good.
- There is no guidance. I scramble around looking for cues to structure.
- It finds some (but not much) comfort in the grouping of the menu items acrossed the bottom.
**It’s  hard to penetrate, to read.**
- This page is not terrible, but it could be better.
-  It’s not very usable ( it doesn’t help minimize the time to assimilate and time to act, time to complete your task).

## Example 2: Modulating Visual Cues

## Example 2: Modulating Visual Cues notes

- Clearly better visual hierarchy through better modulation of visual cues and good grouping also effected by use of visual cues.
- This is a very complex page carrying a lot of information (28 links) but its organized such that its not too overwhelming.
- Notice how not everything hits you at once. You don’t get the WALL feeling. You don’t get too overwhelmed, you can break it done.
- Cues used for hierarchy:
- hot yellow banners/zones marked off by rectangle hairlines and menu bars.
- vertical and horizontal proximity in groups.
- font size, color and value.
- There are 7 major groups and 2-5 minor groups within the majors with 1-7 elements per minor group.
- Cues for grouping:
- all of the hierarchy ques plus proximity, touching, encapsulation

## Composition: Moving through the Hierarchy

## Composition:  What is it?

- Composition is concerned with **where you “enter” a page and how you move through it**.
- It’s also concerned with **how you unify the page **to become a single whole rather than a collections of unrelated/unintegrated elements.
- It turns out that your eye uses many of the same cues to do this.
**Ask yourself**: Where does your eye enter the page?
- From there how does it move through the page?
- Your job as designer is to **control/guide the eye through the page using visual sign posts**, the basis of composition**.**
-  Keep the eye moving around the page so it will pass by all the important information in the visual hierarchy.
- Don’t “orphan” any important elements of your design.
- Composition and visual hierarchy overlap and accomodate each other.

## Composition: Visual Sign Posts/Cues

- Eye  follows line and gesture (both real and implied) and rests on masses, temporarily before moving on.
- Eye also moves around edges of shapes including the frame of the page/browser.
- Human faces and gestures in graphics play a big part in overall compositional flow. **Be sure they point into not off the page. **
- Don’t leave any dead ends. Pick the viewer up from all possible points. Move them around the page to discover and enter the various levels of your visual hierarchy.

## Composition: Integration

** ****To make a page appear and feel like a whole, not a collection of parts is the goal of visual integration. **
-  It is an aspect of composition.
-  By repeating colors, shapes, lines, patterns throughout a page, it becomes integrated.
- That is because the eye will follow repeated colors, shapes, lines, patterns through a page.
**In this design: **The lines direct your eye from group to group as does the similar weighted font color and face.
-  Within groups there are more hierarchies set up by alignments, patterns of color, shape and font.
-  The page is further unified by using the blue violet color from the header in the hairlines and footer as well as that yellow spec.

## Composition: Another Nice Example

## Composition: How to use it.

- A good strategy is to nail down the page entry point (make it the point of highest contrast) and then pick the viewer up from there and move them along a line.
- Add lesser entry points along that line (masses that the eye will rest on) that que the viewer to your main topics.
- More sophisticated compositions have multiple paths through the page that pick up the viewer at all possible locations and keeps them moving around, but doesn’t leave them at a dead end.
- The more info you try to pack in the more crucial your composition becomes.
- Remember:
- The eye tends to enter the page at the highest point of contrast.
- We are trained (by reading) to enter from upper left by default.
- The eye follows lines, gesture, movement, (actual or implied)
- The eye rests (temporarily) on masses, blobs, shapes (words and paragraphs are shapes too).

## Composition: Avoid the Page Helmet

- There are many pages out there with COOL art and banners. But the COOL and the graphic design stops there. They become page HELMETS. And that’s bad design.
- The page helmet proves that you haven’t designed for your content but simply want to look cool. IT DOES NOT ENHANCE USABILITY.
- To avoid the Page Helmet design do this...
- design for your content. this is more work but results in graphic designs that truly present the page not just your “call out”.
- don’t have a graphics person design a page banner and exit the design process. Have them design subtitles and navigation that helps integrate the page with the banner.
- pull elements out of the banner and work them through the page.
- These can be colors, shapes, icons, fonts used in subtitles, gestures, etc

## Example : The Helmet

- - Very VERY cool image - gorgeous!  but what’s wrong with it?
- - Yep - its a major league helmet. It has no visual relationship to the page.
- -How to fix it? Pull some of that nice blue into the page. Perhaps use that cool title font for major subtitles.  Or add some planets floating around in the text.
- -Note that although this is a black/white helment there is enough “gutter” to make the text readable without too much pain.
- -This looks like a case of having the artist make a template and split.

## Examples : from www.earth.nasa.gov/missions/

- -Too much contrast between banner/nav and content area. Remember your eye drawn by the point or division of highest contrast. Reading this is painful. Its like standing in the dark with a flashlight in one eye.
- -Also a helmet design. There is no integration with the page.

## Examples

- -This is pretty nice. A little more whitespace between banner graphics and title and subtitles and its would be quite good.
- - Or better yet would be to integrate the banner graphics and title into one but maintain the rich blue.
- -The gradient filled horozontal lines however are too powerful and lead nowhere. And the heavy end is out there on the right, may be better to swap ends or shorten them.

## Examples

- -Visually what is the most important thing on this page after the storm cloud image? the <HR>s and the logos.
- -What is really most important here? The title and the navigation.
- -The title has an image fill that makes it hard to read due to lowered contrast with the background in some areas.
- -The nav has 3d extruded lettering which in many places is hard to read as the counters are filled in.
- -The <hr> are unnessary, Logos should  removed or be minimized.

## Examples

- - Nice banner, and they picked up the color in the side bar...
- -Now if they just pick up another color from the banner like the deeper blue and put it in the subtitles they’d have a nicely integrated page.
- -Another nice thing they did was to on HIGHLIGHT the options that are working while the site is under construction.
- -Also nice how they separated the “housekeeping links” from the content links.
- -Basic outline style for info organization is fine.

## Examples

- - There’s no visual indiction of structure or focus. Elements are scattered almost randomly for the sake of having graphics.
- -I’m sure the text is the most important thing here but its given little emphasis.
- -The navigation is WAY down the page not in the first 400 vertical pixels.

## Examples

- - Very cool image but what’s wrong with it?
- - Yes, text is unreadable and sacrificed to the cool glow effect.
- -How to fix it? Since the glow is very light in value, by giving the text a black fill you would increase contrast and make it more readable.
- -’course you could always lose the glow.

## Examples   http://jwocky.gsfc.nasa.gov/

- - Title is overpowering because it has too many visual cues in its court:
- size, highly saturated color, high value and color contrast, lots of warm color, page prominence, contained in a white box.
- - Turn down a few of these factors or easiest would be to reduce the size.
- -The remainder of the page is unrelated to the title graphic.
- - Lacks good hierarchy and grouping.

## Examples

- - Nice layout
- - Chartruse is a tad much for the body text but works in the title and around the nav at bottom. Could serve to unify page if removed from body text.
- - Fairly good grouping although groups are not identified with scannable subtitles.
- - The stylish <hr> works here.
- - TRMM could be more prominant
- - to many ungrouped links.

## Examples    http://essp.gsfc.nasa.gov/picasso-cena/index2.html

- - Good basic outline approach.
- - Could be improved by increasing CONTAST between titles and subtitles to make them easier to scan.
- -This could be achieved by any combination of the following:
- add more whitespace. This will create stronger grouping and make scanning easier.
- -Use a different color or value for the major and minor subtitles so the eye doesn’t get confused as it now does. _x0001_Also makes grouping stronger.
- -Lose the grey.

## Examples http://poes2.gsfc.nasa.gov/

- - This image is a monster, its twice this width.
- -It weighs in at 245KB that’s a 1/4 meg folks.
- - To fix, see if you can satisfy management with a tad smaller image ;-)
- - compress dramatically in jpeg format.
- - crop where possible to say 800 pix wide max although 600 should do.
- - Use the Lowsrc trick to throw up just your menu quickly in  a highly compressed gif with NO STARRY background.
- - Be sure you don’t have home users on 28.8 modems.

## Examples http://topex-www.jpl.nasa.gov/

- -Too much intensity all at same level. Overpowering.
- -the important information, the subtitles and text, are LOST under the LOUD noise of the contrasty images.
- -the table borders are meaningless.
- -To Fix, turn down the saturation in these images using photoshops Hue/Saturation adjustment.
- -Also could feather edges.
- -Make subtitles large and more intense visually.
- -Lose the table borders.
- -Make the TOPEX/POSEIDON title MUCH large and span the page.

## Examples http://topex-www.jpl.nasa.gov/elnino/elnino.html

- -Borders on table around title useless. If you want to emphasize the title make it bigger, contrastier, more colorful or a cool font.
- -Border around footer nav is not only useless but makes it harder to read.
- -Don’t make whole sentences links. It does not facilitate scanning links which is the most common way users assimilate a page and make decisions.
- See Jacob Nielsons article on useit.com called  “How Users Read On the Web”.
- -If that picture is important, tell use about it.

## Examples http://seawifs.gsfc.nasa.gov/SEAWIFS/

- -Page wide text is brutal to read. You should put your text in tables that are no more than 600 pixels wide and center them in the browser window. As line length increases, users must concentrate much harder to find the beginning of the next line. Its tiring, straining.
- -That horozontal rule is unnecessary - what does it tell you that you don’t already know?

## Examples http://www.ghcc.msfc.nasa.gov/sparcle/what_sparcle.html

- -Its a neat effect but the high contrast edges draw the eye’s peripheral vision when one is trying to read the text. Note also that all the visual emphasis is on the edges not the body where it should be.
- - Either eliminate the effect, lower its contrast or increase the “gutter between the body text and the cool edge.

## Examples http://eo1.gsfc.nasa.gov

- - Page fully integrated with banner graphics
- - banner carries elements that move viewer through page elements.
- - Subtitle colors and pattern move viewer down the page.
- - All important information is available in 1st 400 vertical pixels.
- - Focus is on the content
- - 4 types of nav supported:
- site nav, subsite nav, page nav, related links nav.

## Examples http://this.gsfc.nasa.gov/sabia/isc2/flightSoftware.cfm

- - Page fully integrated
- - weight and high contrast and similar font of subtitles move viewer through page elements.
- - hairlines, unlike <hr>s move the viewer from one group to the next and complete a circle with the banner.
- - Subtitle colors and pattern of similar font face, and repitition of shape through group internals and serve to strengthen the groups.
- - All important information is available in 1st 400 vertical pixels or at least an indication that scrolling is necessary and will get you more.

## Examples http://wags.gsfc.nasa.gov

- Close to helmet status but colors are pulled through to save it.

## Design Process

- Given some number of graphics, titles and text, your task is to understand the structure of the information, organize information in a visual hierarchy, and guide the eye through it. You should attempt to do this by adding the minimum number of extraneous elements beyond the givens.

-  PROCESS:
- Account for required elements on page
-  Decide whats most important, 2nd 3rd... the information hierarchy.
-  Build a hierarchy tree of the elementS -
- decide their relative standing
- design from big masses to small, high level to low level.
-  Can any items be combined to simplify design?
-  What groupings can you create? Build hierarchy within groups.
-  Build first cut page, modulate graphical cues to reflect info hierarchy.
-  What graphical devices (compositional/hierarchical) will you add - do they serve a purpose? or are they “just cuz I can’s”?

## Design Process 2

- Analyze the design with what you’ve learned today and with the questions/concepts in the Analysis Section.  Where’s the design working, not working? Where is your eye going? Why? Does the design “feel” right - that is, do you get the feeling of order and understanding or the information structure?  Where does it seem rough, chaotic? Why?
-  Adjust cues (compositional/hierarchical) ,  add/delete/ modulate, eliminate/edit.
-  Iterate. Design is 20% creation and 80% revision.
-  Ask others often, usability test final versions.
-  You start by adding and adjusting. But you should end by removing elements until there is nothing left to remove without alterning the core structure and flow of the page.
-  Even graphic designers start with weak designs, the differences is they have an understanding of why its bad and what to change. With effort and many many revisions and pondering you can too.

## Analyze your Graphic Designs

- What hits me first when I look at this page, when I squint?
- What is the most important thing on the page? What does my visual hierarchy, as it now stands, convey the most important things first?
- Does everything (or too many things) on the page hit me all at once? Or does the page reveal itself in time, with a few passes of the eye?
***Adjust visual cues to match visual hierarchy to information hierarchy****.*
- It takes some time to develop the skill to percieve this - keep trying.
-  look at everything, squint!- magazines, tv ads, billboards, movies. Figure out how your eye is being manipulated.
- Are groupings used effectively to help simplify the # of major elements at each level?
- Do the objects in my intended groupings actually group visually?
***Adjust visual cues to cause visual grouping.***
- by similar weight, color, size, shape, font, proximity, touching, overlapping etc.

## More Analysis Questions

- Where does my eye ENTER the page? Why?
- Where does it go from there?
- Do I end up being “pushed” off the page? or into a corner or dead end?
- Or does my compositional flow guide me through the visual hierarchy and around the page for repeated passes?
- be aware of the lines and gestures within graphics that guide the eye subliminally. The eye follows lines, rests on masses.
- Be aware of edges of text alignments the create implied lines to follow.
- Be aware of breaking those lines by misaligning text and headings - either by accident or on purpose.
- Adjust your composition, add/remove visual signposts to guide the eye as desired.
- Does the design “feel” right - that is, do you get the feeling of order and understanding or the information structure when you look at it?
- Ask others to give you feedback, do they see/feel what you do?

## More Analysis Questions

- Is this graphic serving a purpose or is it there just because I can do it?
- does it work in the visual hierarchy or is it window dressing?
- if I remove it, will it change the meaning or flow of the page?
- Can this graphic be smaller/simpler and still do the same job?
- if I simplify it, will it change the meaning or flow of the page?
- Can I get this graphic to do more than one thing? carry more info? Work in both the hierarchy and as a compositional element?
- Do I find myself trying to make elements bolder, louder to stand out more with each revision?
- Perhaps I should work at the other end of the spectrum, find the lesser important items and deemphasize them. This will have the same effect.

## Things to Include in your Designs

- When in doubt, build an outline!
- Use entry points, vertical and horizontal whitespace to reveal info structure.
- Use Entry Point Graphics, initial caps, bolded/colored titles, contrasting font faces, sizes, styles, etc. to cue visually that the element is important.
- Be consistent at the page level, group level, subgroup level.
- Use whitespace liberally
- Grabs attention,  ques the viewer that one thing has ended and the NEXT is coming.
-  Don’t fill every cranny, as important as silence in music!
- Decide whats Most Important? What is the focus, primary, secondary visually guide user to/away first things first.
- Use Grouping for similar elements whenever possible 7+-2:
- build visual hierarchies within groups.
- minimize # elements at each level- can it be said with less?

## Things to Include in your Designs

- Create graphic themes and families. Reuse graphics throughout
- this unifies your site visually. Helps user assimilate pages.
- Create html templates for your site using the above.
- create templates with various content widths - you’ll need them.
- consistency/predictablility in placement of nav and info.
- Beware of the helmet template.
- After stuffing templates with content - ***design the content!***
- IE adjust the design to integrate the content with the template design.
- don’t let a template become a “helment” the content wears.
- Read Jakob Nielson’s articles on Writing and Reading on the Web at http://www.useit.com
- design for scannabiltiy
- minimize writing - brevity - conclusions to the top - details to bottom.

## Things to Include in your Designs

- Usable graphics are fast loading which depends on your audiences technology. Know your audience, your goals, then design.
- Intranet Users (with mandated browser types/versions, fast connections)
- can go heavier on the graphics in warranted, can use plugins, special browser features
- NASA and corporate users (w/T1 or better connections)
- can go heavier on the graphics in warranted but still may deal with level 3 browsers.
- Home users with 28.8
- 30 KBytes total page size for average downloads of < 10 seconds. No plugins, no tricks.
- Read Nielson’s article on response times at useit.com.
- Use gif and jpeg properly
- gif for line art, jpeg for continous tone art like photos.
- gif for flat color, jpeg for gradient fills
- gif for art with lots of hard edges, jpeg for art with soft transitions/fades
- gif for graphic text titles, jpeg for image flourishes
- Learn how to compress graphics properly- see siegel/wienman - use Fireworks or Adobe Image ready for web production.

## Things to Include in your Designs

- For large images, banners and splash pages, use the lowsrc attribute of the <img> tag. Make highly compressed and simplified lowsrc images that load in less than 5 seconds.
- Reuse images that are already in the cache - like banners and buttons.
- Use plenty of white space to strengthen existing groupings
- Make designs “chunky” but relate chunks in composition
- What shows up in the first Screen full of this page - is it enough info to make a decision on how to procede?
- What MUST be in the first screen full?
- If I  must scroll - is it obvious?
- What graphical device can I use to get the viewer to look beyond the first screen full - to scroll down. Add anchor links or a a composition device that pulls the viewer down the page.

## Things to Include in your Designs

- Write for the Web:
- Make your titles, subtitles and links meaningful to assist scanning
- move keywords to front of phrase to assist scanning
- Mission Our Org is better than Our Org Mission.
- write one line summarys for links, write executive summaries for pages.
- keep all writing brief, half of what you’d normally write
- From Jacob Nielson’s article on “Writing for the Web” at useit.com
- Use 600 pixel tables or less for pages with lots of body copy.
- line lengths should be 10-15 words per line for easy reading.
- test at different font sizes not just your prefered font size.
- Arrange long lists of links/buttons in Alphabetical order
- this assists browsing and scanning.
- you should also note this under to your users who may not notice.
- Use index.htm or default.htm for your main page in each directory.
- this makes URLs hackable (makes site more useable)
- this stops people from listing your dirs on Unix servers

## Testing your Designs

- Test with images off - especially if you have home users/blind users.
- did you use alt tags? Is it still usable?
- Test on older browsers, at least IE3 and NS3 which are in wide use and will be for years.
- Test in 256 color mode on PC and Mac and Unix.
- Test on different platforms.
- Mac and PCs display colors very differently, PCs are darker. You may lose some subtleties.
- Resize your browser from tiny to full screen.
- how does your design look? is it trashed as the browser reflows it?
- When small is there enough in the 1st 300 pixels or so to clue the user to most of whats on that page?
- Use the browsers abiltiy (IE3 and NS4 and beyond) to quickly change font size. Many vision impaired folks read at large fonts sizes.
- Test designs at various font sizes.
- Look for misalignments, overflows, odd reflows of text, unreadability.

## Accessibility Issues

- Use ALT tags on ALL images.
- you can have up to 1024 characters, use them to tell your blind users what the image is and if they “click” it where they go.
- Test with images off - especially if you have home users/blind users.
- Could someone navigate your site if the read only your alt tags and html text? That’s how blind users ***HEAR***  your site.
- Test NS1.x or Lynx to see how blind users will ***HEAR*** your serialized table design.
- Create a text only version if you site has complex table as a layout infrastructure.
- Put the text only link as the FIRST thing on the page, upper left.
- Reccommend to your blind users that they get the JAWS screen reader which can handle tables better than most screen readers.
- Use ALT tags in image maps.
- See www.webabel.com for more info.

## Things to Avoid in your Designs

- Designs with all your graphics and text at full intensity. Or too many ungrouped elements (5+) at the same intensity - overwhelming.
*Modulate the visual weight as per the visual hierarchy.*
- Accidental groupings
-  making things group that have no logical relationship by same color, or proximity, or weight.
- Misguides the user.
- Haphazard changes/modulations of visual cues
- misguides the viewer
- confuses understanding of the information hierarchy.
- the perceptual system and understanding of information structure.
- Accidentally guiding the viewer off the page or to minor items, into a dead end or corner - away from focus, or just confusing them.

## More Things to Avoid

- Horizontal Rules are chart junk :
- eye follows lines, horo rules are road block lines vertically that lead no where horizontally. Purpose usually is to signal the end of a section.
- use vertical whitespace and entry points  instead, its cleaner, its more usable.
- Borders on Tables are usually chart junk:
- borders usually are turned on in hopes of “really” structuring the info within. If text/images are cleanly aligned left or right there’s no need.
- redundant emphasis? the border is to emphasize - and the 3d border?
- doesn’t the implied lines of the justified text and graphic give enough order?
- try turning borders off - see how it looks
- try a very light cell background color
- try using cell spacing of 4 pixels and background color
- you can do an amazing amount bg colors- and NO DOWNLOAD time!

## More Things to Avoid 

- Background images should have a dramatically different scale than text/elements over them - IE effective contrast in size/shape/value.
- Foreground images must “separate” from the backgrounds - need good color and value contrast. Use subtle glows and drop shadows can help separate from background.
- Best NOT to use background images/patterns on info-heavy pages.
- Best to minimize graphics on info heavy pages and pages likely to be printed.
- Use Center Tag - AVOID - instead align text and links left or right - use the implied line created by these alignments  in your compositions.
- Symmetrical compositions are generally boring and don’t guide the eye except down the centerline of the page. Not very useful.
- Centered text is difficult to read, left edge is destroyed.

## More Things to Avoid 

- Images / Graphics that are Way to big - bigger than needed
***Ask *** can it be smaller and still communicate?
- Gratuitous Elements - “cuz I can” elements
- currently mouseovers, and animations are the rage,
- was drop shadows and embossing, and noisy background images
*Ask yourself, does it work in my visual hierarhy/composition or did I just stick it in cuz I can do it?  Cuz I have it?*
- Either make it work in the design or nix it.
- Loop Animation - Gratuitous Animation
- Movement is HIGHEST CONTRAST therefore the MOST attention grabbing element. Use it right its great, wrong its terrible.
- Eye follows movement so use it to guide eye TO something then stop it.
- Lose the loop animationss - drives peripheral vision crazy - makes reading/concentration much harder.
***Never***  use loop animation on content heavy pages with lots of reading.

## Summary

- The best graphic designs don’t even let you know they are there - they guide you at a subconscious level - the experience is of clarity, simplicity,  ease of use and understanding.
- If a page confuses or frustrates you, its probably not a good design.
- An effective graphic design is a combination of a strong** visual hierarchy **unified in a **composition **that leads the eye through it, making the information’s structure clear, easy to assimilate, and therefore easy to use
- We haven’t talked about technical issues in graphics, html, javascript, css, tools, style, character, expression. The subtleties are many. The skills take time/effort to develop.
- Good graphic design takes TIME, you must budget for it!
**Advertisement: **Use our Web Services Group (585)
- Contact** Steve Sabia **301 286-4551 or **Ben Keith** 301 286-5753
- http://wags.gsfc.nasa.gov

## Resources

- Books: Technical
- Coloring Web Graphics **Lynda Wienmann**
- Deconstructing Web Graphics **Lynda Wienmann**
- Creative HTML **Lynda Wienmann**
- Creating Killer Web Sites **David Siegel**
- Books: Design
- Envisioning Information **Edward Tufte**
- Graphic Design Cookbook
- Sites:
- useit.com Jakob Neilson
- www.highfive.com David Siegel
- www.lynda.com Lynda Wienmanns
- www.killersites.com David Siegel
- Art Classes
-  2d design + 2d design with color are very good courses for anyone who is creating graphics or web pages.