Web Performance is a Journey, Not a Destination

Mehdi Daoudi

Subscribe to Mehdi Daoudi: eMailAlertsEmail Alerts
Get Mehdi Daoudi: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn

Blog Feed Post

Dissecting the Ideal Dashboard

A web-based dashboard is similar in function to a vehicle dashboard in many ways. A vehicle dashboard typically features tools and symbols to will help the driver monitor multiple items at once like speed, fuel, engine functioning, etc. Not only do these meters and indicators help ensure a safe and pleasant drive, it also confirms that the vehicle is running properly.

http://blog.catchpoint.com/wp-content/uploads/2017/08/smart1-300x96.png 300w" sizes="(max-width: 700px) 100vw, 700px" />

Similarly, a well-defined IT dashboard helps the user view, understand, and analyze the data, which in turn boosts the success of the website or application.

http://blog.catchpoint.com/wp-content/uploads/2017/08/smart2-300x136.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/08/smart2-768x349.png 768w, http://blog.catchpoint.com/wp-content/uploads/2017/08/smart2-1024x466.png 1024w" sizes="(max-width: 1871px) 100vw, 1871px" />

So, what exactly is a dashboard? A dashboard is a collection of data (i.e. production data, financial data, etc.) displayed in a graphical layout (a graph or chart). These are used by businesses to gauge its overall health, adjust production levels, determine financial stability, and many other forms of business analysis.

Let’s look at some basic guidelines to follow when trying to build the ideal dashboard.

Focus on the end user, not data

Know your customer; it’s very important to understand your target audience before building a dashboard. For example, the CEO of a company probably isn’t interested in a summary of test failures, while the DevOps team won’t benefit by using a high-level summary dashboard.

Thus, it’s very important to know who will be using the dashboard. By looking at the user’s perspective, you can determine the critical functions and what exactly the end user expects when they access the dashboard.

Group data logically and use space wisely

A well-designed dashboard will ensure the data is displayed in logical groups. The data should be grouped into relevant categories; for example, sales or revenue data should be grouped together while website performance statistics and related data will be in a separate group. This will ensure the different data sets are visually separate and easy to interpret.

Another important factor in designing a dashboard is utilizing the page space. The real estate of the webpage must be used wisely – the dashboard should not look empty or too cluttered.

Most western languages are read from top to bottom and left to right, so our eyes will naturally start its journey from the top-left corner to the bottom-right corner. The top-left corner, in most dashboards, is reserved for the company logo or advertisement, but this isn’t a recommended dashboard practice. Instead, move the most important features, like filters or other important information, to the top-left corner so that this is the first thing your eye will catch when the dashboard is opened.

The different visual components on the page must be placed based on its relevance to the user, starting from the most important (chart, graph, or dataset) to the least.

Help the user drill down data

A good dashboard should be like a quality newspaper. You can pick up the newspaper, glance at the front page and get a gist of everything happening around you. If you wish to know more about any incident or news, then you can continue reading. The front page of the newspaper offers a pretty good summary of everything it contains.

Similarly, it is good to provide a concise overview on the first page of the dashboard so the user can see what is important and drill down to the data to understand it better.

Design insightful visualization

It is always better to display a graph, chart, or any visual representation of the data instead of listing it out line by line. The user will be able to interpret the data easily without having to read through all of the content.

http://blog.catchpoint.com/wp-content/uploads/2017/08/smart4-300x176.png 300w" sizes="(max-width: 643px) 100vw, 643px" />

http://blog.catchpoint.com/wp-content/uploads/2017/08/smart5-300x175.png 300w" sizes="(max-width: 650px) 100vw, 650px" />

The data visualization should be flexible and the user should be able to customize and filter the data as needed. The charts/graphs should also be insightful and interactive.

Along with the charts, the dashboard should display other important data. This data can be integrated into the dashboard using dialog boxes, overlays, tooltips, etc. These features will add to the visual appeal of the dashboard and make it easy to navigate.

http://blog.catchpoint.com/wp-content/uploads/2017/08/smart6-300x136.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/08/smart6-768x348.png 768w, http://blog.catchpoint.com/wp-content/uploads/2017/08/smart6-1024x464.png 1024w" sizes="(max-width: 1315px) 100vw, 1315px" />

Use color-based visualization

A dashboard should use different colors to indicate errors, warnings, and other messages. For example, a data point or value in red could indicate an error with the data. Similarly, text highlight in orange could indicate a warning message or in green to indicate a success message.

http://blog.catchpoint.com/wp-content/uploads/2017/08/smart7-300x240.png 300w" sizes="(max-width: 399px) 100vw, 399px" />

It is important to maintain the same color scheme on all the dashboard pages so that the user is not confused. For example, all errors must be displayed in red on all sections of the dashboard.

http://blog.catchpoint.com/wp-content/uploads/2017/08/smart8-300x136.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/08/smart8-768x349.png 768w, http://blog.catchpoint.com/wp-content/uploads/2017/08/smart8-1024x466.png 1024w" sizes="(max-width: 1322px) 100vw, 1322px" />

The color scheme you pick for the dashboard must be professional; you wouldn’t want your dashboard to look like a kid’s drawing board. The image below illustrates how a dashboard can look with the wrong choice of colors.


Keep the dashboard clear and uncluttered

Avoid adding too many charts and images to the dashboard. It is easier to navigate a dashboard that is not cluttered with graphs, videos, and other data. Limit the number of visualizations on the page to no more than seven.


According to cognitive psychology, the human brain can only comprehend around 7 (+/- 2)  different data patterns at a time and this is the number of items that should ideally be in a dashboard. Adding more visualization will only make the dashboard more difficult to interpret and distracts the user from the dashboard’s intended purpose.

http://blog.catchpoint.com/wp-content/uploads/2017/08/smart11-300x148.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/08/smart11-768x379.png 768w, http://blog.catchpoint.com/wp-content/uploads/2017/08/smart11-1024x505.png 1024w" sizes="(max-width: 1884px) 100vw, 1884px" />

To avoid crowding the dashboard, you can add multiple pages instead of clubbing all the visualization into a single page.


Catchpoint recently introduced Smartboard. This dashboard has been designed around the same guidelines we discussed above. All the features in Smartboard have been added to enhance the user experience.

http://blog.catchpoint.com/wp-content/uploads/2017/08/smart12-300x140.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/08/smart12-768x359.png 768w, http://blog.catchpoint.com/wp-content/uploads/2017/08/smart12-1024x479.png 1024w" sizes="(max-width: 1347px) 100vw, 1347px" />

  • Catchpoint Smartboard presents all important features on a single screen. In the left corner, we have the main navigation panel with the Test ID/Name selector right next to it, this allows you to search for any test by Name or ID. Below the selector panel, you will find some important data listed like the Time Filter Selector, DownTime/TestTime, and test run indicators.
  • The dashboard features an Infinite Timeline with Brush and zoom feature that lets you select any period to drill down the test data. There is also an Error display section that shows errors, exceptions, downtimes, test failures etc occurred during that time frame.
  • The Trending Chart and Histogram chart show different data-points.


Building a dashboard is more than just putting together a summary of the collected data, but it’s important to arrange this data in a way that it is easy to interpret. User experience should be your priority when designing a dashboard; a user will not be able to analyze the data if it is not presented properly. Keep it simple, keep it clear, and keep it user-friendly.

The post Dissecting the Ideal Dashboard appeared first on Catchpoint's Blog - Web Performance Monitoring.

Read the original blog entry...

More Stories By Mehdi Daoudi

Catchpoint radically transforms the way businesses manage, monitor, and test the performance of online applications. Truly understand and improve user experience with clear visibility into complex, distributed online systems.

Founded in 2008 by four DoubleClick / Google executives with a passion for speed, reliability and overall better online experiences, Catchpoint has now become the most innovative provider of web performance testing and monitoring solutions. We are a team with expertise in designing, building, operating, scaling and monitoring highly transactional Internet services used by thousands of companies and impacting the experience of millions of users. Catchpoint is funded by top-tier venture capital firm, Battery Ventures, which has invested in category leaders such as Akamai, Omniture (Adobe Systems), Optimizely, Tealium, BazaarVoice, Marketo and many more.