THE EAST SIDE MAFIA BLOG

Balancing Aesthetics And Functionality Of Your Responsive Website Design
author

by founder, East Side Mafia

Isn’t design and “looking good” a rather subjective matter?

What the business wants, might not be what the customers like, vice versa.

So how would you know what’s a good design?

Ask any web developer in Singapore, and they’ll immediately tell you that user experience, clean design, and functional aesthetics are at the core of every great website.

Otherwise, here is a brief guide in understanding what a good design entails of.

What Is A Poorly Designed Website?

People generally only think of the looks and appearance of a website when they see the word ‘design’.

However, that is not entirely correct.

A website is more than just for aesthetic enjoyment; it is to advance the visitors of the page to take action, such as making a purchase or joining as a member (also known as: conversion).

A “User Experience Design”, the middle ground of aesthetics and functionality, is what should be achieved in order to increase conversion rates. But many do not manage to.

This problem often lies in the strong opinions between what works for those who focus on optimising conversion, and those who focus on the design aspects of a website.

Why Is User Experience Design So Important?

You could create a pretty looking website, or great marketing schemes to increase awareness and the number of visitors on your page.

But as long as you are not able to convert those numbers into leads and sales, your website does not serve its purpose.

Thus, if there is anything you would need to improve on, it would be your conversion rates before anything else.

Furthermore, 6.1% of people say that the design of a website will determine the credibility of a company – this means being able to provide a professional user experience.

The difference between a 1% and a 3% conversion rate can result in a huge difference in the number of leads acquired as well as the cost incurred to optimise your website.

Thus, not putting in the effort to optimise your website would mean that you are simply giving away easy leads to your competitors!

Balancing Aesthetics And Functionality

The basic concept to achieve in balancing both features is that “form meets function, and beauty meets conversions”.

This includes fostering usability, achieving conversion-centric design features and aesthetics, and last but not least, understanding and delighting your customers.

Usability

One of the key factors in influencing conversion would be how much the website is intuitive and user-friendly.

This is judged in a matter of seconds.

Usability involves features such as how easy and how fast the user can perform the actions featured on the website.

A page that delays by 1 second could result in a reduction of conversion rates by 7%.

Just by simplifying the actions required of a user by 20%, you can increase customer loyalty by 96%, the likelihood of purchase by 86%, and the chances of being recommended by 115%.

Conversion-Centric Design Features And Aesthetics

Many businesses do not pay enough attention to the smaller features in design, simply because they feel that the impact is insignificant.

Design features such as the size, placement and hierarchy of fonts, images, spaces, buttons, links, and the use of colours and visuals could instantly boost or hinder your conversion rates.

These design features are used as directional cues and increases ease of users to navigate call-to-action buttons.

Examples would include: powerful visual hierarchies that allow your users to naturally follow the flow of information based on importance; utilising the white spaces or arrows on your webpage to make it easier to find call-to-action buttons.

What Customers Want And Need

It is important to understand the reasons behind why your customers are coming to your website, and what they value.

A website would need to be able to satisfy both a user’s emotional needs for beauty, and activity-oriented needs for conversion of action when browsing through a website.

As people are becoming more time-poor, and digital platforms are more cluttered, convenience and speed is of value to users.

Therefore, tying in the first 2 factors with what customers want and need is vital in being able to convert visitors into leads.

Tips To Increase Conversion Rates

Establish A Clear Visible Hierarchy

As mentioned earlier, hierarchy of designs play an important role in navigating users to call-to-action buttons.

This applies in many aspects of design such as size, placement, and strength (e.g. bold, underline, italics) of fonts, images etc.

These visual guides create a natural process for users to follow when making a decision.

You may consider following the F-layout:

clear visability

This layout is based on a concept that people generally look from top left to top right corners, followed by scanning down towards the bottom page – leaving the right-hand bottom corner to receive the least amount of visibility.

Using the F-layout, you should generally place important information in an F-shaped format, and less important information in the bottom right corner.

Golden Ratio

The golden ratio is based on a ratio (1.618) that creates aesthetically pleasing and effective proportions.

Golden-Ratio

An example would be: if the width of your layout is 1000px, your proportions should split into 618px (1000px/ 1.618) and 382px (1000 – 618px).

This split could be divided into the content area at 618px and the sidebar at 382px.

This would apply for the website’s height as well.

Hick’s Law

hicks-law-graph

Hick’s law describes that an increasing number of choices increases the decision time.

Therefore, following Hick’s law is important to understand that by limiting the number of choices you present to a user will increase the likelihood of conversions.

This includes features such as the numbers of options on the navigation bar, having to decide between options such as making decisions between purchasing, finding reviews or browsing for more products, or skimming through headlines to see which ones to read.

Using K.I.S.S. (“Keep It Simple Stupid”), you can remember to keep it simple and limited for the users.

Some additional tactics to increase simplicity could include inputting a full screen “Welcome” gate to minimise distractions, or including images of human faces as we automatically empathise with other humans.

Just ensure that your images are not pixelated and are of good quality – making your website look attractive and more professional.

Fitt’s Law

Fitt’s law is the time required to move to a target area such as a call-to-action button.

Elements that help to decrease the time required would include the size of the buttons.

The importance or the expected frequency of use of a button should be proportional to its size; the more popular or used the button is, the bigger the button should appear in comparison to the rest (but not too big).

An example would be comparing the play button on iTunes to the other buttons surrounding it:

Fitts-Law

Other elements could include tactics previously mentioned: putting on full screen pop-ups to avoid distractions or placements following the F-layout.

Rule Of Thirds

Visuals such as images are an important factor as they are able to communicate the information required at a faster pace to its audience.

Your images should follow the rule of thirds.

This involves dividing an image (or your website) into equal thirds using 2 horizontal and 2 vertical lines.

 

 

 

 

 

The lines and its intersections are regarded as the best points of interest, where objects are most impactful when placed on them.

More focus on important information and buttons result in an increased likelihood of conversion.

Gestalt Design Laws

The Gestalt Principle is associated with the following laws:

Gestsalt law

  • The Law of Similarity whereby things that are similar with one another are perceived to belong together as a unit.
  • The Law of Proximity where things that are not associated with one another should not be in close proximity.
  • The Law of Closure where people seek for completeness. A design that follows this law could spark interest in users, encouraging them to fill the visual gaps of an entire image that has missing elements.
  • The Law of Symmetry that mentions that things are preferred to be perceived as being symmetrical; thus, when items are not symmetrical, they are perceived as disconnected.
  • The Law of Figure/Ground based on the relationship between positive elements and negative spaces – people naturally separates these 2 out. The relationship could either be stable (image is easily determined) or unstable (uncertain about the image as it has more than 1 perception).
  • The Law of Continuity where people often see a line as a continuation of a specific direction even when there are overlaps of lines; typically used to group or connect information.

Combining all the laws together, people often see objects as a whole before distinguishing individual parts.

In design, these laws guide you to group things that you want to be associated with one another; this could be as simple as implementing similar format of boxes, buttons, colors or images to the group.

Landing Page Optimization Tips

landing page tips

A landing page is a destination page of your website in response to clicking on organic search results, links or online advertisements.

Unlike the fixed and allocated individual pages of a website, you could have as many landing pages based on different keywords.

Thus, business owners are encouraged to have as many landing pages as possible – “businesses with more than 40 landing pages generate at least 12 times more leads than those with 1 to 5 landing pages”.

Additionally, your website only has 8 seconds to grab the attention of a user.

As visuals decrease the time needed to communicate information to its users, videos create much more impact in your landing pages – specifically improving conversion rates by 80%.

Conclusion

Many of these elements appear very simple and intuitive, yet many websites fail to achieve an interesting and professional website.

Understand that your website has to have immediate impact and the least amount of obstructions or distractions to create interest, followed by a good user experience.

Combining these elements together can create a magnitude of difference to your conversion rates, increasing them far ahead from your competitors that do not pay attention to such details.

Need a top rated website development agency to help with your project? Contact East Side Mafia to learn more!