Creating an Infographic

Infographics are used to convey complex information in an interesting way. They are visually based, with few words. The graphic itself is often part of the presentation. We have been encouraged to start using infographics at work to present information in formats appropriate for multiple devices, and have received some excellent training and Microsoft PowerPoint templates to start. As a word lover, this is a new challenge, but one I embrace. In our fast-paced world, the faster we can convey information the better.

Infographic_simple

I decided to give it a try, by making a very simple infographic to convey the basic steps for creating a clickable image in WordPress (see Fun with Image Maps). The graphic is basic, and the words summarize the steps in a sort of metadata approach (and could be updated to include links to the detailed information). Here are the steps as they might appear in conventional documentation:

  1. Pick a graphic, and learn about image maps: https://m.youtube.com/watch?v=8p6ABTA5gRY (0:01 – 3:45). 
  2. Create your image map using the tool: http://www.mobilefish.com/services/image_map/image_map.php.  
  3. Add graphic and generated code to WordPress: https://m.youtube.com/watch?v=8p6ABTA5gRY (3:45 – 6:50).
  4. Preview in WordPress, and adjust code as needed: https://m.youtube.com/watch?v=8p6ABTA5gRY (6:50 – 7:14).

I plan to delve more into infographics, and challenge my visual and artistic side. Stay tuned!

 

Fun with Image Maps

Last time I was playing around with collages (see Crazy for Collages), using collage apps and images on my devices and on the web. Now I’m taking it step further, by making the collage image clickable. This enables the viewer to access a website, blog post, or YouTube video with the click of the mouse, or tap of the finger. To do so, create an image map defining the HTML coordinates of the clickable regions, or hotspots, and associate the image map with the hosted collage image.

The excellent YouTube tutorial, “How to Create Image Maps for WordPress” (WayLay Design) guided me through the process. The tutorial recommends the free service on mobilefish.com to create the image map , and generate the HTML coordinates. The tool is easy to use, but does have an image size restriction. I had to resize mine (I hadn’t realized how huge the original collage image was)! The tutorial also guided me through the process of uploading the image to WordPress, and adding the generated HTML coordinates to make the image clickable. Here is my updated collage, this time with four clickable hotspots and hover text.

click map

Lucky for Android Google Maps for Android Twitter for Android Blogger for Android

I love learning new things, and then imagining ways to use them to convey technical information. Image maps are a great way to help users drill down to important information. For example, you could provide a conceptual graphic with clickable hotspots that quickly guide the user to detailed information, step-by-step procedures, and related details, without wading through a lot of text.

Crazy for Collages

Over the past couple weeks, I have been trying out collage apps for my iPad and Android smart phone. Collage apps enable you to arrange photos from your device, the web, or social media in templates; add backgrounds, textures, borders, text, stickers and special effects; and save as a single digital image. The combinations are endless, and trying them out can consume hours of goofy fun. Upload the image to social media or blogs, to share photos or tell a story in a compact format.

So far my current favorites are Photo Grid for my iPad (by KS Mobile, Inc.), and Photo Collage Maker for my Android. They are free and easy to install from the downloads sites. Many other apps are available, and some of them offer plugins with even more functionality. I found some to be extremely intuitive; others didn’t click with me. Definitely find the app that best suits you and your needs. Many apps can also be downloaded to your laptop or desktop.

click map

Here is one of my experiments. I created a collage using several photos from my research for the article “Do Mobile Apps Need Documentation?“. I chose a thick black line to divide the images, but many other options are available. Collages could be a fun way to spice up technical communications. How about a visual table of contents, a conceptual infographic, or a pictorial procedure? Definitely something to try.