8 Practical Design Learnings from Building Dashboards
Designing a dashboard comes with a couple of problematic situations. You’ll probably need to design a table (which can be complicated, especially responsive), you’ll probably have a lot of content on some pages. All this needs to be solved. I’ve put some learnings from designing dashboards into this article.
I read Adam and Steve’s great article with some practical tips (https://bit.ly/2ERaVZo) and thought I’d drop some on my own.
1. Use border, shadow and fill to increase hierarchy
You might want to upgrade your standard users to premium. Or you might want to promote one card in the dashboard more than another card. Without creating too much design overload on one page, a few simple tricks like adding a border, light shadow and fill the button in the more important card can give you that extra boost.
This applies to i.e. an “Overview” page as well, where you might have a lot of cards that summarize all the parts of the dashboard. Some might be less important, while some more important.
2. Keep the user in the table
Most dashboards will need some kind of table. Tables can be large and contain a lot of information. When creating a new item in a table, the user could need to see the previous items to create the new item, and it might be beneficial for the user to not leave the table when creating a new item so that they know the context they’re in (and not be tossed around in modals all the time). Most tables have a button where you enter a new type of UI and flow when entering a new item, but if possible, keep the user by allowing them to create a new item inside the table.
As you see above, the left side is OK, but clicking “Create” in the top right corner would open a full page modal where they insert a new item, whilst on the right, they can do it straight into the UI. The good thing with tables is that they provide the label (here “url”) at all times and hence not needed a full own form field.
3. Use gradients to hint at more content
There’s often a list of something. It’s not always possible to have an endless scroll, so some sections have limited height. Instead of cutting off with a straight line (making it look weird), or just showing a set amount and then recommend to “Show more” — invite the user to show more by previewing the next card. It’ll be easier to understand what’s actually underneath the “Show more” link (compared to not previewing anything), and it gains attention since it’s a brake in the pattern, hence the user often click the “Show more” button to reveal more content.
4. Dark styles require darker patterns
Creating a “Dark Mode” for an app or dashboard is gaining popularity. Some who do it now are the new Mac OS which comes in a “Dark Mode”, Twitter, Amazon, Google, and many more. What is often overseen is that darkness require more darkness. Darker components needs to have the details darker as well, so the same shadow variable you might use on the White UI, will require a much heavier black to it on the Dark UI.
As you can see above, I’ve more than doubled the darkness in the shadow, as well as increased the background cards to have even darker colors to them.
5. Use shadow to imply clickable components
Dashboards also require responsiveness. One might need to configure something on the run in the dashboard and all they have is their mobile. Dashboards are often large and complex with a lot of content. Every pixel counts. Instead of adding a button or text link to each card, remove all of them. This implies that each card is clickable. To make it clear, add a shadow to the component that is clickable. This will differentiate that card from non-clickable cards, as well as reducing the need of spreading around buttons everywhere, stealing important space.
One could argue that making the title (here “Visit our blog”) colorized would suffice, I believe that adding color to each link and clickable component would make the whole feeling of the app messy and you’d be overwhelmed with colors and links to click, while a styled card like above implies being clickable, rather than screaming it.
6. Never underestimate border lines
While they may not be the sexiest UI styling, the border line can help to differentiate two similar components. For example, you want a row of cards with the same height and width, but 1 of the cards will take you to one flow, while the others another flow. Here’s an example where there’s two cards: one that takes the user to a “Create new app” flow where the user has to enter a lot of fields and setup a new app. The other card takes you to an already created app. Without the border, your eyes will put cards in the same basket, but with a dotted, small border, they’ll be same height and width, but differ in hierarchy and the user will realize there’s a difference here, reducing miss-clicks and misunderstandings.
7. “More” is sometimes better
When looking at a dashboard, there’s often a lot of information (as stated multiple times above, sorry) shown at the same time. The user won’t have time to spend time to figure out things as “active” or “hover” — this needs to be very clear for the user.
I’ve made an example of a side navigation where one menu item is highlighted more than the others in a clear way. In the picture to the left, I’ve only used fonts and opacity styling to differentiate, but I didn’t feel it was enough, hence in the right picture, I’ve added a white background with opacity to make it really clear which item is active and not. I’ve also added a minor shadow to really make it pop.
8. Don’t forget empty state
Dashboards that don’t have empty states are going to face some serious user conversions. You need an empty state to imply to the user what you can do about the page being all blank. More than that, hinting underneath what is to come can make it more valuable for the user to get started because they can see a preview of the reward.
That’s a wrap!
Want to read more?
Thanks for reading it all through, hope you enjoy it and find some use from my thoughts. If you fancy some more reading, I’ve written a couple of more articles like Insights from writing a newsletter for two years. Alone. For free. as well as a story where I go through the benefits of creating a Dark Mode for your app, as well as a couple of interviews with some engineering friends from work where I asked them about their day-to-day work life, and finally Insights after graduation to Lead designer for a 50+ employee company in 18 months.
Cheerio!
