This website uses cookies to better the user experience of its visitors. Where applicable, this website uses a cookie control system, allowing users to allow or disallow the use of cookies on their computer/device on their first visit to the website. This complies with recent legislative requirements for websites to obtain explicit consent from users before leaving behind or reading files such as cookies on a user’s computer/device. To learn more click Cookie Policy.

Privacy preference center

Cookies are small files saved to a user’s computer/device hard drive that track, save, and store information about the user’s interactions and website use. They allow a website, through its server, to provide users with a tailored experience within the site. Users are advised to take necessary steps within their web browser security settings to block all cookies from this website and its external serving vendors if they wish to deny the use and saving of cookies from this website to their computer’s/device’s hard drive. To learn more click Cookie Policy.

Manage consent preferences

These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.
Cookies list
Name _rg_session
Provider rubygarage.org
Retention period 2 days
Type First party
Category Necessary
Description The website session cookie is set by the server to maintain the user's session state across different pages of the website. This cookie is essential for functionalities such as login persistence, ensuring a seamless and consistent user experience. The session cookie does not store personal data and is typically deleted when the browser is closed, enhancing privacy and security.
Name m
Provider m.stripe.com
Retention period 1 year 1 month
Type Third party
Category Necessary
Description The m cookie is set by Stripe and is used to help assess the risk associated with attempted transactions on the website. This cookie plays a critical role in fraud detection by identifying and analyzing patterns of behavior to distinguish between legitimate users and potentially fraudulent activity. It enhances the security of online transactions, ensuring that only authorized payments are processed while minimizing the risk of fraud.
Name __cf_bm
Provider .pipedrive.com
Retention period 1 hour
Type Third party
Category Necessary
Description The __cf_bm cookie is set by Cloudflare to support Cloudflare Bot Management. This cookie helps to identify and filter requests from bots, enhancing the security and performance of the website. By distinguishing between legitimate users and automated traffic, it ensures that the site remains protected from malicious bots and potential attacks. This functionality is crucial for maintaining the integrity and reliability of the site's operations.
Name _GRECAPTCHA
Provider .recaptcha.net
Retention period 6 months
Type Third party
Category Necessary
Description The _GRECAPTCHA cookie is set by Google reCAPTCHA to ensure that interactions with the website are from legitimate human users and not automated bots. This cookie helps protect forms, login pages, and other interactive elements from spam and abuse by analyzing user behavior. It is essential for the proper functioning of reCAPTCHA, providing a critical layer of security to maintain the integrity and reliability of the site's interactive features.
Name __cf_bm
Provider .calendly.com
Retention period 30 minutes
Type Third party
Category Necessary
Description The __cf_bm cookie is set by Cloudflare to distinguish between humans and bots. This cookie is beneficial for the website as it helps in making valid reports on the use of the website. By identifying and managing automated traffic, it ensures that analytics and performance metrics accurately reflect human user interactions, thereby enhancing site security and performance.
Name __cfruid
Provider .calendly.com
Retention period During session
Type Third party
Category Necessary
Description The __cfruid cookie is associated with websites using Cloudflare services. This cookie is used to identify trusted web traffic and enhance security. It helps Cloudflare manage and filter legitimate traffic from potentially harmful requests, thereby protecting the website from malicious activities such as DDoS attacks and ensuring reliable performance for genuine users.
Name OptanonConsent
Provider .calendly.com
Retention period 1 year
Type Third party
Category Necessary
Description The OptanonConsent cookie determines whether the visitor has accepted the cookie consent box, ensuring that the consent box will not be presented again upon re-entry to the site. This cookie helps maintain the user's consent preferences and compliance with privacy regulations by storing information about the categories of cookies the user has consented to and preventing unnecessary repetition of consent requests.
Name OptanonAlertBoxClosed
Provider .calendly.com
Retention period 1 year
Type Third party
Category Necessary
Description The OptanonAlertBoxClosed cookie is set after visitors have seen a cookie information notice and, in some cases, only when they actively close the notice. It ensures that the cookie consent message is not shown again to the user, enhancing the user experience by preventing repetitive notifications. This cookie helps manage user preferences and ensures compliance with privacy regulations by recording when the notice has been acknowledged.
Name referrer_user_id
Provider .calendly.com
Retention period 14 days
Type Third party
Category Necessary
Description The referrer_user_id cookie is set by Calendly to support the booking functionality on the website. This cookie helps track the source of referrals to the booking page, enabling Calendly to attribute bookings accurately and enhance the user experience by streamlining the scheduling process. It assists in managing user sessions and preferences during the booking workflow, ensuring efficient and reliable operation.
Name _calendly_session
Provider .calendly.com
Retention period 21 days
Type Third party
Category Necessary
Description The _calendly_session cookie is set by Calendly, a meeting scheduling tool, to enable the meeting scheduler to function within the website. This cookie facilitates the scheduling process by maintaining session information, allowing visitors to book meetings and add events to their calendars seamlessly. It ensures that the scheduling workflow operates smoothly, providing a consistent and reliable user experience.
Name _gat_UA-*
Provider rubygarage.org
Retention period 1 minute
Type First party
Category Analytics
Description The _gat_UA-* cookie is a pattern type cookie set by Google Analytics, where the pattern element in the name contains the unique identity number of the Google Analytics account or website it relates to. This cookie is a variation of the _gat cookie and is used to throttle the request rate, limiting the amount of data collected by Google Analytics on high traffic websites. It helps manage the volume of data recorded, ensuring efficient performance and accurate analytics reporting.
Name _ga
Provider rubygarage.org
Retention period 1 year 1 month 4 days
Type First party
Category Analytics
Description The _ga cookie is set by Google Analytics to calculate visitor, session, and campaign data for the site's analytics reports. It helps track how users interact with the website, providing insights into site usage and performance.
Name _ga_*
Provider rubygarage.org
Retention period 1 year 1 month 4 days
Type First party
Category Analytics
Description The _ga_* cookie is set by Google Analytics to store and count page views on the website. This cookie helps track the number of visits and interactions with the website, providing valuable data for performance and user behavior analysis. It belongs to the analytics category and plays a crucial role in generating detailed usage reports for site optimization.
Name _gid
Provider rubygarage.org
Retention period 1 day
Type First party
Category Analytics
Description The _gid cookie is set by Google Analytics to store information about how visitors use a website and to create an analytics report on the website's performance. This cookie collects data on visitor behavior, including pages visited, duration of the visit, and interactions with the website, helping site owners understand and improve user experience. It is part of the analytics category and typically expires after 24 hours.
Name _dc_gtm_UA-*
Provider rubygarage.org
Retention period 1 minute
Type First party
Category Analytics
Description The _dc_gtm_UA-* cookie is set by Google Analytics to help load the Google Analytics script tag via Google Tag Manager. This cookie facilitates the efficient loading of analytics tools, ensuring that data on user behavior and website performance is accurately collected and reported. It is categorized under analytics and assists in the seamless integration and functioning of Google Analytics on the website.

Practical Guidelines for Effective Dashboard Design

  • 13880 views
  • 12 min
  • Sep 20, 2018
Anastasia D.

Anastasia D.

Copywriter

Alexander M.

Alexander M.

UI/UX Designer

Share

Data visualization plays an important role in any business. There are various ways to visualize data: in tables, graphs, reports, and so on. But it’s often difficult for businesses and individuals to understand how to visualize data so that everyone can read it easily. Effective dashboard design helps businesses visualize any sort of data.

Modern web design has moved on to finding the balance between appealing interfaces and user-friendly experiences. The same balance should be found when visualizing data on dashboards.

As every business differs, information design on dashboards should differ too. There’s no one-size-fits-all solution to visualizing information on dashboards, but this article provides common recommendations that will help designers achieve their best while creating an effective dashboard.

Interface design

Page structure

Page structure, diagram placement, and the amount of information on the page plays an important role in data visualization. Here are some structural tips to make any dashboard easy to understand.

#1 Use grids for the page structure

Designers typically use grids in web design. A grid is a two-dimensional structure that serves as a framework to align content. This way the designer can set up a good page structure that’s clean and organized. Using grids in dashboard design to better text readability due to perfect alignment of information. It can also improve efficiency by speeding up the design process, as there’s no need to reposition the content until you’re satisfied.

Web design grid
A grid design layout aligns content into clear block

#2 Keep users’ attention on the page

Humans are visual creatures who subconsciously make judgments based on visual cues. According to Rareform New Media, 48 percent of users consider the design of data on a company’s website to be a top determinant of the credibility of the business.

As a rule, designers strive to place the most important information on the part of the page people pay attention to first. Internet users tend to scan a page as shown in the picture below.

Page scanning

Users generally start scanning a web page from the top left side and continue to focus their attention down to the bottom left side. The center of the page takes half of the user’s overall attention, while the lower right side is almost ignored.

#3 Leave white space

While looking at the page, users see not only objects but also white space. White space refers to the parts of the page left unmarked or empty. In web design, this is space between images, columns, graphics, and other elements that are used to maximize the user experience and deliver a clear message.

White space

White space is an important element when creating dashboard design for the following reasons:

  1. White space increases content legibility by separating blocks of information, which adds up to a better overall user experience.
  2. White space gives direction and emphasis to what’s most important on the page.
  3. According to research by Human Factor International, good use of white space increases comprehension by almost 20%.

If there’s no white space between elements on the dashboard, users may skip the most important information and lose interest altogether.

Colors to Use in Dashboard Design

Imagine that someone gifted you a car. You probably would be extremely excited and happy, right? But what if this car were painted in your least favorite color?

You might not be so excited then, right? That’s because colors have meaning.

Colors matter a lot when visualizing information on dashboards. Color can attract a user’s attention to the most valuable information or can distract the user’s attention. For instance, increasing color brightness can attach particular importance to content. Using the same colors for different pieces of information placed in different parts of the page can clarify that this information is similar or corresponds to the same topic. If we go deeper into the meaning of color in web design, it can form a user’s impression of the interface and evoke particular emotions.

Colors can be prioritized. For example, earth tones are perfect for common visualization on dashboards while unnatural colors are good for notifications and highlighting essential content. The image below shows more about these colors.

Colors meaning

Colors for data visualization

When you use colors in graphics or tables to represent data, there are three types of color schemes to consider:

  • Sequential for displaying values from low to high
  • Diverging for ordered values with a critical midpoint
  • Categorical for values (data) from separate groups that need contrasting colors
Colours for dashboard design

Typography

As most of you may know, there are two types of typefaces: serif and sans-serif. Serif typefaces include Times New Roman, Clarendon, Lucida, Georgia, and Century. Sans-serif typefaces include Proxima Nova, Helvetica, Avenir, and Tahoma.

Fonts for dashboard design

It’s important to understand which font best suits a particular situation, as font plays an essential role in data visualization. For example, sans-serif fonts look better on low-resolution displays and when text is small and narrow. To avoid confusion when choosing the font for your dashboard design, follow these rules:

#1 Highlight the text

Fonts can impact the meaning of content greatly. For example, look at the following text:

“Good design makes the product useful.” — Dieter Rams

“Good design makes the product useful.” — Dieter Rams

Italic font creates a sense of emphasis and urgency, while the bold font is urgent and loud. When a sentence contains bold text, a reader tends to look at it first. Here’s a detailed explanation:

Bold and italic typeface

#2 Font structure

Most of the text on the page can be divided into four categories:

  • Body — clear, readable content
  • Headers — main section names
  • Notes — additional information that the user should know
  • Emphasis — information that attracts the reader’s attention

Take a look at the recommended parameters for each of these text categories:

Text category Purpose Size Typeface Color Style
Body A clear readable text 12-16pt Sans-serif (Arial, Tahoma, Verdana); Serif (Georgia, Times New Roman) Natural Normal (not Bold, not Italic)
Header To divide text into sections 150–200% of the body text Same as the body text Natural Roman, bold, or italic
Notes To add tips for the user 85% of the body text Same as the body text Not bright, low-contrast Roman (not bold, not italic)
Emphasis To highlight the main features Same as the body text Same as the body text Bright, contrasting colors Bold or italic

By following these simple rules, your dashboard will be legible and clear to the reader.

Icons

Icons are essential in interface dashboard design too. They’re meaningful and can be associated with some information or action. That’s why it’s important to know how to choose the right icons for dashboards.

Don’t use icons with lots of details, as they show up poorly on small displays. If such icons are used to visualize data, it prevents users from being able to view and compare information.

Icons that are used for pictograms should be clear, minimalist, understandable, and cause the right associations. In addition, it’s best to create icons in one style.

Icons

Don’t use different versions of icons to display the same type of information. Instead, use one icon with different shades.

Icons

The perfect icon for visualizing data on dashboards is simple, symmetric, clearly visible even on small displays, and fits in a square.

Data visualization

Diagrams and tables are used for visualizing the most vital data on dashboards. They help to display information so that every user can easily understand it.

Choosing the right diagram

There are two main types of data: categorical and numerical. When choosing the diagram type, consider the data type first. A diagram should be easy to understand and give a clear understanding of the information provided.

Some things can easily be perceived visually, such as the length of a line or the position of an object in two-dimensional space. But there are also things that can be perceived wrongly by the human eye, such as width, area, color intensity, radial distance, and so on. In order not to confuse people, use lines and columns in dashboards instead of pie charts and three-dimensional diagrams that are harder to comprehend.

Design rules for diagrams and tables

Look at the following rules and tips that will help you create a great diagram and table for your dashboard.

#1 Data color

When creating a diagram, try to increase the ratio of data to colors. Colors that are used well can enhance and clarify the information on the diagram, while colors that are used poorly can muddle and confuse. Below, you can find some visual tips on how to make your diagram legible.

Data colors

#2 Contrast

Try to create the maximum possible contrast between data and the background of your diagram. A white background gives the appearance of paper, which makes it easier to choose a color that both displays and prints well. A white background gives a stable surface to focus on.

Contrast

#3 Chart lines and 3D

Avoid smoothing the chart line on a diagram, as this makes it really hard for the reader to mentally place the points on this line.

Chart line

The same issue arises with 3D space diagrams, which are useless and hard to read.

3D

#4 Gradients

The best advice about gradients is to use flat colors and minimal gradients. Make sure that the user is able to clearly see the end point of the column. When the gradient disappears by the end, it’s almost impossible to see the height of the column.

Gradients

#5 Data sorting

Sort data according to its value. This way your diagram will be properly structured, understandable, and readable.

Data sorting

#5 Labels

If possible, avoid vertical labels, as they’re difficult to read and it’s much more difficult for the user to focus on statistics.

Labels

#6 Color options

Use different colors and shades on diagrams to show dissimilar data, as in the example below.

Color options

But try not to use different colors for the same type of data, as this creates visual noise.

Color

Tables

Tables in information visualization allow users to search through data and compare it conveniently. A data table is an efficient tool for comparative analysis of categorical objects. Let’s consider a few short tips on creating an easy-to-read table for your dashboard design:

  • Avoid using excessive grid lines
  • Use zebra striping to separate table rows
  • Use white space to separate parts of the table
  • Avoid using long numbers
  • Use consistent distance between columns and rows to create horizontal and vertical rhythm
Tables

Effective dashboard design is both an art and a science. By sticking to the tips and recommendations given in this article, you’ll be able to create easy-to-use and legible dashboards with organized visual structures.

CONTENTS

Authors:

Anastasia D.

Anastasia D.

Copywriter

Alexander M.

Alexander M.

UI/UX Designer

Rate this article!

Nay
So-so
Not bad
Good
Wow
2 rating, average 5 out of 5

Share article with

Comments (0)

There are no comments yet

Leave a comment

Subscribe via email and know it all first!