Screenshot Anti-patterns
Screenshots: The good, the bad and the ugly.
Screenshots are powerful tools that help us to communicate clearly — particularly in the context of written guides. A picture is worth a thousand words.
Most forms of documentation are assets that need to be continually or routinely managed. A cost of using screenshots is that they are significantly more difficult to update than words. So it’s important to make sure that each screenshot we use is worth it. That it really helps, has a high impact and basically has a good bang for the buck.
When people are including screenshots in documentation it often comes from the best place. They are diligently trying to make documents as informative as possible to help their users and colleagues in the future. But there are a few anti-patterns we should be looking out for!
Anti-pattern #1 — Overshotting
Don’t include too many screenshots. High numbers of screenshots can blow a document up in size and make the contents appear more complex than it actually is whilst also greatly increasing the maintenance burden.
Particular culprits here can be transitional screenshots (sometimes further custom edited and annotated) that take some journey. Click here <screenshot>, click here <screenshot>, click here <screenshot>. When often simply writing ‘A’ > ‘B’ > ‘C’ will do the trick. Perhaps you need to add a bit more supporting information if a part is unintuitive.
Oftentimes it is better to put more trust in the intelligence of the reader and only use screenshots where the step / stage would be truly difficult to achieve or understand without them.
Anti-pattern #2 — Wordshotting / Codeshotting
Don’t include a screenshot of something that people will want / need to copy and paste!
Instead simply copy in the text that might need to be copied out. Use editorial tools to make the section stand out from the normal text if that makes sense.
Like this.
# Or like this for code.Anti-pattern #3 — Repetition
Screenshots (and other images) should follow the DRY principle if at all possible. If you are using the same image in different places then try to embed it or link to it instead of copying it to lots of different locations. This saves on storage. But more importantly it means that you can make updates to the image in all places much more easily meaning reduced effort and reduced drift risk.
