Put the Web Site Down, and Slowly Back Away

Today's Best Tech Deals

Picked by Macworld's Editors

Top Deals On Great Products

Picked by Techconnect's Editors

For a while now I've been driven insane by just how much we focus on beauty. No, I'm not just talking about beauty of the supermodel variety–I'm talking about Web pages. Okay, so maybe I mean both. After all, how many times have we stopped by a Web site, been dazzled by its beauty, only to find that underneath it all, it's as dumb as a box of rocks?

Last month, when I asked for suggestions for future column topics, I was inundated with responses–enough to fill columns for years on end. (Thank you!) The topic that sprinted to the top of my list–those pretty-but-dumb Web sites–was not only mentioned by several readers, but has been something I've been thinking about a lot recently. This spring I've been given the honor of co-teaching a course on Web design at the University of California, Berkeley Graduate School of Journalism. And one of the key points we're trying to make in that class is that visual style means nothing unless you've also made careful editorial decisions.

Too often, when people are given the task of designing a Web site, their initial reaction is to jump into the application of their choice (be it Photoshop, Dreamweaver, GoLive, BBEdit, or some other tool) and start hacking away at the home page.

Stop right there. Quit out of your application. You may even want shut down your Mac altogether, because you shouldn't even start thinking about how you're going to design a Web site before you think about how you want it organized.

When I see a Web site I consider truly awful, it's rarely just because it's ugly. (In fact, ugly sites sometimes have their charm–witness http://www.hamsterdance.com.) Truly awful sites are the ones that just don't make any sense to me. Consider an immaculately designed home page with beautifully sculpted buttons that glow when you place your cursor over them. There are some gorgeous 3-D rendered logos, and a color scheme that's appealing to the eye.

But then you start reading what's on those sculpted buttons. "Content." "Crave." "News." "Today." And an animated picture of a bumblebee. Huh?

So before you start whipping up gorgeous logos and JavaScript-based button rollovers, take some time to make sure that your pretty pictures will be attached to a good site. Here's a checklist of things to keep in mind.

1. Sort out your material. Write down everything you plan to put on your site. Try to keep in mind what you'll be adding in the future, and write that down too.

2. Think of your audience. Perhaps the toughest thing to do when setting up a site–and the most important–is to put yourself in the shoes of the people visiting your site. What do you, as a user, want to get out of a site? What information will your visitors want? It's your job to make it as easy for them as possible. If you're making a site for a major household appliance manufacturer, for example, you'll need to realize that you'll have, for the most part, three different audiences: investors and potential investors searching for corporate information, potential customers wanting information about your products, and current customers who want information on how to repair their appliances. It's important that you recognize those different needs and find appropriate ways to channel those different users to their appropriate destinations.

3. Organize carefully. The first step gave you a menu of all the items you'd like to put on your site. The second one made you imagine what your visitors are going to be looking for. Now's the time to put those all together. Make sure the information your visitors crave is readily available from the home page, ideally one click away. Figure out a consistent way of organizing your content into sub-groups. And don't over- or under-categorize: avoid creating a home page with only three links on it, and avoid creating one with 12 links on it.

4. Label intelligently. When you've split up your content into groups, think about how to label those links on your home page. This is where my previous complaint about animated bumblebees and buttons labeled "crave" come in: Make sure the labels you choose are consistent and easily understood. Again, put yourself in the shoes of a user who's just stumbled into your site. All the people in your company may understand the concept of "End-User SFH-rated Devices" or "SSL eTailing Solutions," but people in the outside world might prefer "Home Appliances" or "Internet Business Software."

Once you've taken these steps, you'll be in a better position to start designing that first Web page. You'll know what navigational buttons you're going to need to create–and replicate on pages lower down in your site, so your users can understand your site's architecture and confidently get where they want to go. You'll be thinking about what your site's visitors are looking for, so you can design places that prominently feature the information they're looking for. And hopefully as a result, you'll have a Web site that's easier to use.

Designing the organization for large, complex sites can take a lot of work. Even for small sites, it can be a bit of a brain-teaser. But it's well worth the effort. Every minute that you spend organizing your Web site ahead of time will be repaid several times over once your site goes live. After all, nobody wants to spend weeks designing a Web site, only to realize a day after it goes online that it's an utter failure at serving its users.

1 2 Page 1
Page 1 of 2
Shop Tech Products at Amazon