Ugly Works

Time and again, across many different clients, we keep running into a rather surprising result: ugly designs work better.

All too often companies approach us following a redesign wondering why their site’s performance has taken a hit. The new site looks amazing with great photos and follows all the latest design trends. Modern, slick, and polished.

Unfortunately, with this great looking design, conversions are down compared to where they had been on their older, uglier website. Calls have dropped, orders are down, people aren’t filling out the lead form or signing up. Why? What happened?

In many cases, the problem is the new, cool design broke the user experience. People are lost and confused, not sure what to make of this modern, slick, polished, stunning, beautiful website.

As one recent example, several clients of ours have tried some variation of a large hero image on their home page or on a key page, where the image consumes the majority or all of the top part of the screen. It looks visually stunning and definitely works to set a particular tone on the page. Except, in every case we’ve tested (on websites in a wide spectrum of industries), it hurts the user experience.

The largest issue? People don’t know they can scroll beyond this image to see text located lower on the page. One client saw that only a third of visitors scrolled or clicked beyond this part of the page. Other clients have seen even fewer visitors reaching the lower sections of the page.

But it isn’t just scrolling. Another client saw their exit rate double after adding in the large hero image on the top of the page. Presumably, this is because of so much confusion this hero image caused. People didn’t know what to do, so they left.

Other clients have seen clicks on key links or key calls to action suffer because of the inclusion of the large hero image. And that is true even when there is a call to action within the image itself. In these cases, people can’t find the call to action button in the image because the image is too visually overpowering.

I won’t even mention the impact these large images can have on speed and what that means for the user experience (and SEO performance) of the website.

It isn’t just huge, all consuming hero images either. One client added small square photos to the right side of the first paragraph of some blog posts. You could still easily read the blog post text, though the text wrapped more tightly because the image was off to the right side. Unfortunately, the addition of the photo next to the text caused clicks on links contained in the blog post to drop significantly, including clicks on key links that drove revenue. Removing the images made the blog post an ugly and bland block of text, but clicks went up.

Of course, there are more examples of uglier designs working beyond just the inclusion of images. Another common example we’ve seen is that the design changes the color schemes. New color schemes may look cool but have the adverse effect of making it harder for people to find whatever they were hoping to find.

In the case of one client, a new design made the various buttons a light, pastel color. It matched their brand’s color scheme quite nicely so I get why the company decided to make that change to the color scheme. But the buttons in this new color faded into the background and they became harder to see. Darker buttons were uglier and didn’t match the brand as nicely but darker got more clicks.

Other websites choose to modify the color of the font, opting for a lighter color of text. In other cases, the design opts for a colorful background or an image background. Here again, it looks visually interesting. But it becomes harder to read. Black text (or darker gray text) on a white background is ugly and boring. Sure, I see that. But the high contrast of black on white is considerably easier for just about everybody to read (especially on smaller screens). Text over a colorful background or text over an image is harder to read because there is a lower contrast between the two. Do you want people to read your website’s text? I know I do.

For similar reasons, larger fonts tend to work better. Small fonts may look cool and add visual intrigue. But the harder it is for people to read your site, the less likely people will be to read your site. Larger, somewhat uglier font sizes can work better. Of course, not too large–other clients have tried this approach with super huge text that seems to be shouting at you. Just last week, a client changed a key call to action into a larger font. It looked kind of cool in the larger font too. But following this change, clicks on this part of the page decreased. Normal-size text looks boring but works better.

As a final example, and one of my favorite examples, you have the link underline. Multiple clients have seen that simply removing underlines on links decreases clicks on links. The underlines on links are old school. It isn’t modern or cool. It is ugly. Guess what though? Elementive’s site and my personal site use an underline on links because it gets more clicks. We’ve seen this with a number of clients too. So we strongly suggest clients put underlines in too. If you want people to click a link, then you need to help people understand they can, in fact, click.

You may read this and think that I’m anti-design, that I wish all sites were nothing but black-and-white text with no images. But I’m not anti-design. Making things look visually appealing is important and the proper use of colors, images, typography, and more does matter. Certain design aspects can help to improve conversions.

The problem is I’ve seen too many websites struggle when too much focus is placed on things that look cool instead of things that will work for the person visiting the website. The design gets in people’s way, hurting the website’s performance. As a result, in a lot of cases, a simpler, more basic design that is somewhat uglier and less modern is what you need to improve your website’s user experience and to increase conversions.

Bottom line: are you creating your website to win design awards or are you creating your website to help your business grow?