All that glitters isn’t gold. The convertible you just had to have left your garage 12 days out of the last 120—the other 108 were too cold, too wet, too something. The fantastic designer boots with the 3” heel you couldn’t resist? They landed you on your ass on a less than forgiving winter day and have been collecting dust in the back of your closet ever since.
Both looked great. Neither performed. So it goes with design-driven development.
When a website is created primarily from a design-driven standpoint, your ego might be soaring as you take in the new sexy look and feel, but, trust us, your conversions will feel the pain.
And that doesn’t fly when you’re in business to make money.
So while we can’t walk you through every potential design blunder, here are few common ones we’ve seen more often than we’d like.
Kill that carousel
The slideshows on your homepage? Those costly, custom shots of an attractive hipster using your product?
That “cool” feeling you get is because you’re on the inside—you’ve seen each slide and fallen in love with each image and every line of copy. But no one is seeing the third slide. And studies confirm less than 1% of users actually click on a CTA that is rotated in and out of view.
Those are lost opportunities.
In addition, many people, especially millennials, see banners as unwanted advertisements and simply scroll past them—an effect known as banner blindness.
Here’s a quick mnemonic to remember: If your slider looks like an ad, conversion is bad.
That section of your homepage that lives just below your primary navigation is prime real estate. Use it to support your most wanted action.
The frightening reality of your ghost buttons
Your primary CTA should always be the most visually compelling element visible. Simply put: buttons exist to be tapped or clicked, and your biggest, baddest button should be irresistible.
Take a look at the following site:
The “purchase now” is the primary CTA, and the secondary is de-emphasized to draw your attention elsewhere.
However, a few years ago these de-emphasized buttons, a.k.a. ghost buttons, became a design trend, and spread throughout the web. They look clean and minimal, which modern web design embraces. However, when designers started using them as primary CTAs, we saw a significant decrease in user engagement.
Think about it, replace that big bad button with an empty box, and you’ve just removed the button-ness of your button. You’ve removed the affordance—the physical properties that naturally lead people to make the correct decision. (Not to state the obvious, but here, the correct decision is for your user to choose to become your customer).
Elevated Third did an A/B test of their email campaign: one with ghost buttons, one without. They saw a 7% decrease in conversions with the ghost button vs. the traditional button-y button.
Here’s what Angie Schottmuler, Growth Marketing Consultant, has to say about ghost buttons:
“Ghost buttons drive me crazy. It goes against usability. The concept is a designer’s fantasy trend that should die. The only time I find this tactic useful is when a client insists in having two CTAs on the page, and I basically want one to disappear. Ghosted buttons have ghost conversions.”
One mobile menu, please—and hold the hidden navigation
You know that hamburger icon that lets your users know you have a menu? Well, it’s not as iconic as you’d hoped.
An interesting A/B test by James Foster showed that the hamburger icon was outperformed by the word “menu” with a simple border around the text. Like a button. While this may bother you—and throw your designer into a fit of rage—the data is there to support it. A Nielsen study corroborates these results.
When you think about it, it makes sense. There is nothing intuitive about three vertical lines: it doesn’t suggest menu functionality, while the word “menu” does this quite clearly.
Ditch your mega mobile modal
Remember two years ago when Google started putting “mobile friendly” labels on mobile search results?
Well, Google is taking another step to combat poor mobile user experience. It could be stripping away your “mobile friendly” label if you display obtrusive popups or interstitials to your users.
Google says sites will be affected that display “a popup that covers the main content, either immediately after the user navigates to a page from the search results, or while they are looking through the page.”
Interstitials diagram via the good folks at Search Engine Land
While this might seem jarring to some of us, this makes sense from Google’s perspective where content is king. Google says banners can still be displayed to mobile users with these caveats: “a reasonable amount of screen space and are easily dismissible.”
What does this mean for your intercept form (which can be some sites’ best conversion tool)?
Work with your designer and developer to find other ways to nudge your mobile users in the right direction without hiding content.
Avoid the pitfalls of design-driven development with team work
It takes a village. Or, at least a small gathering.
No one is saying your designer isn’t good at what she does. But, to make her work a strong business asset, she needs the collective knowledge and insight of all the other brilliant people working on your site.
Think of it this way: An awe-inspiring architectural masterpiece isn’t all that valuable if the roof collapses while chanting in your loft-level meditation room. Or if every time it rains, you could have Gene Kelly over for a little dance in your bonus room. Architect, structural engineer, builder. All must work together or you’ve lost value. It’s the same with your website.
Your designer needs to work with your digital strategist, your developer, your writer. A cohesive group working collectively, under a clear strategy, to achieve the measurable goals of your company’s website.
Content. Content. Content.
Your user needs to hear what you’re telling them. Period. And we’ve learned it’s just way too easy for your goals to get lost in big, beautiful images, stunning slideshows, or untouched ghost buttons. So avoid the visual temptations (remember the convertible?) and stay focused on the content.
Prioritize. Be clear. Be precise. Be relevant. Engage your user with your purpose and watch their fingers effortlessly float to your compelling, irresistibly placed CTA button. Conversion optimization.
Now that’s a pretty picture.
Measure. Revise. Repeat.
You’ve set your goals, you’ve planned your strategy, you’ve created your content.
But it ain’t over. Now you A/B test. Regularly.
You’ll know in short order what to kill and what to keep. And you’ll be on your way to maximizing your conversions much more efficiently—not to mention knowing you have proper testing in place makes putting those new ideas out there a whole lot less scary.
So keep it fresh. Test out new ideas regularly. And with your testing data in hand, you’ll have a ringside seat when your site delivers that knock-out punch.
Conversion-centered design performs for you
Moral of the story? Website design should be approached like every other aspect of your business: you set goals, create strategy, and measure performance.
This means we have to let go of the design-driven development process and replace it with conversion-centered design. Walk away from the Jimmy Choos and the Jag: put on your Sorels and get in the Suburban, it’s time to perform.