Callouts

Callouts are visual annotations that identify and explain features within an image, diagram, map, or page. They consist of a text box or note connected to the feature by a leader line or pointer. The text may include a caption, a name, or a reference to a note, and the label is often accompanied by a small marker such as a number or letter.

Common forms include margin callouts placed in a side margin with a leader to the feature, inline callouts attached directly to the feature, and floating callouts in digital interfaces such as tooltips or popovers. In diagrams and maps, callouts usually use a numbered or lettered label with a legend or key that explains each item.

Contexts and uses vary by field. In publishing and illustration, callouts annotate parts of an image or diagram. In technical drawings, they reference notes or specifications. In product photography and marketing, they highlight features of a product. In UI/UX design, callouts appear as hints, contextual help, or guided tours that draw attention to controls or options.

Design considerations include ensuring clarity, legibility, and minimal visual clutter. Use high contrast between text and background, appropriate type size, and simple, unobtrusive leader lines. Maintain consistency in style and color, and limit the number of callouts per image to avoid overwhelming the reader.

Accessibility should be addressed by providing descriptive alternatives for callouts, ensuring sufficient color contrast, and designing interactive callouts to be keyboard navigable. When possible, summarize the relationship between the label and the feature in non-graphical text for assistive technologies.