Never before has it been so easy to build a Web site. From Adobe PageMill to Macromedia Dreamweaver, WYSIWYG (“what you see is what you get”) software packages let you create pages by just dragging and dropping text and graphics into place instead of learning to write HTML code by hand. Heck, you don’t even need to buy software–many Web-site services such as Tripod ( https://www.tripod.com ) have page-generating templates that create your code for you.
But is your site easy for its visitors, too? Although WYSIWYG editors can help you build a site quickly and painlessly, they don’t guarantee the same ease of use for the folks on the other side of the browser–the people actually trying to use your site. Just like tourists at an amusement park or customers in a grocery store, your readers need some basic things to help them avoid getting lost or frustrated: orientation, guidance, reference, and motivation. When you really think about it, why build all those pages if they’re so frustrating to use that no one comes back?
Make sure that all the work you put into your Web site is time well spent by taking a few simple strategies to heart. They will make your Web site less frustrating to use and will help you build the kind of site that you’d like to visit yourself.
First Figure Out What You’re DoingThe best work you can do to make your site easier to understand doesn’t even require touching your Mac’s power button. First, ask yourself some basic questions: What’s the purpose of my site? What will people be looking for? What cues might help visitors remember where they are and why they’re here? How can I get readers to stay and compel them to return?
Sit down with pen and paper and write down your site’s purpose in one sentence. Then sketch out what you think the basic building blocks will be. The example we’ll use is a personal site, the purpose of which is to promote your hobby of Apple Computer worship. You might start out initially with a long list of topics you love and think will be fun additions, including a shrine to the System 7 team, your collection of haiku about the Mac Classic, and the scrapbooks of cross-country trips you took with your Apple IIe one summer.
Here’s the list we made for this site: (1) the home page; (2) news; (3) contact information, including an e-mail address; (4) links; (5) Mac news; (6) Mac shareware; (7) a scrapbook; (8) a personal PowerBook collection; and (9) the Apple IIe.
Stick to ItAfter you’ve made your list, look at it with a critical eye. Because you’ve seen numerous other Mac sites that feature links to news and software resources, you might automatically think this kind of links page would be a good idea for your site too. There’s no doubt that many people appreciate useful links, but that alone isn’t enough reason to throw them in the mix. Remember, the goal is to show how crazy you are about your computer–and what do news and software sites have to do with that? If you stick to your theme, your readers will be able to understand immediately what your site is about, and each section will make sense to them.
With this in mind, we decided to scratch links off our list altogether and focus on the hobby sections: the scrapbook, haiku, and System 7 shrine. (You might decide instead to have a links page but include only links to other fan sites like yours.) As you make these decisions, be vigilant. Extra stuff simply for the sake of extra stuff could make your site charmingly eccentric, but more likely it will make it confusing.
Map Your Site on PaperAfter you get a good idea what your site’s purpose is and what types of content it will contain, you need to figure out how everything will connect. One of the best ways to do this is to actually map out your site.
Note that a lot of the arrows in our example seem to crosslink, leading to a tangled mess. This is not a bad thing–in fact, it’s one of the main points of the exercise. Try to keep your tangled, linky messes on paper. You can erase illogical connections, rearrange everything, or toss out a failed paper diagram much more quickly and easily than you can redo a Web site full of HTML files.
With everything in front of you, you’ll be able to think realistically about whether the way you’ve connected your pages makes sense. For example, our diagram shows that the “What’s New” page links only to the top level of each different section. Wouldn’t it make more sense to link directly to whatever’s new within those specific sections? We reorganized the site to add those links.
As you untangle your pages, you’ll discover key entry points to the site, how to direct readers to informative pages, and how to group the pages of your site together logically. For example, the pride and joy of your site might be the scrapbook pages of your Apple IIe sitting in front of assorted national monuments. Do you give those pages their own section–”Road Trip”–or do you put them with other scrapbook pages such as your PowerBook bungee-jumping trip? In this case, we decided to create a single page called “Scrapbooks” that lists the different scrapbooks and links to a separate page for each one.
Once you’ve got a solid site outline in place, you’re ready to generate the signposts and breadcrumbs that help your users find their way around–the site navigation.
Nail Down Your NavigationYour users are entirely dependent on you to tell them how to find what they’re looking for. Navigation–consisting of the hyperlinks, graphics bars, or buttons that allow people to move from page to page within the site–provides the guidance they need. This means it deserves some careful contemplation.
The Two-Tier TechniqueGood navigation typically includes two parts: the primary level (usually the home page) that leads users to the entry points of separate sections (in our example, the scrapbook page, the news page, and the PowerBook collection page) and a secondary level (the main pages for each section) that steers users through the unique contents of your sections. If your site includes a lot of lengthy documents, you may also want to include a third type of navigation–links that move users to the beginning or end of a particular story, or allow them to move back and forth one page at a time.
Nix on the Name GameYou should strive to give your sections and navigation elements clear, unambiguous names. Some readers might appreciate whimsy or metaphor, but others certainly won’t. For example, some of your readers will know right away what a section called “The Dirt” is about, but you can bet that everyone will understand what they’ll find in the “News” section. The entire purpose of navigation is to help people get around and feel at ease in your site–the last thing you want is to have the basic tools for getting around your site mystify your readers.
Be ConsistentUnlike most software programs, the Web doesn’t really offer a predictable user interface , or way to get around sites. When you open an application on your Mac, you can be reasonably sure that you’ll find pull-down menus at the very top of the screen, and that the leftmost one (which will almost always be called File) will allow you to open and save new files. The rules for navigating the Web, however, change from site to site.
As a result, it’s your job as a Web-site builder to provide an easy-to-grasp interface for your user. Start by assuming that all visitors to your site are first-timers and have less than a minute to figure out where they are and how to get where they want to be. Make the job easier for them by providing clear cues.
A Place for EverythingThese cues don’t have to be complicated. In fact, it’s better if they’re not. Why set up an elaborate metaphor that you’d have to explain later? The best way to help people get around is to set up a predictable place for everything on your home page or in the section. Save the exceptions for items that you want to stand out.
For example, if the primary navigation on your site is always via a vertical list of links in the left-hand margin of the page, then readers will assume that they can always move around the site by clicking in that area. This is how you’ll provide references to readers, by giving them a set of constant cues that tell them what to expect from every page.
Color CuesLayout is only one area where you’ll want to be consistent; color is another. Readers rely on the colors of links to tell them when they’ve visited a link or not. You can carry this relationship between color and function further and associate specific colors with different sections of a page or site. (For example, if the section’s peach, you must be in today’s headlines.) Color is a quick way for your brain to figure out where you are and what you’re looking at. One example of this is the Washington Post’s Web site ( https://www.washingtonpost.com ), where each section has a unique color scheme.
The Little TouchesFinally, always include page titles (they’re in the ‹head› tag at the beginning of the HTML document) so readers can quickly see where they are. You should also include your e-mail address or a link to a contact form on every page; readers like to be able to give feedback quickly.
Provide a Clear Way In and OutThanks to search engines, you’ll always face the possibility that new readers will land in the middle of your site instead of on the front page. Your job is to provide those readers with a well-lit Exit sign to help them get to your site’s front page. Doing this lets your readers reorient themselves so they see your site in a way that makes sense to them, and it allows people to bail out of pages quickly if they aren’t where they want to be. If they’ve dropped in on page five of your epic poem to the System 7 team, for example, they may want to get back to page one quickly so they won’t miss a single verse.
Entrances and exits are especially important if you’re building a site that includes sequences stretching over several pages. For example, if you’re going to ask users to register online, you want to let them know where they enter the registration process, where they are relative to the beginning and ending of the registration, and how to get to the last page. Few people like filling out forms online, but mild dislike can turn to loathing if your reader is filling out page after page with no clear idea of when the task will be done. Make entrances and exits a part of your site navigation.
Readers subconsciously regard your site as a series of tasks. They’re looking for a starting point, a specific action to be performed with specific results, and an exit that lets them know they’ve completed the task. When a reader gets dropped into the middle of a task–be it reading an article or browsing a directory of links–the first response is usually to get out and then reapproach the pages after figuring out the context.
Employ a Lab RatYou may think your site makes perfect sense, but you’ll find out if that’s true only after someone else has tried to use it. Before you post your new and improved site, ask some friends to click through a version of it and give you their honest feedback.
Another person can catch flaws in site navigation or inconsistencies in visual cues that you’ve tuned out. For example, your fearless lab-rat friend may think that your “Scrapbook” section is a personal scrapbook, not an homage to the road trip you took with your Apple IIe–”I want to see pictures of you in front of the Statue of Liberty, not your computer!” After mulling this input over, you might decide to change the title of the section to “Computer Scrapbook.”
Getting another point of view is crucial: it will either confirm that you were on the right track with your site’s organization and look, or will let you know what areas you need to refine before releasing your site on an unsuspecting Web audience.
The Last WordBuilding an easy-to-use site takes time, experience, and many forehead-slapping lessons you wish you didn’t have to learn. Fortunately, if you learn from the past mistakes of Web pioneers, you’ll have a strong beginning for making your site a more reader-friendly place to visit.
| Also see the sidebar “Four mistakes that will sabotage your site” |
November 1999 page: 100
Four mistakes that will sabotage your siteThe best-laid plans of mouse-clicking and man can go awry if your site’s technical performance undermines the overall organization. Here are four of the biggest–and easiest-to-make–mistakes.
1) Bad ColorsIn real life, there may be no bad colors, only bad color combinations. On the Web, however, there are bad colors: colors that do not display consistently from browser to browser or across different computer operating systems and monitors.
As a Web-site guru, you need to be concerned about this because you’re going to be using color as part of your site navigation. If colors vary wildly depending on whether your users view the site using an old 256-color monitor or a newer one with thousands of colors, users will lose the ability to distinguish between different colors and their corresponding functions.
It’s in your best interests to design your site around any combination of the 216 colors in the Web-safe palette. A good online reference for this is Lynda Weinman’s site at https://www.lynda.com.
2) Bad GraphicsArtistic merit has nothing to do with this: a graphic isbad if it’s too big for a browser to display quickly, or if it’s not saved in a Web-friendly way. If you’re using graphics to connote headlines, navigation, or a site’s look and feel, try to keep the sizes of the individual files small, and save the graphics in the Web-safe palette in your graphics program.
3) Bad HTMLWriting code that works across different browsers isn’t enough to guarantee speedy site performance. Once you feel confident enough to muck about in HTML code, you should also work on streamlining your code so that it loads as quickly as possible. What’s the biggest offender? The nested table–in other words, a table within a table within a table.
A browser will not display a table until it has figured out how to draw the whole thing. That means when one, two, or three tables are nested inside a table, the browser has to chug through the contents of those tables before displaying row one of the outside table holding them all. All the while, your viewers will be twiddling their thumbs. Instead of relying on carefully nested tables to simulate a paper-based layout, stack your tables in a series of structured horizontal-only elements. The tables will load one at a time, allowing your viewer to look at the topmost tables while waiting for the rest to appear.
The other culprit is wordy code: although adding attributes like size, align, and color to a tag may add visual precision, the words weigh down the file and provide a browser with more HTML to chew on before rendering a page. Consider streamlining your use of attributes. For example, instead of assigning the vertical alignment valign=top to each <td> in a table row, write the attribute once in the table row: <tr valign=”top”>.
4) Bad LayoutFinally, remember that your audience will be looking at your site on monitors of all sizes, from laptop computer displays to 27-inch behemoths. Setting the layout of your page to a specific width may knock key features off the screen or force users to scroll from side to side simply to read a page. You can avoid annoying your users by adopting one of two layout strategies: find out what the average monitor resolution for your users is and design to that, or adopt a “liquid HTML” building style that lets the layout expand and contract according to the browser window’s size.
“Liquid HTML” means that you’re taking absolute numeric values (such as <table width=”400″> ) out of your tables and putting in percentages instead (such as <table width=”80%”> ). The idea behind liquid HTML is to allow the layout to preserve a sense of scale relative to the size of the browser window; as the user expands or contracts the browser window, the layout expands or contracts relative to the window’s width.