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.

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 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.