Creating user interface design that drives conversion


When designing a marketing website, microsite or landing page there are many factors that you need to consider in order for the end result to work for you. One of the biggest factors in driving conversion is good user interface (UI) design. Whether you are designing something by yourself or sourcing a company such as Maxxor to design the site on your behalf, you need to take into account some UI features that will make users want to convert to using your product or service.

Column approach

Use a single column approach instead of multiple columns next to each other. When there are multiple columns competing for attention with each other, you run the risk of your user becoming distracted and missing the single purpose of the page. Have a storyline from top to bottom and then a call to action at the end of your “story”.

Repeat your primary action

This only applies to pages that are long in nature. If you have a call to action button at the top of your page that disappears when you scroll down, then you need to have that same call to action button somewhere else (such as at the very bottom). This way the user does not have to scroll back up when they want to complete an action since the action button is already within their reach.

Remember that when it comes to short pages that require no scrolling, this repetition of action buttons is not needed since it will only crowd the space.

Distinct styles

Separate your clicked items from your clickable items as well as your normal text by giving each of these a style of their own. For example, use blue colouring for text that can be clicked and black for text that is currently being clicked on or where the user currently is. Obviously the text should also be a different style so that the user knows what is there to click on and what is there to read.


This is similar to the above point that was made about using distinctive styles. Your call to action elements should be distinguishable from your other elements and be made more prominent. Use depth to make an item appear closer than the other items. Or use tone to make an item seem lighter or darker than the rest. Raise contrast even more by using colours that are complementary to each other on the colour wheel such as blue and orange.


Often giving people too many choices ensures that they will be less likely to make a choice. Thus, by providing people with less choices that are seemingly of equal value, you can nudge them into making a firm decision. Achieve this by rather recommending a particular choice and then having the other choices appear less noticeable (smaller or something to that effect) next to it. This will make it easier for the person to find out what they really want.

Expose options and have fewer form fields

These two factors go hand-in-hand since one of the truths about human nature is the fact that we want to put in as little effort as possible to get the biggest reward. Having too many form fields poses the risk of having people give up halfway through because they need to fill in too much information. Question whether the fields you have are truly necessary. If they are, move some of the fields to appear after sign up has been completed. For example, ask people to complete their profile as soon as they have already signed up.

Another thing that human beings seem to find laborious is drop-down menus. Drop-down menus may hide important features so consider exposing them to your users instead of hiding them. For example, place buttons with these important features next to each other so that people don’t have to go looking for them in a hidden menu. You can still use drop-down menus for things like calendars since these are functions that are predictable in nature and doesn’t require any new learning.

Gradual engagement

Sometimes a hasty sign up is not the best way to go. People often want to see the value of the product before they fully commit. If your product, service or app allows for this, you can show them an example that they can engage with before signing up. For example, if you have a gaming app you can give people a small sneak preview of your game before they commit to adding the app to their mobile device. This will show them the value of your game and provide them with a reason to continue using it.

Colour in UI design

This subject could easily warrant an article on its own. You might have noticed that companies in particular industries use the same colours across the board. Companies in the technology game often use blue as their main colour (think HP, Intel and Maxxor) while some of the biggest fast food companies use yellow and red (think McDonald’s and Burger King). And there is a very good reason for it since each colour is associated with certain principles and emotion.

Blue is often associated with security and integrity while green is environmental and fresh. Red, strangely enough, is supposed to make you eat faster and stimulate your appetite. No wonder many fast food chains use this colour! Contrast is your friend when it comes to UI design and this is why dark colours often go best with bright colours.

Colour usage has some psychological basis but it is also a subjective issue. The use of certain colours can make your users want to read your content or not read it at all. If your background colour prevents your text from being read, it will chase users away.

You also need to take into consideration what colours are most friendly for certain eyes. Black and white are great for 3D designs, while a green and red combination is bad for the colourblind amongst us (and these colours have similar hues making them difficult to read together).

Even symbols that we see in everyday life make us favour one colour over another. Traffic lights (as we all should know by now) use red to symbolize “stop”, green for “go” and orange for “caution” or “slow down”. The same is true for buttons on websites and apps. Using green buttons makes a person feel safe to go ahead and click on the button while red makes them stop and think about the implications a while longer.