How to Strategically Plan for Data-Heavy UX Design
Big data is ballooning. Yet, harmonizing complex data needs with a simple, clean, and useful user interface is a test for any UX designer today. Often, design (the tool for conveying a message) gets in the way of communication (the message or meaning hidden in the highland of raw data).
Peeling off information will simplify and clean up the user interface. But with data-driven applications, less data often means a less practical and useful dashboard.
Keeping all the contextual data you can, however, yields an unworkable app.
So, how do you hit the right balance?
How an application presents data plays a huge role, which is where UX designers come in.
In this post, I am going to share tips and tricks UX designers can use to develop simple and clear data visualization, even when applying big data (data running into Gigabytes) for app dashboards, web pages, and so on.
I’ll leave the best languages for designing big data applications out of this conversation for now, though.
Here’s how to design for data-heavy UX:
How to Design Awesome Big Data Applications That Clients Love
Perhaps the best spot to start is to ask who your client is.
Maybe you’ve cranked out a drop-dead gorgeous dashboard and delivered it to the client smack on time only for them to ask, “So, where can I do X, Y, and Z?”
Ouch! That must have hurt.
1. Employ User Personas to Design Useful Data-Driven Dashboards
As much as artificial intelligence and machine learning will keep improving, most organizations will still need human intervention to crunch uncategorized data.
And the best UX designers create products that will help solve a problem for the people who will be using data-driven applications.
How do they do it?
Erik Klimcz, the Senior Design Leader at Uber and Advanced Technologies Group, shared some actionable tips on Medium. He suggests UX designers need to first identify, then define, users or personas for every project.
Because data-driven applications tend to be used by multiple personas within or outside of an organization, you need to identify those personas so you can organize your information architecture wireframes and tasks to meet everyone’s needs.
That would make the design useful to the end user, your target audience—your main client.
Here’s an illustration:
Understanding your users/personas can help you to customize the application’s functionality to their needs—which is the ultimate goal.
Also, you get to determine what type of data visualization tools to use for which client by answering important questions like:
- Who will be dealing with the data (user personas)? Is it designed for customers or in-house data analyzers, for example?
- What do these users need the data to help them do next?
For example:
You can design a type of infographic that populates information based on a user’s personal entries.
This kind of a data-driven app design would come in handy for situations where the user is required to or free to upload information as they get it or as they need to retract it to take further action.
One example is in customer service where a CS rep can enter a client’s name or number to gather more information about them.
You can find this type of interactive data visualization tool in action over at Mahfix for You vs John Paulson. It allows you to enter a number, and then it reports back information based on your input. It’s pretty smooth!
2. Usability Over Style: Keeping It Simple, Clear, and Gracious
It’s easy to get caught up in designing an attractive UX that hooks you, but is, frankly, impractical to your client.
To be usable, an interface must be clear. “Clarity is job No. 1,” to put it in the words of prolific UX designer Joshua Porter.
In fact, Joshua Porter has written a resourceful post on principles of user interface design—which still applies when designing big data applications.
So, to ramp up clarity around usability: Should designers use custom UX design or only go for tried and tested visualization tools, such as line charts?
That will depend on your client/user cases.
Newer, custom data visualization tools keep popping up: infographics (both static and interactive), color-coded blocks, animations, 3D visualization, and so on.
However, there are really only four data presentation tools you should ever need:
- Line charts for illustrating continuous data, such as how something has changed over time
- Tables for displaying summary information
- Histograms for showing distribution of variables and plotting quantitative data in intervals
- Bar graphs for displaying discrete data, comparing variables, and plotting categorical data
Yet, you can go above just usability to create an attractive data-crunching interface.
Here’s one way to do it:
Even better, designing for data-heavy interfaces could take a simpler turn:
Combining text and charts is one of the best ways to improve clarity while designing for a data-driven UX. Users can consume the visuals and read the text for improved clarity. But this approach might not work in all situations—especially for colossal amounts of uncategorized data.
3. Combine Material and Flat Design—Function Over Form
This design concept is more about usability and minimalism than, against popular belief, a dull two-dimension design. But flat design is neither boring nor dull. You get to utilize bright colors, clean-cut edges, and open spaces.
Using flat and material design is especially recommended for mobile applications, websites, and desktop browsers. Because the design is minimalist and does not hoard a ton of extra data (as in previous designs), it is fast-loading and, when designed to boost engagement, can help keep visitors viewing the page for longer.
This is great for data-driven websites or mobile sites that could benefit from the mobile-friendly, quick-loading, and fewer bounce rates (SEO and ranking benefits) that search engine algorithms are constantly scanning on the interwebs.
4. Accessibility over aesthetics
It’s not just about making heavy, contextual data fluid and appealing (although that helps a lot). You also want to design data presentations that make it easy for the end user to:
- Get a clear sense of what data is most important
- Comprehend the logical flow of the data presented
- Understand what the data means
- Understand what the next step to take is
How about we break out each of these elements?
Users should know what data is the most important
One vital UX design principle is to observe and implement a hierarchy of information—in this case, visual hierarchy.
In other words, a design that prioritizes the right metrics.
You want to organize, arrange, and prioritize the most important data first and supplement with any additional data later. Of course, the order of priority will vary depending on the application’s user (from the personas defined above).
Not only does doing this declutter the dashboard, but it also helps direct the user’s focus on what’s important to them in an easy-to-follow, less overwhelming way.
Users should be able to comprehend the logical flow of data
Simplicity plays a major role in helping the user to connect the data to a certain outcome.
Similar to what’s discussed in the previous point, you want to start with an overview grid of the overall data.
You can add an intuitive drop-down menu, which when the user clicks, slides down to reveal additional information, and then specific tasks or action items. People love this, and it’s gaining popularity already.
Here are two ways to help with the flow:
Hide additional information
You can use clickable links or rollovers to reveal more information. Also, functions such as slide-to-reveal data and zoom-in-to-reveal are great ways to include additional information or highlight key data points. All using simple, natural gestures.
This allows users to click on the links or rollovers they perceive as important to their job and leave the ones they consider less important.
Again, you’ll see how doing decent UX design persona research can help you identify what matters most to which user and when.
Use hover animations
You can use hover animation effects to add more zing, engagement, and usefulness to the (seemingly) dull data.
Hover animations are particularly actionable for supplying additional information on specific tasks or items while helping to organize and clean up your data-driven application.
Still, there are more ways to use animation to deliver useful and engaging data-heavy applications.
The thing about hiding information behind clickable links, slides, or rollovers is that you do the most work on the back-end side of things. So keep in mind that you need to design your architecture wireframes with this in mind from the get-go.
Users should be able to understand what the data means
After organizing and prioritizing data on the dashboard, the next step is to break down the data into separate pages. If it is possible to categorize the information, be sure to allocate different pages/screens for different data bundles.
This can fit in with both small and complex data-heavy application design projects, although it could take longer and demand more work on the back end.
In line with the “overwhelming” theme above, not only will doing this help your client/users feel less overwhelmed, but they are likely to better crunch the figures on one page before moving on to the next, understanding the data one step at a time.
For example, a mission control UI might help your client get all data on one page, but it can be overwhelming to them over time—not to mention squeezed, especially for different screen sizes.
Often a client will request this type of dashboard, but you should know better.
A mission control UI might look sophisticated, but it’s not as smooth and easy to use as the one-page-at-a-time approach discussed before. The former might easily get in the way of delivering the meaning concealed in the mountain of data on display. And that’s not useful.
Users should be able to understand the next step to take
Following hot on the steps above, it becomes easier for users to identify and relate patterns in the raw data—another key win to aim for when designing for data-heavy applications. When the data visualization tools you use help the users to make sense of big data, that’s when you know you have done a great job.
5. Allow Room for Improvement
Last but not least, you’ll want to make your design agile.
As time whips by and users interact with your design, their feedback can prompt you to action and fix or redesign the entire thing. There is no one way to create a perfect design for crunching data, so keeping your design agile can help you make continuous improvements or a solid patch to start up from.
Key takeaways
The purpose of UX design is to convey a message in a clear and actionable way. This is especially crucial for designing data-heavy applications. In this case, the business of good design is to help analysts or managers or end users make an informed decision.
And users cannot interpret and use raw data to inform a decision if they do not make good sense of it and how it is presented.
Designing for data-heavy UX projects should not be as exasperating as it seems. The above tips and tricks can help you figure out how to design for data-heavy interfaces.
And when it comes time to choose your WordPress hosting partner, look no further than WP Engine for lightning-fast speeds and world-class support!
