MoodleDocs:Guidelines for screenshots

When to include screenshots?

1. Explaining a visual interface - to illustrate parts of a UI that would be hard to describe in words alone. For example
   • Highlighting where a button or menu item is located.
   • Unusual or non-intuitive UI.
   • Comparing before-and-after states (e.g. settings).
   • Highlighting changes in the UI in a new version.
2. Guiding step-by-step tasks - use when each step results in a visible change or users need to visually verify they’re in the right place.
3. Marketing and feature overviews - such as for ‘What’s new’ documentation.

When to avoid screenshots?

If text alone is clear, don't add a screenshot.

Taking a screenshot

• Use a site using the standard theme, such as Mount Orange demo or Moodle Sandbox.
• Crop as needed to show only the relevant part of the screen. If necessary, zoom in on the feature (e.g. 150%).
• Use full-screen captures only when necessary for context, such as for the ‘What’s new’ documentation.
• Name the screenshot using the convention version number + descriptive name such as page heading e.g. 405questionbank.png

Annotations

Use annotations only when necessary.

• Use a red rectangle to draw attention to an element.
• Use a red arrow to point to a particular item.
• For a step-by-step process within a single screenshot, use numbered labels to guide the user through the sequence of actions.

Accessibility

All images should have a meaningful caption.

Alternative text should be

• Empty if the caption fully describes the image or
• A description of the image for screen reader users.

Screenshots should not have a link to the image file.

Image formatting in Moodle Docs

Example:

[[File:405questionbank.png|frame|none|link=|alt=|Course question bank in 4.5]]

• Use link= to remove the link to the image file.
• Provide a meaningful caption.
• Use alt= (empty) if the caption fully describes the image, otherwise alt=[description of the image for screen reader users].