12 pro tips for designing data-driven interfaces

Tweeted this as a thread. Many enjoyed it. So I thought I'd share on IH.

Many IHers could use these practices when building SaaS apps.

📌 By the way, I may have missed a good point or two. So if you have experience building data-driven apps, please leave some of your own pro tips in the comments.

Here are the 12 pro tips:

Identify your personas

These apps are mainly used for enterprise.

Your users will need specific information from complex data in order to do their jobs.

Some users may need your app to open on multiple displays at once.

Identify those personas upfront so you can cater the data to their needs.

Reduce data volume

Make cuts based on what your users use most.

Often, the same data is shown multiple times. Combine elements where it makes sense.

Shape the page

Give your interface structure.

Present the user with essential information first. Then follow it with supporting content.

Ask yourself: "What story are you telling with the data?"

Start ugly

A common trap is to fall in love with how the graphs look vs how the graphs work.

To avoid that, start ugly —with raw data.

Starting this way will help you think through the relationships in the data and stick to solving your user's problems.

Function > Form

Use good typography standards

Font weight, kerning, and spacing impact your users' ability to quickly read and interpret data from your interface.

• Use monospaced numbers
• Align currency by decimal
• Keep line heights narrow, but legible

Use color with purpose

Use a conservative color palette.

Save eye-catching colors for important data —like error messages (usually red), key metrics, or link text.

Avoid over-designing tables

Some advice from the typography bible, The Elements of Typographic Style by Robert Bringhurst:

• Edit tables like text —they need to be read.

• Avoid the urge to cram information into a space.

• Keep “furniture” to a minimum (ie rules, boxes, dots, and other visual guide-rails)

When to increase density

❌ Not on components like alert dialogs, snackbars, and dropdowns. They become less effective, less readable, and less tappable.

✅ Use it to fit lots of data on-screen. Added density makes it easier to scan, interpret, and compare data.

Don't forget about touch

Unless you’ve completely ruled out your users needing to touch the screen to interact with your interface, don’t forget the minimum sizes for touch targets.

Use text instead

Sometimes, you just need to use text to communicate exactly what your users want to know.

COVID-19 trackers are a good example.

You want to prioritize actionable data over volume of data.

Let users export data instead

When dealing with giant data sets, it may be best to let users export that data to another tool where they can interact with it better.

Let your users export via XML, XLS, JSON, or CSV.

The "So What?" Test

People use data to get shit done. Help them do that.

Scrutinize every component on your interface.

Ask, "Is this important for the user to get their job done?"

If not, then find a way to make it useful —or remove it.

Recap

(formatted to look pretty)

• Choose the right visualization & start ugly
• Use good typography standards
• Know when to increase density
• Identify your personas upfront
• Know what to use text instead
• Let users export data, instead
• Avoid over-designing tables
• Don’t forget about touch
• Use color with purpose
• Reduce data volume
• The “So What” Test
• Shape the page

For more primo tips like this 👉 theproductperson.com

If you could show the tweet thread some love, I'd appreciate it.

Enjoy the rest of your day!

-Anthony