Designing for complex data interfaces
Data can be perceived by some as complicated and ugly. However, here at Thin Martian we love drilling down into the complexity of different types of data and turning it into something beautiful. One person’s data trash is very much our data treasure.
Recent projects have required us to create new innovative ways of visualising complicated data. In this article we’ll walk you through how we approach these projects as well as give away some juicy top tips to help you create delicious data designs.
First — Immerse yourself
As soon as the analytics login arrives in your inbox it is easy to get carried away and dive straight in. Hold fire!
To create something that your audience are going to use you need to first understand what they want. Our most recent data interface project was to be used by insurance brokers. As our natural skills lie in digital interface design and not insurance we invited the brokers who would be using this product into the studio for an immersion session. During this session we aim to fully immerse ourselves into the client’s routine and understand what data they use and how they use it.
Top tip: Ask the client/users to walk you through a daily scenario or two so that you can create a persona around this which can be used throughout the project life cycle for validation.
Organise your hierarchy
Once all the different types of data needed for the dashboard are noted down (good to do this on post-it notes) you can start mapping out the hierarchy for the interface. Identifying which pieces of data are used most often is key as these will most likely take priority at the top of your design. Laying your post-it notes out on a table or on a whiteboard will allow you to move priorities around easily. Once in place these post-it notes will automatically give you a rough idea of a layout which you can then turn into a wireframe.
Understanding the data
Now you know which pieces of data will be present on your dashboard you need to work out how best to interpret these visually. To do this you’ll need to understand how the data is collected and used. You will have gathered a lot of this information during the immersion session however, you may now need to dig a little deeper, even if it is just to confirm your initial understanding.
Different types of data will work differently visually, therefore now is the time to work out the limits you need to work within to design accordingly.
UX treats
A common question and concern when designing for dashboards is “how are we going to fit all that data/content in without it being a stupidly long page ?” Here’s a few UX tricks of the trade :)
Prominent search bar
Sometimes people just need a certain piece of information fast. A well placed search bar/area on your dashboard allows the user to find what they are looking for quickly instead of digging through all the different graphs and tables of data. Using dynamic predictive search will increase speed and scope of the search even more as the user will be able to see results before they even finish typing what they are searching for.
Filters
Providing filters gives users the ability to dig deeper into a search or value that they need more information on.
Tabs
Tabs are a great way to save space as you aren’t using any new space on the dashboard but, instead just refreshing the content that sits within the same dimensions of space each time.
Table pagination
If you require a table on your dashboard you don’t necessarily want this to take up the whole page space. Instead you want to be using this space for beautiful visualisations. Therefore, paginating your tables will help you keep these down to a reasonable height and free up space for other content on the dashboard.
Design delights
There are a lot of different things to consider when designing for complex data. We always try to think outside the box and be very creative, but with the understanding that clarity and accessibility are key for all users to get the most out of the design.
Using graphs to visualise data
The selection of graphs/charts chosen to display the data is very important. Only using one style of graph is not very visually stimulating for the user, in comparison having loads of different styles can bloat the design. Therefore, finding the right balance is key to creating a successful dashboard. For example, in a dashboard design we usually group data into sections so, if we have 6 sections of data we will only use 3 to 4 types of graphs. This will help users differentiate sections and make the data more digestible.
Colour scheme
This will often be influenced by the product branding guidelines, if there are any. Above all the dashboard design needs to be informative and readable. Therefore, your colour scheme needs to be clean and quick to understand. Colour can be used very effectively in dashboard design however, it is vital that it is reviewed from a usability standpoint and not just because it looks pretty. Separating out particular colours for actions will help create a visual language that the user can follow through the product. Allocating certain data to their own colours will also help users read the data more efficiently.
Style guide
For most design projects style guides are useful however, the whole team here at Thin Martian find them particularly useful when designing for data dashboards.
For the design team a style guide is useful as it helps see the overall style across the application and ensure consistencies across the UI elements, colours and typography. They are also great if you are working on a family of products where you want to keep a consistent visual style. Style guides are equally important for developers as they act almost like a library of UI elements inside a lighter file size document.
Design takeaways
- Always try to come up with something unique for each dashboard design. This can be a brand idea or visual element, a special feature, or a new type of chart/graph.
- Invest time in the detail. Spend time on the details like cool rollovers, transitions and animations. It will bring your design to life, delight the users and take the user experience to the next level.
In conclusion
Designing for data need not be a daunting task. Instead it can open up the door to many new design possibilities that you may never have considered. Dive into the deep data waters and have fun!
