Data Visualization, Microsoft Technologies, Power BI

Design Concepts For Better Power BI Reports Part 5: Affordances

Affordances are a general design concept that comes from physical product design but can be applied to visual design. I first learned about affordances from the book The Design of Everyday Things. The book describes affordances as the following.

“Affordances provide strong clues as to the operations of things… When affordances are taken advantage of, the user knows what to do just by looking: no picture, label, or instruction is required. Complex things may require explanation, but simple things should not.”

Affordances allow us to take advantage of common experiences and cultural standards to create immediate understanding of our designs. Examples of affordances in physical products include:

  • A coffee cup with a handle suggests that you should grip the cup by the handle.
  • Buttons on doorbells are for pushing.
  • The material and shape of balls suggest they are for throwing and bouncing.

In digital design, users form and develop notions of what they can do according to conventions, constraints, and visual, auditory, and haptic feedback. Examples of perceived affordances in web design include:

  • Scroll bars
  • A colored button, such as the Tweet button on Twitter.com
  • A light gray button with light text that indicates the button is not clickable
  • A disk icon used to indicate the save command
  • Breadcrumb navigation

There is also a complementary concept called a false affordance. False affordances give a clue as to usage that does not match the resulting action. There are examples of this all over the web: buttons that do nothing, text that says “click here” but isn’t a hyperlink, a logo that doesn’t return the user to the home page.

Here’s a 5-minute video from Vox Media about bad doors and false affordances. You might remember it from when it made its way across the internet a year or two ago.

Affordances in Data Visualization Design

Affordances are very relevant in data visualization design. I first saw this application discussed by Storytelling With Data. She describes the use of affordances in data viz design as follows:

“Through strategic use of things like color, size of elements, spacial position, and text, it is so clear to the audience how to interact with the data visualization that they don’t even notice the design.”

But she isn’t the only one talking about it.  The idea here is the same: Use existing knowledge and consistent design to make it obvious how users should interact with your data visualization.

Affordances in Power BI

Since Power BI is largely an off-the-shelf product rather than a custom application (with the exception of Power BI Developer features), much of the user interaction is handled by Power BI desktop or the Power BI web service. For instance, Power BI provides the button for Focus Mode and a contextual menu at the top right of each visual on a report page. Tables automatically have interactive sorting, activated by clicking the column header. Hover text exists when you hover over a data point on a chart.

That doesn’t mean we don’t need to pay attention to affordances. The biggest thing we can do as report designers is implement consistent design.

Use a consistent color palette. If users get used to a certain shade of yellow or orange that indicates something needs attention, they will take that visual cue when they see it elsewhere in the report or in the next report. Colors have meaning for us, so we can define colors to indicate good/bad results, or associate colors with categorical values. Power BI Report Themes can be very helpful in this regard, since they can define a color palette and visual formatting.

Using consist placement and formatting of slicers across report pages and reports can also be helpful. If you use the same slicers on multiple reports/report pages, can you use consistent formatting and spacial position?  Do you have a slicer section of your report page where all slicers sit, along the top or left? Could you format your region slicer in a similar manner on every page (e.g., vertically with simple dark text and no background color)? Power BI Report Templates can come in handy in this regard. You can create a template that has the title, slicers, and chart positions and formatting already set.

As fun and interesting as it may be to use a new and shiny custom visual, if that visual doesn’t make its interaction and information obvious to users, it may not be the appropriate choice. There is a reason people like bar charts – they follow common convention and are easy to read.

Another thing to consider is the use of images to link to bookmarks and websites. Make sure it is obvious that your image is clickable, and make sure it’s obvious where clicking that image will take you. If it’s not clear, add some text to indicate that there is a possible interaction there.

Also, be aware of how you use visual interactions. If you choose to edit the default, do so with reason and try to make it obvious through design cues what the expected interaction will be. Otherwise, users might click a slicer or a bar in a bar chart and wonder why values in another chart aren’t being filtered or highlighted.

This is not to say you should never try anything new or deviate from the norm, but that you should do so purposefully when learning a new design/convention is worth the effort to your users. The consistency and simplicity of affordances corresponds to reducing extraneous cognitive load.

Finally, be aware that affordances are cultural, and may be different across different user groups. For example, colors have different meanings in difference cultures. Be sure you are designing for your intended audience rather than yourself. It can be helpful to confirm with a potential user during user acceptance testing that the design affordance you think is obvious is indeed obvious to them.

 

This post is part of a series. Go here to see the list of posts in the series. 

Data Visualization, Microsoft Technologies, Power BI

Design Concepts For Better Power BI Reports Part 4: The Squint Test

Data visualization should be iterative. You should get a good initial draft put together and then check to make sure it meets your success criteria. Then check the design to ensure it it effectively conveys information in a manner that is easy for your audience to consume. You can then make some changes and check things again. One design check you’ll want to perform is the Squint Test.

The Squint Test helps you check the effectiveness of the layout and design of the elements in your report. You can perform the Squint Test using one of two methods:

  1.  Lean/step back from your screen and partially close your eyes.
  2. Use an application that blurs the details of a web page containing your report or an image of your report, creating an effect similar to squinting.

This allows your design to become blurry, removing visual detail so only the largest, most rudimentary shapes are seen.

When you squint at your report/dashboard, you’ll notice the overall layout and the elements that stand out most. In other words, the Squint Test gives you a high-level view of the visual hierarchy of your work. This is a great way to check that you are making good use of preattentive attributes and Gestalt principles!

Here are some questions to ask yourself while performing the squint test:

  • Are any foreground elements not standing out enough against their background?
  • Are there any background or border elements that unintentionally draw more attention than more important data elements?
  • Is the most eye-catching element on your report page an important element?
  • Are your charts in an appropriate order on the report page?
  • Are elements spaced appropriately so that objects that are closer to each other have some type of relationship?
  • Is the report page balanced so one side is not heavier than another? Is the amount of white space on each side of the report fairly even?
  • Are there colors that “pop” more than other colors? Are the items that pop intentionally highlighted or accidentally overly prominent?

Performing the Squint Test in Power BI

While you can definitely perform the Squint Test on your report within Power BI Desktop, I recommend also testing in a browser once the report is deployed to PowerBI.com or to the Power BI Report Server portal since colors and objects may be slightly different there.

The Squint Test is also used in web page design, so web developers have made tools to aid them in this check. While just squinting at the page is perfectly sufficient, using a browser extension or another tool allows you to easily share your findings with others. In the Chrome Browser, there is a free extension called The Squint Test. This extension places an eye icon near the top right of the browser window. Clicking the icon provides a slider that allows you to increase or decrease the amount of blur applied to the page.

The Squint Test Browser Extension
The Squint Test Browser Extension

I usually turn the blur to about 6 to perform my Squint Test.

As an example, below is a draft of a report page I made earlier this year. The first image is the original report, and the second image is the blurred version to be used for my test.

BloodGlucoseReportClear BloodGlucoseReportBlur

My thoughts from my squint test:

  • I don’t use a lot of chart backgrounds, and my report page background is a very light gray. So they aren’t overshadowing any objects in the foreground.
  • I also don’t use chart borders, so things look good there.
  • The items that stand out the most are the image in the top left with the glucometer and tomatoes, the matrix with conditional formatting that shades the cells blue, and the box and whisker plot in the lower left quadrant. I’m ok with these items being the most prominent. Although the image could be considered decorative, the image is helpful in explaining the information contained in the report (glucose readings).This is more meaningful when viewing the full report with multiple report pages. The other two prominent elements are displays of data. The matrix is most prominent where readings are high and needing attention. The box and whisker plot is a good summary of glucose levels throughout the day.
  • Charts seem to be in a logical order. Flowing left to right, I get some quick summary numbers and trends, individuals readings that explain those trends, the readings shown based upon time of day, the range of readings throughout the day, and then a longer term view of readings throughout the day over time.
  • When I look at spacing, I think the matrix needs to be moved to the right to make the space between it and neighboring graphs more even. The matrix is not more related to the sparklines and KPIs to the left than it is to the line chart to the right.
  • One could argue that the page is a bit unbalanced, since the scatter plot and the line chart are a bit less prominent than the other graphs on the left side of the page. I think moving the matrix to the right a bit plus the use of the dark purple colors, evens it out somewhat.

After reviewing my findings, I could make the necessary changes and then check it again, iterating until I am satisfied.

Now you can use the Squint Test to check your visual hierarchy of information and improve the efficacy of your Power BI reports. Happy squinting!

This post is part of a series. Go here to see the list of posts in the series. 

Data Visualization, Microsoft Technologies, Power BI

Design Concepts for Better Power BI Reports Part 3: Gestalt Principles

The Gestalt principles of visual perception describe how humans tend to organize visual elements into groups or unified wholes to help us make sense of visual stimuli. Basically, we perceive the visual world as complete objects rather than a bunch of independent elements.

For instance, you probably see a triangle in the white space in the first image below. And in the second image, you probably see a rectangle.

Your brain is simplifying visual elements into what it commonly finds them to be (the triangle and rectangle).

There are 8 Gestalt principles that are particularly relevant to data visualization:

  • Proximity: We perceive objects that are close to each other as being in the same group
  • Similarity: We perceive visually similar (by color, shape, etc.) as being in the same group.
  • Closure: We perceive objects as being whole even when they are not complete (such as the rectangle above).
  • Symmetry: We tend to perceive objects as being symmetrical and pivoting around a center point.
  • Common Fate: Objects are perceived as lines that move along the smoothest path
  • Continuity: We perceive objects that are aligned with each other as being in a single group or object, creating a single path or shape rather than multiple distinct paths or shapes.
  • Good Gestalt/Prägnanz: We like to find simple patterns. We perceive objects as related if they form a pattern that is regular, simple, and orderly.
  • Past Experience: We categorize visual stimuli based upon our past experience. If objects are usually perceived close together in time or space, we tend to see them as being related. This is how we recognize letters and words.

Here’s a 20-second video I found that illustrates many of these principles.

None of the Gestalt principles work in isolation – you’ll usually find multiple principles at work simultaneously.

Gestalt Principles in Power BI

Gestalt principles can help us highlight patterns and reduce noise in data visualization. They can also help us create a visual hierarchy and employ symmetry in our designs for a more pleasing user experience.

Some Gestalt principles are very similar to our understanding of preattentive attributes. This is demonstrated in the set of 3 charts below.

GestaltContinuity1
This chart is not following the Gestalt Principle of Continuity
GestaltContinuity2
Chart rearranged to better follow the Gestalt Principle of Continuity
GestaltContinuity3
Chart rearranged to follow the Gestalt Principles of Continuity and Similarity

In the top chart, bars are ordered alphabetically by product name. In the middle chart, we changed the bar order to be descending by sales amount. This satisfies our need for the trend to make a smooth descending path as seen in the Gestalt Principle of Continuity. In the third chart, we have changed the color of the bars to all be the same. The color of the bars didn’t have any special meaning, and the entire chart used the same categorical axis and measure. This follows the Gestalt Principle of Similarity. Instead of seeing individual bars, we now see them more as a group of bars.

Here’s another example.

GestaltProximity

In the top chart, try comparing sales for each product within a quarter. Which product had the highest sales in Q3? This should be fairly easy. Now try using the top chart to compare the sales for Product B over time. It’s a bit more difficult because you have to pick out the blue bar in each cluster.

Now try using the bottom graph to examine sales for Product B over time. It should be much easier because the bars for each quarter are close together.

You can see these charts on PowerBI.com here.

What Does This Mean For Report Design?

Here are some things you can do to take advantage of Gestalt Principles in your Power BI reports:

  1. Check your placement of charts on the report page. Are charts that are closer to one another actually more related than other charts that are not as close together? Are you leaving enough white space between visuals so that we can tell where one visual ends and the next begins?
  2. Be sure to group things appropriately for the most common analysis to be performed, such as with the clustered bar chart example above. Proximity of objects within a graph is important.
  3. In simple bar charts with one category and one measure, use only one color on the bars, unless you are purposefully trying to highlight a trend, grouping, or data point.
  4. Make sure your colors have consistent meaning. If you are using light blue to show sales in one chart, try not to use that same light blue to show expenses in another chart on the same page, unless all your charts on the page or in that section use that color for a specific reason. (Note: It’s possible to make a nice Power BI report with only two colors. I’m not suggesting you use multiple colors all the time. But if it makes sense to use multiple colors, make sure your colors have consistent meanings because those colors imply grouping.)
  5. Order bars/columns by descending or ascending value when not trying to show trend over time.
  6. Use low saturation or neutral hue colors as backgrounds in charts so data points stand out more than the background.
  7. Be careful with network graphs. In these graphs, proximity does not necessarily indicate similarity, and spatial position does not always have a meaning. It’s just an algorithm determining where to place objects within the chart. Check for any false conclusions that may be drawn by these properties and change your chart or add explanatory text to help users understand what information you are trying to convey.

More Information

You can find more information about Gestalt Principles at the following links:

 

This post is part of a series. Go here to see the list of posts in the series.