Graphics and Charts

Using Graphics - When and How | Using Charts - Overview | Advanced Charts | Chart vs. Table | Chart and Table Alternatively

While most developers are experienced with designing forms, the correct and efficient use of graphics and charts is less well known.

Using Graphics - When and How

Here, we present some tips and tricks for using graphics.

When

Use graphics instead of text when they easily and effectively convey information.
Example: A floor plan is more efficient for describing the structure of a building than a text description.
Use graphics when they need less space than equivalent textual information.
Example: The description of a procedure may be much longer than an equivalent diagram.
Use graphics for decoration or fun, but only if it is appropriate for an application. Do not decorate applications just because you think it looks nice.

How

Align graphics so that their main contents points towards the text, not away from it.
Crop graphics to the relevant section; make them as small as possible and avoid irrelevant and distracting elements.
Example: Do not show a US map if you want to illustrate data in Michigan - use a Michigan map instead.
Use high quality graphics.
Example: Do not draw graphics by yourself, involve graphic designers.
Care for the corrects format of the graphics.
Example: Use JPEG for photos, images with many colors and gradations; use GIF for diagrams, images with text and/or straight lines and images with (less than) 256 colors. Typically screen dumps work better in GIF format.

For more information on graphic iViews see Graphic iViews; for additional background information see the Recommendations for Charts and Graphics in the SAP Design Guild.

Using Charts - Overview

Charts present numerical relations in an "analog" fashion. For example, absolute numbers can be represented as bars of different lengths, while percentages are typically represented as different angles. A variety of charts types has been developed that serve different purposes and exemplify different types of relations. The following table explains the chart types that are available in HTMLB and their usage.

Chart Type	Typical Applications	Variants, Remarks
Area	Cumulated totals (numbers or percentages) over time	Percentage, Cumulative
Column/Bar	Observations over time or under different conditions; data sets must be small	Vertical (columns), horizontal (bars); multiple columns/bars, columns/bars centered at zero
Segmented Column/Bar	Proportional relationships over time	May be scaled to 100%
Line, Curve	Trends, functional relations	Data point connected by lines or higher order curves
Pie	Proportional relationships at a point in time	Segments may be pulled out of the the pie for emphasis (exploded pie chart)

Table 1: Chart types and their applications and variants

Note: There are chart types that may better fit the intended purpose than the available ones. For the design of chart iViews see Chart iViews. For more information of the uses, advantages and disadvantages of different diagram types see Recommendations for Charts and Graphics in the SAP Design Guild.

Advanced Charts

Above we described basic chart types. Charts can be made even more informative if used in new ways or combinations. For example, you can combine a map with pie charts or bar charts to present the geographical distribution of certain variables.

Figure 1: A geo chart showing the distribution of two variables in Northern Germany

Note: Often these charts have to be "handcrafted" and can be used as static images only.

Chart vs. Table

Charts should be preferred to tables whenever it is important for the users to quickly and easily recognize characteristics of data. Scanning data in tables takes longer, and important data are easily overlooked in tables.

Therefore it is also important not to use chart types that are fancy, but that distort relations between data, like 3D charts. Such charts should be used with care only, and the data should be accompanied by numbers in order to avoid misinterpretations.

This is especially important if time pressure or high risk are involved.

Chart and Table Alternatively

In cases where charts help to easily grasp the essence of the data but where also exact values are needed, you may consider to provide both a chart view and a table view.

Start with the chart view and offer a button (below the chart or table) for toggling between the views:

Figure 2: The chart view

Figure 3: The alternative table view (with additional status column)

Note: Typically, status columns are arranged to the left of the table; this example deviates from this rule in order to keep the layout stable. In other cases there will be less similarity between the table view and the chart view (here a bar chart table).

top