Web design is a tricky business. Web graphic design, markup, CSS, SEO/findability, programming, usability and database design are all facets of web design, and many of us work within many or all aspects of the industry. But from the user’s perspective, there is only one side to the web: staring into a monitor window.
The back button is failure. It is the rock in your window of opportunity to convert a complete stranger into a stakeholder in your business model. After all our hard work creating a site, if we don’t capture the user’s attention and allow them to navigate our site easily, all of our hard work is for nothing.
Here are five sites I found that beg you to click the back button and some of the reasons I think they fail:
Van Winkle Associates - http://www.vanwinkleassociates.com
Oh, Flash. This is an agency site, so like many agency sites, they designed their site with a Flash intro. And like 99% of Flash on the web, it just sucks. Why does it suck? There are countless articles about why Flash sucks. In this case, your first impression of the site is a long load time. Which would be acceptable if the result were stellar. But it’s not. There’s a tiny, tiny matchbox-sized video player next to some really cheesy, badly animated corporate copy ("Think Strategic”, “Think Creative”, “Think Results") that drowns out the effect of what seem like incredibly well done videos.
If you’re still here by the end of the Flash intro, it’s because you were engaged by the videos. Which means you must have been wearing glasses (did I mention they’re TINY?!). And you’re moved along to Van Winkle’s about page.
First thing you see (if you ignore the outdated design)?: a sea of letters. The thing about overusing copy on the web is your users don’t even read it. They just see it as a field of words as their eyes glaze over and ignore the usually-self-important paragraphs you spent so much time writing that don’t help your users get what they came for anyway.
But I need to explain my company to the world!, you say. Wrong. You need to show the world what your company can do for them. And you don’t show them by telling them.
First sentence: “We believe there is magic in advertising, but it only comes through perfect understanding.” That’s great. But why don’t you just show us with your sweet ads instead of giving us this trite line? How about some statistics about how those ads performed for your clients. How about some testimonials right in my face before I leave your site? As a user, I believe you’re wasting my time trying to wow me with your philosophy when you should be wowing me with what you can do for me.
And as an average user, I’m not going to be here long enough to find ‘RESULTS’ on the menu. Which is fine because that is one convoluted menu. But let’s say I did: what do I get for my troubles? MORE TEXT! Click!
SolidLine Media - http://www.solidlinemedia.com
This site was #1 in a Google search result for video production services. That’s a big deal! They probably paid a web marketing company good money for that result. So why do they shove ten paragraphs in your face when you get there that throws you into a text vertigo that leaves you reaching for the back button so you can regain your senses?! Solidline Media would not be on this list if not for their excessive copy.
I bet they do good work. So why isn’t video the VERY FIRST THING you see when you get to the site? It would be engaging. It would put their product first and foremost. They could host the clip at Vimeo in HD!!! Instead, you see a corporate monkey in a cheesy office chair staring at the ceiling. I would, too!
BAD CLIP ART 101. If you’re going to get a cheap site made at some Website Factory, make them use some fresh clip art. Aren’t we tired of the pretty faces in suits over and over and over? If you were searching for video production services, wouldn’t you look for something more unique? I wouldn’t want a tired cliche of a video produced by this company. So why the tired cliche website?! Click!
Flash Kit - http://www.flashkit.com
Flash Kit is B-A-D! But obviously it works for them as an ad delivery device, so don’t expect it to change. I’m about to have an episode just staring and trying to analyze what’s going on here. The animated ads in the left column make me want to move that side of my browser off the edge of my screen. Okay, done. Wow, I think my eyes almost exploded.
What is Flash Kit? It’s an okay “Flash developer resource site.” Maybe this is why so many Flash sites suck. It has that sort of old, out-of-the-box PHP forum template look. But looks—especially for a resource site like this—aren’t what we came here for. We came here to find something.
Flash Kit fails because it’s so hard to find what you came for. Once you get past looking at the ads (and hearing some intrusive Flash or video ad—I’m really sorry if you had to hear the computer voice tell you to type something into the box to hear her say it), your eye falls on that wide center column with the featured tutorials. These are badly laid out and hard to scan because the text is so wide. If they had utilized two columns where the text was half the width as it is now, you could scan through the tutorials with no trouble.
Let’s say you were looking for a sound effect for your Flash movie. After squinting and looking through the tiny top navigation, you might find the main navigation on the right side of the blue header. Again, the text is tiny. What’s more is how little effort is made to set this area off as something important. If the links to the categories were set off in their own box with a contrasting background color, the design would be saying, “Look here, this is an important part of the site,” which it is.
Unfortunately, this design is so cluttered, the only thing that gets set off is the white space. Notice how your eye is drawn to the empty area in the blue header and to the white gap next to the What’s New/Featured Tutorials header. This is a design failure.
If you get to the lower-level pages, there’s a little bit less going on. You can probably get your sound effect. But you won’t be sticking around long to browse because the whole time your entire soul is pulling you away from the screen and the gauntlet of ads screaming silently your way. I bet they lose half of their visitors at the home page, who would rather search elsewhere for that sound effect.
You’d think a Flash developer site would be an inspiration, but you’re going to have to find your inspiration elsewhere. Click!
Centex Homes - http://www.centex.com
If there was ever a time for Centex to have a decent website, that time is now. Unfortunately, their site falls short. The best I can describe my initial impression of this site is: “Um.”
I’ve never seen a site where the homepage is so vapid of a good call to action. Centex’s home page is pretty simple, and I like simple. We’re not overwhelmed by a sea of text. But staring at this site for a good bit (in internet time, of course, so ... 10 seconds), I was left totally disengaged and wondering what to do.
I get the impression this site was designed by a print designer who did a great job making it look nice. This would explain the site’s shortcomings because print designers are less accustomed to planning interaction.
As of this writing, a Flash movie about being “Up to 40% more energy efficient” was playing on the left, and a carousel of icons was hypnotizing me, furthering my what-do-i-do-now? moment. When I interacted with the Flash movie, the carousel spun faster. Okay. I wasn’t reading the captions by the icons but I was having some fun making them spin faster or slower.
After a while, I was bored with the carousel and realized I forgot why I came to the Centex Homes site in the first place. So my eyes turned to the right column where a nice green map of the country was staring at me with states shaded either dark green or a sort of light tan-green. Underneath, a two-color quasi-wordmark says “Centexcellent.” Cute. Further down, “Low APR. Act ASAP.” is printed in large normal-weight black Arial font on a white field. Okay, but how? My eyes glance over some very small, low-contrast text that reads “Don’t miss out! Click here.” Nor did I realize that the big normal-weight call to action was actually clickable. Whoops.
Maybe I missed all of this because the carousel was spinning out of control, making me nervous and think about Twilight Zone jokes.
So I scroll back to the top and think about how none of the navigation links are interesting. Click.
National Basketball Association - NBA.com
The NBA has some deep pockets. Sadly, I think what happens with big organizations with deep pockets is they tend towards design mediocrity and unoriginality. It isn’t that the NBA website didn’t take a lot of resources—designers, programmers, analysts, etc.—to put together. I’m sure this thing was a monster build. It’s just how overwhelming the design is. It’s like when you open up a jigsaw puzzle box and dump the pieces on the table. There is so much going on, you can’t make sense of it.
Almost everything on the page is broken down into a piece, a sort of tile. I count over 60 of them, and that doesn’t even count some of the titles, which are made to look like separate tiles. The site has kind of a mosaic feel, which is not what you’re looking for when you’re trying to navigate.
Sometimes I wonder if website owners mistake an overwhelming design with an impressive design. Maybe they think to themselves, oh, there’s so much going on here, it must be good. Wow, look at all that animation—people are going to love this.
Unfortunately, that seems to be the common theme.
Luckily for the NBA, they have a monopoly on top-tier basketball. No matter what they do, web visitors are going to look at them as the #1 source. Web users might choose ESPN.com instead of NBA.com to watch game highlights, but there will only ever be one official site for top-tier pro basketball.
What the NBA designers need to do is take a lesson on contrast. They should look into what other big pro sports leagues are doing. The new National Hockey League (NHL) website is ideal. It’s simple, to the point and utilizes contrast to help guide you through the hierarchy of the site. UEFA.com and NFL.com are decent and far superior to NBA.com yet lack the clarity of NHL.com.
If I was looking for pro basketball scores and news, I’d be off to ESPN.com ... not the greatest site ever, but at least I don’t get dizzy looking at it. If I wanted to buy a basketball jersey, I’d be off to eBay. Click.
Overall, a lot of users suffer because of poorly executed websites. The colassal failure lies by and large in designers and owners who try to do too much and cram too much into their site. Rather than plotting a clear path from initial visit to conversion, too many websites demonstrate a metaphorical brain dump or design vomit, and the users suffer.
The unfortunate theme of high- and higher-end web design today (at the end of 2008) is not a lack of talent but a lack of taste and restraint. Of the three parties involved (owner, designer and user), sites are generally designed to impress everyone but the user, the intended audience. That isn’t to say web design is moving in the wrong direction. It’s just that the movement is happening from the bottom up. Larger agencies are largely missing the boat.
And that wrongheaded design mentality sells. Wowing your client works. Flashing your talent to make something dazzling is easier than explaining why usability and clarity work. I even have sites in my own portfolio—sites I don’t really like—that are there to make an impression. I hate to do it, but clients like to see it. For me, the trick is to work hard educating them once I get them in the door. C’est la vie.
As designers, part of our job has to be saying ‘no’ to bad ideas. The attitude of many clients and managers that designers are just prettying up ideas has to change. We have to educate ourselves, educate our clients and provide compelling arguments why clarity and focus will lead to conversions and, ultimately, revenue.
You can find me on Twitter as @mccambridge