Booklet: Invisible vs Annoying Page Design

Invisible vs Annoying

If your page is too seamless, it's invisible; if it's too flashy, it's annoying.

Ideas must dictate.
*** From menus to status.
Status: Web style.
Inside the user's head.
*** Clutter and distractions.
Making me work.
Loading times.
Urge to return.
Why am I there?
Spirit of the internet.
Additional Reading

The Right Priorities

Ideas and energy must dictate.

Entering a new Web page is like finding $10 when you're walking in the park. There's a zap of excitement -- a flash to an unexpected treat. Web pages have that same kind of "found money" energy. It's free, and there's the suspense of the unknown.

Not everyone shares this excitement, however. Many have burned out along the way -- they endured too many torturous downloads to find a 150K staff picture staring back with not hint of usable information. With thinning patience, others become white knuckled at an "Under Construction" sign. Occasionally, the "We need standards" chant arises, although it seldom lasts. A level of discontent exists.

Many forget that they themselves dove into their first few projects with more than a little scorn for users' needs. The user was a secondary, trivial concern. Their content was immensely more important than how the presentation might come across.

The intent of this booklet is not to criticize, not to chide, not to lay down standards. It is to encourage you to continue Web development with all the energy you can bring to bear. Sacrificing your energy to make a better presentation is not worth it. The heck with those who complain; your ideas will carry the day. With that understanding, there are a few things you need to hear at least once, and it's better you hear them from someone who doesn't take format guidelines all that seriously -- someone who believes that underlying ideas are more important.

You should be told that with a few presentation adjustments your ideas will come alive for more people. Some of the changes are trivial; others will require more thought and a rework of your logic. As you go through the following sections, select the guidelines that fit with your style, but be careful not to sacrifice your energy as you do so.

On Being Invisible

Strangely enough, when a software application is called invisible, it's quite a compliment. It means the application fulfills its function so smoothly, so in-sync with the user, that it's no longer noticed.

An invisible application is like a carpenter's hammer. Most builders have a favorite hammer that is so familiar it becomes an extension of their arm. Day after day, week after week, they hammer away automatically, without a thought of appreciation. Rue the day the hammer gets lost or broken, though. Things just won't go right with a substitute, and a finding a replacement becomes a life mission.

When a computer application is so good it becomes invisible, the competition has little chance against your product. When others' pages are harder to navigate, less to the point, users will always come back to yours.

Unfortunately, novice Web designers, in the energy burst that comes with a new venture, often dress up a page more than is necessary. An extra splash of color here, a self-portrait there. They forget that the purpose is not to inflate themselves but to fill a need, to provide a service. Ironically, the less they're noticed, the greater their fame becomes.

The good news is that only a few areas account for most annoyances: readability, speed, needs assessment, and ease of use. Most pages' content and information schema's are acceptable -- it's just a matter of cleaning up the cosmetic issues.


A majority of Web pages present written information. The more easily it can be read, the easier the message is to grasp. For those who spend long hours at a computer monitor, readability is critical. At certain levels of fatigue, the eyes start refusing to absorb information.

In printer jargon, readability is the ability to distinguish words and letters. Book printers researched the impact of line spacing, margins, and font types on a person's ability to read with good comprehension.

In a computer oriented environment, the contrast between the letters and the background dictate readability. Several contrast combinations make the screen readable: black on white, yellow on black, bright green on black, and bright blue on black. If you want a message understood, use these color combinations. Pretty, colorful, and otherwise catchy designs must have the right color contrasts, or they reduce the user's ability to understand your message.

Background patterns are at the bottom of the readability index. Not only do these patterns violate the color contrast guideline, they introduce conflicting shapes and images. The mind, which has been raised on standard printed material, has difficulty processing letters floating on top of this mix of symbols.

The selective use of patterns is only common sense. For example, if you wanted to be spotted by a rescue plane, you wouldn't stand in the forest. You'd find a snow covered field and put on black clothing. Words need the same visibility. Keep them away from patterns.

Dictating Action

The ability to anticipate the audience's needs is key in any presentation. If you know why a user stops at your Web site, you can shape your offering to those needs. This may sound fundamental, but many new comers build their pages based on what they know, not on what someone is looking for.


As a release manager Bob was a pit bull. He ran down every detail. When he put together the Web page, he included the latest release notes, with all the system requirements, new features, and special procedures. He was very thorough.

Most visitors, however, weren't involved in the releases, and only a small percent found that information useful. The rest wanted the latest discount rate, the earning ratios for investment purposes, employment options, and a way to check on old bug workarounds.

Waves of negative feedback eventually forced Bob to see the site from others' eyes. To accomodate their needs, he started the page with a selection map. This enabled the users to go directly to their areas of interest.

From menus to status.

The concept of having a choice brings us to the menu screen.

The first advance in user friendly screen design was the Menu. It offered a list of actions and the common prompt: "Select the number of your function and press ENTER." At one time in computer history, this was a heady development. We were catapulted from cryptic parameters with -'s and \ /'s to a menu that asked, "What do you want to do?"

Recent shifts to graphic presentations improved the menu structure. Button and icons replaced numbered choices, but the underlying context remained the action oriented.

Today, however, advanced interface builders are saying:

"Just responding to requests and offering menus is not enough. What triggered the request? How can the application get involved earlier and help shape the decisions that lead to the user's action?"

What would this decision aid look like? In its simplest form, it could remind us to act, warning of low levels, not unlike a car's gas gauge. Rather than waiting for instructions, it could hint, warn, and help us change plans in advance.

Status: Web style.

Unfortunately, the connection of status and action on Web pages is not always obvious.

To understand the connection, let's view a typical Web page. The most common pages are action oriented: read the news section, find a research reference, and get new e-mails. The user knows what he/she wants to do and arrives at the page ready to take action.

Understanding that their services function on the action level, Web developers must ask:

"Is there any information I could offer that would influence the user's decision to take these actions?"

This is a dimension changing question. It puts the Web developers on the next level of service -- they begin thinking at the decision level, not limiting themselves to after the fact requests. They step into the realm of advice and guidance. Helping with decisions will make your page stand out. It's not common for Web services to be that proactive.


A simple status for an e-mail retriever would be a flag that indicated newly arrived e-mails. You would never fall into the situation of trying to retrieve them (action) and finding none there. Another wrinkle would be an alarm that sounded when certain types of e-mail came available.

Traditional business operations have a full range of status to keep track of: delivery dates, expiration dates, scheduled meeting, and high/low supply levels. Web pages have: download times, last changed dates, file sizes, search relevancy, or usage rating. These are the raw data of useful status.


Ed didn't need to see the material right then. He would have liked the search engine to indicate that this wasn't the best time for downloading graphics. It could suggest waiting 45 minutes when the network volumes would be less.

Karen wanted the news service to say, "It's been a slow news day, don't bother."

John: "It would be nice if the e-mail manager automatically suggested a filter structure tailored to my message patterns."

The trick for Web designers is to change perspective from action oriented to decision oriented. They must continually ask, "What should the user consider before they take this action? How could I help with that?"

Once the decision choices are understood, another level surfaces: the action could be taken automatically. E-mail would be broken into content categories; home pages would suggest and direct optimum usage; a robot operated status sheet would suggest study, career, and sales segment programs.

How would this shift relate to the average Web page usage? If you can tune your pages to the status and needs of the user, users will return more readily, and they'll be quicker to sign up for products and services. As users weigh the use of your page against other similar pages, you will come out ahead because you take the person to their next level of functioning -- you help with their decisions.

Design territory: inside the user's head.

To design the right mix of status and anticipated action into your pages, you must shift your perspective from what you know to what the user needs.

For example, let's look at a design session for a Web news service:

Ted, the editor, held, "People want to know about the weather, sports, world news, new technology, politics, and the economy. Most are also interested in local events, down to the timetable at the movie house, but I don't see how we can deal with that."

Sue, their street reporter, pondered, "I'm not sure how important those items are to the average person. Personally, I don't want you to tell me the weather unless it's going to rain or snow; forget sports, well...maybe just how the Raiders are doing. Give me world news only if a crisis looms, although special interest stories are entertaining. I want all the new technology, but with an overview to help make sense of it. I can't relate to politics or the economy. A section on personal health would be helpful."

Another reporter, Bob, piped in, "I agree. A great deal of the news is ignored. We might be able to use the person's zip code to present the most relevant stories. California, for example, seldom needs a weather report. Or better yet, since most are concerned with local weather, use the zip code to identify local changes and only report those conditions. In hurricane watches on the East coast, a warning message could appear."

Sue replied, "The zip code concept also works for sports and politics. Although for sports, I'd like to the status of the division and not just the results for the local team."

Several creative slants were unfolding. First, Sue noted that people have different news interests, and rather than attempting a broad, thin presentation, it would be better to decide what is important. This is not a trivial shift. It means moving from what a reporter may have to say, to reporting what the users need.

Next, noting how a warning message would be useful in extreme conditions is a change from simply reporting the news. It is evaluating the effect of news on the individual and taking an appropriate action.

Also, the concept of status was introduced. As every category becomes more complex, it becomes necessary to maintain the broader view. This applies to following a local team and to tracking technology advances. Even though the team might have lost, in the larger context, they still maintained first place; even though Oracle came out with a new replication service, four others also did so.

Giving advise.

Status helps us decide what to do next. If a pot is boiling over, I need to turn down the heat. Many times the status is obvious, and the recommendation to action is the focus. However, if boiling water was automated, I would rather not be told it was boiling over. I would rather be notified of the action after it was taken automatically. Better yet, don't tell me anything, just serve the food. A summary status might be more appropriate -- a notice indicating pots are always boiling over. A recommendation for regulation might follow.

Recommendations play an important role in Web pages that sell similar products. Help the customer. Give them suggestions backed with pros and cons. In cases where status is not enough, make specific product recommendations.


I was looking for a new pool cue. A Web search uncovered several sites with good selections and reasonable prices. Looking through them, I was confused. I could barely see any difference between the $150 models and the $950 ones. Some had fancier inlays, but they wouldn't improve my game. Confused, I didn't buy anything.

If someone had helped me understand how each type of cue would effect my level of play, I could have been coaxed into upgrading my cue.

On Annoyance

Clutter and distractions.

Years ago someone gave me a honest appraisal of my living room.

She said, "You have a lot of intriguing souvenirs and gadgets, but to have everything collected in one spot is too much. It's distracting and a little annoying. Spread out your treasures."

Trying to rebut, I held, "But isn't this antique juggling set fascinating?"

"That's not the point," she persisted. "It's just too much, too busy, too cluttered."

The point did sink in and contributes to my sensitivity of useless clutter. When Visual Basic first arrived on the scene, Windows applications filled with tool bars, status indicators, and countless buttons. Every novice Windows developer now had a tool that made the difficult easy. The enthusiasm stirred by this new found power spilled over into design, and the top priority became to use every VB feature. This resulted in cluttered, unusable applications.

Every image, every piece of information, every option should be justified into terms of user need and contribution to the pages' goals. Colored bullets are a throwback to the Visual Basic 1.0 era.

Making me work.

The products and services your page offers should be accessible right from the start. Give me the chance to find it quickly.

When I go into a hardware store for a hammer, I don't want to search four acres of tool bins to find it. My preference would be have it on display just I came into the store.

In the hardware store, I don't want to wander; on a Web page, I don't want to scroll and follow vague links. Put the key options on the first page. And make them concrete. References on the front page are perfect -- I can go directly to my destination.

People come to your site looking for something specific. If they're browsing, chances are they'll never find their way back to your page again. But users who have come with a mission don't want to be told to look around until they stumble across the items they're looking for. Give it to them immediately, or tell them how to get there. And please don't make them wait for a bunch of images that have nothing to do with the search.

Loading times.

If you combine a useless first page with slow loading images, to the best of my ability I will never, ever come back to your page. If the images are relevant, the wait might be bearable, otherwise it is rude to make me wait.

The annoyance factor is so severe, that my advice is to error on the side of speed. Don't put large images on the front page. If the images are essential, place them several pages down in the page layout. If I seek them out specifically, I'll have more patience for their download time.

On the side of the Web page builder, it is easy to overlook the loading time. The page doesn't take as long to load on a test system with its memory and disk caches. In the turmoil of a development project, how things appear on another system can easily be forgotten. When you see an image load in .5 seconds, there isn't much empathy for the someone who might experience a 20 second load.

Urge to return.

A precursor to the "urge to return" is the "urge to not return." Any annoyance from loading speed, readability, and clumsiness due to paging and useless links must be removed. Only with the annoyances removed does your page have a chance to motivate users to return.

Although removing annoyances is important, the act of irritating users doesn't always have an immediate effect. If, for example, your page is cluttered, but you offer a service that's essential to my work, I will return in spite of your shortcomings. Your service outweighs my irritations. However, once a more streamlined alternative exists, I'm gone.


I don't like the search engines. They fill up the screen with advertising and empty space and forcing me to page down needlessly.

An ideal search engine display: Pack the screen with my results. If you must advertise, place the ads in side columns that don't grab as much room. If there is more to the search, build the next page so that the only delay is with the network. I'd like the browses to load the next available page (this may require a new HTML tag for next most logical page).

Why am I here?

Satisfying all visitors can be tricky, because their individual needs can be diverse. Some may come with a specific questions, others with a complaint, and yet others out of curiosity.

Anticipating the requests and offering options on the first page is fundamental. It surprises me that elaborate displays and promotional pitches ignore this common courtesy. Even an aggressive shoe sales person will ask, "Can I help you?"


The page loaded instantly. The background was a clear; the only image was a simple representation of the company's logo. A list of choices offered:

| Company Profile | Product Information |

| Customer Support | FAQ's | White Papers | Topic of the Week |

| Employee Index | Career Opportunities | Suggestion Box |

This front page is user oriented. It allows the greatest number of users to address their needs quickly and clearly.

Spirit of the internet.

When I'm visiting a site, I appreciate being offered something of value for no charge. It's a neighborly gesture in the cooperative spirit of the internet.

Putting up a version of the company brochure does not provide this exchange. Your offering should have value and is best if it conveys a part of yourself. For lack of a demo product offering, you might install a category called "Hot Topic of the Week" and lead with a question you genuinely consider worth discussing. It could be "Why IBM is doing well?" Include ten of the best replies you've heard at the water cooler. Don't sell anything, offer real insight.

With the speed of technical change, many are looking for guidance and insight into decisions that are best for their industry. This is your opportunity to lead -- offer a series of white papers on current trends and dilemmas. Don't worry about who sees it, leaders guide entire industries. It will be obvious to your customers when your competition proposes your suggestions.

Additional Reading

About Face: The Essentials of User Interface Design by Alan Cooper. IDG Books Worldwide, 1995.

Tog on Interface by Brude Tognazzini. Addison-Wesley, 1992.

| Web Booklets | AWSS Home | Your feedback is important: Jim Davis