Skip to content Skip to sidebar Skip to footer

Choosing illustrations

Work with authors to identify good illustrations to provide visual interest for articles. Ideally, each article will have at least one strong image.

  • More horizontal images work better in the online format than vertical images.
  • Every article will have a “featured image” (the small thumbnail displayed in lists). This will usually come from figure 1, but may also be a stock image.

In the article text

  • Try to place the first illustration early in the article, so there is visual interest near the top of the online page.
  • The article text must include a reference to the figure, by number.
  • All illustrations have captions that start with “Figure #.” Include any image credits in the caption, following the rest of the caption text.

Permissions

  • Check on permissions for use of the image, and that this information is provided with the article in the form provided.
  • We do not need permissions for simple screen shots. However, please think carefully about how the illustration is used and whether the site owners would be pleased to be included in the article.

Image files

We must have images as separate files, in PNG, TIFF or JPG format. Images embedded in a Word document are not acceptable.

  • Try to get images that are at high enough resolution so they will print well.
  • Images are scaled to 600px wide for online use. If the image contains detailed text or other content, we will link to a larger file. Please make sure we have an image at high enough resolution to print well.
  • Name image files in the format UX##.#-LastName-# (so we can easily find them in the archives).

Illustration alt text

Alt text describes the image for any reader who does not see the image (including screen readers, and people who have chosen not to load the image). The alt text is provided with the manuscript.

  • If the words in the image are important to the meaning of the illustration, they must be included in the alt text.
  • Focus on describing what is meaningful about the image. If the image is sensory, that is evokes a mood, describe the impact of the image.
  • Identify the image format, if it is meaningful
    • Words to use for consistency: Photo, graph, diagram, screenshot, cartoon
  • Keep it short. 5-7 words is best for a brief description. Up to 25 words for a more detailed description.
  • If the text in the illustration is too long, and is important, it must be reproduced in text, by placing the text at the end of the illustration and providing an anchor link to it in the caption.
  • Screenshots can be described functionally rather than being completely transcribed (unless the screenshot is showing important text) A screenshot with illegible text that is not important to the article does not have to be fully transcribed.

If the illustration contains meaningful text – that is, words that are important for understanding the meaning of the illustration – we will include the full text from the image in a grey box at the end of the online version of the article.

  • Ask the author to supply this text, so we don’t have to retype it.

When writing alt text, consider what information the image adds to the article: You do not have to say that it is an image in the alt text, as the screen reader will announce this.

  • The alt text does not have to be a complete sentence: focus on keywords
  • If the drawing or image style is important, mention it.

Examples

Example for an illustration showing a format for a usability report:

Figure 1. The graphs in this slide present user ratings for five different form layouts in a way that makes them easy to compare.

Alt text: Graph. Callout point to the lowest ratings for different ease of use and visual appeal.

Example for a drawing from patient medical instructions:

Figure 1. In hospitals, patients are sometimes asked to label the part of their body where the doctor will perform surgery, or, in this case, they are asked to label the part of their body where the doctor should not operate.

Alt text: Drawing of legs. One has the words No surgery here No No No Not this one, hand-written in large red letters.

Example for a screen shot where the important features are described in the caption.

Figure 1. The homepage of Mint.com is designed with simple aesthetic qualities. Promotional imagery highlights the colorful charts and graphic of the product as well as its mobility, while the page remains sophisticated, professional, and simple.

Alt text: Screenshot of Mint.com home page