User blog:FishTank/Images that engage

Images, when they're available, should break up text on a page to make it more interesting. Thinking about how and why images are used is important, as all the imagery of your pages build reader impressions for your communities. Compelling images can also uniquely inspire and engage your readers to contribute useful information.

Sticking to the message
All pages have a purpose. Images should be applied carefully to support that purpose. Some pages are articles, but most that aren't should be for the purpose of linking or leading to articles.
 * 1) Identify and prioritize all the messages of the page. What is the intention of the page you're editing? Is the page primarily meant to navigate or describe your community? Or is the page meant as an informative article?
 * 2) Define how each image relates to the page topic. Images that are decorative should have a clear relevance to the article's topic. Images used for navigation or specific user tasks should not be ambiguous about where they intend to lead the reader.
 * 3) Assign preference to images based on how well they relate to the page. If a design element (including an image) is important or most relevant to the text around it, it should have more visual emphasis; conversely, elements more weakly related to the message or intent of the page should have less emphasis. One of the most harmful things a contributor can add is images that convey the wrong message about the page's purpose.
 * 4) Curate images that have the strongest relationship with the page's subject. Remember, the purpose of your wiki is not just to showcase images; it's to present information. Instead, the images you select should showcase the purpose of your page and only images that add meaning to the page should stay on it. The principle "more is better" doesn’t apply to images; people usually tend to ignore images after they become "clutter" or "noise". Putting too much focus on images in your designs may create a visual overkill that can seriously distract users from meaningful engagement with your content.
 * 5) Choose striking visuals that capture attention. Focus on selecting the most compelling images you can find and the ones that really capture users’ attention.

"A vivid, striking image will last in the minds of visitors. Text may be read and forgotten, but a strong image will be remembered."

- Steven Snell

Only Use Relevant Images
A contributor should know what a page is truly focused on and what it is meant to convey before adding images. Not all images improve the reader's experience. Some of them just take up space or, in the worst case, confuse the user with noise. Cluttering a page overloads a reader with too much information — every added image and line of text makes the screen more complicated, compounded on mobile devices with smaller views and bandwidth. Therefore, it's essential to tidy images that aren't necessary because reducing clutter improve comprehension for readers.

An image should logically fit when it's connected to everything else in the context of the page, even if a caption is required. Users respond to images faster than to text, so placement in the appropriate text provides a visual anchor. A primary image should be in the lede or the infobox, without any scrolling required, to give the best first impression of a page and set the tone for reading to come. It's important to choose primary images that can simply explain the concept of the page.

Use the highest quality images you can find, without distortion or blur. Even if the original sources are low resolution sprites, they should not be inflated past their original scale.

Regarding pages that are nothing but galleries of images, there are things that we can learn from e-commerce sites about how good images can be presented. The key lessons are that those pages can be effective if the images are sufficiently distinct, have good organization and clear captions for context, and have limits on how many images are presented at a single time (to avoid clutter). Such pages can even rank highly in search engines if good textual context is added to the captions.

Finally, for images used to navigate to other pages, make navigation intuitive and familiar to users. Navigation shouldn't require any explanation. Organize your navigation in a way that requires a minimum number of actions to reach the destination and doesn't draw focus away from the content. Image galleries used for navigation should include a clear text label about their destination. It's also important to recognize that galleries of images are not intended to be used as information cards, and that adding much more information beyond the image caption and a link may lead to the same cluttered information overload.

"Perfection is achieved when there is nothing left to take away."

- Antoine de Saint-Exupéry

Conclusion
Images are key to growing a readership for a community's articles. Using too few can limit how memorable and engaging articles can be. Using too many can overwhelm and confuse users. Finding the right balance can help a community grow.

Adapted from Image-Focused Design, Evaluating the Usability of Web Photos, How Imagery Drives User Experience, with significant research provided by the Nielsen Norman Group (world leaders in research-based user experience). Umbrella photo by Max Pixel. Pencils by Anastasiia/Pexels. Sumi-e by Jikihara Gyokusei.