Error
Hey, it’s not my fault, really! It’s a design error.
Until Lidwell's section on Error, I had never thought of using design error as an excuse.
Slips, aka “whoopsies of life” are a common occurrence around here. When slips happen, I’m pretty forgiving and just chuckle and make amends - these are unintentional mistakes, after all. As a mom, I’m always on the lookout for ways to improve design to minimize accidental mistakes. One example might be using wider bottomed glasses and placing them in a position on the table so elbows won’t be as likely to come in contact with glasses filled with milk, knocking the glasses over and spilling the milk all over the table and on to the floor. Guess that is modifying design. I often think of slips in data entry on the computer. Lidwell advises minimizing slips by providing clear feedback on action, using confirmations for verification, and using affordances and constraints.
Mistakes, on the other hand, are intentional errors or “errors of planning”. Stress can increase the likelihood of making mistakes. I have been known to make the mistake of overcooking the Thanksgiving turkey. Lidwell says we can minimize mistakes by increasing situational awareness and reducing environmental noise; making key indicators and controls visible within one eyespan; and reducing stress and cognitive load by minimizing the auditory and visual noise. Yes, these things would help, for if I paid more attention to the turkey in the oven, and less on the guests and the other dishes I’m cooking, I’d see that doneness indicator pop up or watch the clock more closely and check the bird‘s crispiness more often. Lidwell also advises building forgiveness into the design. Unfortunately, I don't think there is reversibility for an overcooked turkey.
GIGO
Garbage in Garbage Out - I remember teaching , actually having to explain, this acronym in 1980s and early 90s. I’d put “GIGO” up on the board and tell my adult students that this was a $500 “answer” on Jeopardy. No one could guess the question. I’d teach that computers are used to manipulate data to form meaningful information upon which decisions can be made. I'd add later that the information is only as good as the data put in to the computer.
Lidwell alerts readers of two types of problems that can result in garbage going in - Problems of type that occur when the wrong kind of data is submitted (mistakes) and problems of quality that occur when defective data is supplied (slips). Some good ways to avoid garbage in is by using constraints to limit the information accepted and using previews and confirmations to make sure the user reviews and proofs the data before it is entered into the system for action. A computer program can also check that user input is within reasonable limits by asking for the data to be reentered if it fails the program’s criteria.
Expectation Effect
I believe in the power of positive thinking, that if one holds the expectation of a positive outcome, it’s more likely to happen. Seems this is the basis of the Law of Attraction and Wayne Dyer‘s pbs specials and lots of books and videos. Teachers especially need to remember the role that expectations play and keep open minds about their students. Students need to feel that teachers believe in them and their ability to succeed as the Pygmalion and Rosenthal effects show. Dan believes in us; he tells us often that we will all succeed!
Finally, I think it's pretty neat how many pictures have appeared in our blogs for Designing Visuals for Education class. Visuals do enhance learning and communication.
Take Care,
Karen
Friday, July 11, 2008
Thursday, July 10, 2008
The Outrageous Factor and Color Combos
Von Restorff Effect
I tend to think of the Von Restorff Effect as the Outrageous Factor. If you do something really outrageous, people will notice and remember, as long as you aren’t outrageous all the time, because then it will lose its effect (like the exposure effect). Classroom teachers can use this phenomenon by making class periods different from the others, then students will be more likely to recall what was studied.
When I was driving with my kids yesterday, I was telling them about this principle, and asked if they could help me think of examples. My son immediately pointed to the intersection ahead saying – “What about that?” There passed a city metro bus painted to look like friendly big zoo animals were looking out the windows at us – there was a lion, a giraffe, an ape and an elephant. I had never seen anything quite like it. I’ll remember that bus and the intersection where I saw it. I’ll also remember seeing the Oscar Meyer Weiner Mobile, the little blue Mentos car, and the Visual World Van that is painted in a very conflicting, low signal to noise way. It makes you look, but then you want to look away – there are circles, bubbles, a Dalmatian, words, all different colors like a prism. Now that I think about it, there are many outrageous vehicles on the highway.
It’s interesting how the Von Restorff Effect can dovetail with the primacy and recency effects to help students memorize lists. Unusual words, bizarre words, words that are different by text style or color can be put in the middle of a serial list, to draw attention to them, and to help students remember them.
Legibility
From reading Lidwell on legibility, this time through, I got more of a feeling that the rules of legibility are much more based on common sense and what looks good aesthetically than one might think. For instance, when it comes to contrast, it’s not so much the colors involved, but rather that the contrast levels between text and background are greater than 70%.
Now as I’m becoming more aware of color combinations used in the world, I realize that I can learn a lot by looking around, seeing what I like, and deciding what I think looks good. For instance as I was driving (I seem to do a lot of thinking while I’m driving), I started noticing the color combinations of signs. The really important signs have black lettering or symbols on yellow - like merge signs, school crosswalk signs. Our local sheriff cars have yellow on black. Stop signs are red to get our attention; white on blue is used on highway signs as is white on green for neighborhood street signs. Then I started looking at business logos, and it didn’t take long to figure out that the businesses with more resources, seem to have better visual design plans and more dramatic and tasteful color combinations in their signage. So before a small business man designs his own logo, he should look around for effective color ideas that match his general attitudes.
I started thinking back to when I designed my first sign for my computer store. I chose shades of brown – now it seems kinda boring, but it seemed to fit with my low-key approach and it matched the shades of coffee that I painted the interior of the store. Just as I was thinking why didn’t I throw in some accent colors, I remembered that the building was in a National Hisstoric Landmark District, so all signage and building paint change proposals had to go before the Architectural Review Board. It was always easiest to go conservative. However, my mother owned an Egyptian Revival house. She had been a Latin and ancient history teacher, so she researched appropriate historical colors and coordinated that with colors used in Egyptian hieroglyphics. She got approval to paint the house a sand yellow, the long shutters on the front pocket-windows a dark bottle green, and the columns had gold and electric blue accents on the lotus leaves. There were some interesting “painted lady” Victorian houses nearby – some combination “worked well”, others we called 'pepto-bismol" houses
I tend to think of the Von Restorff Effect as the Outrageous Factor. If you do something really outrageous, people will notice and remember, as long as you aren’t outrageous all the time, because then it will lose its effect (like the exposure effect). Classroom teachers can use this phenomenon by making class periods different from the others, then students will be more likely to recall what was studied.
When I was driving with my kids yesterday, I was telling them about this principle, and asked if they could help me think of examples. My son immediately pointed to the intersection ahead saying – “What about that?” There passed a city metro bus painted to look like friendly big zoo animals were looking out the windows at us – there was a lion, a giraffe, an ape and an elephant. I had never seen anything quite like it. I’ll remember that bus and the intersection where I saw it. I’ll also remember seeing the Oscar Meyer Weiner Mobile, the little blue Mentos car, and the Visual World Van that is painted in a very conflicting, low signal to noise way. It makes you look, but then you want to look away – there are circles, bubbles, a Dalmatian, words, all different colors like a prism. Now that I think about it, there are many outrageous vehicles on the highway.
It’s interesting how the Von Restorff Effect can dovetail with the primacy and recency effects to help students memorize lists. Unusual words, bizarre words, words that are different by text style or color can be put in the middle of a serial list, to draw attention to them, and to help students remember them.
Legibility
From reading Lidwell on legibility, this time through, I got more of a feeling that the rules of legibility are much more based on common sense and what looks good aesthetically than one might think. For instance, when it comes to contrast, it’s not so much the colors involved, but rather that the contrast levels between text and background are greater than 70%.
Now as I’m becoming more aware of color combinations used in the world, I realize that I can learn a lot by looking around, seeing what I like, and deciding what I think looks good. For instance as I was driving (I seem to do a lot of thinking while I’m driving), I started noticing the color combinations of signs. The really important signs have black lettering or symbols on yellow - like merge signs, school crosswalk signs. Our local sheriff cars have yellow on black. Stop signs are red to get our attention; white on blue is used on highway signs as is white on green for neighborhood street signs. Then I started looking at business logos, and it didn’t take long to figure out that the businesses with more resources, seem to have better visual design plans and more dramatic and tasteful color combinations in their signage. So before a small business man designs his own logo, he should look around for effective color ideas that match his general attitudes.
I started thinking back to when I designed my first sign for my computer store. I chose shades of brown – now it seems kinda boring, but it seemed to fit with my low-key approach and it matched the shades of coffee that I painted the interior of the store. Just as I was thinking why didn’t I throw in some accent colors, I remembered that the building was in a National Hisstoric Landmark District, so all signage and building paint change proposals had to go before the Architectural Review Board. It was always easiest to go conservative. However, my mother owned an Egyptian Revival house. She had been a Latin and ancient history teacher, so she researched appropriate historical colors and coordinated that with colors used in Egyptian hieroglyphics. She got approval to paint the house a sand yellow, the long shutters on the front pocket-windows a dark bottle green, and the columns had gold and electric blue accents on the lotus leaves. There were some interesting “painted lady” Victorian houses nearby – some combination “worked well”, others we called 'pepto-bismol" houses
Monday, July 7, 2008
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.
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.
Saturday, July 5, 2008
Colorful thoughts
This week I read a claim that, incredibly, 80 percent of an object’s message is communicated through its color (ahh, the 80-20 rule). There is no doubt that color is an influential element of design. After this unit, I feel more confident spinning that color wheel and applying hues, tints and shades with the goal of creating more organized, harmonious and effective educational visuals.
For the past five years I’ve coordinated our school’s visiting author program. I put up displays, posters and bulletin boards to create anticipation for the event. I agonize over which colors to use, and I usually seek out a trusted instructional assistant for her advice in color selection. Sometimes I try to apply a logical, reasoned approach. For instance, author Andrea Cheng features the Chinese culture in many of her books for children. So for her visit, I put up a bulletin board with red background and yellow lettering with black shadow . That worked. First because red and yellow are often used in Chinese celebrations, and second because from the design perspective, they are both primary colors, and it’s an elementary school where the young kids are attracted to those fun, saturated colors. In all reality, sometimes the color choices are predicated by what’s on-hand in the supply room. Last year for Patricia Polacco’s bulletin board, I kept the bright blue paper that was already up and added yellow letters.
For the past five years I’ve coordinated our school’s visiting author program. I put up displays, posters and bulletin boards to create anticipation for the event. I agonize over which colors to use, and I usually seek out a trusted instructional assistant for her advice in color selection. Sometimes I try to apply a logical, reasoned approach. For instance, author Andrea Cheng features the Chinese culture in many of her books for children. So for her visit, I put up a bulletin board with red background and yellow lettering with black shadow . That worked. First because red and yellow are often used in Chinese celebrations, and second because from the design perspective, they are both primary colors, and it’s an elementary school where the young kids are attracted to those fun, saturated colors. In all reality, sometimes the color choices are predicated by what’s on-hand in the supply room. Last year for Patricia Polacco’s bulletin board, I kept the bright blue paper that was already up and added yellow letters.
This year colors selection will be a whole new ballgame, because now I’ll be making the displays for 5th and 6th grade students at the intermediate school. The school colors are green and gold, so I might try shades of green including sage green with gold and more saturated hues used as accent colors. Blue, ultramarine and orange are other possibilities. I think I will try Lidwell’s suggestion of cooler colors for background and warmer colors for foreground. I’m not dreading color selection this time around quite so much.
Another principle I’ll try to apply to my next bulletin board is the Rule of Thirds. I’ll think about placing focal points at the intersections of the four lines dividing the space into a tic-tac-toe board. When I think about the Rule of Thirds, the cover of Click, Clack, Moo, illustrated by Betsy Lewin comes to mind as a good example. (Ted and Betsy Lewin, both Caldecott honor winners, visited our school three years ago!)
Another principle I’ll try to apply to my next bulletin board is the Rule of Thirds. I’ll think about placing focal points at the intersections of the four lines dividing the space into a tic-tac-toe board. When I think about the Rule of Thirds, the cover of Click, Clack, Moo, illustrated by Betsy Lewin comes to mind as a good example. (Ted and Betsy Lewin, both Caldecott honor winners, visited our school three years ago!)
Last week when I got my driver’s license renewed, I was surprised that the colorblindness test is no longer required. That reminded me that in designing visuals, it is important not to put red and green close together and definitely not to place green type on a red background, because 10% of the male population is colorblind. A quick trip to the BMV website shows that now, in Ohio, only those applying for school bus driver's license are required to be able to name the colors on signs.
This leads me to another color-related question – why do we talk about the yellow school bus, when to me the buses look more tangerine-yellow? According to Wikipedia, in 1939, there was a national convention to establish standards for school buses including dimensions and color. That yellow-orange color was specially formulated to be used on school buses because against that background, black letters can most easily be read in the dim light of the early morning hours. Legibility is important for educational visuals, too. The experts say that black on yellow is easiest to read. The next most legible combination is green, red or blue on white; then white on blue; next best is black on white; then yellow on black.
Cultural beliefs and associations have a huge impact on our reactions to color. Thanks for assigning the reading about the color green, Dan. It gave me insight and understanding about my great-great grandmother’s emerald green wedding veil (circa 1835, Tiffin, OH). I must admit that for a long time I thought it might be a curtain and questioned my grandmother's handwritten notes on the box. Might be some truth to the association of green to fertility, because she had a dozen children!
I must admit that I go back a long ways with the Teletubbies. My daughter was one when the show premiered ten years ago, and she was a fan. I wa
s surprised to see the little guys featured twice in Lidwell! First in connection with the baby-face bias: People are drawn to babies – baby animals, baby humans and things with baby characteristics of round features, big eyes, and a high forehead. Maybe that’s why VW beetle drivers get quite attached to their cars, decorating them, giving them names like "Herbie" and placing bouquets of flowers in the steering wheels? Though there may be this attraction, people with baby faces do seem to be passed up when it comes time to hold positions of great responsibility.I have been trying to use color theory to explain why the Tubbies are violet, lime-green, yellow and red. The red and yellow are cheery, fun, warm, saturated primary colors to attract children’s attention. Red and violet are analogous colors found next to each other on the color wheel and lime-green is analogous to yellow. Could it be as simple as red and green as well as purple and yellow are complementary colors? Anyway, the combination works and they look harmonious together. The color choice might have been a process of elimination. I think if one Tubby had been orange, they might have looked like a box of crayons bunching on the color spectrum. The color blue might have been elminated because the Tubbies spend a fair amount of time outside against a blue sky and we talk about "feeling blue" and having the blues.
The Tubbies live on a calm peaceful savanna. I believe that most people do prefer a fairly uncluttered, uncomplicated space/ landscape. Perhaps that's part of the beauty of feng shui. Below is an image from http://www.musopen.com that has a soothing savanna effect on me. After this discussion, I'll be looking more at landscapes in children's picture books.
I thought it was interesting how many design principles Lidwell identifies as being innate biases, hard-wired into our brains e.g. archetypes, attractiveness bias, baby-face bias, savanna preference, golden triangle, most average facial appearance, and waist- to-hip ratio. However, Lidwell reject that color reaction is innate. I realize that culture and past association play a huge role in color perception and preference, but I think there could be a small genetic / evolutionary factor to color reaction, too. I read an article this week that proposed that there is a genetic influence because heredity affects serotonin, a neurotransmitter, that is released when a person sees and reacts to a particular color.
Now it's time to put it all together - color, type, contrast, alignment, repetition and proximity!
Subscribe to:
Posts (Atom)
