5 UI Mistakes That Cripple Your Conversions (and how to fix them)
Are you wondering what leads to the most effective UI design? Poorly executed UI can cripple your conversion rate so your design choices matter. Here are 5 of the most common UI mistakes and how you can fix them.
UI, or ‘user interface’, is the graphical layout of your website, landing page or application.
Consisting of everything from the buttons that people click on, the text they read, the images they look at, as well as sliders, form fields, transitions and animations; these are crucial factors that contribute to the success (or failure) or your site.
As the core ways people will engage with your products and services online, the choices you make in regards to your UI have massive ramifications.
Get it right and you’ll create a seamless experience for your visitors, increasing your chances of a conversion.
Get it wrong, and you won’t just lose a potential conversion, but you’ll leave a sour taste in people’s mouths that can prevent them from coming back.
When it comes to creating websites, landing pages or apps, the small details make a huge difference.
So if you’re ready to become a UI expert, here are the 5 most common UI mistakes (and how you can avoid them).
Mistake #1 - Inconsistency
Using too many design styles will send mixed signals to your site visitors or app users.
The key to creating a consistent visual experience is to repeat patterns and elements wherever you can. Not only will this create a welcoming experience, but it will foster trust with your audience who will see you as the type of site or app they enjoy engaging with.
Even better, a clear and consistent design will help people get around your site or app quicker, and the less obstacles between arriving and a conversion, the better.
How to avoid inconsistency:
Use similar colour patterns across repeating elements like buttons, text, links, headers and footers.
Use similar font styles across titles, paragraphs and links.
Use similar line thickness for icons, dividers and page breaks.
Mistake #2 - There’s no difference between buttons
When your goal is to convince a site visitor or app user to take the next step - whether it’s to sign up, download, subscribe or purchase - it is important you make this process as simple as possible.
You can do this by assigning visual importance to the most important buttons.
The easiest way to do this is to make these primary buttons bold and more prominent.
In comparison, the buttons that don’t carry the same importance should be less prominent but still visible.
An example of this in practice might be two buttons - one for ‘Read More Information’ and the other for ‘Schedule A Free Trial’.
Convincing people to move further down the sales funnel and schedule a trial is helping you towards your goal of conversions, so that button could stand out more, be brighter, and easier for people to be drawn to.
How to distinguish between primary and secondary buttons:
Use different font weight for primary and secondary buttons. The button with the heavier visual weight will naturally draw the eye.
Use bright colours, larger text size and bold font to give extra weight to primary buttons.
Mistake #3 - Not enough CTAs
Your call-to-actions (CTAs) are one of the most important aspects to get right if you want to increase conversions.
Powerful copy and exceptional design can all be undone if you don’t make it simple and obvious for people to take the next step.
The following CTA rules will help give you the nest chance of securing more conversions:
Simple button design
Bright colour that contrasts the rest of your website
Large enough that people can view it on mobile devices
A shape that looks clickable - think 3D or with an added drop shadow
Compelling copy that creates a sense of urgency, scarcity, exclusivity or excitement
An easy to find location that naturally follows your most important information
Mistake #4 - Elements are not aligned
First impressions count.
In fact, studies suggest that it takes just 0/05 seconds for people to form an opinion of your site or app.
On top of this, 94% of first impressions about a website or app are design related.
A simple way to reduce the risk of a poor first impression is to make sure your elements are aligned.
This is a simple tweak that can make any layout look balanced and inviting.
With a tip on aligning your elements, Sydney web designer Clarinda Cheon says that not everything in your UI design has to align. She explains that “while many people use grids to help with alignment, it’s a mistake to think every element has to be aligned. By mixing alignment you can actually be more creative. By creating visual eye breaks in this way you can keep site visitors on their toes and catch their attention where it is most valuable - like around CTAs."
Mistake #5 - Complicated forms
Forms are a vital step in the journey from curious visitor to conversion.
Whether asking people to log in, sign up, download or proceed to the checkout, your forms should always be simple and clear.
Remember, any minor friction can deter someone from a conversion. Think of your own experience online. How many times have you been close to taking the next step with a business or app, only to be met with a confusing form, or one that requires too much information upfront?
By keeping things simple you will increase your chance of success.
This was a step made by the eCommerce team at Tierra Alma who require people to move through a checkout to complete a transaction. They explain “we noticed that the less clicks required, the higher our conversion rate. This is backed by marketing research too. By adding the ability to ‘add to cart’ while still shopping, we removed multiple potential steps and were able to see positive results.”
How to create simple forms:
Don’t just use the colour red to show an error. Complement it with actionable feedback on why the error occurred.
Break long forms up into individual sections. Rather than 10 sections to fill in, break each step down to 2 and add a progress bar to let people know where they stand.
Your goal as a UI designer, whether experienced or making changes to your passion project, is to create intuitive, user-friendly and aesthetically pleasing interfaces.
The most important contributor to a conversion is trust.
If people trust your site, landing page or app, they are more likely to take the next step and engage with you.
Keep these 5 common UI mistakes in mind and you’ll be avoiding 5 of the worst mistakes people make.
In turn, you’ll be giving yourself the best chance of securing a conversion.