There are lotsa good reasons to refresh your site’s design. Mobile accessibility. Improving the clarity and discoverability of content. Or maybe your site was made by your secretary in Frontpage 97 and it’s just time to bring it into the 21st century.
But you know what they say about the road to hell, so let’s take a reality check. It’s possible your project is ensconced in a rapidly-falling handbasket and that your new design is going to be a big bust. And there’s often one big reason for that…
Like any industry where visual design features large, the web is heavily subject to fashion. We all want to be cool and hip, or whatever it is we’re supposed to be these days. We all want people to think our websites are sophisticated as hell, because if the site is classy and sexy, then we must be classy and sexy.
Certainly many web design refreshes are motivated by some CEO or marketing executive seeing something they liked on another website, and saying, “We have to have that!” (Unfortunately, sexy websites usually suck at selling.)
You might think I’m exaggerating. Surely most web-related business decisions are taken a bit more seriously than that—surely they’re made with some sobriety and thought for the bottom line. So let me offer two representative examples of “sexy”, terrible web design. These design fads are currently pulling heavily-laden bandwagons, loaded down with hapless businesses who just wanted to keep up with the Joneses.
Fashion 1: Image Carousels
If you do a search on this topic, as I just did, you’ll find there are dozens and dozens of plugins to create image sliders on your site. One design-related e-rag had a list of 55; another 33. And examples of “excellent” web design featuring sliders abound. Here are three I picked from a list of over 40:
Pretty, but the opposite of effective—for many reasons.
- Of users’ first three eye-fixations on a page, only about 22% are on graphics; 78% are on text (headlines, article summaries, captions). In fact, people often ignore images entirely until the second or third visit to a page. (Source) So taking up the majority of your page’s real estate with images is ass-backwards.
- Because it moves, users automatically assume that it might be an advertisement, which makes them ignore it.
- Most people can’t read that much text in less than 5 seconds. And since any given copy is only displayed for about 20% of the time, even if users do have time to read it, the chances are they’ll miss it anyway.
- Fancy formatting looks like a promotion to almost all web users, and is therefore ignored. (Source)
As Jakob Nielsen summarizes in an article about image carousels, “The user’s target was at the top of the page in 98-point font. But she failed to find it because the panel auto-rotated instead of staying still.”
What’s interesting is that a lot of large companies like Best Buy, Walmart and OfficeMax have started removing the carousels from their websites. I wonder why. And Newsweek, which used to have the classic, wide carousel, now features this narrow, revised version, with a much longer interval between frame changes:
By surrounding the carousel with other content they give it central place, but without it looking like a banner ad. And the longer frame change gives readers a chance to check out what’s on offer before it disappears. Ideal? No. Better? Yes.
Fashion 2: Watermark Homepages
I dunno if these have another name—it’s just what I call them because the basic design involves a huge photograph with a meager amount of text superimposed on it. These are particularly popular with any kind of creative startup right now.
Obviously the intention is to look good and thus—presumably—capture prospects’ attention. A few examples:
Does it look good? Sure. Is it effective? Not likely.
I’ve already talked about how fancy formatting tends to be ignored as a promotion, and how only 22% of eye fixations are on images to begin with. But this watermark style also violates other good web design conventions. For example, in Jakob Nielsen’s 113 design guidelines for homepage usability, #56 is “Use graphics to show real content, not just to decorate your homepage,” while #59 advises to:
Avoid watermark graphics (background images with text on top of them). They add clutter and often decrease visibility. If the graphic is interesting and relevant, users won’t be able to see it clearly; if it’s not, it’s unnecessary.
- Text superimposed over images tends to be ignored because your brain assumes it is part of the image — so doesn’t treat it as text. (It’s also much harder to read anyway.)
- The center – aligned text common to this style of design is hard to read; there is no left margin to anchor the reading path.
- The regular use of multiple of columns of text is like having multiple people speaking at once — it divides the reader’s attention and he ends up reading none of it.
- Because of the large image taking up most of the page, whatever body copy there is tends to fall below the fold, with no information scent to indicate its existence. While users will scroll, you have to give them a reason by getting them interested in the first place—and a picture with a self-congratulatory headline on top won’t do the job.
That said…you can have a sexy site without being a slave to fashion
As a general rule, most people do most things wrong. Therefore, if something is fashionable or trendy, you’ll probably get the best results by doing the opposite.
This is especially true in an outcome-oriented situation like a web design refresh; where the continued effectiveness of your business is tied to the number of leads and sales you generate—which in turn is tied to the design of the site.
But your design doesn’t have to be mincing about on a catwalk giving us all saucy looks to be sexy. You can create designs which do the job well, and look damn good doing it. Here are three of the most important rules I’ve discovered for keeping designs on track, ensuring that sex-appeal follows function:
- Know what goal you want visitors to achieve (and how it will lead to a revenue goal). As long as you are always focused on the objective of a given page, you won’t be likely to start chasing pointless baubles because the purpose of the design will always be foremost in your mind.
- Focus first on delivering your message as clearly as possible. Then use the design to further facilitate that by making it easy and enjoyable to read. Clarity trumps persuasion.
- Only use images that convey value more clearly than copy can. That way, you’ll never be a slave to your designer’s whims, or whatever fashions are currently in vogue.
Here’s an example I ran across recently that illustrates each of these principles perfectly. Notice its clear objective in the call to action button—along with a secondary goal underneath to eliminate the implicit “no” when you ask prospects to do only one thing. The headline could not be clearer, and is benefit-laden. The copy is clear and scannable. And the only image on the page is an actual example of what’s on offer — conveying value in a way that copy simply cannot. (Also interesting: the image is in a carousel, but does not automatically advance to a new frame. You have to click the arrows to see new images. Good usability; it leaves the user in control and eliminates the danger of banner blindness.)
One last thing before you launch your new design…
Let’s say you successfully navigate the dangerous waters of web design, avoiding the fashionably-swarming sharks and the rocks of trendiness. There’s still one last thing I strongly suggest you do before launching.
It can be rather embarrassing to launch a new design after many months of work, only to discover it reduces your conversion rate — then have to scramble to revert back to the old design again. Running a split test before you go live can eliminate such heartache.
Do you have a website refresh on the horizon — or have you just done one? Share your experiences and wisdom below for others to benefit from. I’ll also be answering any questions as always.
About the Author: Bnonn is the author of the free email micro-course 5 Sales-Spiking Website Tweaks Web Designers & IM Gurus Don’t Know. It’s one quick lesson per day, each with a tested conversion-boosting tip you can implement on your site in 30 minutes or less.