How bad web design makes it harder to make good designs.

You’d think it would be easy to design a leading web app. With so many hopelessly incompetent designs out there, you should only need pretty basic attention to usability guidelines, and your site would crush your competition paving your way to total world domination. However, it seems a regular diet of contemporary web sites has dulled users’ ability to respond to many basic good practices. Like a population raise on McDonalds French fries, the users are disinclined to respond to superior design even if it were served on fine china, instead complaining of no little packets of ketchup and salt.

In a just universe, bad site design would just hurt bad sites. However, certain bad practices are so widespread that they’ve engendered user habits and expectations that disrupt the use of well-designed sites. Subject to years of this web abuse, our users have come to tolerate and even expect it. Good design fails to outperform the bad in either usability tests or the cash register. Not seeing a difference in performance, site designers are more likely to copy the bad designs, making them more widespread, making it ever harder for us to dig our way out to greater usability. Short-sighted features of browsers, which were never intended to host applications, add their own boundaries on effective web app design, stifling innovation.

Three forms of web abuse conspire to subvert good design:

• Inconsistent visual representations.
• Poor attention division.
• Interaction inefficiencies.

Inconsistent Visual Representations

There is a basic grammar for designing a web page, of using layout, graphic design, and control selection to allow the user to predict possible interactions. Too many pages are breaking these rules of grammar forcing users to adopt a CAMIDS usage strategy (that’s Click Anywhere Maybe It Does Something). Principles of a visual hierarchy are violated. Borders, shading, and spacing are treated as meaningless decorations resulting in misperception of functions. Then there’s poor choice of controls. I’ve discussed before the importance of using the right control for the job and that controls need to have distinct appearances that correspond to distinct behaviors. Some of this is due to the limits of browsers. Lacking a proper pulldown menu control, designers improvise with combo boxes, leading to confusion whether or not a Go button is included. Lacking a means to show a selected object or record in a list, designers use checkboxes, a control normally used to set a parameter value. When some checkboxes in a form are used for object selection and others are used for setting parameter values, the user will likely become confused. Links, in contrast to combo boxes and checkboxes, are misused with no justification, being unnecessarily substituted for all kinds of other controls such as command buttons, tabs, and option buttons.

Aggravating this is that many sites these days don’t consistently represent links. Long ago when the web was young there was a standard that unvisited links should appear as bright blue and visited links should appear as purple. Even images had blue/purple borders if they were links. That standard has functionally disappeared, with web sites using whatever color they want for links. One user in my family once called me because he was frustrated that MS Office would automatically turn certain text blue, which he saw as wasting the color toner in his inkjet. It was converting URLs and email addresses to links, dutifully underlining and bluing them consistent with the standard. This color and style coding meant nothing to the user. I had to give him a history lesson on the web to explain to him why Office was doing what he saw as entirely nonsensical. He had been a web user for years but he had not even recognized these blue things in his Office documents were functioning links. And why should he? In his experience, links may be any color.

Frankly, I can live without the blue-for-link standard. It was a pretty dumb idea from an accessibility standpoint. I’m more concerned about other deviations from the original standards. The very useful concept of visually differentiating visited from unvisited links has been abandoned, perhaps because without standard colors, it wasn’t clear what should mean visited and unvisited. Linking images almost never have colored borders, making links harder to identify in a web page. Underlining of text links is now treated as optional rather than required. Often the underlines don’t appear until mouseover, making links hard to recognize by simply looking at a web page.

This wouldn’t be so bad if each web site were at least internally consistent. If users only had to identify the site’s link color, they might have a chance at decoding the pages. However, increasingly we’re seeing multiple ways of representing a link within the same site, often with the same colors and styles used for links and non-links. I’m not talking about different appearances for links-acting-like-tabs or links-acting-like-command-buttons. If you must use a link to do the action normally ascribed to another control, then the link should be made to look like the control it emulates. I’m talking about entirely nonsensical variation in the appearance of links, variation that tells the user nothing.

Take for example Microsoft’s Maps.Live (click for full size).

On the same web page, links may have three different appearances: blue on white, white on blue, and black on white. There is no underlining. Ordinary text is mostly black on white, rendering it indistinguishable from links. On the map, the same shade of blue that is used for links is used for labeling bodies of water (which don’t act as links), such as the Quabbin Reservoir at the top of the map. However, the black-text “Microsoft Virtual Earth” text in the lower left is a link. Different colored links do not correspond to different behavior. The black-on-white links at the bottom are ordinary links, taking the user to a new page. The black-on-white links below the Search box act as option buttons. If you thought you could enter “1600 Pennsylvania Avenue, Washington, DC” and click “Locations” to find the White House, you’d be wrong. You have to also click the Search button to get it to work. The blue links across the top of the map may open side panes, dropdown lists, or quasi-dialog boxes. The color of a link doesn’t seem to mean anything except that they’re next to links using the same color.

Is too much to ask for something vaguely resembling a standard? Something like:

• All links are underlined. Always.
• Underlining is never used for non-links. Use italic or bold for emphasis instead.
• One color is used for all links.
• By “color” I mean it has a hue -links must not be black, white, or gray.
• That color is never used for non-links.
• Visited links have a less saturated version of the link color (to imply some “wear”).

I don’t buy that you need more flexibility for aesthetics or “branding,” unless maybe your brand is We Derive Sadistic Pleasure from Unnecessarily Confusing the User.

The impact of this sort of web abuse extends well beyond the sites that practice it. Because users have to deal with some sites with multi-colored links, they have to be prepared for that possibility on your site. You can go ahead and make your links all one color and always underlined. You can even make all your links blue, reveling in its standard-complying awesomeness, just like Jakob Nielsen. But that won’t stop users from wasting their time scrubbing text of other colors -even black -looking for links. You can scrupulously put link-colored borders around linking images. Users will click on other images anyway. Go ahead and use a different color for visited links. No one will know what it means. Maybe you would never use a checkbox for selecting an object, but that won’t stop a user from mistaking a checkbox for doing exacting that in your web app. The few spoil it for the rest of us.

Poor Attention Division

I’m becoming increasingly concerned that the web is giving us all attention deficit disorder. Soon we’ll all be popping prescription pills in order to concentrate long enough to tie our shoes. Maybe I should invest in some pharmaceutical companies. Seems like the market has hit bottom. I should call my broker from work tomorrow. In between reviewing those systems engineering design plans. Remind me to tell you a story about a meeting I had with systems engineers in North Carolina. My father is getting a cat from North Carolina.

Optimizing Attention in the Digital Age

What’s the topic again? Oh, right, attention. Perhaps the most important task for web users to learn is how to ignore things. This appears to be something that users pickup quite quickly. Users avoid dwelling on any one thing too long. Users typically don’t read web sites. They scan them, skimming them for content of interest.

You’re skimming this post right now, aren’t you?

I don’t blame you. There’s several reasons why it’s adaptive to not pay too much attention to any single web site or page. First of all, there is so much content out there competing for our attention that you have to limit yourself at any one site in order to have time for other sites. All of us have probably experienced being sucked into the web, going from link to link, finding all kinds of great stuff, and, is it really 2:30am already? The only way we can keep the web from taking over our lives is to resist our natural curiosity and discipline ourselves to strictly sample content. Secondly, web use also tends to be very goal-directed. I needed to know the address for Scott Foresman Publishing. Anything else offered by Google or linking websites is just a distraction to getting the specific information I needed. Finally, text is hard to read on monitors due to their relatively low resolution, considerably harder than a printed page, especially if you’re using a CRT or not using ClearType. Unless the content is really worth it, users are going to be reluctant to make the additional effort.

Compounding this is the slow response of the web pages. Pages take several seconds to load from the time the user clicks a link until something useful appears. This has two impacts. First of all, it encourages users to multi-task. I mean, while waiting for a page to load, a user can use those seconds to look at another web page, or check email, or write a tweet. The random waiting associated with the web encourages users to flit from page to page and task to task, giving minimum attention to each in attempt to get the most done in the least time.

Second of all, a slow web encourages us to design pages dense with content. For a given large set of content items, you have the choice of having few pages with lots of content per page, or lots of pages with little content per page. There is a user efficiency trade-off between having lots of pages versus having lots of content per page. Having lots of pages means users on average have to do more navigation to find the desired item. Having lots of content per page means users on average have to spend more time scanning each page to find the desired item. The optimal point in the tradeoff depends on how long it takes to load a new page. The more time it takes to go to a new page, the more it makes sense to put more content on each page -the greater time to find content on a page is less than the longer wait for a page to load.

This is why web pages tend to be cluttered with content. It’s actually the optimal design for maximizing the speed that users can complete their task. On at least that dimension of usability, it’s the right thing to do. However, it also teaches users that for any given web page, large amounts of the content will be irrelevant to their task. Users come to expect that much of any web page needs no attention.

Subversion of Attention in the Digital Age

While minimizing attention to web pages is necessary, it’s not exactly good. We’ve probably all witnessed users missing key information from our web pages because users are so quick to click and move on. Many usability problems would fade if users would attend more to the important things on web pages. However, there seems to be a conspiracy of web pages trying to make this as unlikely as possible. Frequent use of small or poorly contrasting font sends a message that the web is not for reading. Despite the highly goal direct nature of web use, many web sites still insist on including content that is irrelevant to any goal the user is likely to have. However, most problematic is the misuse and abuse of attention-getting UI elements.

Once there was an effective design element to use if you really, really wanted to get the user’s attention, I mean, “you-really-need-to-stop-and-attend-to-this-right-now.” That design element was the message box. Not that it’s always easy to get buy-in on the merits of message boxes. In the early ’90’s, I was brought in to improve the UI for an XWindows-based CAD system. Among the issues were error messages. As developed, if something didn’t work, the app showed a discreet message in a small console area in the lower right, far away from where a user was likely to be looking. I explained that users are unlikely to notice the message, and will wonder why something didn’t work. They may not even be able to tell if something didn’t work. The developer insisted that this design was perfectly adequate for getting the user’s attention. I argued, that, no, if you need to get a user’s attention, stuff a big fat message box up his nose. The debate got heated. Eye-witnesses say it was resolved when I physically lifted the developer over my head and body-slammed him to the hard floor, WWF-style. That’s actually an exaggeration. The floor was carpeted, after all.

Today, I think there may be better ways to communicate errors than by using message boxes, but I’d still argue that popping up a window is the most effective way to get the user’s attention… until advertisers on the web realized this. The use of pop-up windows for advertising has ruined the use of this design element for legitimate usability purposes. Even if your message box or other window were to get past the browser’s pop-up blocker, the user will likely dismiss it before it finishes loading content. Users have learned quickly that anything in a new window is irrelevant. They’ve developed phenomenally fast kill-the-pop-up reflexes that are so habituated that they don’t always know they’re doing it. The result is you can’t use message boxes or dialog boxes for your web app designs.

“Innovation” Making it Worse

Now when a situation calls for a new window (e.g., to show pictures related to content on the parent page), designers can instead use that poor knock-off of a dialog box, the lightbox.

Lightboxes, however, are typically so awkward and alien that opening one of them is almost universally worse than simply linking to a new page like normal. For usability, they’re so inferior to a new window that they’re not even worth considering:

• Immoveable and modal. Typically the whole reason to use a pop-up new window is to allow the user to keep the parent page in view. However, lightboxes can’t be moved, so the user can’t see all that’s behind it. Being modal, the user can’t interact with the parent page even if the lightbox could be moved (e.g., in order to jump ahead to a particular picture).
• Distraction. Just to make sure the parent page is unreadable, lightboxes typically give them a muted appearance, reducing the visual contrast of the text. The intent, I suppose, is to suggest the page is disabled so users won’t try to click on it, but we’ve a better way to “disable” a page: go to another page. What you get instead with lightboxes is a border of distracting text and images decorating the content you actually want your users to pay attention to. So using lightboxes means losing the advantage of a new window in allowing users to see and access content on both pages; it also means losing the advantage of going to a new page to ensure the user will only focus on the new content.
• Added Mental Workload. Lightboxes force the user to learn and remember yet another way of navigating. It’s bad enough that there are three inconsistent ways of dismissing some content in order to return to previous content. The user may need to use the Back button, or close the current window, or close the current tab. Now we add closing the lightbox. We don’t need this complexity.

Here’s how things go wrong:

1. User is paging through pictures in a lightbox.
2. User decides to go back to look at a previous image.
3. So user clicks the browser’s Back button.
4. D’oh! The user has now closed the lightbox and gone backwards from the parent page.
5. User starts over, wasting time and effort going forward and re-opening the lightbox to the desired picture.

Here’s how things go even more wrong:

1. User opens a page in a new browser window (or tab).
2. User clicks on a link for a picture.
3. Picture is shown in a lightbox.
4. User doesn’t notice this and assumes s/he is on a new page.
5. User finishes with picture and wants to return to the parent page.
6. User doesn‘t click the Back button -the Back button is disabled because the parent page is the first page in the browser window.
7. But that just makes it worse: user takes disabled Back button as a sign that the picture was shown in a separate browser window.
8. So user clicks the Close button.
9. Double-d’oh! The user has closed the lightbox and the parent page.
10. User feels like body-slamming someone.

I’m all for developing innovative user interface elements, but they have to have some usability advantage over existing elements. Lightboxes represent re-inventing the dialog box with no advantage other than they don’t look like popup windows, so users won’t mistake them for advertisements. Except that now advertisers are using lightbox like elements: ads that float over a page until the user clicks a Close button on them. I’ve even seen some floating ads that move around on the page, making it harder to hit the Close button. Like I really need to play Missile Command with a stupid ad before reading the content I actually came to read.

This was predictable: once pop-up blockers and user learning undermined the effectiveness of pop-up windows, the ad guys moved on to something else. Of course they used the same sort of technology that goes into lightboxes. Soon you won’t be able to use lightboxes because users will mistake them for ads. All pretty pointless, no?

I don’t think we can win an arms race with advertisers. For any new innovation we create to get the users’ attention, advertisers will soon exploit it, ultimately devaluing the innovation. The only solution I see is to adopt standards for advertisements. For their own sake, site owners need to come together to forbid the use of certain techniques like pop-up ads. They need to establish rules to make ads look like ads and look different from the site’s content. This already exists in other media, such as TV and newspapers. We need it for the web too.

They Killed Parker

Of course, advertisers haven’t limited themselves to pop-ups in effort to get users to pay attention to something they don’t want to pay attention to. Animation is another excellent attention-getter, our survival instincts being naturally wired to attend to motion in the periphery. So naturally ads commonly use gratuitous animation. And naturally, survival instincts or not, users quickly learn that animation means something irrelevant. Personally, I rely on resizing windows to crop out any animation. Here’s how I read the Shark Tank, for example:

Sure, the animation gets my attention, but just long enough to hide it, and not long enough to know what’s actually being advertised. Of course, this means that I’d last only fifteen minutes in the Sunderbans of India, because by habit I’ll shield my eyes from the sight of that orange-and-black stripy thing stalking me from the bushes.

Many web site designers have elected to emulate advertisers, throwing gratuitous and irrelevant animation onto web sites, especially home pages. My intranet at work has an animated banner. That is not the most important thing for the user to attend to. The designer’s attitude seems to be that users are used to irrelevant animation, so it’s okay to have it. In fact, maybe it’s desired in order to get that dynamic ubiquitously commercial webby aesthetic.  Television networks, which live in fear of being made obsolete by the web, are copying this aesthetic too, inserting news tickers and “snipe” ads into shows.

Where does this leave UI designers? Well, if we need to get the user attention, we can’t use animation. Users will ignore it. Parker the Prairie Dog will not work today. Along with message boxes, we have one less tool in our toolbox for making usable designs. At least, we can still use big bold red text to get attention. No, wait, we can’t. That’s assumed to be advertisement too. Increasingly users are learning that what draws the most attention is the least important, complicating the task of designing UIs. What? That enormous colorful flashing message box saying “DANGER: YOU’LL ERASE YOUR HARD DRIVE AND SPREAD DEADLY PESTILENCE!”? I didn’t notice it.

There’s also a more subtle impact. It goes against our brain’s wiring to ignore things like animation. Yes, users learn to ignore it, but they have to actively ignore it. It takes mental effort, effort that would otherwise be going to reading the content that really matters to the users. Like working with a blurring old CRT, this encourages users to pay less attention to our web pages. And it becomes a habit. Users learn that if it’s on the computer then it’s not worth attending to too much. Find something to click and move on. In this age of digital communication, we are undermining our own ability to communicate.

Interaction Inefficiencies

Web abuse creates a gauntlet for users interacting with computers. First users have to figure out what they should attend to, where what is most attention getting is too often not relevant at all. Next they have to figure out how to interact with the computer, where the visual cues for interacting are too often inconsistent. Finally, the users have to actually execute their actions. Here, too often, neglect of basic usability principles encourages users to adopt a less efficient choice. There are still many web pages with intolerant input formats that cannot handle concepts like a credit card number with spaces in it, forcing the users to enter the numbers without spaces, making it hard for them to verify the numbers. There are forms that load without focus pre-set to the first field, forcing the user to click in the field before typing. Many Search fields are unresponsive to the Enter key, forcing users to re-grip the mouse and click a Go button. There’s no excuse for sites having these problems now more than 10 years after the web went mainstream.

Like with the problems with inconsistent visual representations, some interaction inefficiency is due to the initial limitations of the browser as a platform for applications. The need to support bookmarking and the lack of Undo discourages multi-pane edit-in-place rich web applications, instead favoring the use of wizard-like chains of largely static pages that have more navigation overhead requiring more time to complete a task. Slow and unreliable updates back to the server require confirmation pages to assure the user that their input was saved, but also making for slow clunky interactions. Drag and drop is not a built-in idiom of web interaction, thus interactions are designed to use tedious series of clicks and pages. Difficulties in establishing states and sessions means that navigating away from a form -even to show an error message for that form -means clearing the form, erasing all the user’s work.

Development techniques, such as those for rich internet applications, can eliminate these problems. However, unless the overwhelming majority of web sites use these techniques, your users are unlikely to experience the benefits. Constant web abuse has promoted learn helplessness among users so that they are disinclined to even try more efficient interactions. Maybe your web page accepts spaces in credit card numbers, but how are users supposed to know this? Do they dare include spaces and risk having to re-enter it? Maybe pressing Enter will initiate a Search, but it’s probably easier on average to just get in the habit of grabbing the mouse and clicking Go for every site. Why should the user trust that you’ve did everything right and a confirmation page is unnecessary? How is a user supposed to know that drag and drop is even an option?

Dealing with It

I don’t have any great advice for dealing with web-abused users. We have to keep on making our sites the best they can be for our users.  At the same time, we have to resist web-abusive practices such as having more the one color for links. These are things that may not show a benefit in short-term usability testing, but we have to stick with our principles anyway in hope that eventually most abuses will eventually stop. In the mean time, it may be necessary to include some design elements to inform users of our more usable designs. For example, it may be necessary to include the text “Spaces OK” beside a text box for a credit card number (although the benefits of this have to weigh against the clutter and possible confusion it can induce… and the fact that users ignore so much of the text on a web site). Beyond that we are obligated to point out such poor designs that harm good designs. Educating or maybe even shaming the designers responsible for the abuses may have an impact where the user can’t.

Summary Checklist

Problem: Inconsistent visual representations, misuse of attention getting techniques, and inefficient interaction designs on some sites harm the usability of other sites.

Potential Solutions:

• Resist web abusive practices in your own designs.
• Attempt to alert users of your good practices in your UI..
• Understand that user performance will not be better with your sites as long as there are many web abusive sites out there.
• Do not rely on UI innovation to work around the problems caused by web abuse.
• Among web designer professionals, point out abusive designs, and explain how they harm more than just their own sites.
• Establish standards for displaying advertising.

Summer Post Schedule

As before, my schedule gets tight in the summer, so updates on this site will be more sporadic. This month’s post is a couple weeks late, you may have noticed. I hope to get the next one up in early July, and then the next one probably in September.