Are You Designing For Your Eyes Only?
-
I am convinced that Flash designers have vision that is far superior to ordinary people. Vision so powerful that 8 pixel tall bitmap typefaces on a low contrast background do not present a problem for reading. Vision so acute that Macromedia's lawyers are resorting to even finer print in contracts and licenses. Vision so sharp those fuzzy, anti-aliased typefaces are as clear as night and day.
Truly we are blessed.
To bad for everyone else. That includes our clients, our parents, our friends and the large majority of web surfers. When those people visit hyper-designed sites, those "really cool tiny fonts in Flash" are impossible to read. Poor legibility is another reason that Flash ranks up usability criticism from all corners.
The Eyes Have it, or They Don't
-
Part of the reason that Flash developers create interfaces that present problems to the poor sighted is because we are relatively young, between 23 and 35 (there are many who are younger). Our eyes are in their prime still, we are able to see a large spectrum of colors and differentiate between subtle hue changes.
As we age our eyes begin to decline due to changes in the eye's optics. Our eye's lens starts to yellow, which makes blues harder to differentiate. As we age less light reached the photoreceptors in the eye, and our pupils shrink, again decreasing the amount of light. For the elderly, this causes vision problems in low light environments.
 |
| These pictures show how much aging changes the the vison of viewers age 20, 60 and 75 (left to right). |
In blunt terms, a 60 year-old only gets 33% of the amount of light a 20 year-old sees. One decade later and it is down to 12%, and it continues to decrease with age.
But Doc, what about Flash?
- So, our eyes get weaker as we age, but what can Flash developers do to help? Well, quite a lot as I discovered while consulting for a Flash development company on a project for veterans. My investigation into usability and legibility issues as they relate to Flash brought up a number of issues that are not often considered by designers.
There are four areas that Flash developers should consider when designing usable Flash content that will be viewed by anyone over the age of 40:
Type
| A | A |
| Serif | Sans |
- The single most important factor in the legibility within Flash is the typeface that the text is displayed in. Legibility studies for computer monitors show that sans-serif typefaces are superior to typefaces with serifs (Serifs are the little extra decorations at the ends of letter shapes on typefaces like Times, Georgia and Palatino.).
Flash developers also have to deal with the added issue of anti-aliased typefaces, a feature of the Flash player. Anti-aliased type has added extra shaded pixels to the letter shape to smooth the edges of the letter. This is great for large type like headlines, but anti-aliased type makes small type even harder to read. To combat this, Flash developers should use typefaces designed specially for on-screen reading. Typefaces like Verdana, Trebuchet and Georgia are excellent examples of typefaces that are designed for on-screen reading.
After selecting a typeface you then have to know how big it should be. In terms of on-screen legibility, bigger is always better. Remember that a good rule of thumb is if visitors can easily read the font printed on paper at six point, they should be able to read it at 12 point onscreen. For a 60 year-old even 12 point text may be too small. With Flash changing the font size globally is as simple as launching the Flash in a larger window, or offering that option to your user.
One solution to the size issue is to offer the user control over the font site. That was the solution that solved the legibility issues for the veterans. We implemented three different text sizes for all major text areas in the Flash movie. With magnification buttons at the bottom of the text area and a scroll bar for the text boxes, the project was re-launched with great success. As an example, I have included the prototype that I created to illustrate the solution for the client.
The length of a line of text is another important factor in legibility. On paper the comfortable length for text is equivalent to two and a half alphabets, or 65 letters. On the screen this length should be even shorter, around 40 to 50 letters in length. If the line length is too short it will cause eyestrain, as the user's eye will have to travel back and forth from line to line.
Contrast
- Contrast is the visual difference between two elements like the text and the background. Contrast is also a big factor in the legibility of text on the screen. Because a computer monitor is essentially a low-brightness light, reading off the screen is extremely taxing for the eyes, just as staring at a light is. To assist users in reading text in your Flash movies, pay attention to the color choices you make when setting type. Black text on a light background (like white or very light gray) is going to produce the highest contrast. Colors can be used, but they should be kept in muted tones for text.
There should also be a visual contrast between the navigation and content areas of the screen. It should be obvious to the user where they can click to navigate and what they should be reading. There should be enough visual cues on the site for anyone to start using it.
A body of text also needs contrast, but not only from the background color. Text needs contrast between each line. This type of contrast is called leading (pronounced led-ing). Leading is the amount of space between lines of text. In Flash 5, leading is called line spacing and is controlled through the Paragraphs dialog box. Text that is tightly packed together is harder to read, so by adding a bit of space between lines you can improve the legibility. Adjusting the leading is a trial by error process and user testing is going to be very helpful in finding the right amount of space. Remember that as text gets smaller leading should be increased.
Color
- The colors you choose for your interface can also have a significant impact on usability. Look for colors that are not too jarring next to each other, but will still provide enough contrast for easy visual separation. Color theory sites and books will help you to select a color pallet for your Flash content that will look good and provide a comfortable environment.
On thing that you should remember is to avoid using reds and greens together. Colorblind users can not see the difference between these two colors, so they would not be able to see differences between the two colors.
Motion
- There is not much that can decrease legibility more than motion. Our brain and eyes are more comfortable reading static text, and any movement increases the difficulty or reading. If your Flash project requires moving text, make sure that it is followed by a static screen that is user controlled. Let the user decide how long they need to read your message.
The same applies to any animation that is used to convey a message. Allow the user to pause, stop and rewind the animation as many times as they need. By allowing the user to digest the information at their own pace, you will assist them in retaining that.
I see Visions of Flash 6
-
Now that we understand the myriad of legibility issues that pertain to developing Flash content for older eyes, I have a suggestion for Macromedia on how to improve Flash 6 for legibility; a font object. Just as Flash developers can use ActionScript to control the volume and pan of a sound, we should be able to control the font in dynamic text boxes. The font object should apply to any text box within a Flash movie. With one line of code the developer should be able to increase or decrease the font size, adjusting the leading, change the color or switch the typeface on the fly.
I know adding these features to Flash will probably be tricky, and I am sure that it would increase the size of the Flash player, but not too much I hope. Until then, Flash developers should make the effort to design content that is easy to read. Remember to consider type, contrast, color and motion when working with text, and how to make the text more legible. Sure we Flash developers may have excellent vision, but that does not mean our users do.
The benefit is for our eyes, and I think that is something worth working for.
Ciao,
CHris
Join the discussion, add your comments about this article.
written by CHris MacGregor - chris@macgregor.net
Chris MacGregor is a usability consultant and Flash developer with MacGregor Media in Houston, Texas. He consults with clients across the world to improve the usability of their Flash projects. In addition to his award-winning work, MacGregor is recognized as a leading proponent of Flash and Usability. He is the publisher of Flazoom.com, a popular Flash critique site and author of a number of articles focusing on Flash and Usability. Earlier this year Macromedia published MacGregor's Flash usability white paper entitled "Developing User-Friendly Flash Content."