8 Web-Design Problems you must know (with images & examples)

8 Web-Design Problems you must know (with images & examples)

As you consider the good design principles I discuss in this chapter, I also want to tell you about the “bad stuff,” the common mistakes that Web designers often make. Sometimes these problems occur from the start, and sometimes they creep in slowly as you update and modify your site over time.

Clutter eats your site alive

Clutter makes visitors uncomfortable and gives them the impression that your site is disorganized. Avoid it. You want your site to make it easy for visitors to get the information they’re looking for — not feel like they’re trapped in a dream within a dream within a dream.

If you have a tendency to create a cluttered design, take the reins and throw out everything possible. Then throw out even more, or move items to pages deeper within the site.

Overwhelming your visitors at the start

This error sometimes results from being so enthusiastic about what’s on your site that you overwhelm your visitors by throwing everything at them on the home page. The fix (as Apple.com does so well), is to determine what’s most essential and highlight it, and be disciplined enough to place other content on other pages. As long as you have a good navigation scheme, you’ll be fine.

Confusion comes with complexity

Visitors make instant decisions the moment they arrive on your site. If they’re confused or annoyed, they click the Back button and never return. If you can’t simplify by eliminating clutter (see the “Clutter eats your site alive” section), you have to employ your design skills to clarify by design. Divide your page into logical areas, to make clear what goes with what.

Traditionally, horizontal and vertical lines used to fence off various areas on a Web page, just as newspapers continue to do now. However, contemporary Web design often eliminates lines in favor of bars of color zones in the background, multimedia areas (audio and animation using Flash, for example), navigation bars, and other visually distinct areas. Figure 1 illustrates how a variety of textures, colors, and multimedia zones can separate content into recognizable categories.

Figure 1: Nike.com is organized with zones of texture, color, and animation.

Mixing and matching design ideas never works

Avoid creating a Web design that mixes and matches various styles, no matter how strong they are by themselves. Instead, use a visual theme that’s coherent and organized and helps give you a unique identity. Whether it’s the New York Times with its famous gothic typeface, Martha Stewart’s beloved pale aquamarine, or the NBC peacock, visual themes are indispensable to identifying a person or organization.

By carefully selecting graphics, font typefaces, and colors that work together and match your tone and messaging, you can create a design that holds together visually and gives your site an attractive personality.

For deciding which colors work well together, check out www.colorschemer.com/schemes and www.colourlovers.com. For comparing and contrasting font typefaces, check out typetester.org.

Extreme symmetry is a yawner

As I mention in the rule-of-thirds discussion earlier in the chapter, a major graphical design rule — for magazine ads, interior decorating, photography, Web pages, and many other fields — is to avoid using extreme symmetry.

Simply, don’t position the focus (the main item) of your page or photo smack dab in the center. If a lit Christmas tree is the focus of a snapshot, don’t have the tree right in the middle of the picture. If you’re photographing the sea, don’t have the horizon line where water meets sky in the middle of your shot. The problem with symmetry is that it removes quite a bit of the life, the subtle conflict, that is necessary for successful contemporary design. It’s the visual equivalent of headlining a newspaper story with “People Strolled through the Park Yesterday.”

If you need one more example to convince you, check out Oakley.com (see Figure 2). The sunglass maker’s Web site employs the rule of thirds well, drawing attention to the top third as a hotspot and avoiding symmetry.

Figure 2: Oakley.com’s use of proven design principles.

Forgetting about the visitor

Some site-design errors result from an inadequate site-navigation structure. As you might recall from the earlier section “Overwhelming your visitors at the start,” you should resist the urge to put all your eggs in the home-page basket. Divide what you’re selling into categories and create separate pages (or whole groups of pages) for those categories.

Double-check your page’s navigation features. Having links to pages that don’t exist is sloppy. Ask outsiders who are unfamiliar with your site to see whether they can quickly and intuitively locate precisely what they’re after.

Although a Search feature can be helpful, your customer should ideally be able to click visual cues — icons, photos, and navigation bars — to locate subcategories, such as Antique Quilts or Under–$200 Quilts. For example, if your major categories group products by cost, even something as simple as four tabs with $, $$, $$$, and $$$$ symbols on them can assist visitors. Then, when they click one of these selections, perhaps they’ll find their chosen cost group further divided by tabs indicating age, size, color, or whatever.

The idea is to let them get to their particular wishes — perhaps the page displaying your second-most-expensive, large, blue quilts — with only two or three mouse clicks.

Negligence is like moldy bread

Don’t work hard creating your Web site and then forget about it and let it waste away. Just as successful stores keep themselves continually up to date, you need to do the same with your Web site. Follow these tips:

✦ Update your blog or news section. If you have a blog or What’s New section, be sure to regularly post new information. At minimum, even if you don’t add new material, be sure to take off content that’s outdated.

✦ Keep your copyright date current. Few things date your site more than an old copyright date at the bottom of the page. If visitors see a two year- old date on your site, they assume that you’ve stopped updating it.

✦ Check links. Periodically test both internal and external links you provide. Delete broken links or update them to the new URLs.

Insecurity makes people nervous

You wouldn’t enjoy shopping at a nasty store where suspicious characters are peeking over your shoulder as you enter your PIN code, or are stuffing copies of your Visa charge receipt into their pockets. Likewise, if you’re selling goods on eBay or directly on your Web site, you must reassure your customers on the Internet that you’re trustworthy and will provide secure financial transactions.