I'd Rather Be Writing » images

Visually Appealing Documents Combine Text with Images

Tom Johnson — Mon, 10 Oct 2011 17:08:36 +0000

A few years ago, I was scouring magazines to get ideas for quick reference guide layouts. In particular, I found that WIRED magazine has some of the most creative and engaging layouts, often with text laid out in three or four columns, or along the side of a graphic, or in various quadrants about the page.

I was trying to figure out the right layouts that would give my quick reference guides the same eye-popping appeal when I realized something: Almost all magazine layouts have a dominant image that the content revolves around. Without the image, no matter what you do with the text, no matter how you lay it out, your design won’t jump out at the reader. To make an attractive quick reference guide, you need a strong image.

In many cases, that image might just be a screenshot with some callouts around it. That is probably the easiest approach for technical writers. But if you have some Illustrator or Photoshop skills, you can go beyond the simple screenshot and create a concept diagram or other illustration.

Neglecting images is one of the most common missteps in tech comm. We rely entirely too much on words. And while I enjoy writing, I’m also trying to become more visual savvy — because I know that words combined with images result in incredibly appealing documents. And by images I don’t just mean a series of screenshots. We all know what those kinds of manuals look like — the ones with a screenshot after each step.

Leveraging images to illustrate concepts provides a refreshing experience for the user. To see concepts illustrated in graphics, or in other words, to see an idea, engages us. That’s really the appeal of the visual, especially the infographic — not just to have some eye candy, or to see a screen, but to see an idea.

Too often we dismiss our visual endeavors because we aren’t comfortable in making graphics. But I’ve come to learn that executing a mediocre graphic isn’t tough. What’s tough is coming up with the right way to illustrate an idea. It’s hard to find a way to depict an abstract idea in a concrete, visual way.

Even if you work with a graphic designer, often the graphic designer will ask you what you want him or her to draw. You will still probably have to do the work of visual imagination, sketching out how an idea might be illustrated. But here’s the redeeming quality: coming up with these idea sketches is incredible fun. It’s challenging and creatively fulfilling at the same time. In a lot of cases, the illustration doesn’t need to be too technical to convey a message. The simpler and less ink, the better.

Here are a few one-page quick reference guides I’ve been working on lately. Notice that they combine text with images.

Each guide has a strong image, and then a few columns of text. That’s all. The images aren’t necessarily eye-popping (like with images in a magazine), and two images are just stylized screens. But in general, the combination of text with images creates more appealing documents.

No doubt writers shy away from images for a variety of reasons, especially when text requires translation. If the images have embedded text, they can’t be translated. One “easy” solution might be to make wordless images. However, removing all words from an image cripples the instructional power of the image. It draws the reader to look at the image, but because the image doesn’t have a strong message to communicate (not having any words), it leaves the reader with a blank message. Or the image merely becomes decorative.

One way to get around this is to create your images in Illustrator (or some other graphics program), and then place the images in your InDesign file. Then create text boxes in InDesign and overlay the text boxes on the image. Then group the text boxes and the image. If you have have some advanced translation experts, who know how to export from InDesign to XML and then import again when it’s translated, it’s a technique that will work. If your output is online, you could implement the same strategy by making the image a background image, and positioning the text with CSS.

Incorporating images into technical documentation poses challenges, for sure. Not only is it hard to visually depict an abstract idea, you have to also be familiar with graphics tools to execute the idea, and then you may need to handle translation as well. Still, despite the hassle, the end product will be much more enticing to readers if you include images.

Blog Sponsors

The Importance of Visual Communication, or How to Build a Dirt Sifter

Tom Johnson — Tue, 07 Sep 2010 05:28:34 +0000

Recently due to flooding in my window wells, I had to dig the wells deeper. I piled up the dirt and rocks around the outside, and then realized I needed to sift the dirt from the rocks because I wanted to put the rocks back in, but move the dirt elsewhere in my yard to re-slope it. To sift the dirt from the rocks, I needed a dirt sifter, also called a gravel sifter. I thought I could simply buy one at Home Depot, but they do not sell them. You have to make one yourself.

I searched online to find instructions to build a dirt sifter. There are plenty of sites, with no one single method for building a dirt sifter. For the most part, it involves a rectangular wood box with a wire mesh bottom. That sounds simple enough, but as I walked through Home Depot looking for these parts, I had many questions. What size should the box be? How spacious should the mesh be? Would the dirt sifter fit snugly on my wheelbarrow or slide off? Would I shake it in my hands? Would I roll it somehow? If I rolled it, did the sifter need wheels? How strong did I need to attach the wire mesh to the wood? And so on.

I did some research online to figure out how to build a dirt sifter. One guy had a sweet looking roller device on his dirt sifter, but no real instructions on how to build what he’s showing. Another site had one incredible diagram but not much else. Others failed to provide any visuals whatsoever.

It’s not enough to build a box with a mesh bottom. You have to understand exactly how you’ll be using it to sift the dirt. Shaking it manually? Using a trowel in a wheelbarrow? Somehow rolling it? If you’re shaking it in hand, you better have a plan for catching the dirt, and the whole box should be small and light. But if you’re catching it in a wheelbarrow, it needs to fit over the wheelbarrow, so it needs to be larger.

It wasn’t until I found the explanation on this site that I began to understand exactly how to build the dirt sifter. The explanation is full of photos for each step of the way. The author doesn’t assume much at all, and he even provides tips such as the following:

Nails or screws driven near the ends of a board usually cause the wood to split. Pre-drilling the screw holes will help prevent splitting.

I wasn’t born with innate handyman talent, so I needed all the info I could get. After buying the necessary resources and tools, I gathered them up in my backyard.

Gathering my tools.

I started screwing the box together. It seemed pretty easy at first. I drilled holes just like the instructions recommended.

It seemed pretty easy at first.

But then my wireless drill’s battery wore down, and I grew impatient, so I started to pound a nail in there instead. Ooops, the wood split.

The wood split when I used a nail.

I had to discard that piece of wood and use another scrap that I had a lying around the garage.

I attached the wire mesh to the wood using an metal strip I found at Home Depot. It was all pretty simple, but I was still wondering just how I would shake a box full of rocks and dirt.

Fortunately, the dirt sifter fit easily on the top of my wheelbarrow, and I could use my hand (with glove on) to sift the dirt. Here’s a short video showing how the dirt sifter works.

After watching this three minute video, doesn’t it answer all the questions of sifter mechanics that I raised earlier? Would a textual explanation be adequate or nearly as appealing to watch as the video? In my video above, you see exactly how the dirt sifter works — not so much the construction, but the mechanics of use.

I find myself moving more and more away from text when it comes to tech comm. While text is a good foundation for other materials, text simply fails to communicate and engage like visuals do. With a visual (whether an image or a video), you see so many details that you can’t convey briefly with text.

Case in point, I often help users on the phone with a specific application at work. I can listen to them describe what they’re doing, but I almost always prefer to share screens and watch them go through the process. When I do that, I can quickly spot what they’re doing wrong. Sometimes I see that the content they’re working with is copied over from Microsoft Word, or I see that they’re using an unsupported browser, or I see that they really are doing everything right and the system just has a bug in it. Visual communication is faster and more effective.

The visual communication doesn’t need to be professional grade. I’ve been making quick WordPress screencasts that take me about 5 minutes from start to finish (including the upload to Youtube), and no one has complained about the quality. I also often make customized screencast tutorials for clients. They love them. It clarifies things in so many ways, and it’s easier than writing instructions out by hand.

Text, by contrast, is tedious, cumbersome, confusing, and fails to engage the user. Text still has its place, but it’s more of a supporting actor than a lead role.

Blog Sponsors

AIRTIGHT – Viewers

Tom Johnson — Fri, 13 Feb 2009 19:50:21 +0000

AIRTIGHT – Viewers. These effects simply blow my mind. Am trying to integrate a cool slideshow like effect into a blog. Maybe one of these will work.

Blog Sponsors

Free Clipart and images | Quentin Brown

Tom Johnson — Tue, 30 Dec 2008 16:33:54 +0000

Free Clipart and images | Quentin Brown

Blog Sponsors

Image Formats

Tom Johnson — Thu, 14 Aug 2008 15:19:02 +0000

Image Formats.

WordPress Tip: WordPress Image Galleries — Give Your Photo Galleries a Lightbox/Slideshowesque Display

Tom Johnson — Thu, 10 Jul 2008 06:36:48 +0000

Jan 2009 Update: Please see the note at the bottom of this page. Because I had trouble using captions with the Photojar plugin, I deactivated the plugin.

A WordPress image gallery allows you to create a sharp-looking presentation for your photos or images. With just a couple of plugins and tweaks and some basic understanding of the WordPress gallery tag, you can make a Lightbox/Slideshowesque display of your gallery images without any custom coding.

Here’s an example of a WordPress gallery that goes a step beyond the default. Click each of the images, and then click the arrow buttons on the image to move to the next one. Instructions for creating such a gallery are below.

To create a WordPress image gallery like the one above:

Download and install the PhotoJAR plugin and the Lightbox plugin. Unzip and upload to your plugins folder, and then activate as usual.
After activating the plugins, click the Settings tab (far right), and then click PhotoJAR. In the Link Images To drop-down, select Lightbox/Slimbox. In the Gallery Image Size filter, select Thumbnail. Then click Update Options at the bottom.
Click the Lightbox2 tab, choose the lightbox theme color you want, and then click Save Changes.
Create a new post and upload your collection of images by clicking the Add an Image button. When you upload an image, it is associated with the post. With each image, add text in the Title and Caption fields. The caption will appear below the gallery thumbnail (so make it short), whereas the Title will appear below the image when viewed alone (so make it longer).
After uploading the images, close the dialog box. Do NOT click the Insert into Post button. Your images are already associated with the post. When you add a gallery tag, they will automatically be pulled into the post without any html code at all.
In the HTML view, add the following code to your post: [gallery size=”125x125xcrop”]
. 125 x 125 is the thumbnail size, which you can change to best fit your blog’s width. By default, three images appear in a row.
Modify the styles for the captions and image sequence numbers by modifying your Lightbox theme’s style sheet at /wp-content/plugins/lightbox-2/Themes/Black/. In the following style declarations, caption controls the Title; numberDisplay controls the “Image 1 of 7…” text. Change the values as desired.

#stimuli_imageData #stimuli_caption{ font-weight: bold; background-color: black; font-size: 12px; color: #c0c0c0;}

#stimuli_imageData #stimuli_numberDisplay{ background-color: #000000; display: block; clear: left; padding-bottom: .5em;}

Publish your post.

Rearranging the Gallery Image Order

With WordPress 2.6, you can arrange the gallery image order by dragging the images on the Gallery tab into the order you want.

Additional Reading

The PhotoJAR plugin has a lot more power and control, with different tags and parameters. You can read more about it here.
For more details about the Lightbox plugin, see the Lightbox pugin’s page here.
To better understand the WordPress gallery and image tags (new with WordPress 2.5), see the Codex page on gallery shortcodes.
If you need a more robust image gallery plugin, see the NextGen Gallery plugin.

Note About Image IDs

If you don’t want to insert an entire gallery, you can insert individual images (which are associated with any post), but you have to know the image IDs. To view the image IDs, go to the Manage tab and click the Media Library subtab. Mouse over the image title and look at the Post ID that appears in your browser’s footer. You can then insert the single image into your post by using the following code: [image=23]. Also, replace 23 with your real image ID.

You can also click the Insert into Post button that appears below the image when viewing the Gallery tab.

Note About the Description Field

You’ll notice I didn’t mention the Description field. The Description field doesn’t apply to images with the Lightbox effect. If you weren’t using the Lightbox effect for the gallery, each individual image — when clicked — would appear on its own page, with the Description text below it. The Lightbox plugin makes the image appear in a layer on the current page.

Photo Credit Goes to Jane

Special thanks to Jane for the photos (yes, they’re our kids). The post where she wrote about this event is here: Sugar and Sugar, and Everything Nice.

Nov 5, 2008 Update

I had trouble getting WordPress’s new caption feature to work with Photojar, so I actually went back and undid all the posts with images since implementing Photojar. Photojar writes the image tag differently than WordPress 2.6 when you insert a caption. I love having captions, so I deactivated Photojar. Sorry. However, depending on your needs, this plugin may be right for you.