Website Review Project

1) Seeing Red with the Cincinnati Reds Website
Sports team: http://cincinnatireds.com

I’ve been a Cincinnati Reds fan for years. I rooted for “The Big Red Machine” in the 70s, and I’ve taken my kids to games, but I’m afraid I’m not a fan of their current website. The site uses red (lots of it), and white, black and grey, which are the team’s uniform colors.

As the website loads, vertical bands in two alternating shades of red appear across the screen. These bands are so similar in color and tone that they create an uncomfortable conflict. The red bands remain as a page with light grey and white areas striped with red horizontal bars appears in the center of the page. A red-filtered image of the playing field serves as a top banner. Add red text and photos of players with red caps, and you’ve got a clash of reds of major proportion. When I looked at this homepage, as Robin Williams would say, I was twitching, and I wanted to get out of there fast.

Red is a very intense, exciting color. According to the book, Color Harmony for the Web, red connotes excitement and danger, fire and bloodshed. Red stimulates the brain and can evoke a psychological fight-or-flight response with blood pressure and adrenaline rising, and hearts beating faster. We pay attention to red. It’s an alert, a warning signal. Red is a hot color, and like hot Tabasco sauce, a little bit goes a long way. In websites and educational visuals, red is best used sparingly, and it is usually reserved for accents. So in the Cincinnati Reds website, in my opinion, we’ve got too much of a good thing going.

I must admit, though, if any baseball team is entitled to use red on their website, it’s got to be the Cincinnati Reds. So how can they make it work? I visited the websites of other teams with red uniforms – the Boston Red Sox and the St. Louis Cardinals- to see how they handled the powerful color of red. The St. Louis site inserts subdued grey panels on each side of their homepage, while the Red Sox downplay their red with calming, cool, navy-blue side panels. When I went back to the Reds site and put my hands up to cover the red barred side panels, the site looked pretty good. If the Reds get rid of the red bands and replace them with solid grey, black or even solid red panels, that would be an improvement. When you navigate off the homepage within the Reds site, there are grey side panels. However, that’s a mixed blessing, because in place of the red bars, you get two goofy wobbling bobble heads.

Major league baseball websites that use blue rather than red as the predominant color (e.g. the Rockies and the Rangers) look much better to me. Blue is a cool color, and the blue side panels recede, bringing the central page closer. The general feeling of these sites is professional, yet more relaxed - business casual.

Color should unify and organize the site to facilitate navigation and the processing of content information. However when it comes to effective color use, the Reds drop the ball. The reverse contrast of the white text on the black background of navigation bar pull down menus is hard for me to read. It might be better to use light grey pull down menus with black text. Links do not appear in the same color consistently, nor are they underlined until you roll over them, so it is hard to know which text serves as links on the page. Some links are in red text, some in white. Sometimes there is a bullet to indicate a link, but not always. Take for instance the Reds Blogger section in the bottom left-hand corner of the homepage screen. The background is red, the text white, there are 8 lines, but only 5 are actually links. Similarly, repeated three times across the homepage is text about All Star voting. Is it a link? You have to roll over it to find out. Better and more consistent use of color would be helpful to distinguish links and reduce user frustration.

Color should help the viewer focus on five or six important areas of the screen. The Reds pages strike out here, too, because there is color everywhere. Furthermore, the shades of red are not consistent, but shift abruptly. As you move through the screens, new shades of red are introduced for different promotions. This lack of continuity indicates poor design management and ultimately reflects poorly on the ball club. Yet another problem with this site is the sense that too much information has been packed into the space. If a few extra pages were added, this congestion could be eased.

I think people with ADHD or learning disabilities would have difficulty focusing on the content of these pages because of the intensive use of red throughout the website, poor contrast, inconsistent use of color and distractions like flashing advertising and bobblehead bobbing. I saw no evidence of alt taglines, and when I chose the internet tool for accessibility settings, this website literally fell apart – it became unreadable. Nor are videos close-captioned. This site does not appear to be disabled person friendly.

The Reds site includes a Kids Club page, which is common to all the major league sites. This screen has about 10 different bright colors going on at once, which is fine for the intended age group, but for the Kids Club, the website should pull the plug on the distracting “local color” – like the ads and bouncing bobble heads.

The Reds website could use some work when it comes to ensuring consistency of color, contrasting of colors, using less red and more cool colors, using color as a navigational guide, and showing users where links are. Red is a tricky color to work with, but there are some easy steps that could be taken to improve the site. As Cincinnati fans have often been heard to say lately, “Oh well, there’s always next year.”


2. BBC Broadcasts to All. Jolly Good Show!
tv/ news: http://www.bbc.com

Finding that many of our television websites look very much the same with dark gray and sleek silver metallic tones, I wondered what a European broadcasting site would look like. I was quite impressed with what I found at BBC. This site focuses on customization and accessibility and the effective use of color to unify and organize information processing.

On the BBC site, the user can choose one of thirteen color schemes. Much of the homepage is black text on white, but the chosen color will appear in the masthead, in major headlines, certain text areas, and panels throughout the site. Grey, which harmonizes with all the colors, is used to compartmentalize topics and to unify the pages. On this site, links appear in colored text which become underlined when the mouse rolls over them.

The BBC site contains tons of information, but it is not all crunched together. There is a feeling of open space and breathing room. The areas of white encourage the user to stay and spend time exploring – almost like the feeling of leafing through the pages of a newspaper. The filled-in colored text boxes makes it easy to scan the page for major stories. The top news story is at the top left. The most important news story in each section is in a slightly darker colored box to draw attention to it. Starting with the main news story in the upper left-hand corner, the colored boxes draws your eye through a “Z” shape making four or five stops along the way. The site is clean and crisp and easy to follow.

As you navigate out to different sections of the BBC site, each section will have a different theme color for its masthead and headlines – sports is yellow and green and music is bright blue. Each section is further subdivided with colors to help you quickly find what you are looking for. For instance, within the sports section golf is color-coded navy, motorsports:purple and tennis stories: yellow.

There is good contrast between text and background throughout the site. Colors and logos are used consistently. A white arrow in a bright blue square signals video links, audio links are orange, and red is used to draw attention to areas where user input is sought. In the colored text boxes of major stories, when you roll over a link, the color of the highlight darkens. This positive feedback is helpful in navigating.

The Children’s BBC is analogous to our pbskids.org. Colors used here take into account the developmental stage of the user. The preschool area has a bright electric blue background with cheery yellow and a lighter blue “cheeto” pattern. The elementary area background is robin’s egg blue and slime-lime green. Logos from each show add even more color. The next age level has more sophisticated colors – purple, orange, and salmon. Then by the teen space, the colors are amber, black, corrugated cardboard brown, aquamarine, lavender, violet, and pink. This age-appropriate use of color should hold the interest of children.

But, what I found most fascinating was the range of accessibility tools for disabled persons available on the site. The BBC participates in “Web my way” which offers tools to change a browser, computer, keyboard, and mouse setting to make the web more accessible to those with disabilities (visual, hearing, motor, cognitive, learning impairments) and vision impairments. The accessibility link is at the top of every page. Presets make it even easier to get started. For vision impaired persons there are options for simple graphics, simple layout (one column of text), text size (from -2 to +6), text spacing, highlight links, and various background to text high-visibility combinations. BBC offers captioning for some of its online videos, and switch-only games for kids who cannot use a mouse or keyboard.

The BBC is incorporating color consistently and effectively in a way that makes it so much easier for all users to process information meaningfully.


3. Obama – red, white and blue,
political campaign: http://www.barackobama.com

The Obama website makes excellent use of color to add interest to and to help guide users through the site. The main color on the website is a light Carolina blue. This also seems to be the main color that the Obama campaign is using for signs and tv ads. Blue is a cool and calming color that connotes stability and integrity. Other colors on the Obama website are red, white, and blue-grey. Politicians often campaign with red, white and blue because this combination of colors communicates power, trustworthiness, conservatism and the American flag.

The top of the Obama homepage is light bright blue with swirls of white. I think this lightness visually conveys the sense of hope that the campaign stands for. As you scroll down the blue in the side-panels becomes deeper and darker like a grounding effect. Color is used consistently and effectively throughout the site. Blue text indicate links – and when you roll over them, they turn red. Links for donating or volunteering have some flecks of red in them. The pull- down menus open into a white box with easy to read blue lettering. A red thin horizontal line sits on the bottom of the box as a finishing touch.

The Obama website includes a “people” section with comments to various constituent groups such as Asian Americans, African Americans, Americans Abroad, Americans with Disabilities, etc. What is really pretty neat from the design standpoint is that for each group, the Obama “O” symbol is redesigned to reflect characteristics of that group – for children, the O is hand drawn and colored and there is the light image of children in the background.

The Obama site is easy to read. There is strong background / foreground contrast. Much of the text is black or blue on white. The site has alt-tags for graphics for text-readers to the blind. There are a number of close-captioned videos and the internet accessibility tools hold up on the Obama site.

As you scan through the homepage there are very subtle hints of red to pull you through. On each screen, there are four or five splashes of color to attract attention. This site is carefully constructed. The importance of image is not lost on this candidate. That on the first day they campaigned together, Senator Obama’s tie and Senator Clinton’s outfit matched the blue at the top of the website was hardly a coincidence. Text color, heading color, drop-down menu color, and bullet color are all consistently drawn. This site is visually attractive and makes good use of color to communicate its message. This is a site that invites you to come in and look around and explore.


4. L.L. Bean, A Cool Breath of Fresh Air
online store: www.llbean.com

The L. L. Bean website is like a cool breath of fresh air. The first image on its homepage is an outdoor Maine scene showing bright blue water and the grey, rocky coast lined with green pine trees. The website picks up these colors in nature by using sage green and light- grey as its main colors, while sprinkling in burgundy, navy and orange as accents. L.L. Bean, headquartered in Maine, is known for its quality outdoor recreational equipment and preppy New England clothing. The website’s use of sophisticated shades of the primary colors and a background of grey is likely to appeal to its conservative, East-coast, target audience.
The Maine coast color theme is carried throughout the site by the photos on each page and the merchandise offerings. Everywhere you click, you see nature. Click on “footwear”, and you see shoes on a grey weathered step flanked by grey rocks with sage green moss growing on them. Click on “men’s”, and you see a man standing on green grass with stones in front of a greyish house. He is wearing white poplin pants and a “clover” (grey) seersucker shirt. Beside him a "camp green" polo shirt is featured. The merchandise pictured and the photographs all tie in with the website’s color theme. This is all part of an well-planned marketing strategy.

To me it seems like 95% of the clothes featured are shown in cool colors. Other colors are available if you click further into the site, but it seems like the plan is to make you feel cool so you’ll stay and buy summer clothing. On the first page, the t-shirts are fanned, with the cool colors laying on top, closer to the viewer,
while the warm colors are tucked underneath.

The home page has a dark green navigation bar at the top and grey background. In the section about applying for a store credit card, the click button is orange. Most sites would use red, but that might be too pushy here, so a toned down, more friendly, analogous orange button is used instead. A sale is announced in a burgundy box with white lettering. Burgundy, a desaturated red, is a more sophisticated, efficient, status-color than red. The white lettering on burgundy is easy to read and brings good contrast. Red is used sparingly on this site and is associated with sales and buying. There is a thin red stripe on the canvas bag for the checkout in the upper right-hand corner. Red also appears on order pages.

The site uses color harmony principles throughout. Grey is a good background, and burgundy bullets are used for accents. Red and green are complementary colors and it makes sense to use more of the sage green and to use the red sparingly. The grey is the unifying color. This website is clean, efficient, and elegant in an understated way. It portrays the Maine outdoors perfectly through the website color, photographs, and merchandise offered. No doubt this is a site customers enjoy coming back to.


5.Why? Oh, why? Oh, why?
personal website: Steph’s “Oceanic Pollution and its Global Effects”
Link to interior page:
https://www.msu.edu/~guzdzia1/project.html

We see it all the time. Color overload on the website: too busy, too colorful, too little thought about readability. These sites are usually created by college students. Why do they do it? And, once they do it, why don’t their friends do them a favor and tell them how bad it looks? Perhaps students simply don’t know better. Perhaps visual literacy instruction and better instructional examples provided by K-12 teachers is needed.

Let’s dive right in. The red text on dark blue waves on this page makes me feel seasick. I suppose these colors were chosen to represent the dark blue ocean and red algae pollution, but in my opinion, the combination creates a mess just like the oil spill described in the text. To make matters worse, to simulate movement of the ocean and waves, the background colors shift from very dark black through blue to white, which makes it more difficult to smoothly read a line of text. The waves make too much noise. The noise to signal ratio is off the charts. The main problem, I think is that there is not enough figure-ground contrast between the red and blue. Both are dark, high intensity colors. The result is that my eye goes back and forth between the two, and I cannot read the words. This site would be especially frustrating to people with ADHD or learning disabilities. Williams advises there’s a problem if when you xerox the page you lose the words. I’d recommend replacing the waves with a plain background. Perhaps the idea of the ocean could be established with a border at the top and bottom of the page. This webpage lacks focus and organization. The little animated cartoons scattered throughout further disrupt the cohesion of the page.

If the dark blue background is kept, then the text must either be highlighted or changed to a lighter contrasting color. Because of the white wave crests in the background, some letters of a light text might be swallowed. I’d try text in various light tints of blue. On this page, the yellow fish graphics seem to show up pretty well against the blue. I’d consider yellow text, but I think yellow might cause eye fatigue. White text is another possibility. In any case the font should be larger and the lines shorter with more space between. Since reverse lettering (light letters on dark background) can be hard to read, perhaps it would be better to use a lighter blue background and black or brown lettering. Red could still be used here and there for highlights, emphasis, or section headings.

The homepage has an unusual textured background that looks like black crushed velvet. The text suffers from problems with alignment and spacing and repetition. The color choices seem random, perhaps based on personal preference, but the text, since it is a lighter color, does provide contrast and stands out against the black. Yellow on black is very legible and gets attention because it makes one think of stinging insects. Some of the purple letters get swallowed up in the deep (darker) folds of the material because there is not enough contrast. If the text were thicker, that might help matters, or if the text were a contrasting color such as a white or light cream it might work. The special effect butterflies graphic is too small and creates a distraction in the middle of the page. Steph may be trying to differentiate the areas of her site with different colors, but I think she might benefit from staying true to monarch orange lettering for all the text to create more harmony on this page.

There does not seem to be consistency in color use throughout this website. Poor contrast between the text and background makes it difficult to read and comprehend. The overall impression is that this site lacks cohesion and that poor visual design reduces its value. I would never send a student to this page for research because the problems with color and legibility would make it too frustrating.