Beauty is Only Screen Deep

Written by: Sarah Horton
“People use the web to buy things, find information, make contacts, and what they notice is whether they can successfully buy things, find information, and make contacts.”I admit it. Up until fairly recently, I didn’t really “get” the web. I thought my job as a web designer was all about looking good, delighting the eye, and imposing established design conventions on the user. I knew what color combinations worked best, what line length was comfortable for reading, and what type sizes produced the best balance and proportion, so I designed good-looking pages according to convention, and I did my utmost to make sure that my designs could not be altered by the users.

But I am starting to realize that, ultimately, looks don’t matter —that beauty is only screen deep. I have seen enough people delighted by horrendously designed pages —just thrilled as they squint to read pink type on a red background —because the site has something they want. And I have seen users utterly frustrated by attractive sites that use elaborate drop-down menus and rollover buttons to “enhance” the user experience.

The fact is that most people do not use the web for visual stimulation. People use the web to buy things, find information, make contacts, and what they notice is whether they can successfully buy things, find information, and make contacts. They do not notice the well-thought-out tag line or the expensive logo —they’re just window dressing, just frosting on the cake. In fact, all the fussing we designers do to draw attention to our work often winds up just getting in the way.

Take graphic text. Many of us use graphic text instead of plain text, particularly when designing navigation. We do this because we want to use a non-standard typeface, or because we want to create rollovers, or because we don’t like the way link underlining looks, or because we want to apply special effects to our text. Often we use graphic text to make sure users cannot mess up our layouts by resizing the text on the page. All of these reasons have to do with our concern about how text looks.

But text is not for looking at. Text is for reading, and there are many instances when people cannot read graphic text. People who need large text for reading cannot enlarge graphic text. People who use text-to-speech software to read web pages cannot read graphic text, unless the developer supplies alternate text. People who need to customize their view of the web, for example, by applying a custom text color, cannot change the color of graphic text. And graphic text generally does not work well in flexible layouts, which allow people to access the web on different devices. In the end, the care and attention we pay to having good-looking text interferes with its primary purpose: reading. This means our choice to use graphic text is one of form over function: a determination that the way text looks is more critical than whether it can be read.

On the other hand, text that is truly text is wonderfully functional. Content in text format can be resized, recolored, reformatted, read aloud, searched, indexed, categorized, copied, pasted, translated, analyzed. Sure, it is difficult to style text online the way it is styled in print, with control over details such as leading, kerning, and measure. And yes, it is maddening the way each flavor of system and browser renders text differently, and that, with a simple click of the mouse, users can change text size and send carefully crafted layouts into disarray. The solution, however, is not to try to exert control using roundabout methods such as graphic text, or by fixing text sizes and page layouts for “optimal” readability. The solution is to let go. One person’s optimal text is another’s Flyspeck 3, and the power of the web is that it can accommodate them both.

This is not to say that we should all go natural and build text-only sites. Today’s web can accommodate conservative good looks. The trouble lies in the emphasis on looks above all else: the homepages where the only text content on the page is the copyright statement or the sites authored completely in Flash. These efforts to fix designs on the page oppose the very nature of the technology. The web was built for flexibility, and what we have been doing is trying to wrestle it into submission. We use various methods, legitimate and hacked, to secure our designs down to the pixel. This approach allows us to stay within the box —to apply to the web what we already know about design. The trouble is, the web was built to flex and flow, and our efforts to hold it in place wind up stifling its potential.

The web was conceived as a means to exchange documents that could be read by anyone, anywhere, anyhow. Trouble is, the early web pages were a little nerdy-looking, so we designers came in and took over and produced documents that could be read by anyone [sighted], anywhere [on a T1 line], anyhow [on a Windows machine running Internet Explorer and the Flash plug-in]. And though the web is now a much better-looking place, it is also less welcoming and accommodating than in those early, ungainly days.

The flexibility that has been sacrificed in this passage from nerdy to swank has undermined the capabilities of the medium. The web is supposed to be a space that people can mold to fit their preferences and accommodate their needs. With access to tools like browsers and screen readers, and with the wealth of information published on the web, people should have unprecedented access. However, when we build pages that rely on pixel-level precision, we lock out people who require a view other than the one we offer.

The measure of quality in web design should not be good looks, but graceful transformation: pages that can be accessed under different conditions and keep their integrity. A “real” web designer is one who can delight the sighted user with an elegant, attractive layout, and can make the same page legible to low-vision users who have their fonts set large for reading, and can make the same page clearly written and organized so it is understandable to all users, and can make the page navigable from the keyboard for people with mobility problems, and can write the page code so it makes a good read for blind people using screen reader software. A real web designer embraces the medium and designs for maximum inclusivity. I am not a real web designer, but I aspire to be.

It used to be that we thought we needed to pretty up the web so people would use it. Those days are long gone. Today’s web user is after a meaningful experience, not just a good time, and has little need for adornments. Maybe it’s because we’ve grown up some: the technology, and those who use it. I can now see that the beauty of the web lies in its function, not its form, and I would rather that my sites attract attention because they are widely useful and usable than because they are pretty.

Sarah Horton is a web developer with Academic Computing at Dartmouth College, where she helps faculty incorporate technology into their teaching. Together with Patrick Lynch she authored the best-selling Web Style Guide, recently released in its second edition. Sarah regularly writes and speaks on the topic of accessible web design.