Why Following Design Trends Can Turn Your Website Refresh into a Colossal Waste of Time & Money

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…

Fashion

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:

image caousels

carousel-2

carousel-3

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:

better image carousel

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:

website design trend

trend-2

trend-3

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.

Indeed.

Moreover…

  • 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:

  1. 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.
  2. 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.
  3. 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.)

good web design

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.

Test.

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.

  1. Stanford Griffith Feb 13, 2013 at 12:36 pm

    Can you please post the source for this one? The hyperlink is missing. Thank you:

    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.

      • Is there a study that isn’t over a decade old? No offense, but the web has changed a wee bit since 2000.

    • hey Bnonn,

      you’re right that sexy design doesn’t make sales, however, sexy design can be minimalist and still sell…

      I’ve read some articles awhile ago about an ugly web site that sold a ton of ebooks… I guess if the copywriting is superior and words connect with the audience, design is less important… but, just as you’ve said, only testing will tell what works with a market, and which design sticks…

      Now, I took a look at your web site (informationhighwayman.com) — and noticed the opt-in form that sticks regardless if we scroll up and down… are you using a plugin for that, or how does it work? — and if you could share, how well does it do in terms of conversion? :)

  2. Great article! I’m about to launch a refresh, more like a complete re-do of my website and… I have an image carousel! Should I kill myself because the shame is unbearable ala “The Last Samurai”? My site is very media focused, a custom car magazine really, so I’m trying to show: 1) There’s a ton of great content and 2) It’s fresh and changed frequently.
    What do you think?
    In the least, I’ll make sure the scrolling is much slower than it is now. Or, I’ll consider stopping it completely, but showing other images available. Thanks for the sudden difficulty in breathing, and very usable emails, like the one that lead me to this story.

  3. Hey Pikesan, well at least you caught it in time :)

    All the research I’ve seen suggests it’s better to avoid carousels entirely. Even when they don’t auto-advance, they do still tend to suffer from banner blindness. Of course, if you can work out a design that doesn’t look like a typical carousel (a la the Newsweek example in the article), then that may work for you.

    If you have a lot of big images that will genuinely convey value, then start with a single image, caption it decently, and give the user a big prominent button he can push to see the next picture in the sequence. I’d avoid auto-advancing altogether — but if it’s on a very slow timer that’s not as bad.

    Hope this helps!

  4. Another great article.

  5. Hello,

    I’ve designed one of the watermarked image pages you’ve linked in the post – Cileos, to be precise. After the release we’ve tested it and… it works. Might be because our text is just an introduction to what the company does, without any call to action involved, but it doesn’t seem to make people run for the hills. ;)

    • Hey Mariusz, thanks for stopping by — and not being too offended ;) That’s really interesting. Would you mind sharing the objective you’re trying to get users to achieve?

      Just goes to show — even with all the best research and guidelines, you can’t know for sure how something will work until you try it.

      • Also from my experience (and I’ve been working as UX & visual designer for a while now) – citing Nielsen blindly these days is risky – with all respect to what he did in the times of “classic” UI usability, he lost touch with modern design and technology a while ago. ;)

    • Our primary goal is people wanting projects from the company – either by clicking the button in top navigation straight away or scrolling through at least part of the page. So far it’s working.

  6. What an absolute gem of an article. I agree with so much. I also always wondering about the value of a slider but I do think that it works for repeat visits and for the older slower? user eep, that might take their time to take it all in.
    I also agree with your left hand text margin- center margins are common and disturbing. I have a really basic site and you have really validated the decision to mobilise it without changing it too much- thanks!

  7. Nice! And very timely for me as I just finished a redesign after 5 years: http://kadavy.net/blog/posts/reverse-engineering-redesign/

    My goals are a little more nebulous since its a personal blog (I talk about them in the article above), an it’s a little soon to tell, but so far, the metrics look good. Time spent on site and avg page views are up, while the bounce rate is down. Referrals to the site about my book are way up so far.

    The funny thing is I have way fewer elements on my page trying to accomplish the above things. Maybe having less stuff and a clean design will prevail as victorious.

  8. I really like your comments and especially the statistics.

  9. Nick: the web has changed a little since 2000, agreed. But do you have any reason to think that the way users read has changed since then? Bear in mind the 2000 study confirms results from 1997, which in turn confirmed results from 1994. So that would seem to indicate a consistent trend based in some core principles of psychology or physiology, rather than in potentially changeable technology.

    Anyway, Nielsen has plenty of more recent eyetracking studies — I just linked the most directly relevant ones. See here for a full list:

    http://www.nngroup.com/topic/eyetracking/

  10. Mariusz, you say Nielsen lost touch with modern design & usability? How so? He has done many recent studies on mobile usability which are very good, for example. I think he does take quite a traditionalist approach to design — but he backs that up with evidence to show that more modern approaches don’t work very well. Basically just change for the sake of change (or eyecandy).

    Ultimately, any business website is about guiding a prospect from what he currently believes, to what he needs to believe to fulfill some business objective for you. Which means that web design is simply a process of optimizing thought sequences. I think Nielsen is tapped into that pretty well, and his research usually dovetails quite closely with the excellent studies that MarketingExperiments puts out. All of these consistently show how “traditional” design (heavily copy-oriented, images only to convey value copy can’t, etc) outperforms other kinds.

    Not that other kinds can’t work. Just as a general rule they don’t work as effectively.

  11. This is a fantastic article, have added it to our arsenal to show to clients when they insist they want a carousel or a watermark background regardless of whether these features have any relevance to their industry. This article will also help address the “me too” mentality of certain website design briefs.

    • This is a fantastic article, have added it to our arsenal to show to clients when they insist they want a carousel or a watermark background regardless of whether these features have any relevance to their industry. This article will also help address the “me too” mentality of certain website design briefs.

  12. You’d be surprised how many people simply “follow” and not track. We should always track and see what works before jumping in. Design works the same. Don’t just randomly follow a fad. My previous boss changed his site every month. One month it was pinterest, another month it was Twitter etc…

  13. Enough about “What’s Hot for 2013″. These tips are great and would make you think twice about the sassy web designs coming out now. We’ll definitely make use of this article! Thanks!

  14. I think your article has good and bad points. The good is the info about the slider. I also thought you pointed out good things about an article being easy to scan. Multiple columns.. Also interesting. But I think it is ok if it is secondary or tertiary information.

    The bad is about design.

    1. This is the business of advertising. If you are designing something that is not trying to sell something, then you are creating art.

    2. That is a 13 year old article that is based on NEWSPAPER websites. Of course, people would go to the site and look at the copy first. They are there to read.

    What a person focuses on depends on the design. In a visual hierarchy, I could design the image huge and people would see that first. Or I could make the copy bigger and they would see that first. Basic design principles.

    3. Which brings me to the watermark. That point was also based on a really old article that used a piss poor design as an example. The example he used was a visual element that was designed and placed in the shape and size of a banner. Of course, people would confuse it.

    The examples you have shown are clearly not banner elements. They are large visuals that only an idiot would mistaken for a banner ad. The copy contrast more than enough for a user to read those first. However, i could see people seeing the red header bar first because it is a very strong visual element.

    I think it is a mistake to discredit this style of design based on the argument you have given.

    • Hey Brian, I appreciate the thoughtful critique. Let me touch on a couple of your points:

      That is a 13 year old article that is based on NEWSPAPER websites. Of course, people would go to the site and look at the copy first. They are there to read.

      The fact it’s 13 years old is obviously not important, since what’s at issue here is psychology, which does not change, rather than technology, which does. However, I agree that if this were the only study we could draw on, then it might be tenuous to draw any firm conclusions about non-newspaper sites.

      But that just ain’t the case. There are heaps of studies which show users’ priority on websites is always on content (just yesterday I was reading a book by Janice Redish where the very first thing she says is exactly this: people don’t care about pretty pictures. They want usable content). You should check out MarketingExperiment’s Images vs. Copy web clinic for example.

      What a person focuses on depends on the design. In a visual hierarchy, I could design the image huge and people would see that first.

      Agreed. But fixation is more than just seeing. People will typically notice the image first, but immediately start hunting for text to read. They simply aren’t interested in images unless they convey value more clearly or forcibly than the copy can.

      I think it is a mistake to discredit this style of design based on the argument you have given.

      My primary reason for discrediting it is that it is replacing value-laden content with value-less content. The studies I cite are just examples that illustrate this via studying users’ reactions.

  15. I agree and I disagree with some of the points in this article. Before doing a complete redesign, if you create a wireframes and psd’d after doing alot of usability test you can come up with a good design that will actually convert. However when designing the focus should be on the visitors, how would they want the website to be and not go crazy with heavy cool graphics. Sometimes this can hurt and cause the visitors to leave the site and go

  16. Great posting! i agree. i will think about it at the next refedisgns. thank you for your inspirations
    Andreas

  17. I see all these sites with jQuery sliders (aka image carousels) and I’m like: am I the only one who haaaaaaates these? I’ve been trying to gather up anti-slider rants for a post about how much they suck, and have only found this one: http://krogsgard.com/2013/sliders-suck/. So thanks for providing me at least two more entries. Sliders are the modern proof of “Just because you can doesn’t mean you should.”

  18. I agree with these “watermark images” or whatever people are calling them. They’re very washed out looking and I can never tell whether you’re meant to focus on them or not?

    I’m not against a main image slider, in fact, I see that as pretty much necessity in a lot of web designs now, but those poxy little image carousels really aren’t worth having either!

  19. Tony, why do you see the image slider as pretty much a necessity in a lot of web designs? Is it due to client demands, or something else?

  20. There are lotsa’ good reasons to refresh your site’s design. But you know what they say about the road to hell, so let’s take a reality check.

  21. Wow, amazing blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is excellent, as well as the content!. Thanks For Your article about Why Following Design Trends Can Turn Your Website Refresh into a Colossal Waste of Time & Money .

  22. Wow, amazing blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your site is great, as well as the content!. Thanks For Your article about Why Following Design Trends Can Turn Your Website Refresh into a Colossal Waste of Time & Money .

  23. Its a new kind of a post described new tips and techniques for the website. I followed these rules in the future. Anyways thanks.

  24. I recently designed a new online fashion shop and decided to go with a very simple layout for the front page, a large cool font and a link in the header which takes you to our products. Everybody in our team liked it, until some of our visitors reported that they cannot find our products. The reason was, they did not recognize the link as it was not underlined and seemed like a title, because of the large font. So they sticked on the front page watching our carousel. We then added some ‘shop now’ buttons to the carousel and experimented with arrows in front of the main links. For an online fashion shop I still believe a carousel could be valuable as the purpose of the website is selling anway and people want to see our fashion photos. But what you mentioned by following always the latest design trends, I fully agree. In the past I also saw plenty of cool stuff on other sites and liked to implement them on our shops. It was often a waste of time, did not increase sales and possibly confused our frequent visitors. Thanks for the nice article, which comes to the point.

  25. This is the 10th great article I have read today. Really, well explained. For me it has been always difficult to explain the customer on the design part. Convincing them to use what in current trends is something to climb rock for me.

  26. Great post. Working according to fashion trends can actually be disastrous. Sometimes trend speaks what we should not listen but we do as it is a trend. Consequently it is harmful for the organization. I agree with you completely and I am thankful to you fro this kind of advice. :)
    Keep posting.

  27. Great post… Thanks for sharing with us…

  28. Wow, amazing blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your site is excellent, as well as the content!. Thanks For Your article about Why Following Design Trends Can Turn Your Website Refresh into a Colossal Waste of Time & Money .

  29. Wow, superb blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your site is excellent, let alone the content!. Thanks For Your article about Why Following Design Trends Can Turn Your Website Refresh into a Colossal Waste of Time & Money .

44 comments

Please use your real name when commenting. Otherwise, your comment may be deleted.

← Previous ArticleNext Article →
Buffer