5 Ways to Make your UI Convert Better

Your user interface, or UI, can make or break your business. The smallest inconvenience or misinterpretation of your UI could lead to disastrous results in your conversion rate.

I'm sure you've heard something like, “Studies show changing the color of your ‘Buy Now’ button from red to green will lead to huge conversions.” That may be true, but there's far more to it than changing the color of a button. What if the dominant color on the site is green? Well, in that case red buttons have been shown to perform better due to red being a complementary color to green and because the button shows contrast from everything else on the site.

But enough hypothetical button talk. I'm going to take you through 5 tips on how you can improve your site's UI and get better conversion rates.

1. Use 1 primary call-to-action button

What's the goal of your site? Is it to sell products, drive sign-ups, grow an audience? Whatever it is, have that be the only call to action on your site. Now I'm not saying the only button on your site should be a sign-up button, but try making that sign-up button the only button that uses your brand's primary color.

An example of this would be a site like mailchimp.com. Mailchimp does a great job of utilizing this tactic. The only solid color buttons on the whole site are the ones that drive you toward using their product directly. All secondary buttons and links are either outlined buttons or text links.

2. Direction in empty states.

It worked! They signed up. Now what? Make sure the first thing a new user sees is some kind of quick and easy call to action to interact with your product so they stick around.

Here's a hypothetical situation: It's 2004, and you heard about some new kind of online network called "The Facebook". You're interested and want to check it out. You go and sign up, fill out all the info: your name, your school, relationship status, etc. Once that's all said and done you’re looking at your profile page. Now what do you do? Nothing. This is boring. You close your laptop and never visit the site again.

Here's what really happened: Even in 2004, when Facebook users didn't have a way to update their status or write on someone's wall, users still visited the site non-stop, because when they first signed up for Facebook and filled out their profile, the UI (and I use that term loosely here), prompted you with what you could use Facebook for, such as search for people at your school, find out who’s in your classes, etc. In this case, facebook gave them a clear, simple, and relevant next step, maintaining interest over time.

3. Think mobile device first.

It's 2020; your website should be responsive. It's not just important to think mobile-first, but also device-first. Where is your traffic coming from? What country? That matters a lot.

For most countries outside of the U.S. the most common operating system is Android, and the most common Android device resolution is 360x640. That's 28.57% shorter than the iPhone 11's resolution at 414x896. What does that mean? It means content on your website needs to keep the height of the viewport in mind.

Let's look at this example from Nike.com. They're a sneaker brand. Maybe you've heard of them. While Nike has accounted for their website shrinking in width, they haven't considered height. While we can be almost certain users will scroll to see more, the connection between the image, headline, and call-to-action button is lost on Android, and with it, possibly sales.

Now, I don't have access to Nike's website analytics so for all I know 99% of their mobile traffic could be coming from iPhone 11s or other big mobile devices, but I doubt it. I would be really curious to see how many iPhone users click this homepage hero image/call-to-action in comparison to Android users.

4. Simple headlines.

People don’t read, they skim. You’re probably skimming this article right now. Keep your headlines simple and short. Get to the point faster.

The illustration above is an exaggeration, but it's to demonstrate a point. Choose your words scarcely and wisely. Get the point across quick. With apps like Instagram and Facebook, people are used to stopping for fractions of a second before non-stop scrolling again. Keeping your headlines short and simple gives you some stopping power on the site. A user can quickly digest and stop on areas they want to learn more about.

5. I wanna go fast.

If your site intends to have returning visitors browse and purchase products, keep those animations quick. No one wants to see some crazy 3D product rotations when they just want to click the “Buy Now” button.

Animations are important. They make your site feel professional and well-polished and this feeling carries over to your product. But don't let your UI animations hinder your customers' experience.

Here's a design for a fake agency, so I don't feel too bad ripping it apart. Check out the owner, Outcrowd’s Dribbbble. They make awesome stuff!

Let's ignore some of the weird details in the design like the shopping bag in the top right and the weird "Start Now" CTA language. For this hypothetical situation I just want you to look at the animations on this site, but through a different lens.

Put yourself in the seat of the target user of an agency site, most likely a brand manager. You're launching a new product soon and you need a website, so you start looking for an agency to help with this project. You look at dozens and dozens of agency websites, bookmarking the ones you like and intend to revisit. You may revisit some of the sites multiple times, making sure they check all the boxes for what you look for in an agency.

Play that video a few more times. Can you feel it? That anxiety to just get to the bottom of the page so you can fill out a contact form or click a call-to-action button. God, it's agonizing. It feels like forever. You get frustrated, close the tab and you're on to the next agency site.

The same holds true for anyone trying to buy a product. Now, I don't think you need to cut all these animations, but you should by all means speed them up. At the end of the day no one is going to convert on your website because you had a really nice cascading image load in animation that was 7 seconds.

There's no guaranteed way to have the perfect UI. You need to keep in mind it's an ongoing work in progress. What works one day may not work the next. What works for one user may not work for 100 other users. It's important to understand your audience, test, iterate, and repeat. These 5 tips will help you set up a strong foundation with your UI.

Want to talk about UI/UX some more? Tweet me @mrprings and see some of our UI/UX work on Dribbble.