Thursday October 19, 2006

The Web is not Print

What Every Designer Ought to Know about the Web

By Colin Lieberman

Does a degree from a top school mean that a person can design good websites? Maybe. Good designers can create compelling layouts that are visually effective, but there are key differences between the web and print media that I don’t think schools are communicating. This article is an attempt to fill in the gaps—to clarify how the web is different from print media; to help designers make decisions that work online.

An Informational Medium

Print media are static, and as such the designer has complete control over every aspect of their appearance. Once a document is printed, it is set in stone, and it cannot be changed.

This is not the case online.

The web is an informational medium, and if you only recall one sentence from this article, that’s the one to recall: the web is an informational medium. It is not a visual medium.

Yes, the web does convey visual information. Yes, a visually appealing layout is part of a well-executed website. This does not make the web a visual medium. Those visual elements are part of a larger organization of information.

This distinction is important because when we see the web informationally, rather than visually, we don’t design pages that cause problems for our readers. This distinction is the heart and soul of every topic discussed below.

Height is an Illusion

Designing for print, where we have complete control, we can specify exactly how tall or wide any element of our layout is. There are numerous factors that make this impossible on the web:

So why harp on height and not width? I could advocate liquid layouts, but I’m sticking only to fact, not opinion of any flavor. If one dimension must be locked in stone for your layout to work, it should be width, and the reason is twofold:

Here are some examples:

This screen shot is from U.S. News & World Report:

U.S. News website screen shot showing text rendered outside of its containg box.

In the page's css, those columns are given a height of 75 pixels. My iBook G4 is a few years old, but it’s well within the realm of current technology. My browser is FireFox 1.5. Version 2 is coming out any day now, but I’m about as current as it gets. Also, I didn’t use any special tricks to make that happen: the laptop’s screen resolution is no different than it was when I bought it, and FireFox is displaying the site with default text size. I didn’t even try to break it.

The folks at usnews.com are lucky - at the least the text flowed over their box rather than disappearing underneath it.

At a large text size, People Magazine’s navigation disappears:

People Magazine screenshot showing navigation elements hidden below other elements.

I’m not saying your layout has to look good when the text size is cranked up, but when 73-year-old uncle Wally is reading, he should at least be able to use the navigation.

The point is that height must be dynamic. The guys on your development team will use text-resizing to try to break your layout, to find out how it looks at different sizes, and they’re doing this to prevent cases like the U.S. News example above.

User Interaction

People read print media. They look at the pictures. A lot complicated stuff I don’t understand happens between their eyes and their brains. If there are multiple pages, they might turn them.

The web is a little more interesting. People click things, they search, they skim. Designing for the web means designing for web behavior, which is very different than with static print media.

Information Scent

In the 90s, the language we used was “visiting a website” and “the website experience”. Modern research has demonstrated that the model of a user visiting or experiencing a website is inaccurate. Rather, people engage in information foraging: like coyotes in search of prey, readers hunt out the scent of information, and follow it until they find what they are looking for, or until they move on to another site with a stronger information scent.

Information scent is killed by dense design in which particulars are difficult to locate, and by unnecessary marketingese and other abuses of language.

Designing for the web means putting the information people are looking for at the top of the priority list; anything else drives folks elsewhere.

Skimming

People won’t read every word on a page. Unless you’re publishing reports and articles for a particular industry, they’re going to skim your content, seeking out the path to a goal.

When people skim, they’re looking for section headings, links, and keywords that will help them attain whatever they came to your site for in the first place.

They will gloss over anything that looks like an ad. They will likely miss pictures and other graphical content. They are honing in on language that looks promising in pursuit of their task.

Make this easy for them. Keep headings short, clear, and related to content. Avoid large graphical banners that will be mistaken for ads. Refuse to write marketingese.

Button, Button, who’s got the Button?

People follow information scent by interacting with a site. They click links, select menu options, and enter search terms.

If they don’t know where to click, they can’t click anything.

People (at least the normal ones) don’t click newspapers or pamphlets. When designing for print, we don’t have to think about this kind of interaction. The web is different.

The vocabulary word for this section is affordance: the natural relationsip between an object and its use. A chair affords sitting, a puppy affords scratching, and a colored bit of text with an underline affords clicking.

We’ve all pulled the Far Side “Midvale School for the Gifted” cartoon off our desk calendars. The cartoon wouldn’t work if the door didn’t have a handle that affords pulling.

Websites don’t work if they lack links that afford clicking.

Look at your layout. What are users supposed to click on, and how are you telling them that? If underlines seem out of place for a main link on a landing page, consider adding small arrows that draw attention to the link, and use rollovers to provide some extra feedback.

Don’t assume that people will know where to click. Make it clear.

Images and Text

Images are images, and text is text. Images are logos, icons, and cute decoration. Text is words. Using images in place of text causes all sorts of problems:

Selectability

People like to copy and paste. Imagine trying to force your company’s contact information into a 200x200 pixel box; using an image of the address ensures that the box will always be 200x200, no matter what my screen resolution or text size settings. But, if I want to copy the address and paste it into an address book or Word file so I can print it onto an envelope, I can’t, and I’ll be angry. People leave websites when they’re angry.

Searchability

Google, Yahoo!, Ask, and your company's site search all have one thing in common: they can only read text. If your content is images, it won’t be found by search, and search is the main way people find things on the web.

Printing

Unless they spent a lot of money on a printer, most folks don’t have top of the line printing equipment, and people like to print websites. If you use images in place of text, people may well have useless hard copy if the images don’t print well.

Screen Readers

In the U.S. alone, there are likely over a million web users who are blind or visually impaired, and that number is constantly growing. And just like everyone else online, these folks read articles, make purchases, and sign up for services and newsletters. They use screen reading software, in which a computerized voice reads the content of a webpage aloud. If you use images in place of text, you could be preventing millions of people from spending money at your site.1 (It’s worth noting that in the U.S., inaccessible websites may soon be illegal; and they already are in the UK and Australia).

Page Load Time

Fast internet connections are becoming more commonplace, but lots of folks are still on dialup. Even with a DSL or cable connection, large pages can still take too long to load. Using images in place of text slows your page load time considerably, and long load times kill websites.

This Stuff is Important

Understanding the difference between print and the web is important because people won’t read your content or spend money at your site if they can’t use it. If you’re designing webpages with the same mindset you’d have for designing a brochure, you likely have fewer customers or readers than you could.

The science is there and the research has been done: people behave differently online than they do when reading print, and as designers, we can either facilitate use of our websites, or hinder it.

I’ve tried my damnedest to keep this summary opinion free, but I’ll finish with one personal observation: Our job titles have the word ‘web’ in them, and if we’re designing for the web as if we were designing for print, we’re not doing our jobs.

Footnotes

1 Some readers have pointed out that I'm ignoring the existance of alt attributes. Yes, I am. What I want to convey here is a cognization of the Web as different from print media. Not every problem with using images as text is remedied with a good alt attribute.

Further Reading

My hope is that I’ve provided enough context for you to take your web work to the next level, to make it buzz on the web without compromising aesthetics. If you’re hungry for more info on any of these subjects, here are some good places to start:

Comments:

  1. Thank you for this site which I just found. It is very useful and informative.


    Silk Screen Now    Oct 4, 11:24 PM    #
  Textile Help