


Customer Role: How User Experience Research Is Conducted 








Information Display 
The Information Display pattern group helps project managers, developers, and designers select visualization techniques such as tables and graphs, which enable users to understand the meaning and significance of the numbers. Numbers are central to a user's understanding of business, and they help users make informed decisions. 

Pattern Filter Tool 
Are you looking for the right graph and chart representation? 






















Percentage graphs make it easy for users to compare the percentages of values in a quantitative data dimension that is associated with one or more categorical or aggregate data dimensions. You should not use a percentage graph to show both positive and negative percentages. If you are considering using multiple graphs, see the Guidelines to Correlate and Compare Graphs. 





Pattern Set Decision Table 















Pattern Samples 










Pie 
Multiple Pie 
Percent
Stacked Bar 
Percent
Stacked Area 
User Type 
Casual 
Experienced 
Experienced 
Experienced 
Emphasize the fact that percentages are represented 
Yes 
Yes 
No 
No 
Show a single categorical or aggregate data dimension 
Yes 
No 
No 
No 
Show multiple categorical or aggregate data dimensions 
No 
Yes 
Yes 
Yes 
Enable accurate comparisons between values in one categorical or aggregate dimension across a second categorical or aggregate dimension 
No 
No 
Yes 
Yes 
Show percentages that are associated with a sequential data dimension 
No 
No 
No 
Yes 
Emphasize trends in percentage values 
No 
No 
No 
Yes 













A pie chart is the simplest and most common percentage graph. A pie chart represents a total quantity for a quantitative data dimension. The slices represent the values in the quantitative data dimension, as well as categories in an associated categorical or aggregate dimension. Each colored slice represents a different category. The area of each slice represents the associated quantity as a percentage of the total.
Pie charts are better than other percentage graphs for indicating that the displayed quantities are indeed percentages. Because the circular shape of a pie chart indicates a complete or total quantity, the slices are naturally interpreted as percentages of the total. For this reason, however, the values that appear in a pie chart must total 100 percent.
Pie charts are effective for making relative comparisons between percentage values, such as identifying the categories with the largest and smallest percentages.
Pie charts are not effective for making accurate comparisons between percentage values, such as determining precisely how much bigger one percentage is than another.













Multiple pie charts represent totals of a quantitative dimension that is associated with two categorical or aggregate dimensions. Like a regular pie chart, each colored slice represents a category, and the area of each slice represents the associated quantity as a percentage of the total.
In the previous example, the pies represent the total value of different investment portfolios. The different types of portfolios can be considered to be different values in a categorical dimension. Colored slices within each pie represent the different categories of investments (a second categorical dimension). The areas of the colored slices represent the total percentage for each investment category. Color is used consistently to indicate the associated category. In this way, comparing the areas of slices with the same colors is equivalent to comparing percentages of quantities associated with the same category. Users can easily see that conservative portfolios have more assets in cash than the other investment strategies, while aggressive portfolios have more assets in stock.
As with regular pie charts, multiple pie charts are not recommended for making accurate comparisons between percentage values, such as determining precisely how much bigger one percentage is than another.
Multiple pie charts also take up a lot of space. A percent stacked bar graph is usually more space efficient.
Required Screen Elements 
Component Type 
Required Components 
Customizable/Extendable Components 
Graph 
The graph type for this pattern is Pie and the subtype is MultiplePie 
Not applicable 













Percent stacked bar graphs show the same type of data as multiple pie charts; each bar represents the totals of a quantitative dimension that is associated with two categorical or aggregate dimensions. Each colored segment represents a category, and the height of each segment represents the associated quantity as a percentage of the total.
Percent stacked bar graphs are a bit more effective than multiple pie charts for accurately comparing the relative values of the category percentages, especially for the category positioned at the bottom of each bar. In the example above, users can easily see that the moderate portfolio has more than twice the percentage of stock than the conservative portfolio. It is harder, however, for users to make comparisons about categories that are not positioned at the bottom of each bar. For example, does the conservative portfolio recommend twice the number of bonds as the aggressive portfolio?
Percent stacked bar graphs usually take up much less screen space than multiple pie charts.
However, because percent stacked bar graphs are visually similar to regular stacked bar graphs, users may not completely understand that the values being shown are indeed percentages of a total, especially for novice users. For novice users, a multiple pie chart may be preferred.
Required Screen Elements 
Component Type 
Required Components 
Customizable/Extendable Components 
Graph 
The graph type for this pattern is Bar and the subtype is Vertical Percent 
Not applicable 













Percent stacked area graphs are used to show percentages that are associated with a sequential data dimension.
Percent stacked area graphs may be used to show the same sorts of data as multiple pie charts and percent stacked bar graphs, but only if the data dimension shown on the horizontal axis is sequential. In the example above, the categories  conservative, moderate, and aggressive  are really representative samples taken along a sequential range of investment strategies. While the multiple pie graph and percent stacked bar graph emphasize only the three categories, the percent stacked area graph indicates that many more strategies are possible.
The percent stacked line graph is a variation of the percent stacked area graph, which may be useful for printing because it uses less ink, but is otherwise not recommended because of its visual similarity to and possible confusion with the regular line graph.
Required Screen Elements 
Component Type 
Required Components 
Customizable/Extendable Components 
Graph 
The graph type for this pattern is Area and the subtype is Vertical Percent Area 
Not applicable 













