Minimalistic Callouts Heighten Visual Appeal

Lately I’ve been working on quick reference guides that contain a lot of callouts around screenshots. (By callouts, I mean explanatory text that points to some part of the image.) In trying to come up with the right design for callouts, I surveyed how other authors approached callouts. Below is a sampling of about 14 different approaches to callouts, with my analysis below each example.

Some Examples of Callouts

Callout example 1

Callout example 1

The author avoids bubbles around the callouts and keeps the text minimalistic. Each callout has a bold title followed by regular text. Callout lines end with a filled circle rather than an arrow. This works well. I’m not sure why the author stacked all the callouts on one side of the image, except perhaps to save space.

Callout example 2

Callout example 2

The inclusion of callout bubbles around the text makes the graphic look too busy. The callout bubble format takes the visual emphasis off the device and places it onto the callouts themselves. Callouts should be more in the visual background, not the foreground.  The writer also uses triangles formed from the callouts themselves to function as arrows. This increases the amount of visual attention placed on the callout format. With so many callouts, the callout bubble format looks clunky and cluttered.

Callout example 3

Callout example 3

Again, boxes around the callouts draw too much visual attention to the callouts themselves. This visual attention competes with the image. The lines of the callout boxes combine with the yellow connecting lines to create a sense of busyness and clutter.

Callout example 4

Callout example 4

Besides the obviously wrong choice of a pink font, which blends too easily in with the pink color of the house and hurts the eyes, the text is fairly minimalistic. The author here avoids arrows on callout lines as well to reduce the visual energy. The author also uses the space around the graphic rather than stacking all callouts on top of each other on one side. This works, but the loud pink font still calls too much attention to the text. A softer, quieter black font would have done a better job at minimizing the massive amount of text around this graphic. The soft gray color of the callout lines is a good choice. If the author had used pink callout lines in addition to pink text, it would have been a nightmare.

Callout example 5

Callout example 5

Callouts are short names only here. Given the abundance of callouts, the author wisely chose a minimalistic style for the callouts, with simple callout lines that avoid even circles or arrows. The problem with this graphic is that we have no descriptions of any components, so names such as “Rotary Encoder buttons” are meaningless. The author needs to take a less comprehensive approach to describing the image. Or else the author needs to provide a reference to more information in some of the callouts.

Callout example 6

Callout example 6

The author’s use of referential numbers will be useful for translation of this content. Geoff Hart makes this point in Integrating Text with Graphics in Procedures (Dec 2010 Intercom), but also notes that the text loses much of its power by separating itself from the visual element it describes. Geoff writes:

The primary disadvantage is that this approach separates the symbol (the number beside part of the image) from its meaning…. That increases the cognitive difficulty of using the graphic because readers must lead the task at hand (examining the graphic) to perform a secondary task (finding a number in the key to read its explanation), then must return to the image so they can ponder the relevance of that explanation.

Geoff says that as long as you don’t have to keep moving back and forth between the graphic and the explanation, this format can work all right. In these cases, the graphic would serve a referential purpose, where you need only one or two pieces of information.

Callout example 7

Callout example 7

Clearly at some point you enter a state in which a graphic has too much text. The author should reduce the number of callouts as well as drop the borders around the callouts, which only increase their size and visual attention.

Callout example 8

Callout example 8

The callout lines here are right angles, similar to what you might draw in Visio, with no rounded corners or arrows. While these square connectors may reduce the visual energy by giving the reader symmetry, the lines are a little hard to follow. This convention more closely aligns network diagrams and an older graphics style. The author could probably round the corners to modernize the look, or use straight lines with a soft color that doesn’t draw too much attention when crossing the image.

Callout example 9

Callout example 9

With this graphic, the reader has to make the connection between the numbers and the callout. No callout lines connect the two at all, which increases the cognitive load to interpret the graphic. The double instances of the numbers amplifies the perceived amount of notes and callouts on this relatively simple graphic.

Callout example 10

Callout example 10

Notice how these big blue callout formats amplify the presence of the text. The arrowheads make the callout lines look less elegant. The various slants of the callouts produce more visual busyness and gives the graphic an amateur look.

Callout example 11

Callout example 11

The author uses yellow callout lines with black callout text. This contrast is an interesting choice. Would gray not have worked here? Against a white backdrop, the yellow lines fade out and are hard to see, so there’s a visual strain in trying to connect the callouts to the areas they point to.

Callout example 12

Callout example 12

The callouts here are minimalistic and professional looking. Notice how the reduction in callout formatting increases the professionalism and clarity? The author also chooses a soft gray rather than a hard black for each callout line and end point — this helps reduce the focus on the callouts and places more visual attention on the image. The callout supports the image rather than dominating the image.

This minimalistic approach echoes a point Alan Porter makes in the last STC Intercom. Porter quotes one of Edward Tufte’s definitions of graphic excellence:

Graphical excellence is that which gives the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space. (The Global Language: Using symbols and icons when Delivering Technical Content, Dec 2010 Intercom.)

In other words, Tufte calls for a minimalism with graphics — express the idea in the fewest strokes, with the least ink. Leave out the noise. Jean Luc Doumont recommends the same graphic minimalism in his book Trees, maps, and theorems. In “Achieving simplicity and harmony” (p.75), Jean Luc argues that with formatting, writers should use “a healthy dose of self-restraint” instead of indulging in the many layout possibilities that desktop publishing software offers.

Callout example 13

Callout example 13

Here the author uses rounded callout lines rather than the square connectors. The rounded/bent nature of the arrows produces more of a sense of motion. Notice how the “Cable clearance” callout has a different callout style — pinkish dotted lines, rather than blue? Presumably this is because the callout lines intersect other callout lines, and the author wants to avoid this collision, which produces visual cacophony. However, the different color of the callout lines here suggests that the “Cable clearance” callout is in a different category or class than the other callout lines. There’s a semantic problem with changing callout line formats.

Callout example 14

Callout example 14

This is my favorite callout example. Despite the abundance of callout text, the text doesn’t dominate the rather small image. The callout headings are minimal and in a narrow font to reduce visual space. The callout lines — light black — are as minimal as they can be, and lack even a dot or arrow at the end.

Although graphics programs offer a lot of opportunities with callout design, many times the design only detracts from the intent of the callouts. Don Moyer explains that the focus on design can sometimes backfire:

sometimes so much effort goes into aesthetics, special effects, fancy shadows, glowing objects, and 3D wizardry that the scope and structure of the story is neglected. (The Trouble with Visual Explanations: A Quick Look at Common Problems, Dec 2010 Intercom)

In other words, the “professional” execution of graphics can sometimes overshadow or even  divert attention from the image’s central meaning. This last example reinforces the strength of minimalism when it comes to callouts. Le

Conclusions

Callouts should not distract the focus away from the image but should supplement the image. To keep the callouts in the visual background, make the callouts as minimal as possible, avoiding callout bubbles, box formatting, or background shading. These design-heavy types of callout formats work if you’re trying to “call out” attention to the presence of the callout text, or if you have just one or two callouts. But when you have an abundance of callout text on a graphic, as we often do in technical illustrations, shouting attention to each callout foregrounds the callouts at the expense of the graphic and leads to a clutterered, busy, amateur look. Each callout screams, “Look at me!,” and when you have 6 to 8 callouts on a single image, the effect is too much noise.

When it comes to callout lines, avoid arrows at the end or any other graphics that draw too much attention to the line. Especially if the lines will be slanted in various directions, keep the width narrow to avoid drawing too much attention to conflicting slants (which produce negative visual energy). Choose a soft color, such as light black or gray, to reduce attention on the lines. Keeping with the minimalistic technique, maintain an adequate padding of white space between each callout.

follow us in feedly

Adobe RobohelpMadcap Flare

This entry was posted in general, visual communication on by .

By Tom Johnson

I'm a technical writer working for a gamification company called Badgeville in the Silicon Valley area in California. I'm primarily interested in topics related to technical writing, such as visual communication (video tutorials, illustrations), findability (organization, information architecture), content development (DITA, testing), API documentation (code examples, programming), web publishing (web platforms, Web design) -- pretty much everything related to technical writing. If you're trying to keep up to date about the field of technical communication, subscribe to my blog either by RSS or by email. To learn more about me, see my About page. You can also contact me if you have questions.

10 thoughts on “Minimalistic Callouts Heighten Visual Appeal

  1. Larry Kunz

    These are good conclusions, Tom, and I appreciate your exhaustive research. The quotations, especially the one from Tufte, are spot-on.

    A couple of other observations:

    None of the examples uses a serif font for their callouts. Everyone seems to have figured out that sans-serif is easier to read in graphics.

    Even the best one (14) has a problem where one of the text blocks overlaps with a shadow, making the text a bit hard to read. It just goes to show that there are a multitude of factors to consider when designing graphics with callouts.

  2. Bill Kerschbaum

    Thanks for this, Tom! You’ve given us a terrific overview and great concepts to draw from. One thing I’d add is that when you’ve got a lot of callouts, it can add to the noise if the callout lines are all at different angles. In those cases, I try to keep as many lines as possible parallel to each other. It adds a sense of order, helps lead the eye, and makes the image look much cleaner.

    1. Tom Johnson

      Good point. It’s really a balancing act to try to fit the callout text where there’s space and then draw lines everywhere pointing to the relevant screen elements. I know that slanted lines produce negative visual energy — there doesn’t seem to be too many workarounds, but yeah, where you can, keep them parallel.

  3. Rengaraman

    Good analysis. Placing the callouts in equi-distance or in correct angles makes wonder I believe. Other than sans-serif, what font do you think will suit for QRCs’..?

  4. Rhonda

    I decided NOT to read your analysis of each callout example until after I’d skimmed the images first. My conclusion on the initial skimming was that examples 12 and 14 stood out for their clarity.

    I then read your analysis — you put into words all the reasons why I didn’t like or respond to the other examples.

    Excellent article, Tom.

  5. Marc Achtelig

    Thanks for this excellent summary. Maybe one (good) reason why the author chose callout lines with right angles in example 8, was that the shown objects (the cables) don’t have any right angles. So this creates a contrast that clearly separates the lines from the picture. However, your are right that example 14 does the job much better. Here, too, the straight lines clearly but unobtrusively stand out from the round, soft shapes of the baby.

  6. Jimmy Breck-McKye

    I think 13 is an important example. It’s easy to forget that when we design diagrams, our choices of colours and styles is as much about visual semantics as about aesthetics. Before I read the labels, I assume the pink lines refer to an optional component, or perhaps part of another product.

    One question, though, and maybe outside the scope of this post: how do you diagram products that have a context-sensitive, or mode-dependent interface? Consider a keyboard, where certain keys change function when others have been pressed. Or even something like a flute, where the function of each hole changes radically when I press on the others. Can we use multi-coloured lines and text to convey how functions are relevant at different times? Or will my readers assume I’m just being strange?

  7. Pingback:   Weekly links roundup by Communications from DMN

Comments are closed.