Web Analytics Dashboard Layout and Design

Blog / Business Thoughts and Ideas / Web Analytics Dashboard Layout and Design
7/1/2016 | Joel Stephens

Corporate Web Dashboard Templates

As more and more companies start to build web enabled dashboards there are an increasing number of websites that are offering design templates for them.  We are also seeing more and more design firms and UI/UX firms entering in the design space which is new territory for them.  Choosing the right template or design depends on the project but we believe there are a few simple things to consider before you choose what your dashboard should look like.  Make sure you consider these simple questions before you start designing the dashboard.

Web Application Dashboard for Bootstrap

What Device will you View the Dashboard On?

If you are building out a intranet dashboard for a manufacturing facility and you need to view it on a 80" TV on the manufacturing floor you have a much different challenge then a dashboard for sales people that will be viewed on their iPhone.  If you want your dashboard to be shared during company staff meetings and everyone has a tablet you probably want something different then if you are going to print it on paper and pass it out to 200 employees at an annual meeting.  If users have control over the dashboard, meaning it's displayed on a device they interact with instead of paper or a conference room monitor you need to consider putting information "below the fold" where they can scroll to see it.  

So what to choose?  

Digital Dashboards for Large Rooms

If you are going to display your dashboard in a large area like a manufacturing floor or an auditorium you need to consider a template that has very high contrast and minimal clutter.  Make sure your numbers are big, and choose dark green and bright red because red and green can blend together in high sunlight areas.  Avoid using line charts as they can be very hard to read from a distance when the axis gets small.  About the only thing a user can tell from far away on a line chart is "Did it go up or down?" Instead put pie charts and bar graphs which are easier to see from a distance.  Also choose a few numbers, don't clutter the dashboard with too much information.  We once had a client that asked to put interactive filter controls on the dashboard but the screen was 10 feet off the ground so no one could change the filter for the chart.  It's an easy mistake to make if you aren't thinking in advance.

 

Digital Dashboards for Work Spaces

If you are going to publish your dashboard for use by your staff at their desk or other work location consider that you can put a lot more information on the screen.  Users will be able to view the information longer, investigate smaller numbers and interact with the dashboard with filters, drill down's and other selections.  This allows you to place high level numbers or trends on the dashboard and then allow users to explore trends and numbers.

 

Small Mobile Dashboards

If your target audience is going to access the dashboard on their phone you need to consider order of information not just what information.  For instance, on a phone you are most likely going to stack all the charts or numbers on top of each other and have a user scroll from the top graph to the bottom.  In this case the numbers need to tell a story and that story needs to be in order.  For instance, you may want to have a chart showing total revenue for this quarter, then below it the expenses for the quarter, and then the profit.  Below that you could show supporting information if the user is interested enough to scroll.  That is a fairly logical progression.  What you don't want to do is show the number of new customers first, then average price per project, and then profit.  It's a very odd way to tell the story of your data to your users.

 

If you're looking for some samples of different interactive dashboards for the web or mobile devices we've included a few links below.  We hope these get you thinking of different ways you can present the data.

 

Bootstrap Templates Specifically for Web Enabled Data Dashboards

http://blackrockdigital.github.io/startbootstrap-sb-admin-2/pages/index.html#

https://colorlib.com/wp/free-bootstrap-admin-dashboard-templates/

http://themes.getbootstrap.com/products/dashboard