e-Permits 101

e-Permits 101

Design Planning Class

April 13, 2000 9:00 a.m. to Noon

Making the Website "Sizzle"

Marla Meredith, Carta, Inc. Creative Director

Making the Website "Sizzle"
Interaction Design Basics

Users look in the middle, then left, then at the top of the screen
Users scan and skim (use bullets and headings to assist)
Use of color can effectively manage a user’s attention, but blinking distracts

Good Web Design

Enhances a Web site’s usability (use of color, spacing, etc.)
Organizes information in a standard format throughout the site (builds user’s trust that he/she is still on the same site)
Focuses on the users (who they are, why they are at the site)
Provides for minimal learning curve with maximum efficiency

Before Beginning the Visual Design Process

The following need to be prepared before design is started:

Site Map
User Path
Storyboards
Creative Brief (discusses goals, user profiles, desired user response)

Monitor/Browser Discussion

With 640 x 480 (640 pixels wide by 480 pixels high), users can view 557 x 270. This has been the standard. As larger screens become more common, the standard is moving towards 800 x 600.

When considering larger (1024 x 768) monitors, a Website can be designed so that it grows to the right. However, control over text formatting is lost as it grows and expands. For this reason, it may be wise to keep the page size static and leave a white space at the right on a large screen.

Page Organization

A page was shown that had a great many elements, more than the 7 plus or minus 2 Rule would permit. Also, it had a plain color, dark background with very little white space. Each of the many elements was of about the same weight. The user’s eye does not know where to focus.

Another page was shown in which a background color surrounded the pictures and left-hand navigational bar. The user’s eye was immediately focused on the black-on-white headline due to its large font. The user’s eye then naturally continued to followed the white box to the black-on-white text below the headline in the center of the page.

Design Considerations

Scalability. Consider how the site will grow in the future. Will additional links be added? If so, provide ample space and consider their placement on a page. The left-hand navigational bar has room for more flexibility for additions later than a navigational bar at the top or bottom of the page. Consider this while in early stages of design so that site will not have to be redesigned again after some growth of the site.

Cognitive considerations. A page was shown that had a curved title and a curved navigational bar at the top. The curves are referred to as "organic elements". The curves tend to soften the site and can differentiate it from other sites.

The page also demonstrated the use of a global navigation bar on the left side. When a user clicks on one of the global items in the left sidebar, the screen that is presented has as its title, the label that the user selected from the sidebar. The organic navigational bar changes to be the main bar for the new title bar. This same change takes place on each page that represents one of the left sidebar items on the original page.

Another page tracked the steps of a process, showing how many total steps there were, which had been completed, and which one the user was addressing.

Color. There are 216 "browser-safe" colors. A Windows PC displays colors darker than does a "Mac".

Do not rely solely on color to guide users. Fifteen percent of the population is color deficient. Therefore, use labeling and other cues.

Print out each page in black and white to better understand what those with a color deficiency may see on your colored page. A black and white printout will show where there are contrasts and where more contrast is needed.

The effects of color and the color wheel were discussed. (Refer to the last two slides of the 4/12/00 presentation.) Colors opposite each other on the color wheel should not be used next to each other but can be used effectively if separated. Colors adjacent to each other on the wheel may be used next to each other.

Blue is the most commonly used color on the Web and there are more shades of blue than of any other color.

White is the best background color for text because it provides the greatest contrast. Light tans, grays, yellows and creams also are good background colors.

White text on a black or other dark background is OK for navigational bars but not in large blocks of text. Also, it prints out as white on white.

Text on a light colored background reduces eyestrain because there is less contrast than on white. Also, narrow text bars reduce eye fatigue.

Visual Cues. Use visual cues such as highlighting the number of the step the user is addressing and graying out those that have been completed. Be sure the cues are functional rather than merely decorative. If using icons, they should face into the page to draw the reader’s eye into the page rather than to the outside.

Page Layout. Condense text columns to 12-15 words. Make them fixed width. Use flush fight sparingly, definitely not with large blocks of text.

Typography. Letter spacing/kerning can cause problems when using a font greater than 16 pt.

All capital letters are difficult to read in long words. Readers read by the shape of a word. Using all capitals decreases reading speed.

In graphic text, use "curly quotes" rather than "hash" or "smart quotes".

If using PhotoShop and the text will be 8 pt. or less, turn anti-aliasing type "off". It often gets fuzzy. Anti-aliasing substitutes colors between the background and the text color to remove the "jaggies" or jagged edges of a curve (i.e. on a "C" or "B") or a diagonal line (i.e. on an "M" or "W").

Preparing Images. Adhere to the 55K Rule, that states that all graphics on a page should total no more than 55 K. This helps to speed the downloading of a page.

Use Graphics Interface Format ("gif") image with solid colors, solid images, logos and flat color areas. Gif compresses as it goes across the image. It counts one color one time. Also, use gif to make a transparency. Suggestion: use PhotoShop to edit.

Use Joint Photographic Experts Group ("jpeg") images with photographs. Note: some image may be lost if image is made in PhotoShop and saved in jpeg.

PhotoShop shows the original and three alternates. It shows how many bytes are required by a gif image and a jpeg image. It also shows how many seconds each image type requires for downloading.

When using a transparency, consider the background on which it’s to appear. If cutting an image, know what color it’s ultimately to sit on. Make the background of the image to be cut the same color as that it’s ultimately to sit on. In this way, it carries the anti-aliasing with it. Consider, for example, that an image is ultimately to sit on a blue background. If it’s cut out of a white background, it will carry a white edge; but if it’s cut out of a blue that’s the same color blue as that it’s to sit on, there will be no discolored edge.

Carta uses Illustrator to develop content because it’s a fast tool to try different ideas. Then, they bring it into PhotoShop to tighten it up.

Design Resources

Magazines

Communication Arts at:

http://www.commarts.com

Adobe Magazine at:

http://www.adobemag.com/

Books

Designing Web Graphics by Lynda Weinman at:

http://www.lynda.com

Creating Killer Web Sites by Daniel Siegel at:

http://www.killersites.com

Applying Design Principles to Parks’ Boat Moorage Permit Site

A Design Criteria Matrix was discussed. The items in the left column may be changed to include whatever criteria need to be measured.

The following recommendations were made for Washington agencies’ Websites:

Place the Access Washington logo (that includes a return to the Access Washington home page) at the top left of the page to show the site’s association with Access Washington.
If a Permit Center Website is developed for the state rather than individual agency sites, it, too, should be consistent with Access Washington. It should have its content in the center with a navigational bar on the left that is similar to that of Access Washington.

The class made additional suggestions for improving the Parks’ Boat Moorage Permit site.

The right panel includes too many "Click here" links. Words of value could be added that include the link without the repetition.
All the icons should face into the page rather than outside.
To achieve a more common look and feel with Access Washington, the Access Washington logo should appear in the upper left corner and the left navigation bar should be more similar to that of Access Washington.

Class Request for Standards

The class participants expressed a significant interest in having an Access Washington common look and feel across all agency sites within Access Washington. The class asked the presenters to identify the elements that are key to providing a common look and feel to the user.

The presenters indicated that the amount of screen real estate needed to provide a common look and feel is only a small percentage. The navigation elements are the key items to standardize to give a common look and feel, not the content. For example, placing the Access Washington logo in the upper left that includes a return to the Access Washington home page also would provide a common look and feel. It also would establish user trust that they still are within the same general site and easily can return to a known page.

Common look and feel guidelines are available online at: http://dis.wa.gov/e-gov/architecture/index.htm

Access Washington styleguides are available online at: access.wa.gov/e-gov/architecture/styleguides.