Good graphics engages readers in ways that text cannot.
Write the Caption FirstFewer words in a Single DrawingFocus the reader’s attentionIllustrating is re-illustratingIllustration tools
Write the Caption First
The caption should come first and have the following characteristics:
- Brief.
- Explain what readers should remember.
- Create focus.
Note: The following only applies to Drafting stage. By convention, Caption comes last.
Exercise
Target Audience: CS undergraduate students taking an "Introduction to Data Structures" class.
Consider the following three figures, each of which uses the same caption.
Caption A. A singly linked list node stores content and a reference to the next node.
Caption B. A singly linked list node stores content and a reference to the next node.
Caption C. A singly linked list node stores content and a reference to the next node.
Which of the three preceding figures best illustrates its caption?
Toggle to show answer
❌ Caption A. The pretty chain misinforms as one might think a singly linked list points both backwards and forwards.
🆗 Caption B. Lack of content despite correctly displaying pointer and its direction.
✅ Caption C. Clearly illustrates the content part of each node and the pointer part.
Fewer words in a Single Drawing
I hate long sentences. Well, it goes the same for complex diagrams.
Diagrams should:
- Carry one paragraph’s worth of information
- Should be explainable within 5 bulleted items.
The following tricks can help with managing the amount of information conveyed by a drawing:
- A complex system should be broken down into sub-systems.
- Start with a big picture and gradually expand detail in each subsequent section.
Examples
Highly complex technical illustrations like the following tend to discourage most readers:
Figure 3. Complex block diagrams overwhelm readers.
The trick to reducing visual clutter into something coherent and helpful is to organize complex systems into subsystems, like those shown in the following figure:
Figure 4. A complex system organized into three subsystems.
After showing the big picture, provide separate illustrations of each subsystem.
Figure 5. Expanded detail for one subsystem of a complex system.
Alternatively, start with a simple "big picture" and then gradually expand detail in each subsequent illustration.
Focus the reader’s attention
Use callouts to direct the reader.
Examples
When confronted with a complex screenshot like the following, readers struggle to determine what's relevant:
Figure 6. Readers don't know what to focus on.
Adding a visual cue, for example, the red oval in the following figure, helps readers focus on the relevant section of the screenshot:
Figure 7. Readers focus on a shape that breaks the pattern.
Illustrating is re-illustrating
Just like you revise drafts. Revise and improve illustrations for more clarity.
Questions You should ask yourself?
- How can I simplify the illustration?
- Should I split into two or more simpler ones?
- Is the text easy to read? Does the text contrast sufficiently with its background?
- What’s the takeaway?
Example
For instance, consider the evolution of the London Tube map. Prior to 1931, the Tube map was drawn to scale, complete with above ground roads and tube lines that curved as the tracks did.
Figure 9. 1908 to scale map of the London Tube with above ground roads.
In 1931, Harry Beck pioneered a new type of public transit map that simplified the older map by removing above ground markers and removing scale.
His improved design instead focused on what people using the maps really cared about: getting from station A to station B. Even with the success of his 1931 map, Beck still iterated on the diagram for many years to simplify and clarify the map.
Consider now the modern tube map, although new lines and stations have appeared, they still remain close to Beck's design.
Exercises
Consider the following original illustration:
Figure 10. A complex diagram.
The takeaway of the preceding diagram is supposed to be:
For a recursive solution, call the function itself in the return statement until you reach a base case solution.
In what ways does the complexity of the diagram hide the takeaway? How might you address these problems?
My Answer
The takeaway is hidden due to the following reasons:
- Callouts were misused. The colours cause confusion as the repeated function call no longer stands out to focus the reader’s attention.
- There’s no clear indication of when the base case has been reached
- The directions are confusing as its not easy to tell the beginning from the end.
Possible ways to address these problems include:
- All code backgrounds should be white and the function calls should maintain a single contrasting colour. This will indicate the repeated function calls.
- There should be some form of indication(
if 1>1could be circled in a different colour) to know when the base case has finally been reached.
- Each step should be numbered. This will clearly show how it proceeds through each step.
Okay, I admit. I should probably just use a diagram to show all these but 😖.
Ah I just read the answers and couldn’t believe I got all of them right 😇 🤸🏾♂️🤸🏾♂️🤸🏾♂️🤸🏾♂️🤸🏾♂️🤸🏾♂️🤸🏾♂️🤸🏾♂️🤸🏾♂️🤸🏾♂️🤸🏾♂️
Answer By Google
Some possible issues with the diagram include:
- Issue: The bright colours pull the reader's attention away from other aspects of the diagram.
Solution: Choose colours carefully so that they do not overpower the diagram.
- Issue: The diagram does not have sufficient colour contrast. This makes the diagram inaccessible for some people with low vision or certain types of colour blindness.
Solution: Remove unnecessary use of colour and ensure that colours pass standard colour contrast recommendations.
- Issue: The arrows point in both directions which makes it unclear which way the diagram flows.
Solution: Separate the arrows into two parts with one set illustrating invoking a function and the other set illustrating returning from the function.
There are additional issues in the diagram that are not identified here.
Here is an improved illustration:
Figure 11. A simplified version of the preceding diagram.
What flaws do you see in the improved illustration?
Illustration tools
Illustration Tools that are free or have free options include:
Advice to export as SVG
Made with Bullet