Checklist: Instantly Improve your Website UI
By focusing on User Experience and Visual Hierarchy.
We often look at our website and try to wonder what went wrong? Why the retention rate is so less? Why the website is not looking as good as other competitor’s? Why is your conversion rate so low? And then we go ahead and try to Redesign. WAIT!! Maybe it’s just that you forgot few basic UI and UX Guidelines.
Well, so here it is. Here is a complete checklist for you to figure out if you have missed small nuances in your design. So the way it works it you take your website and compare it to the guidelines in the checklist, make improvements accordingly. This checklist will very easily help you get more conversions, happy users, and hence more business.
#1: Focus on main Call-to-Actions
This will need you to figure out what exactly are your expectations from the user who arrive on the website? What gives you most value? Start with measurable goals.
- You could want them to buy your product.
- You may want their email to target them for your business.
- Maybe you want them to sign-up and start using your website.
- You may be looking for users to contact you for service you provide.
Your website may be for these or a thousand other reason. But you need to be definitive with what is your ultimate goals. And then make sure you highlight these actions before users and place them where they have most chance of conversions.
#2: Focus on one thing at a time.
Be clear. A lot of websites do a mistake of expecting users to focus on multiple actions and value-propositions at once. This increases cognitive-load on users and render them confused. Give them more time to understand. With too many options, users are always scared of messing things up.
Instead if we throw one thing at a time at user, they can take a proper decision and be more confident about your product. This directly increases conversions.
#3: Take them from existing state to a happy state.
Instead of focusing too much on what you offer and how great your product is, rather try to focus on what users gain from buying your product. Users never buy products, they buy their relief, ease or happiness.
Think of this as TV-Shoppe Ad where they include endless video-testimonials from their customers on how incredibly magical the product is and how easy your life could be if you buy it. You couldn’t resist dialing that “1800” number. We humans are always looking for an easier life.
There are many ways by which you can focus on what they get:
1. Include case studies of actual customers who were positively affected by your product or service. Try to define your role in that.
2. Have testimonials from customers or clients on how immensely easy it made their life.
3. Let them try your product to make them realise how easy it made their life. Once you are up the value-ladder, they will be willing to pay a greater amount for getting that ease.
#4: Define proper font framework
Improper font not just makes the text illegible, it could have a heavy cognitive load on user and may lead to very little retention. You need to be precise and clear about what you want user to focus on.
Steps to do so are:
1. Define a set of font sizes and stick to them globally.
2. Use H1, H2, H3 tags to organise your content. This way even web crawlers can read and display your content in a better way.
#5: Define a Colour Palette and Stick to it
Too many colours and inconsistent use makes your website look like a “Clown”. Users respect and get attracted by simple “mostly white” UI where content can breath. Steps to do so are:
1. Pick a Primary Colour and use that in Headings and other places in a subtle way.
2. Pick an Accent Colour that goes well with your primary colour to be used in subheadings, or other places.
3. Pick a CTA or Supplementary Colour that could be used in CTAs to attract user’s attention.
4. Decide upon a set of Black Colour with varying opacities to be used in text and elsewhere.
#6: Repeat your primary CTA
We humans have a very short span of attention in this digital world where we swipe across a hundred products before we buy a single one of it. Hence to increase conversions you must try repeating your CTA if the page is longer than 2 scrolls.
This, in a way, reminds user of your offer and once they have scanned through the whole content, they are more willing to take a decision than before.
#7: Expose options instead of hiding them
Always aim for minimum friction for the user. Remember, if the form is your ultimate CTA and has very less conversions, it may be because you made the process of filling the form VERY LONG.
Keeping your form small and upfront increases conversions and eradicates any mystery that user might have.
Not always though, sometimes we have longer forms and need them to be hidden behind the CTA. But remember, it further increases your chances of Exit Rate.
In Example below, HDFC RED (A property venture) brought the Contact Form above the fold and exposed it for maximum conversions.
#8: Use universal and clear icons:
Icons are major part of UI patterns these days. “An Icon says a thousand words” as they say. But icons are one of the most exploited part in most UIs. Icons if not done right, render user confused and lead to unexpected behaviour.
To solve this:
1. Use standard and universal icons that everyone understand. Like ‘A Hut’ for “Home” or ‘Magnifying Glass’ for “Search”. Avoid reinventing the wheel as then user might not understand what it means at all.
2. Avoid 3D or Complex Icons. They are just too old.
3. Keep icon style consistent. Use Line icons throughout or Solid ones. Few exceptions are allowed but avoid too much inconsistency.
4. Try to put labels with icons if space allows. It helps users immensely.
#9: Try to analyse the user behaviour
We can go on debating and speculating on how to improve user experience and still lead nowhere if we don’t try to understand what actually user does on our website (or app). There are two types of data that you can analyze:
Quantitative Data
This is the data about the numerical metrics like number of unique visitors, average session time, load time, user demographics, bounce rates, user journey, event clicks. These help immensely in getting a basic idea about what user is doing on your website. But it may not always tell you further details about the users like “why did they do, what they did”. Best way to analyse this kind of data is Google Analytics.
Qualitative Data
This data involves analysing actual user behaviour by deep insights into why they did what they did. It may include conducting user interviews and usability testing sessions to understand users. They are very helpful in understanding user behaviour and coming up with better experiences.
#10: A/B Test your Call-To-Actions
We all have a “opinion”. Whether it may be about the UI or anything else.
Sometimes, we have a lot of opinions. In that case we often go this just one of the solutions, killing all other opinions. This is where A/B testing comes in the scene.
You can try various placements for your CTA or completely change the UI between two versions. You can do so on your own (via backend server of your website) or try tools like Optimizely which allows you to do so by just drag and drop. This gives a detailed analytics about how version A performed with respect to Version B. You may then take a better more informed decision and go with the UI that had most conversions and better user experience.
All you need now is to judge your app/website based on these guidelines and I am sure you will have a much better product and lead to more business for you.
Hope you guys found this useful.
I am a UI UX Professional and have helped over 20 companies in creating best digital experiences for their Users. I am always looking to collaborate with entrepreneurs to create amazing products.
To collaborate feel free to contact.
