UX/UI Case Study: Bonkers.ie Calculator

UI Design | Prototyping

In UX designer’s daily routine we are constantly dealing with information that we are trying to present in a way that not overwhelm the users who use the products and services. We tend to enable users to quickly and easily accomplish their goals.

Many companies like banks or lenders are offering different services to their clients where they can choose or compare what options work best for them. Their sites are often providing a financial calculator for this kind of service.

The site bonkers.ie is a great example if you need to find a better deal among Irish service companies and save some money. Nevertheless, I can’t say the same about the user experience on their site. When an interface is too busy, actions are unclear or difficult to identify, and critical information is hard to find, a higher cognitive load is placed on users. According to the Hick’s Law the time it takes to make a decision increases with the number and complexity of choices present which in this case makes poorer user experience.

 

 

Observations

 

— it feels like the 3 columns grid separates the content on a page instead of combining it together in a concise way;

— improve a balance between text-heavy and visually engaged UIs. Good use of headings will work well in this case.

— a loose layout grid makes the content to look complicated and confusing instead of to be intuitive and understandable;

— aim to manage space and content on one page rather than to move users to another page for results. This saves time and provides a better user experience.

Now let’s see what score the landing page has, in terms of visual clarity, by using predictive technology:

According to the research paper, Visual Complexity and Prototypicality determine the efficiency of the designed user interface for human interaction. The conjunction of those two metrics is visualised in the data called Clarity Score. More clarity contributes to easier and driven scanning of information.

The goal is to layout information into layers in a way that frames a clear interaction path for users who land on the page. The recommended Clarity Range should be around 65 to 85. The current score is only reaching the desired threshold.

Attention heatmaps indicate the areas where the user’s attention drawn to the most. As it is shown on these images the Heading and Paragraph with Instructions stand out more than the Calculator with CTA Button in the middle of the page.

The focal point is misaligned a bit that leads to spending more time to accomplish a goal.

 

Solution: Grid

 

— Reduce chaos with a grid and organise elements in a user interface in a consistent, logical way that will lead to improving user experience;

— The use of components, proper alignment and a revised page layout all will bring functionality, aid clarity and overall improve discover-ability;

— Avoid the excess visual noise in data-heavy tables. Only showing horizontal lines reduces the visual noise of a full grid. This design approach adds more white space that helps the user to navigate through content;

— Choose an appropriate line-height. Regular and relaxed row heights offer more white space and are more comfortable for reading large data sets.

 


 

Information Architecture

 

— Establish hierarchy by using different text styles, clear contrast and colours. These visual cues help present the data in a way that is easier to scan and understand;

— White space helps establish hierarchy. Use less white space between headings and body text to establish a relationship between the two. Separate new sections with more white space to create more distinction;

— Keep your content between 50 – 75 characters per line. Research has shown that shorter lines of text are easier to read than longer lines. If a line of text is too long the reader’s eyes will have a hard time focusing on the text.


 

Manage Complexity with Progressive Disclosure

 

— Break complex tasks into smaller steps in order to decrease the cognitive load. We used buttons with 3 options and some fields for data entry to minimise time and user effort to reach a goal.

— Include pagination to break long tables down into multiple pages with a set number of rows on each page. Users need to understand what page they are currently on and have the ability to navigate to other pages.

 

Design Validation

 

We have tested two different layouts by using the same predictive technology to see which one is winning. There were used text/colour contrast and a split layout of one page instead of 2 separates.

The user interface is basically structured in two areas: The Calculator (data entry side) on the left, which contains the explanatory text and the Call-to-Action (CTA) button, and all results are displayed on the right side. After starting the action on the left side a user is moving then to the right side to complete the action.

Humans have a natural reading pattern, which is applied when visual stimuli are present; it goes from left to right. Following the natural flow of eye-scanning a layout, a designer is strategically using the Z-pattern for the placement of visual elements to make them easily discoverable.

Moreover, this approach assists to establish a concise visual hierarchy. Below you can see how the Z-layout on the redesigned page translates into the attention heatmaps:

 

Selected areas of interest that hold important information are visually distinguished and brought up to the user’s attention.

Effective use of the pre-established interaction path in the page layout navigates most of the attention to the desired action — clicking the button, which encourages deeper exploration of the product.