Handbook Image Strategy

The Handbook Image Strategy aims to ensure visuals in our documentation improve clarity, reduce user effort, and remain maintainable over time. Think of images as functional elements, not decoration.

When to Use Images

Use images only if they provide clear added value:

• Explain complex concepts (architecture diagrams, workflows, data flows). If the reader must “picture it in their head,” consider a visual.

• Support UI navigation (when users must locate or recognize elements, follow a navigation path). Even clear text instructions can be ambiguous in a complex UI.

• Clarify multi-step procedures (especially when small visual details matter). Use images ONLY when small differences matter and one wrong click leads to failure. A good rule of thumb is to focus on steps where users commonly get stuck or make mistakes.

• Show expected results (correct UI states, outputs, comparisons). Use images ONLY when a correct vs incorrect configuration could lead to excessive issues in the future.

When to Avoid Images

Do not use images if:

• The same information is clear in one sentence.

• The image duplicates the text (it does not offer any additional value).

• The UI or feature changes frequently.

• The image adds no new information.

• The content is better as text (code, commands, values) that users can copy and paste.

Best Practices

When using visuals, keep the following best practices in mind.

1. One image = one idea. Each image should represent a single concept or step. Do not combine multiple steps or highlight several actions in one screenshot, as this reduces clarity and makes instructions harder to follow. To clarify, use an image to highlight features in IMS (with numbers), but avoid using an image to highlight several steps/actions.

2. Make every image purposeful. Unnecessary images dilute attention and make content harder to scan. Users start ignoring visuals altogether if too many feel irrelevant. For example, keep a screenshot showing where a hidden setting is located, but do not include a screenshot of a clearly labeled “Save” button.

3. Keep visuals simple and focused (crop, remove noise). Crop to the relevant section, blur or remove irrelevant areas, and avoid full screen captures unless necessary.

4. Annotate when needed (highlights, arrows, boxes). Keep annotations minimal and simple.

5. Always pair images with text. Users often scan text first. NEVER use images only. Visuals support text. For this reason, no captions are required.

6. Choose the right visual type.

   • Screenshots – UI actions

   • Diagrams – architecture or relationships

   • Flowcharts – processes and decision paths

7. Ensure consistency (style, labels, terminology). Always use the same highlight color, annotation style, and UI theme (do not mix light and dark mode). Use Screenpresso to create annotations for screenshots. For diagrams and flowscharts use Figma Jam and align with the Cenosco brand colors.

8. Optimize for maintainability. Use fewer, high-value images. Avoid screenshots of UI that are prone to changing every few releases. Outdated images are one of the fastest ways to lose user trust and they are expensive to maintain.

9. Avoid using inline images. Inline images tend to break layout consistency across devices and screen sizes, leading to misalignment and reduced readability.

10. Use realistic data in screenshots. Avoid placeholders like “TEST,” “DEMO,” or generic labels such as “Vessel 101,” as they reduce credibility and make the product feel unfinished. Using realistic names, scenarios, and data increases perceived value and helps users better relate the documentation to real-world use.

Caution

Realistic does not mean real. Do not share client sensitive data when making screenshots. Always blur real data (when it is sensitive) on screenshots you are using in the IMS Handbook.

Using Screenpresso

We use Screenpresso to create annotations for screenshots. To ensure consistency across the Handbook, always use the same annotation styles.

Although the tool is user-friendly, this section covers the most commonly used drawing tools and their recommended settings. You may need to adjust the settings the first time you use each drawing tool. After configuring them, click Set Default to reuse the same settings in the future.

The following drawing tools and settings are most commonly used:

Common Mistakes

When used incorrectly, visuals do more harm than good. Avoid the following:

• Decorative images

• Duplicating text with visuals when unnecessary

• Unannotated screenshots with lots of details

• Too many images

• Outdated or low-quality visuals

Final Checklist

• Does the image add value?

• Is it clear and focused?

• Is it annotated if needed?

• Is it explained in text?

• Is it consistent?

• Will it remain accurate?