Dashboard Design Elements for the Win

Dashboards or admin panels are the visual interface for your data, and the user interaction epicenter for your application. Designing the dashboard is a tricky thing. Recently, I’ve personally learned a lot of lessons from researching and designing our payba.cc dashboard. I’m not sure about you, but designing and building dashboards has always stressed me out. Mainly because you are dealing with dynamic content, a lot of data, a high level of interaction and you’re designing the main view that your user will probably be using the most.

Admin areas are often neglected as well. Mainly because we are focused on the app itself and just simply forget that we have to provide our users with a great UI to manage and view their data. Sometimes I think we also just consider the dashboard to be ‘non-public facing‘ and therefore we figure we don’t really need to put that much time and thought into it. But, if the app needs a view to manage and a view to analyze data then that means someone will be viewing it and chances are it might be the most viewed portion of the application.

I’ve come up with 8 items that make up a successful dashboard and admin panel. Depending on the app you are designing, some of these may be more important to you than others – your app may not need to display charts and graphs.

Here’s the quick list, with explanations below.

1. Focused Objective
2. Flexibility
3. Areas of Interest
4. Visual Data
5. Iconography
6. Navigation
7. Feedback
8. Readability

Focused Objective

Let’s try not to design backwards. Define the main objective or objectives of the dashboard before you start cranking away building a cool color scheme. We all know that planning is a crucial part of any design, so I won’t beat this into the ground. But when planning your dashboard try to figure out its main purpose and goal of the user. You probably don’t need to show your administrators all the app data or even give them control over everything the app does.

After you know what your main objective is, the main purpose for the user is to be logging it to do some administrating – focus that objective. Design for and around that objective. Design your visual hierarchy around this purpose and make sure that everything flows to, from and through it. Consider it the dashboard’s “call-to-action” and make sure the user knows exactly what they are supposed to do with the dashboard.

Flexibility

This has a double or even triple meaning when designing the dashboard. Beyond the fact that you should consider making your dashboard flexible in a responsive or accessible sense, make sure it is flexible enough to iterate quickly while developing and also think about making it skin-able or theme-able.

When developing an app, you will probably iterate the development process and if you plan on supporting the app for years to come you will probably be constantly adding new features, redesigning and updating code on a fairly regular basis to just stay current and up to speed. Make sure your dashboard can iterate with the application. Nothing is worse when you have been using a dashboard for years and they just completely re-design the entire thing on you.

WordPress is a classic example of a flexible dashboard. The main flow and usability of the dashboard haven’t changed much between releases at least in a major way. Small changes happen, but when you log in after a new release you still know you are in WordPress. Approaching your dashboard development where you have clean separation of style, content and interaction will help your app to grow and walk in small steps.

Areas of Interest

Clearly separate your areas of interest and organic related topics and categories of data with similar items. A dashboard isn’t a content-driven web page – it’s more about displaying user data and giving your administrator access to that data and other tools to manage that data. A lot of dashboards are separated into boxes of related content: charts, graphs, content, etc. This is because it’s visually advantageous to group items together for quick access and viewing.

Really, its just about simple organization and it really doesn’t matter how your data is organized: lists, tables, boxes or any other design pattern, it’s more about knowing your data and displaying that in clearly organized design patterns.

When is comes to interacting with this data, consider using space saving and highly interactive UI elements. Use collapsible elements that only show and hide the data when the user really needs to see it. You can cram more data in one space if content can accordion or hide when not used. Take advantage of drag and drop as well to reorder items or data, or just make things easier and more enjoyable to use.

Always make sure groups of elements have clear, simple and readable headers that adequately describe the group. We’ve always used admins where the labels and headers don’t make any sense to the content within. Avoid just lumping things together to simply save space as well, it’s better to organize items correctly rather than go super lazy and just start throwing things together that really don’t fit.

Visual Data

This probably applies more to heavy data displaying dashboard like analytics apps or banking apps rather than apps like Payba.cc, NirvanaHQ or WordPress. Reporting good data will make or break your dashboard so it’s a good idea if you spend some time selecting and styling these data models to best present to your user. Now, I’m not anywhere close to knowing anything about statistics, but charts and graphs can become worthless if just simply used to present data without any comparisons or analysis or anything that visually displays data trends.

Picking the right visuals to represent the data is very important too. Some data sets are better shown and analyzed with line graphs versus, say, a data constellation. Here is a nice little list of some data visualization techniques that are commonly used on dashboards:

• Text tables
• Bar and pie charts
• Bullet graphs
• Line charts
• Spark Lines
• Scatter plots
• Coordinate charts
• Pareto chart
• Icon tables

Now, this is pretty obvious, but a really great example of visual data representation is Google Analytics. What makes Google Analytics a little better and easier to use than other analytics web apps, is that it is very easy to just login and see your stats real quick without having to read through and bunch of chart legends in order to even learn how to use them.

Iconography

Walking side-by-side with visual data representations are icons. Some dashboards don’t make good or any use of iconography in their apps. But icons are a very effective and a simple way to quickly guide the user. Icons add more than just quick visual directions, they are also a great way to spice up the over visual design of the dashboard.

Creating icons can sometimes be difficult, especially since the hotness of retina and high resolution displays are taking over. There are some pretty awesome tools and techniques for handling the many icons you’ll want to use on your dashboard, like using sprites for icons to simplify the icon implementation process. You can also use icon fonts as icons. This is a great idea and because fonts are vectors they scale really well if you are focused on responsive design.

Navigation

Navigation is important and not just on the outward facing web pages the non-logged in user gets the treat of seeing. It’s important because navigation is gonna be one (if not the) source for a major portion of your dashboard interaction. Since dashboards have a ton of data driven content navigation elements can get huge really quickly. So it’s a good idea to design your dashboard to scale easily as new content areas are created.

Top navigation can be restricting to growth since you are just limited to the width of the page view. This is probably why you see a lot of left or right list navigation blocks on dashboards. Also, consider grouping navigational elements together and then using a simple sub-navigation to display that group. Be careful not to get too crazy with sub-navigations though – we’ve all seen and used awful navs that have 3 and 4 levels of sub navigation. If you are getting to the point where 3 and 4 level navigation is necessary it might be time to rethink it instead.

Feedback

Really great dashboards give feedback, all kinds of feedback. They react to the user constantly and make the user know how to use the dashboard as well as respond properly when the user does something. Feedback should be provided when the user:

• Hovers over charts, graphs and other data
• Interacts with form elements and button
• Saves data
• Edits data
• Uploads or downloads content
• Does something wrong

Also, more that just UI interactions can be feedback. You can have a ‘tip bar’ that provides simple little tips on how to use your dashboard or messages on how to access little known elements or data. And it’s also a great idea to reverse the feedback and let the users give you feedback on your design and dashboard – there’s no better way to learn what the user wants and needs then just asking.

Readability

Readability is key to any web page design we ever do, but don’t forget it on your dashboard. Use highly readable and scannable fonts so that the user can quickly scan and find what they are looking for. The dashboard is a very visual design composition, so make sure that not only your headers and text elements are easy to read, but also you charts, labels and form elements.

Here are a couple things to keep in mind:

• Whitespace: let your text and header breath with proper use of line-height, padding and whitespace surrounding text elements.
• Readable Fonts: Choose fonts that are super easy to read at first glance. Usually, you are going to want fonts that don’t have a ton of decorative elements.
• Font Color and Contrast: Take advantage of clear color contrast between fonts and background elements. For example, don’t use a black font on a dark grey background.
• Visual Hierarchy: Setting up proper eye direction and visually hierarchy will make it more easy for your user to scan the page and know what they should be looking at. Also, it provides balance to the design as a whole.

To Sum Up

Don’t neglect the dashboard design of your web application. All too often these areas are either last to be designed or even just completely forgotten. But, a dashboards can be very time consuming to design and develop and in a lot of cases it may seem that it’s not worth the initial investment if you’re launching a new project. If you don’t have the time to develop some wicked awesome custom dashboard then try a great template and work from there. Check out these nice compilations of ready-made dashboards that can help speed up the process:

35 Best Dashboard Designs

10 Cool Dashboard Designs

Image Credits: Background of featured image, ‘Old Dashboard’ by Gyzie.