Image Standards
When taking a screenshot, carefully consider what content to include and what to cut. The screenshot should be tightly focused on the important information; don't include unnecessary information. Here are some examples of ineffective and effective screenshots.
Examples
Imagine you are describing where to find the "Schedule an Appointment" link in the myWalden portal and want to include a screenshot of the link. There are a number of ways to frame the link in an image.
Entire portal page: This image shows so much of the portal it is challenging to find the link. There is no need for the border on either side of the page. In addition, the image would have to be enormous to be sharp. This example is scaled down, making it fuzzy, but even at this size, it is too large.
Click the Academics tab, then click the Schedule an Appointment link, located in the Research & Resources section under the Current Courses.
Cut portal page: This image cuts out the extraneous border, the portal header, and the Walden University footer. It is better, but it is still a lot of visual information.
Click the Academics tab, then click the Schedule an Appointment link, located in the Research & Resources section under the Current Courses.
Focused image: This image focuses in on the important information, namely where to find the link. To create even more clarity, circle the link and cut away the extraneous links below, while still leaving enough content to orient the reader to the page.
Click the Academics tab, then click the Schedule an Appointment link, located in the Research & Resources section under the Current Courses.
To provide the ultimate in clarity, provide two images, one to orient the student to the appropriate tab and one to the link. Then provide a link out to the entire image showing the full page.
Click the Academics tab.
Then click the Schedule an Appointment link, located in the Research & Resources section under the Current Courses.
Edit images to the appropriate size in an image editor such as Paint, Snag-it, or Photoshop before uploading them. Do not use the Width and Height settings in the Image Properties to set the size of the image. If the width/height properties are used, the image will not re-size on mobile devices.
The image may look odd in the Image Properties preview box. Don't worry. It will be fine on the page.
Example
In the first image, a larger image is forced to 400x266 px using the Width and Height setting in the Image Properties.
The second image is cropped to 400x266px and then uploaded.
When the screen size is less than 400px (as on a mobile phone), the first image stretches strangely, while the second image resizes correctly.
Screenshots in close proximity should be the same width, whenever possible. This makes the content easier to read and makes the page flow better.
If necessary, resize the screenshots in an editor such as SnagIt or MS Paint to make them the same size. Also consider editing the screenshot to eliminate unnecessary white space, allowing you to make the image smaller.
For example:
In this example, the first screenshot is larger than the second. This looks odd. There is plenty of white space in the first screenshot that can be edited out to reduce the size of the image.
In this example, the two screenshots are the same size. By removing the extra white space, the first screenshot is made smaller, while still conveying all the important instructional information.
Highlighting can be used judiciously to draw attention to the text on a page. Avoid highlighting anything other than text. Stick to yellow or another light color for highlighting, and avoid using multiple highlight colors in the same answer.
Be careful to keep the highlighting to the desired text; don't "bleed" into the surrounding white space.
For example:
Notice in the first example the text is neatly highlighted.
In the second example, the highlight oozes into the white space before, after, and under words. This is ugly.
Most screen capture software such as Jing and SnagIt have a highlight tool.
When adding elements to a screenshot or image such as text, circles, and arrows, be consistent in the color choices for each element within the guide. The text overlay should be the same color throughout the guide, as should the arrows, circles, etc. Ideally, the colors should be consistent throughout the website.
Check with your department for specific color choices for your website.
Text must meet color contrast standards and annotations must be properly reflected in the alt-text.
Best Practices
Do not use a screenshot that is so small that the text is illegible or the image is blurry. In this case, crop the screenshot and link out to a larger image.
For example:
In this first screenshot, the peer-reviewed limiter is clear. A link is provided to a larger image showing the limiter in the context of the website.
Click to view limiter in context.
In this second screenshot of the same limiter, the text is blurry and difficult to read. The blurry also makes it look unprofessional.
To differentiate a screenshot from the surrounding text and from the box background, all screenshots have a thin black border.
Add the border after the screenshot is uploaded by putting a "1" in the Border field.
There are times when it is desirable to provide a small screenshot or thumbnail, and then link to a larger screenshot with more context.
Both the small screenshot/thumbnail and larger screenshot must have alt-text, as usual.
Rather than making the small screenshot a link to the large image (which may confuse screen readers and which sighted users may not notice), add a text-based link under the thumbnail.
The link follows the standard link construction requirements (Accessibility: Links).
Note: This standard does not apply to video thumbnails, as the play button on the thumbnail and the alt-text are sufficient cues for the user.
For example
View a larger image of the video player within the classroom.
When part of a numbered list, screenshots and images are indented from the surrounding text.
When the screenshot is indented, it stands out from the surrounding text and provides increased visual interest.
When the screenshot is aligned with the text, it does not stand out as much, and the visual interest is not as significant.
When including a screenshot in a list of steps, include a line break after the screenshot to set it off from the following text. The white space helps the reader keep their place in the list of steps and improves the scanability of the sequence. In this example, the white space after the screenshot gives the eye a place to rest, providing additional chunking to the list of steps.
Example:
Here are the steps for locating a journal in the Walden Library:
- Click the Start Your Research tab on the library homepage.
- Click the link to Journals in the left column.
- In the Find a Journal by Title box, type the journal name and click Go. For example: Qualitative Health Research
Logos
Do not use any company logos, except in a screenshot that includes the logo. For example, a screenshot with the Grammarly logo or a database logo, for example, is perfectly fine.
Fair use generally allows the use of logos for contracted third-party products; however, acceptable use language from a corporation usually suggests otherwise, with demands for obtrusive trademark language that dilutes content and clutters the page.
More importantly, as a for-profit institution, all use, even our open web instructional content, is considered "commercial use." Using such images would likely require sending them through Rights and Licensing.
Walden's legal team has received permission from Microsoft to include product logos and images in our public instructional material. For all other products, check with your department's web team, Content Management, or legal before use.
Facebook, Twitter, LinkedIn, YouTube, blog logos
The exceptions to the use of corporate logos are for Facebook, Twitter, LinkedIn, YouTube or Blogspot/Wordpress. These logos can be used provided they reflect the look of the department website.
Copyrighted Images
Do not use copyrighted images, even with an attribution, unless:
- the image is in the public domain OR
- is available under a Creative Commons license that allows for commercial use OR
- is purchased specifically for the intended use.
If an attribution is required, use APA style:
Author. (year). <description of image> [Photograph or Image]. Retrieved from ...
We can purchase images through Marketing's iStock Photo account for use in website content.
Third-party Trademarks
It is a violation of a company's trademark to use images of their software without permission, even in instructional material. A company is within its rights to serve takedown notices for public resources that include logos or images of their products without express permission.
Inquiries are currently underway with the Walden legal department regarding the use of third-party software in public material. Legal has determined that Walden currently does not have permission to use vendor software in public training material. This includes paid vendors such as Canvas, Turnitin, etc. Legal is pursuing permission to use images from vendor software in public materials. We do have permission to use Microsoft trademarks in instructional material.
For now, it is OK to use screenshots of third-party software in screenshots. However, if Legal cannot obtain permission to use the images, they must be removed or placed behind a password, or otherwise limited to the Walden community.