Best practices for visualizations

There are number of different ways you can improve the aesthetics and functionality of your app. Depending on your audience and what data you want to highlight, the way you design your visualization may have a serious impact on the reader's interpretation of the data.

Adding context to KPIs

KPIs are a great way to communicate some of the big ideas inside your app. However KPI values do not provide any context to the number and calculations that are happening behind the scenes. A green light next to a KPI does not tell the reader if the goal was barely achieved or if you greatly surpassed it.

To help bring context to your KPIs, include supporting information next to the value in smaller text. For example, you can compare the current KPI value with the value from the previous year. You can also add a small chart (line or bar) without axes or values to provide information about the current trend.

See: KPI properties

Color accessibility

The spectrum of colors is narrower for people who have some type of color-based visual impairment and so they may interpret your visualization differently.

For example, some people see the colors red and green more as yellow or brown. This form of red-green color vision deficiency is the most common. This is worth noting since red often carries a negative connotation in data visualizations, especially in finance.

A red or green KPI status can be confusing. You can use shapes with colors as performance indicators to make your designs more accessible. For example, use a red empty circle to denote bad and a green full circle for good or add a triangle as a warning symbol that only appears when a KPI status is at an unacceptable level.

Lines, bars, and pie slices can be difficult to distinguish when the colors are distorted. Use different line styles with different colors to help improve the clarity of your charts.

See: Change the appearance of a visualization

Filter and icon placement

Filers and icons are an essential part of data visualization but it can be difficult to know where to place them or what information to put first. You can often anticipate where the user will begin to read and what information will read first based on a few well-established design principles.

Left placement

Several popular websites use left side navigation tiles and filters. This is due to the fact that many languages read from left to right and as a result the left side of the screen is where these readers look most frequently. Alternately, with languages where text is written right to left, the opposite of this is true. User who are scanning for content tend to gravitate toward the left side of the screen. The farther to the right objects are, the less users will look at them. If all your filters and icons are stacked vertically on the left, it gives them equal weight.

Top placement

Another common placement option for icons and filters is along the top of an app. By not placing filters or icons on the left it gives more space for larger visualizations with distracting menus. When filters and icons are placed above visualization they are also seen as separate from the content below. This can help show the reader that you are prioritizing the filters or icon. If all your filter and icon are side-by-side at the top, the one furthest to the left carries more weight and is a prioritized by the reader.

See: Copying, replacing and moving items on sheets

Information hierarchy

When not all of your information is equally important, you want your reader to prioritize some visualizations over others. You can show a hierarchy of information by using a few key design best practices. For example, you can use different sizes to emphasize some visualizations. Larger information is seen as more important, by increasing the font or chart size you can show the reader where to look first.

See: Resizing a visualization

Page placement also plays a part in information hierarchy. The information at the top of a page is perceived as more important than information at the bottom of the page because it is read first. Information on the first page is perceived as more important than information on the last page.

De-cluttering your apps

Too much information in an app makes it difficult to see what is important. Today’s modern user interface style is a cleaner, simpler, flatter style of design. A simplified design subtly guides the reader and allows them to stay focused.

Less is more

Users often try to include too much information in one app. Line charts with several measures can be confusing and difficult to interpret. Try creating several smaller apps to spread this information out onto the page. It also allows the reader to efficiently compare and contrast visualization that are side-by-side. You can also use alternative dimensions and measures to allow the reader to quickly switch between measures without overcrowding a visualization.

See: Adding alternative dimensions and measures