I've coded things of all shapes in sizes throughout my years. Everything from small landing pages to email templates to fully custom payment systems. All important things in the web development community. But few things have given me as much as satisfaction as building out dashboards. Every website needs a dashboard. It is the control panel of your entire platform. Think of it like the cockpit of a fighter plane.

Above is a screenshot of this blogs dashboard. It is fully custom and it changes frequently, so don't think that it is a well kept secret that will live on forever. But essentially, only I get to use it (for now), and occasionally someone helping me with content and management. It follows your standard dashboard model with a menu on the left and the parent content on the right.

This is where you and your team can manage your companies/websites content. Where you can add users, remove users, view reports and really just about anything that you can think of and that you and your business need. The perfect dashboard can make your day to day job a total breeze and a pleasure to work on.

On the other end, a poorly designed dashboard can make you reconsider your life and career choices. When I worked in corporate environments, one of the main complaints that I saw consistently were in regards to poorly designed dashboards. People had a job to do, and they wanted to do them, but they either didn't have access to the database or it required half a dozen steps to get to where they needed.

So today I'll be going over a few ways in which you can build out more functional and useful dashboard panels, and discuss why you pretty much need to have one.

What makes the perfect dashboard?

Let's start with the fact that dashboards are not designed with minimalism in mind. In a world where everyone wants a giant white-page layout with giant text, that just isn't the case with dashboards.

The perfect dashboard can manage anything and everything that you need to do your job without any external help. If you need to add a user, you shouldn't have to email the system admin asking them to do so. And that requires many links and many buttons. You commonly see dashboards with graphs and charts and all kinds of elements on the page, like the following.

This can easily get to be too busy and most of the time those charts or percent graphs mean little without context or they are for someone else's eyes to look at. Color is optional. If you notice my dashboard from above, it is kept relatively simple with black being the primary color. And again, that's mainly because only I get to work on it. If I had a team of writers using the application at the same time, branding would be important and so having a consistent theme and design might make more sense.

Because dashboards have to allow access to so much data, they tend to get content heavy relatively quickly. Buttons and gears and icons can litter the page, again, similar to an actual cockpit. Think single-page from day one. How can you get the required elements to both stay out of the way, but to also be present when you need them. A technique that I have begun to use lately is to hide secondary elements as a default. I would consider secondary elements any action or event that occurs maybe once per week or so, with primary events landing more on the daily side.

In the screenshot above, note the gear icon is only visible on that one single menu item. By default it is set to not display unless your cursor hovers over it. On hover, you now have this secondary menu item, which further opens up even more functionality, in this case the ability to rename a folder, delete a folder or change its privacy level.

Having a single page, or at least primarily a single page layout helps to keep your focus when doing your job. Having everything within reach on the same page without having to refresh is a massive time-saving strategy. Not only because loading pages over and over take time, but because leaving your current work environment takes you out of the flow sometimes. If you were writing content for example, you would have to save your work or finish that last sentence and then shift focus to some other area of your website in order to, let's say, search for a related article.

This is where AJAX is important. You will be making a ton of asynchronous requests to get this effect, but it is well worth it. Having a stable framework setup can be invaluable in this process. By that I mean finding ways of making asynchronous JavaScript calls with as minimal effort as you can. I have my own JavaScript library that I have worked on for years that takes care of AJAX requests with a single line.

Having a RESTful API in place before hand can also make this process much easier overall.

Adding cues

This is where icons and animations come into play. If you see a glowing green dot appear somewhere on the page, you can assume that something has triggered somewhere and that it demands your attention. If data is loading, then you'd want a spinner icon to inform you while it runs.

Hover states are crucial on dashboards, since there are normally dozens of buttons layered around. Determining what a button is can make or break a layout. Don't believe me? Take the following for example.

Click here

Perfectly normal looking link. How about this?

Click here too

There's an uneasy feeling that accompanies that second button. It's almost as if a part of you doesn't believe that that's a button, and so you hesitantly click. Make your buttons stand out if they are important and blend in to the background if not so important. The last thing you want is a dozen brightly labeled menu items that you have to mentally traverse through each time you load the page.

Give users (even if it is just yourself) plenty of cues about what is happening on the page. Is there unsaved content currently? Are you about to wipe out the entire database? If that's the intent, fine, but let the users know beforehand. I add plenty of alerts and modals in my dashboards, such as when I'm about to delete a post.

If you'd like an easy way to implement modal windows in plain JavaScript, you can check out my post here.

A well designed dashboard comes down to usability, functionality and speed. Design is also important, but not as much as you would think. At the end of the day, you want to feel like you have full control of your company/application/website when you log in. You want to pick up where you left off and get right to work without skipping a beat.

I have spent years fixing, updating and building dashboards and I have personally seen the impact that it can have on people's work flows and overall quality of work life. Sometimes adding a single element on a page can save someone else hours of work during the course of a month.

If you don't have your very own dashboard just yet, then I would say get started and continue to cater it to your needs. Add features as necessary and always continue to improve it and eventually, you might end up with a tool that does your work for you.

Happy coding folks.

- Walt