The art of actionable dashboards
A couple of weeks ago I’ve had a train of thought about exploring the idea of using SimplyEdit to create dashboards for other web applications. We (the team and I) decided that this was a good opportunity to see if we could spruce up the backend in Ariadne, our web application platform. We set out to give Ariadne an interface for users which is easier in use, simpler and actively helps the user to maintain their website.
For the design itself we quickly settled on Material Design. It has a clean look to it and has enough components for us to make a nice interface. Also, we didn’t want to waste too much time on a discussion about which HTML structure we want to use anyhow. With SimplyEdit combining the data and the HTML we can easily replace the HTML if we need to do that.
While trying out different parts for the dashboard, we made a couple of interesting components that can be of use in other projects as well:
· A nested tree view
· SVG pie charts
· SVG charts
· SimplyEdit field templates
· Material design checkboxes and inputs
· A nested sitemap builder with SimplyEdit
· A tasklist with SimplyEdit
· User profiles with autosaving changes
So far, we’ve been mostly tinkering with components that might find a place in the dashboard. I’ve been programming components like this for quite a while. And let me tell you that using SimplyEdit for this is a game-changing experience.
We haven’t really given much thought to what information we want to present to the user. So, we browsed around the internet to find out more about designing user-oriented dashboards and what best practices there are to work with. One idea in particular stood out: when presenting information, also provide the means to do something with that information. It sounds like a simple idea, but using this guideline means a lot about any piece of information that is presented on the dashboard.
Stale pages and playing around
A quick metric we can pull out of Ariadne is finding when a page was last modified, which allows us to seek out stale content within the site. Let’s say that every page in the website should be checked at least once a year. Any page that has not been modified for over a year would be presented as ‘stale’. Check the number of stale pages, compare it to the total number of pages, and we have a nice ‘freshness’ metric to present to the user. We can use the SVG pie-chart to display the information, and it looks all pretty. Now, the thing is, we need to give the user a way to do something with this information. First of all, we want a list of stale pages. Navigating to one of these pages should give the user a list of things to check and the tools to check them with. Each page would get a quick to-do list of tasks and checks that should be done for each page, for example:
· Is this page still relevant?
· Are all the links on the page still working?
· Is the page loading fast enough?
· Is the SEO score still up to scratch?
· Is the page displayed correctly on all our target devices?
Thinking of a list of questions this way, directly produces a list of tools that will help with these tasks:
· A link crawler to check all outbound links
· A SEO score checker (from Yoast.com)
· A page speed checker
· Something that can create screenshots for different screen sizes and maybe different devices as well (Browserstick). Maybe we also want to compare the current version to the last time we checked it (Backstop).
After checking (and fixing the page), we can set the schedule for how quickly this page ages and becomes stale. Some pages need to be checked more frequently than others. Now a thing to consider is that in checking this page, we have provided yet another set of metrics, which in turn should all be actionable as well. If a link is no longer up to date, we might need either update the link to its new location. Or we need to find a new source for this information.
Another example comes from the SVG chart component: playing around with this, I decided that it would be a good idea to show the bandwidth used by the site. To make this an actionable dashboard means that we need a lot more detail in the information. Not just the total amount of bandwidth used, but we also need to know where the bandwidth is going? Who are the big spenders? Let’s say for example that the biggest spender is a page with an uncompressed image on it. This would mean that we need a way to optimize that image to save bandwidth.
Will you help us dig deeper into this rabbit hole? What metrics do you think we need? And following the line of actionable metrics. What tools would need to go with those metrics? Feel free to share your ideas with us.
