Page Comparison

Knowledge Base contributors can insert images into their articles to illustrate directions they give to end users or to clarify the information they present.

Screenshots of applications and webpages are useful visuals aid visual aids when necessary. This article will provide provides Knowledge Base contributors with basic standards and guidelines for the images they insert. 

...

Use screenshots sparingly. Remember that when When software, web pages, or procedures change, they are not as easy to update as plain text. 

...

Use screenshots when the instructional steps are complex or several actions are incorporated into a step or into many steps. 

Use your best

...

judgment when deciding whether or not to add a screenshot. Consider if it is really necessary to insert an image. 

• Can I still clearly convey this information

  to the end user

  by writing it out?

• Will adding an image to this step add any value for the

  end user

  reader?

Consistency

All KB contributors should use a standard image capturing method to allow for consistency across all Knowledge Base articles. 

PCs and Macs have different image capturing methods. Use the method that is appropriate for your operating system. 

PC

• Use the Snipping Tool.

• Make sure you take your snip at a high enough zoom so that the resolution is maintained once you place your image into the article.

Mac

• Use the print screen function and crop the image.

• Make sure that the section you want to crop is not too small and that it will retain a high resolution when you input the image to your article.

...

...

Images on the Page

Image Size

...

However, images that are too large can disrupt the end user's experience. Again, judgement judgment here is essential. You need to ensure that you size the image so that:

• It does not extend past the text around it.

• It is not too small.

...

• It is not blurry.

Image

...

All images (especially images with a white background) should have a 1x black border. Images that do not have borders will either get lost or look awkward on a white page. 

Image Positioning

Screenshots should be inserted below the written instructions. Add a space after the image if necessary so it does not run into unrelated steps below it.

1. Place the cursor at the end of the preceding line of text.  

...

2. Hold down

...

1. the Shift key. 

2. Press Enter. The cursor will shift to the next line without disrupting existing number formatting.

3. Press Shift + Enter again. You can, then, proceed with the rest of your article.   

Inputting Alternate Text (Alt Text)

Alternate text helps provide the context of images to users who use screen readers and other assistive tools by describing an image's content in words. When you add alternate text (also known as alt text) to an image, you do so under one of two conditions. You are either:

• Adding alt text to an image that has explanatory text above it

  , or

  .

• Adding alt text to an image that does not have explanatory text above it.

Images with Explanatory Text

In this case, an explanation for Use null alt text when you have adequately described the purpose of the image is in the text above an image. Thus, to avoid redundancy, use null alt textthe image. To put in insert null alt text, just enter double quotes ("") into the alt text dialogue box. 

...

Images without Explanatory Text

In this case, there is no explanation for the purpose of an image in the text above it. Because there is no explanatory text above the image, use descriptive alt text.

Related Articles