Just like all your graphs, maps, and diagrams, your icons deserve some TLC, too.

Icons can get cartoonish or steal the show if they’re not formatted well.

What’s Inside

• 0:00 Intro
• 0:31 This Case Study
• 1:47 Smaller Icons
• 2:14 Colored or Gray Icons
• 2:37 Review of the 4 Options
• 3:10 How to Insert New Icons
• 3:33 The Icon Menu in Word
• 4:21 Editing the Default Icons
• 5:26 Special Guest

Transcript

Ann K. Emery: [00:00:00] Your icons might be too big or too dark. In this video, I’m going to show you a few variations side by side so you can sit back and compare. And at the end, stick around if you’d like a how to tutorial, because I’m going to show you how to get started with icons that are built right inside of good old Excel and PowerPoint and Word.

I’m Ann Emery. You’re watching Dataviz On The Go, the series where I make quick tutorials for you as I’m racing around between my conferences and consulting and podcasts and blog posts and workshops. And speaking of workshops, I was just giving a half day virtual workshop. And one of the case studies that we looked at from that group looked something like this.

This obviously isn’t their real report, but the report was structured more or less like this. They had the report title right here at the top. They had a couple introductory paragraphs. And then they had looked through their whole full report and pulled out five key highlights. I love using icons like this for highlights.

I [00:01:00] just wanted to fine tune these a little bit and show them a few variations, which I’m going to show to you in a moment. Okay, these obviously aren’t their real icons, but the icons were this size. One by one inch, and this color, filled in black icons. And then below there, they had all the rest of the stuff.

And on the following pages, pages two, three, four, and so on, they had lots of graphs and maps and diagrams and all sorts of other visuals. I worried that these icons were stealing the show. I wanted them to be the main character, but not like the in your face main character. So, hence the variations. Let me zoom out and show you a couple ideas side by side, okay?

The first thing that we played around with was what if we made the icons just a little bit smaller? We go from one by one inch to half inch, so they’re still the main [00:02:00] character, just not so in your face. Okay, look at just the difference in ink, right? Now you can see all the words, you can see the little boxes underneath them a little bit better.

Let me show you a couple more options. What if instead of default black icons, we try either a brand color or gray. You would use your real brand color. I’m using the Depict Data Studio purple right here. So this would look a little bit different, of course, or a light gray.

One by one inch, solid colored black, smaller black, or my personal favorites, brand color or gray. If you ever try icons and your boss is like, I don’t like them. Get them out of there. Remove them. It’s probably because they’re too big and too dark. Nobody likes icons that are [00:03:00] too big and too dark. They almost look cartoonishly big.

So try making them smaller, try making them a brand color, or try making them lighter. In case you’re new to icons, let me give you a quick, quick 101 level tutorial. They’re here. They’re under insert, and then there’s the icons button. You have to be on the latest version of Word to see these though. So if you don’t see the icons button, you’re going to have to go update your Word to get these built in icons.

Insert icons. You click on that. You get the menu. You go through. You enjoy all the nice icons, right? There are filled versions. There are outlined versions. You’re going to pick one or the other. I picked filled. In this case, you want consistency. I wouldn’t do filled outline, filled outline. That would be weird.

There’s also a search bar in case you need it. In real life, I almost never use any of these icons. I usually use these symbols in a lot of my graphs to talk about like, [00:04:00] you know, we met the target, we met the objective, or this thing increased, this thing decreased, or I’ll do numbered lists with these fancy icons.

The numbers with the circle around them. Okay. Insert icons, pick your icon. Let’s pick the barn. Why not? Let’s go with the barn for today. I’m feeling in a barn mood. By default, look, it gives you the size that it gives you. It gives you one by one inch icons and it gives you black. You can edit this. When you first insert the icon, it pulls up the editing features.

You don’t have to do anything special, but in case you’re clicked off, you know, you’re editing this later. All you have to do is. Click on your icon. It’s going to pull up this graphics format tab for you. And in there, you can adjust the fill. You could make it a brand color. These are my theme colors already added into this file, or you could make it a nice gray.

You can also [00:05:00] adjust the size instead of one inch by one inch, maybe do a half inch. That’s typically the size that I pick for Word. Typically for PowerPoint, because PowerPoint is going to be a bigger screen, one inch is typically okay on PowerPoint. I just want you to know you have control over this. You have control over the color and the size.

So you can make intentional design choices and not just stick with whatever Excel gives you or Word gives you by default. Don’t forget to like, subscribe, and share! Hi baby, what do you see?

(Well, if you like to split hairs, there are more options than that. But what if you’re busy and don’t have time to lose? Here are the main copying/pasting options worth paying attention to.)

Option 1: Excel Object

a.k.a. Ann K. Emery’s preferred approach

Instructions

1. In Excel, create your graph.
2. In Excel, format your graph. (Declutter; apply brand colors and dark-light contrast; delete the built-in title; re-size the font and graph; etc.)
3. In Excel, make sure your Theme Colors and Theme Fonts are selected.
4. In Word or PowerPoint, make sure your Theme Colors and Theme Fonts are selected.
5. In Excel, copy your chart (CTRL + C, or right-click and select copy).
6. In Word or PowerPoint, click CTRL + V to paste.
7. In Word or PowerPoint, add your graph title.

Branding

Colors and fonts will match the destination.

Editing

You can edit the chart in Word/PowerPoint later if needed.

(You can change the colors, size, labels, etc.)

Resolution

Higher.

File Size

Higher.

Linking

You can link your Word/PowerPoint graph back to the Excel file. (Beware! Errors likely!)

Option 2: Image File

Not a fan.

Instructions

1. In Excel, create your graph.
2. In Excel, format your graph. (Declutter; apply brand colors and dark-light contrast; delete the built-in title; re-size the font and graph; etc.)
3. In Excel, make sure your Theme Colors and Theme Fonts are selected.
4. In Word or PowerPoint, make sure your Theme Colors and Theme Fonts are selected.
5. In Excel, copy your chart (CTRL + C, or rightclick and select copy).
6. In Word or PowerPoint, right-click, select paste, and choose the image option.
7. In Word or PowerPoint, add your graph title.

Branding

Colors and fonts will match the source.

Editing

You can’t edit the chart in Word/PowerPoint later.

(You’d need to edit the chart in Excel, and then re-paste the graph into Word/PowerPoint.)

Resolution

Lower.

File Size

Lower.

Linking

You can’t link your Word/PowerPoint graph back to the Excel file.

(In other words, if you change the graph in Excel, then the image file in Word or PowerPoint won’t look any different.)

Purchase the Cheat Sheet

It’s here: https://depictdatastudio.gumroad.com/l/CopyPasteGraphsFromExcelIntoWordOrPowerPoint

The first 100 people get a complimentary download with code NOMOREGRAINYSCREENSHOTS.

But it doesn’t have to be!!!

Let’s stop hiding important qualitative concepts inside Text Walls that no one reads.

Step 0: Take Pride in Your Report’s Formatting

We’ll use landscape so that it’s easier to see on a landscape computer screen.

We’ll add the organization’s Theme Colors and Theme Fonts so that the document looks professional and enhances branding.

We’ll add a Text Hierarchy. Instead of a single Heading 1, we need to add several Heading 2s. We also need to enlarge all the font sizes. No more puny size 12 or 14 for headings!!

In this example:

• the Heading 1 is size 24 bold in a brand color,
• the Heading 2s are size 16 bold in a brand color, and
• the body font is size 11 in dark gray. (Not black, which causes eye strain and makes people think of funerals, at least according to my graphic design friends.)

Step 1: Choose Your Diagram

I like to scroll through SmartArt for ideas.

You can also browse Diagrammer, which is SmartArt on steroids.

Here are the most common diagrams I’ve used to visualize qualitative concepts in research and evaluation projects:

Processes

Processes are for linear, step-by-step concepts. There’s a defined start and end.

Examples:

• A lot of my own training programs, where I teach how-to instructions for dataviz.
• Logic models.
• Research methods (e.g., we recruited participants, and then they did this, and then they did this).

Cycles

Cycles are for processes that loop around and around until infinity.

Example:

• The program evaluation lifecycle, in which you plan for the evaluation, collect the data, analyze the results, use the data to inform decisions… and then start the process all over again.

Concentric Circles

Concentric circles are for spreading concepts and for inner, middle, and outer layers.

Example:

• An agency made a plan to improve diversity, equity, and inclusion. They identified three layers of changes needed: at the individual level, at the departmental level, and at the agency level.

Components

Components are for pieces of the whole—when you want to show that all these random things aren’t so random; they’re connected. They’re just not connected as a linear process or as a cycle.

Examples:

• In my master’s thesis, I researched how nonprofit organizations were using data to have a bigger impact on the community. In the literature review, I identified ~10 specific examples of data use, which were all related to the broader theme of data use.
• The U.S. Surgeon General’s Framework for Workplace Mental Health & Wellness (scroll down a bit here).

Pyramids

Pyramids, or ladders, are for concepts that build upon one another. The base layer is the foundation, the middle layer builds upon it, and you’re aiming for the pinnacle at the very top.

Example:

• In my Report Redesign classes, I organized the techniques into a pyramid. Participants learn the foundational skills, then the slightly narrower skills, then the nitty-gritty details that pull everything together.

Matrices

Matrices are fancy tables or plots.

Examples:

• This blog post about four types of dashboards.
• Lots of diagrams from McKinsey.

Venn Diagrams

Venn Diagrams are for interwoven, overlapping components.

Example:

• A project involving several groups of people, who all come together to advocate for their issue.

Honeycomb

Honeycombs, meh. I don’t love these. They’re overused, along with the gears. If you’re not sure what else to use, this is still better than a Text Wall.

Step 2: Introduce Your Diagram

Show the fully-colored diagram.

Don’t cram too much text on the diagram itself. In this example, I’m pretending we’re describing three steps, which repeat over and over.

Add a paragraph or two to explain the diagram at a high level.

Make sure there’s plenty of color contrast by using bold white or bold black text against your brand colors. Use this color contrast checker to figure out which font color to use.

Step 3: Repeat Your Diagram

Here’s the important part: Repeat your diagram as you explain each segment in more detail.

Copy and paste the diagram.

Then, gray everything out, and just highlight the segment you’re explaining in a dark brand color.

For bonus points, you can color-code the Heading 2s to match the diagram.

Make sure your colors are consistent with what you introduced earlier!!! You wouldn’t want Step 1 to be purple, and then blue, and then green.

I usually delete the words from the diagram that I’m not currently explaining. For example, when explaining Step 1, I delete the words Step 2 and Step 3 from the diagram. I don’t want any issues with color contrast; the white font wouldn’t be legible against the light gray diagram, so I simply delete it.

Make sure there’s plenty of white space between sections. I use at least 0.5 inches of white space (e.g., between the diagram and its paragraph, between the paragraphs).

For bonus points, break up the paragraphs into points and bold a few key words. Long paragraphs are dated. Readers expect short, skimmable paragraphs these days.

Check out the paragraphs in this blog post, for example. They’re 1-4 sentences long. There are lots of headings. There’s bolding to increase skimmability.

This blog post is also written at a 7th grade reading level.

Peek at the document with the gridlines on. Make sure the diagrams are aligned with each other.

The Final Product: Repeating Diagrams

I don’t care that it takes up two pages instead of one.

Two great pages will beat one lousy page any day of the week.

Yes, your boss might give you a made-up page limit. “Make sure everything fits on a page!” Those limits were created because bosses got tired of Text Walls. And, because we used to print a lot.

Nowadays, people don’t print as much. I think the pandemic was a major turning point. With everyone working remotely, nobody had access to the office printer anymore. Any who wants to pay to print at home??

I’ve never, ever heard complaints about two accessible pages vs. one inaccessible page. The word count is the same. (Well, I added some headings.) But the information is richer because we’ve added a diagram and then explained it piecemeal.

Adapt as Needed

Use can use any diagram you need—a cycle, linear process, pyramid, or concentric circles.

You can do this in Word.

You can do this in PowerPoint.

You can do this in Canva.

You can do this in Publisher.

I’m software-agnostic. I don’t care which software program you use. When formatted well, you’ll get the same high-quality end result regardless of which program you’re using.

In this example:

• The diagram was wide, so when I introduced it, it needed the full width of the page.
• When I repeated the diagram, none of the words (“Phase 1”) fit, so I deleted them.

Adapt as needed!!!

Download My Word Document

Bonus!

Want to see how I arranged everything inside of Word?

You can download the document here: https://depictdatastudio.gumroad.com/l/UseRepeatingDiagrams

An important part of my job is identifying and creating the appropriate communication products for each program, such as standard operating procedures, desk guides, fact sheets, and dashboards.

When I first joined the team, we had no style guide to dictate what fonts, colors, or design to use for our signature products. With multiple people regularly contributing to the same publications, how can we ensure consistency with design and writing? I remember one situation when I was contributing to three publications with three completely different styles. The fonts and colors were all over the place, and each person was manually editing headings and subheadings. Don’t even get me started on the Table of Contents!

I do not consider myself a tech-savvy person at all, but I knew there had to be a better way to create consistently designed reports and products. I made it my mission to learn branding and design tips and tricks to help my team enhance our communication materials.

Not knowing where to begin, I searched the internet and found the Depict Data Studio website. I wanted to sign up for several courses right away, and I tried unsuccessfully to get approval from my employer to cover professional development expenses for report and design courses. So for a long time, I sufficed with Ann’s free resources and blog posts. But I wanted to learn even more, and I registered from the Report Redesign course along with Dashboard Design.

Revamping Report Templates with Skills Learned in Depict Courses

Enrolling in Depict Data Studio courses is one of the best professional development decisions I have made.

I immediately was able to apply the tips and tricks Ann shared to improve my reporting quality and processes.

My greatest takeaway from Ann’s Report Redesign and Dashboard Design courses is that small and simple steps can make a tremendous impact.

One of the most useful and time-saving tricks I was how to set up theme colors and theme fonts. I set up customized colors and fonts for each of the publication types that I regularly produce, so that I can quickly select the appropriate style for any new communication product.

I went a step further and created a detailed template for each communication product. I personally like to start each new publications from a template that has more of the document architecture built into it. My templates usually include the following:

• Title, Subtitle, and Date
• Text Hierarchy
• Table Format
• Margins
• Footer with Page Numbers
• Icons and Symbols (when relevant)

Of course, each template also applies the relevant theme color and font! Below is an example of a standard operating procedure template.

The Outcome: Save Time and Trouble with a Few Straightforward Steps

With just a few straightforward changes, I helped my team save hours of reporting time and formatting trouble.

As soon as I learned something new from Ann’s Report Redesign and Dashboard Design courses, I created templates and job aids to help myself master the process and have a reference tool that applied directly to my job.

I also shared tips and tricks with my colleagues so everyone could benefit.

As a result of implementing the knowledge I learned in Ann’s courses, my team’s report development time reduced by 50%!

Advance Your Professional Development, and Have Fun Too!

I incorporate so much of what I’ve learned from Ann’s courses into my day-to-day work.

Creating report and dashboard templates has made it so much easier for my team to start right away on new projects.

Our branding is consistent with the organization, and my team also created a unique identity for our signature reports.

Senior management loves that our products stand out from the crowd and have a consistent look and feel.

The concepts Ann teaches might seem intimidating at first, but each step is small and simple. A few tweaks and the right attitude can make a very big difference!

Connect with Stephanie Gentle

On LinkedIn: https://www.linkedin.com/in/stephaniegentle/

I also had the good fortune of attending some of Ann’s in-person presentations about data visualization at a conference for Continuous Quality Improvement hosted by the California Department of Social Services, which had an unquantifiable impact on the personal project I will be sharing with you today. 

Although I signed up for learning from Ann to benefit my professional life, I was also able to apply the learnings in my personal sphere as you will see below! 

Although this example was in the personal realm, I think there are potentially a lot of other applications for visualizing data in this way.

The Challenge

At the beginning of the coronavirus pandemic, my mom and aunt had to fire my grandma’s caregiver due to a personality mismatch and not being on the same page about grandma’s needs.  

This was the second time it happened in a few months and it seemed like part of the challenge was in the matching process and educating the caregivers about grandma’s unique needs, and her personality.

Getting Everyone on the Same Page

I wanted to do something to help, so I created a 11×17 one sheet introduction for the new caregiver with input from my grandma, auntie and mom. 

My grandma’s previous caregivers were not native English speakers, so I wanted to make something that was approachable, and also captured my grandma’s personality. 

I remembered in one of Ann’s presentations that she told us about the icons at The Noun Project website, so I used icons accompanied by brief descriptions. 

It made sense to me to organize the info into two columns, and I made the text as clear and simple as possible.

The Result

Here’s the one-pager that I made for my grandma’s caregivers.

Outcome

Unfortunately, grandma is no longer with us. 

But I’m happy to report that after providing the caregiving agency with the 11×17 sheet, she was matched with a caregiver that she LOVED, and who told us she loved our grandma too. 

The caregiver was with her for a year and a half, until she passed. 

I can’t tell you how comforting it was to know that she was in the hands of someone who was not only competent, but genuinely cared for her. 

The caregiving agency kept a copy of the sheet in grandma’s file and shared it with substitute caregivers when the primary caregiver had time off.  This helped the substitute caregivers provide more consistent care for grandma.

Potential Applications

Since its creation, I’ve shared this sheet with many of my friends who have made similar sheets for their loved ones. 

Some of my friends have all joked that they need something like this for their dating life.  Maybe it has other applications too?  What do you think? 

Sharing with Gratitude

Here is an editable Word copy that you can use for your own purposes! 

Download the One-Pager

Connect with Mieko Yeh

linkedin.com/in/miekoyeh

My graph looks great on screen, but not when printed.

The grays blend together and I can’t tell which color is which.

Why We Should Care About Grayscale Printing

It’s easy to brush off this problem—“Just print everything in color!”

Or, “Why are you printing at all? Just tell people that your document can only be read on-screen!”

Color Printing is Expensive

First, color printing is expensive–$13 to $75 per ounce, the cost of fine champagne or perfume.

If you work for a billionaire, go for it.

The rest of us can think of better ways to spend our money.

Printing is Great! Someone Thought Your Data Visualization Was Worthy of Being Shared

Second, you should be patting yourself on the back every time your work gets printed.

Printing is a great sign!

It means someone found value in your graph and they can’t wait to print off a few copies to share with everyone else at your next meeting.

We need to anticipate that our graphs might be printed in grayscale and applaud ourselves when that happens.

How to Check Whether Your Graphs are Grayscale-Friendly

Here’s how to check whether your graphs are grayscale-friendly (without wasting ink by printing drafts on paper) and how to fix them when they’re not.

Step 1. Build Your Graph in the Software Program of Your Choosing

Make your graph.

Here’s a regular ol’ stacked column chart that uses one of my client’s color schemes (this exact purple and green) and their fonts (Corbel).

I made this graph in Excel and pasted it into PowerPoint.

You can apply the same process in Word, too—make your graph in Excel and paste it into Word. You just need a software program that lets you adjust your picture’s colors (from color to grayscale).

I don’t care which software program you use to design your graph. Nobody cares what type of quill Thomas Jefferson used.

Step 2. Save Your (Draft) Graph as an Image File

Save your graph as an image file.

I often paste living, breathing graphs from Excel into PowerPoint as Microsoft Objects.

But for this grayscale-testing technique, we need to convert our graphs into image files, like a PNG or JPEG file.

In my example, I went to Save As in PowerPoint.

Then, under Save as Type, I selected a JPEG file.

It doesn’t matter which type of image file you select from this list; the graph or slide just needs to be an image.

Step 3. Insert Your Image File into a Blank Slide in PowerPoint or a Blank Page in Word

Add a new, blank slide:

Insert that image file you created a second ago.

I went to Insert, clicked on the Pictures icon, and opened the folder where I had saved my graph as an image file.

Now, the first slide is the original graph and the second slide is the image of that slide.

Step 4. Re-Color the Image in Grayscale

We’re going to re-format the image file a bit. Let’s see how the image would look in grayscale.

Here’s what you need to do:

1. Click on the image file to activate it.
2. Then, go to the Format tab.
3. Select the Color icon.
4. Choose the Grayscale option. There are a few grayish options. Just hover your cursor over the options until you see the one named Grayscale. 

This menu is available in both PowerPoint and Word. It’s probably in non-Microsoft programs, too, but the vast majority of my clients use PowerPoint and Word, so these are the programs I need to use most often for them.

Step 5. Preview Your Graph in Grayscale: Is it Legible?

Congrats, you’ve got a sneak peek at what your graph would look like when photocopied!

Unfortunately, it’s not entirely grayscale-friendly.

I can tell that there’s a dark and a lighter segment, but I can’t tell which one is Females and which one is Males.

The legend is too hard to decipher in grayscale.

Step 6. Edit Your Graph and Increase Accessibility

There are two strategies for making your graphs more grayscale-friendly.

Direct Labels Make Graphs More Grayscale-Friendly

Remove the legend and place your labels as close to the data as possible, which is called direct labeling.

In this scenario, the Total, Females, and Males labels go directly on top of the columns.

Notice how I only labeled the first column for Q1. That was intentional. I teach my viewers how to interpret the graph on the left side and then they’re free to read it by themselves. Labeling every single column would add unnecessary clutter.

White Outlines Around Shapes Make Graphs More Grayscale-Friendly

I outlined the purple and green rectangles in white.

This will make it easier to distinguish between the shades of gray.

In pies, you would outline each slice in white. In waffles, you would outline each square in white. And so on.

Step 7. Test Your New Graph Again

Save your edited graph as an image file. Click on the image file to activate it. Then, go to the Format tab, select the Color icon, and choose the Grayscale option.

Here’s how my new and improved chart would fare in grayscale.

Can you see how the direct labels and white outlines make a difference?

Your Turn

Do you have additional secrets for assessing whether your graphs are grayscale-friendly?

I taught myself these tricks through a lot of trial and error (and wasted money on printing out drafts on paper).

Comment below with your own tips.

Bonus: Download the Materials

Want to explore these graphs in more detail? Download the slides used in this blog post.

Download the Slides