August 2019, Shari Trewin

ACM publications typically include figures to support the text. These figures often contain important information that isn’t in the text. To make ACM publications accessible to readers, reviewers and editors who cannot see them, authors need to provide written descriptions of their figures. This page gives examples and guidance on writing good descriptions for common types of computer science figures and offers pointers to further reading.

 

General Guidelines

  1. Keep the description as short as possible.
  2. Consider both the content and the function of the figure. Focus the description on the essential new information in the figure, beyond what is in the text.
  3. Make the first sentence a ‘title’ less than 125 characters long.
  4. Go from general to more specific details.
  5. Use the same writing style and terminology as the main text.
  6. Don’t repeat information that is already in the text.
  7. The figure caption should not be part of the image, and the caption text should not be repeated. However, if the caption is part of the image, start the description with the caption.
  8. Write out abbreviations and symbols in full
  9. Only mention color if the specific colors are important or used in the text.

 

Charts and Graphs

The Benetech Diagram Center provides guidelines for describing graphs with examples of descriptions for bar graphs, line graphs, pie graphs and scatter plots. For most graphs, give a brief description including the title and axis labels and mention trends not already described in the text. For simple charts, state the actual data points. For more complex charts, an ideal description would include the data in a table or list. However, this may not be possible to do in an accessible way in a plain text format. In this case, if the data is important for understanding the paper, provide an appendix or a separate document containing the data in a table, and reference this in the description. See the section on Where to Put the Description for more discussion on providing supplemental descriptions like this. For a scatterplot, focus on describing the changes in concentration of data points.

Example: Line Graph

This example shows a graph comparing the places where participants from different groups paused during a pointing and clicking task.

Line graph and how it is referenced in the paper

Figure 1 shows where in the movement the pauses over 100 msec occurred, for each group. Young adults and adults show similar profiles, with pauses distributed fairly evenly over the course of the movement, while older adults and people with Parkinson’s disease show pause counts tending to increase towards the end of the movement. Both groups also show a peak around 10-15% into the movement.
…
Note that the peak in pauses at the end of the movement for seniors in Figure 2 is so great because the seniors’ moves were long – the last 5% might contain 3 times the actual time span of those in the younger adult and adult groups.

A line graph for demonstration.Figure 1: Location of pauses over 100 msec within the movement as a percentage of the movement time.

Line graph figure description

Line graph showing number of pauses from 0 to 350 on the Y axis against % of movement from 0 to 100 in increments of 5 on the X axis. Four lines are shown. Seniors consistently have the most pauses, with a notably large jump from 175 at 95% to 298 at 100%. People with Parkinson’s disease are consistently second highest, then adults and young adults.

Line graph detailed supplemental figure description (if needed)

Figure 1. Location of pauses over 100 msec within the movement as a percentage of the movement time.
Data table follows.

Percent of movement
Group 5% 15% 25% 50% 75% 95% 100%
Young adults 0 21 24 26 37 35 14
Adults 0 23 25 32 48 41 23
People with Parkinson’s disease 17 58 41 47 88 121 75
Older adults 47 122 93 143 178 175 298

Note: If manageable, all data points in the graph would be included in the table. Otherwise, include a representative subset. Here, we do not include all 80 data points, but focus on the values at 15% that are mentioned in the text, and the 95% and 100% values that show the most notable visual feature of the graph – the final jump in numbers for older adults, also mentioned in the paper.

Example: Boxplot Chart

In this example, a chart shows boxplots for user response times in an experiment with six different conditions. The boxplot communicates the mean, interquartile range, standard deviations and outlier values for user response time in milliseconds for each condition.

Boxplot chart and how it is referenced in the paper

Figure 2 illustrates the distribution of user response times in each condition. Voice authentication was both fast and consistent, with few outlier values.

The paper also includes a table that gives the median values for each condition.

A box-blot graph for demonstration.Figure 2: User response time by authentication condition

Boxplot chart figure description

Boxplots of user response times in milliseconds for the six experimental conditions. Mean values are provided in Table 1, column 4. Interquartile ranges are typically 2-3 seconds, with the Gesture+Voice condition having a broader range of 5 seconds and the smallest being the Voice condition at 2 seconds. Voice and Face have the lowest mean values and low standard deviations. Gesture+Voice has the highest. Face+Voice has few outliers.

Note: If needed, a table indicating the mean, interquartile range, and standard deviation values could be added to this description.

 

Screenshots

Screenshots are often used to illustrate experimental tasks or applications. If the image shows a publicly accessible web page, provide a link to the page in the figure caption instead of the description, because links in the description are not easily accessible. For non-web content that is not publicly available, a more detailed description may be needed.

Example: Web site

In this example, a paper includes a screenshot of a web page to illustrate a style of layout structure.

Web site screenshot and how it is referenced in the paper

Figure 3 illustrates the modern trend towards single column layouts with tabular content items.

A web page screenshot for demonstration.Figure 3. Landing page for IBM’s Dynamic Assessment Plugin.

Note: The page URL is given as a link in the figure caption.

Web site screenshot figure description

IBM web page with full-width single column design. The page consists of a small header with navigation links, a large main content area with main heading ‘Dynamic Assessment Plugin’, a Resources section and a small footer. August 2019.

Example: Inside a virtual world

In this example, a paper describes a sequence of actions in a virtual world, in the text and with a figure showing an annotated screenshot. Although the screenshot is annotated with the command sequence, movements made, and voice output, this is already given in the text so the figure description does not need to include this detail.

Virtual world screenshot and how it is referenced in the paper

Figure 4 illustrates a controlled walk sequence in which the target is the North entrance, but there is a chair blocking the path. The player presses Ctrl-W to walk towards the North entrance, and the speech feedback “Walking towards North entrance” is given. In this example, the player hears a bump sound and the words “Green chair”, and the walk stops. They sidestep a little using the A key then press Ctrl-W again to continue walking towards the original object. The footstep sounds will indicate progress, until the player hears “You reached North entrance”.

An example annotated virtual world screenshot for demonstration purposes.Figure 4. A controlled walk sequence from PowerUp.

Virtual world screenshot figure description

Interior scene from PowerUp. The player stands in a large glass-sided building in front of two chairs. In the distance behind the chairs is an exit to the building. Arrows indicate the player’s movement sideways past the chairs then straight to the exit, as described in the main text.

Flowcharts and Architecture Diagrams

Benetech’s Diagram Center provides guidance for describing flowcharts. Start by identifying the type of diagram, number of elements, type of connectors, overall shape and start and end points. Then move to the details. For more complex figures, present these as a list or nested lists, indicating the connections with each item. Since most authoring tools do not support structured text descriptions, this may need to be provided in a separate document as supplemental material.

Example: Flowchart

Flowchart and how it is referenced in the paper

Every time a “new” email arrives, or a user interacts with an email, that data is sent to the server by the OAI. This causes the updated email to pass through several evaluation steps detailed in Figure 5.

A flowchart for demonstration purposes.Figure 5. Email flow chart in the Server.

Flowchart figure description

Flowchart labelled ‘(a)’ State Diagram with eight elements connected by action and flow links. The start state is ‘Email Event (New arrival or Interaction)’. The end state is ‘Email is finished’. Details provided in supplemental materials.

Flowchart detailed supplemental figure description (if needed)

Figure 5. Email flow chart in the Server.

The flowchart has the following elements:

  1. Email Event (New arrival or Interaction).
    a. Flows to 2.
  2. a. Email is deleted.
    a. If yes, flows to 8,
    b. If no, flows to 3.
  3. b. Not critical or (critical activity needed).
    a. Action ‘set alert time’ link to 4.
    b. If critical, flows to 6,
    c. If not critical, flows to 8.
  4. Alert Table Database.
    a. Action link to 5.
  5. SMS Alert Check.
    a. Action link to 4.
  6. c. Completion activity needed.
    a. Action ‘set completion’ link to 4.
    b. If an interaction (not a new email), flows to 7,
    c. If no completion condition, flows to 8.
  7. d. Has the email been completed?.
    a. If yes flows to 8.
  8. Email is finished

Example: Architecture diagram

This architecture diagram is a very complex figure, but most of the details are not needed by the reader of the paper.

Architecture diagram and how it is referenced in the paper

The overall Helix architecture is shown in Figure 6. We present details of different components of Helix (and respective challenges) by following logically the way the system is used in practice.

An architecture diagram for demonstration purposes.Figure 6: Helix architecture.

Architecture diagram figure description

Six components: Data source registry, Data preprocessing, Federated Query Builder, Navigation Guidance, View Manipulation, and Interactive User interface. Data source registry contains Structured and Semistructured Sources, File Repositories and External Sources. These feed into Data preprocessing, which consists of Schema Discovery, Full-Text Indexer, and Linkage Discovery. Both of these components feed into the Federated Query Builder and Navigation Guidance. The Interactive User Interface includes Guided Data Exploration and Stored Views. It feeds into the Federated Query Builder, and receives input from the Navigation Guidance.

Example: Schema Graph

Schema graph and and how it is referenced in the paper

To illustrate, Figures 2 and 3 are two examples that show essentially the same data in both JSON and XML formats. Figure 7 shows a schema graph that can be extracted from either of them. In the graph, company and key people are types, while name is an attribute.

A schema graph for demonstration purposes.Figure 7: Example local schema graph

Schema graph figure description

Schema graph headed by type ‘company’. One type (‘key_people’) and four attributes (‘key’, ‘cik’, ‘name’ and ‘founded’) are linked to ‘company’. ‘key_people’ has two further linked attributes: ‘title’ and ‘name’. Examples of ‘key’ values are “IBM” and “IBM Corp.”. Examples of ‘title’ values are “President”, “CEO” and “Chairman”. Examples of ‘name’ as an attribute of ‘key_people’ are “Ginni Rometty” and “Sam Palmisano”. The ‘company’ ‘name’ attribute value is “International Business Machines”, and the value ‘founded’ is “1911”.

 

Photos

For photos, describe the subject and the location or setting, if relevant. Point out any details important to understanding the paper that are not otherwise mentioned in the main text.

Example: Experimental task

This figure is used to illustrate how participants sat and operated a smartphone during a study of pinch and spread gestures on smartphone devices.

Experimental task photo and how it is referenced in the paper

Three experimental setup photos for demonstration purposes.Figure 8. Typical body position and techniques for performing pinch and spread gestures with a phone.

Experimental task photo figure description

Three photos labelled (a), (b) and (c) show a seated woman with a smartphone and two images of hands holding the phone. Image (a) shows a woman sitting with crossed legs holding a smartphone in her left hand, touching the screen with the thumb and first finger of her right hand. In (b) she makes a diagonal pinching action with her right thumb and first finger. In (c) she uses two thumbs to pinch horizontally.

 

Where to Put the Description

Conferences and journals use a range of different publication pipelines, and authors use different authoring tools and submission formats. Most provide only plain text capabilities for figure descriptions, yet some figures are best described with a table or nested lists. If your figure descriptions are long or need to be structured, provide these in an Appendix if possible, or a separate document, with a section for each figure. Your paper can provide short, simple descriptions and refer to this appendix/document for details including tables and lists. A figure description document can be submitted with your paper and included in the ACM digital library as supplemental material for your paper when published.

An alternative approach for charts and graphs is to add a footnote to the figure caption that provides a link to the data.

 

Related resources