Figures - Do you add useful and concise figure text (aka a caption) to avoid a lot of text over images?
Rules to Better Websites - Layout And Formatting|8f25811e-0bde-4b94-838b-20a7c62c723c;Rules to Better Websites - Writing Rules|a1caccff-bce0-416a-85bf-a8fba85c2608
v9.0
Posted at
7/11/2018 9:16 AM by
Jessica Kick
Rule Intro
When you add an image to a website or application, it is so useful to add a figure underneath it to describe your image. Tip: Prefix it with the actual word "Figure: ".
(This is the same as how Microsoft Word does it when you add a caption.)
It's the best way of ensuring you catch users' attention to the content of your page. When you're scanning a newspaper for interesting articles, you'll check out the pictures, read the accompanying description, and if it sounds interesting you'll go back and read the article.
Page Content
Users read websites in a similar fashion. Catch their attention with an image, and then keep it with a useful description. Don't just describe what the image is; say what it's used for in the context of the document.
- Figure: Good Example - Some nice useful text describing the image
It is especially important that images and captions serve a purpose, as opposed to graphics which are there solely for design.
Tip #1 - Bold your captions
[image]
Figure: [Description…] (not bolded)[image]
Figure: [Description…] (bolded is best)
Tip #2 - Describe the actions
Especially for screenshots, it is a good idea to have your figure describe the action the user would take:
[image]
Figure: This is the screen[image]
Figure: On the screen, choose the execution methodA good example of this can be seen in the figures at SSW Code Auditor User Guide page.
Tip #3 - Give bad and good examples
It's recommended that you use "bad" and "good" examples to clearly explain the DOs and DON'Ts.
Bear in mind to always show the bad example first, then good example, like below:
To print your document:
1. Select File | Print. The Print dialog should now show.
2. Select the number of copies and click Print. The file should now print.
Figure: Bad Example - Using 'should' implies uncertaintyTo print your document:
1. Select File | Print. The Print dialog is shown.
2. Select the number of copies and click Print. The file will now print.
Figure: Good example - Using present or future tense implies confidence
Related Rules
{CB664ECB-4910-4D82-BCBC-47E35CBE89EE}
Do you feel this rule needs an update?
