Tuesday, February 27, 2007

Week 8 web design critique: CDC.gov




Design features of CDC
The website of the Centers for Disease Control is designed to convey a minimum of emotion and a maximum emphasis on objective factual information. The screen grab above from February 27, 2007 is a simple layout.

Four column grid
The top of the page is a small horizontal band of black with white lettering covering site information, such as an about, an A-Z site index, and contact information, all flush left. The next horizontal band is much larger, and is the page title, "Centers for Disease Control" in large typeface, the name of the federal department deemphasized in smaller type, with a search box and a link to a Spanish version of the page. This section of the page is entirely white letters on blue background.
Below the top, the page design is four-column, a smaller column on the left (about 1/4 of the page width) entirely text based in the English-language version, with sub heads and multiple nested links. The left column is entirely blue letters on a tan background but with different levels of contrast -- the subheaders distinguished by a darker value of the background hue. The left column runs from top to bottom between the page header and footer information.


On the right are three smaller columns, each headed by a photograph. The links below the pictures are the same font as the page title above, but this time blue letters on a white background. Below this, the right 75% of the page becomes a centered 50% of links with a short description a smaller point type, the right 25% (balancing the left column) consists of a photo, news feeds, and schedules. The left column requires little scrolling, ending just below the monitor image, while the right side of the page disappears half a screen below the monitor bottom.
The very bottom of the page is a horizontal bar, again identifying the sponsoring agency, with blue type on a light blue background. The cross platform Usa.gov logo appears at the bottom in red, white and blue, copying the common themed logo of all US Government web pages.

The CDC website is designed to convey a minimum of emotion and a maximum of information. CDC is a scientific agency, devoted to study and dissemination of information. The page is very informative. There is little white space, though the left flush convention of each column of the page does leave some space on the right side of each column. There is little clutter, noise, or busy sections of the page. The page is organized as a grid, there is little freeform. The right 75% of the page does have significant information below the bottom of the initial viewing area, requiring scrolling.


Colors

CDC.gov uses blue as its primary color. Red and blue arrows appear as section markers, and blue background with white letters are also a design element. The red, white, and blue motif that anchors the page conveys the colors of the federal government and gives the page an official US government aura.


Photos

There is minimal use of photographs, four in all. Three are used to define information section, a picture of the globe effectively leading off a section on pandemic flu. The fourth picture is a stock photo of CDC headquarters, appearing at the lower right but above any scrolling area.

Analysis
The page layout draws the reader to the center with the three pictures. There is little flow to the page, however. It is highly text-based. The common use of color spreads the reader across the entire page. Larger typefaces point the reader to different page elements. The repetition of blue as eiher the background color or the color of the words keep the reader moving. The use of columns pushes the reader from top to bottom. With the heavy use of links, I would expect the reader to leave the page quickly when a point of interest is reached. The typical CDC user would be looking for information, not entertainment. I picked 12 random links from the page, 11 took me to a page with a similar top header, with a link back to the main page, similar structure, and similar color usage. The CDC website is clearly designed to convey a common theme and structure, keeping the reader informed and comfortable staying on the site.

Interpretation
I have little emotional response to the site. It is very quiet, not designed to excite the user. It is strictly factual, as befits a governmental science website. The themes amplify the reliability image and solidify the credibility of the site. The site should interest both the scientist and the lay person looking for information. The page is very serious and non judgmental.

Evaluation
CDC has solid design, consistent layout throughout, and is neither cluttered nor busy. The site uses CRAP well, the four basic principles of design from Robin Williams "The Non-designers Design Book", being Contrast, Repetition, Alignment, and Proximity.
CONTRAST - the site uses blue and white in different ways, sometimes white on blue, sometimes blue on white.
REPETITION - text links are well organized on the page -- blocks of link are set off from each other with headers with a darker value of the tan hue, with red arrows pointing to the right
ALIGNMENT - the design is clean. The pictures are aligned carefully, as column headers. The page is divided into four columns, anchored by a left column from top to bottom, three columns near the top right, and a fourth column down the right below the pictures. Both the top and bottom of the page are anchored with horizontal elements.
PROXIMITY - Text links are kept together on the left column. News and events are anchored on the right. Pictures are kept together in the center to anchor the right three columns. Links at the top and bottom of the page show information about the site itself and the sponsoring agency.

CDC is successful in its mission with solid layout and design. Other health information sites have different foci. WebMD is very busy, with a greater emphasis on graphics, images, slideshows. WebMD makes use of many more hues and color values, with no unifying theme. WebMD is designed to entertain and also take readers to its ad links (CDC has no advertising). The Mayo Clinic website is poorly laid out, with significant white space, no unifying color themes, and a hodgepodge of typefaces.

CDC en espanol.

The CDC.gov site in Spanish is discussed separately.

3 comments:

Cindy said...

I think it was interesting that the middle picture a long the top of the page was that of Jimmy Smits giving "an important health message." I am a little embarrassed to admit that I didn't recognize Jimmy Smits from the photo right away!

Boris said...

You are right when you argue there is little flow to the page. I find my eye in fixed on the blue banner and then on the photos. I find this to be a text-heavy Web site.

aliens infotech said...

your blog is very super........

by
Regards
Search

Engine Optimization