Venn Diagrams, SmartArt, and A Call for Graphic Excellence

Two unrelated items converged for me today:

• Recent failure of the Romney campaign to create a valid Venn diagram. (Ezra Klein reviewed on the Rachel Maddow show July 3rd, referencing fantastic post on Upworthy.) 
• Proliferation of meaningless “SmartArt” diagrams and bad charts in files that come through my inbox. (SmartArt: neither smart nor art.) 

Both represent a bad and growing habit in business, politics, and culture that involves “spicing up your text” without the requisite critical thinking about why and how to do it. It’s part of a broader trend that I call the template culture that confuses actual design skill with the ability to use hackneyed software features and bright colors to create something ”that really pops.“

Unfortunately for all of us, cardboard cutout designers get it wrong. Frequently.

It’s bad for their clients and customers, it’s bad for the design profession, and it’s bad for civil society at large when flash and bullshit take the place of good design – the kind of design that helps clarify and reveal ideas instead of clouding and concealing them. At best, this kind of graphic nonsense is an amusing and colorful waste of space, but at worst it can actually do harm. It can misrepresent ideas and facts, confuse audiences, and generally muddy any topic.

Edward Tufte, the patron saint of information graphics, used the term Graphical Integrity to describe a sort of Hippocratic oath for designing charts and diagrams. It’s pretty simple: don’t lie. Of course, to not lie, one first has to think about and understand some things before jumping into Powerpoint world, such as:

• What does the data mean (if you don’t have data, this could be an issue)? 
• Who is the audience? 
• What is the goal of the overall piece, the goal of the graphic? 
• What s the most effective way to present that information graphically to help clarify an idea? 

Sadly, none of these questions can be answered with the SmartArt selector (or similar tools in Keynote, Prezi, etc.). It’s not Microsoft’s fault, they do a great job – and have gotten much better – at trying to embed some of this thinking into their products. But templates, no matter how well-designed, aren’t a substitute for a critical-thinking person, like an experienced graphic designer.

Marketing person, graphic artist, business person, journalist, educator – I’m talking to you. Here’s a challenge:

• If you don’t know who Edward Tufte is, you should. Look it up, read one of his books, take his class. Dan Roam is a good substitute (less theory, more humor). 
• If you’ve used SmartArt in any Microsoft product without first sketching something by hand, stop. Draw your next idea by hand first (a whiteboard is fine). 
• If you have ever used the phrase “punchy” or “really pop“ when describing the need for a graphic, please avoid these and other similar phrases for the next six months. Instead, try this one: “what is the purpose of this chart or diagram?” 
• If you don’t know how to edit every part of a Microsoft chart, including what to take out, please learn this skill and, more importantly, why you might want to do that. 
• If you use charts and diagrams in your work, and you don’t know a genuine graphic designer, you should get to know one. They will help you succeed. (Hint: they often refer to what they do as “problem solving” and rarely lead with a list of software mastery or use terms like “innovative solutions.”) 

Let’s start a movement for graphic excellence. Everyone wins.

(I also discussed diagrams without meaning 18 months ago.)

The Microsoft Ribbon, what’s up with that?

Microsoft has created some great tools over the years, but the ribbon isn’t one of them.

Two trends make me wonder if the good people at Microsoft have been paying much attention when it comes to user interface:

• Over the last ten years, the proliferation of LCD screens that are generally wider than they used to be.
• HD TV has made the 9:16 aspect ratio much more common for lots of people.

Enter the ribbon. Putting aside the task-centric structure for a moment, the ribbon takes up valuable screen real estate and cannot be moved. On a laptop, the result is a smaller effective work area that is cluttered, visually noisy, very short and very wide. This is not useful for most work.

Other companies, like Adobe, have figured this out. These companies seem to realize that people have work to do, and that those people may want to customize the software interface to more effectively do their work. For these crazy need-to-get-work-done people (aka “users” or “customers”), these companies have built “palettes” into their software, allowing people to move and resize those palettes in a way that makes sense based on their needs.

Heck, Microsoft has done this before. Office Mac 2008 had (wait for it) a “Format Palatte.” It wasn’t perfect, but it was on the side, and you could move it. I guess that camp lost the UI Battle of Redmond. Pity.

The ribbon does reveal additional functions, as it was designed. But it does an equally good job of hiding existing functions from people that regularly use them. I’d argue the net effect is neutral at best (gain some things, loose others).

So now the ribbon infects everything and appears to be here to stay. I wonder how much productivity in business has been and continues to be lost because of the ribbon?

Diagrams without meaning

This is a real diagram I encountered:

It’s not wrong, it just doesn’t mean anything. It could have easily been a bullet list or some other collection of shapes and lines, but I assume that somewhere along the way someone wanted a graphic to “liven things up” so here it is – the ubiquitous Microsoft SmartArt graphic. I’m embarrassed to say I’ve drafted more clever but equally silly things in my life to help people inject variation into their presentations.

But it doesn’t work.

It may break up 51 straight all-text slides and make the presenter feel a bit better, but a gratuitous diagram doesn’t help communicate. It may actually confuse things.

Jakob Nielsen discussed this in November. He was talking about images on web sites but I don’t think it’s too much of a stretch to include diagrams too. Louis Sullivan said form follows function,* and that sure applies here.

Useful diagrams reveal something better than just words alone, but a diagram doesn’t automatically have value just because it’s not words. The diagram needs to add something to the idea, something beyond the words. N.C. Wyeth talked about illustrating scenes that the author didn’t necessarily describe, and his illustrations were something beyond the words. So it is with a diagram.

Two resources:

1) Dan Roam has good ideas on developing good pictures. (Hint: start with paper and pencil.) His Visual Thinking Codex is very useful.

2) Andrew Abela has developed a great chart chooser as part of his Extreme Presentation Method.

* I have seen this quote attributed to three different people. The Wikipedia entry seems to make sense.

Google News: design for democracy

Bruce Tognazzini has a great post on the bad redesign of Google News. He raises lots of good points on both the interface (which has gone very much backward) and the process (which seems to have ignored all sorts of user feedback and UI design theory), but his number one reason that the new Google News sucks is the one I find most interesting: political drift introduced.

He suggests that Google News has (prior to the redesign) helped Americans find the political center of any story because it has presented so many different sources in a reasonably un-biased way. He also points out something I have long believed: that while customizing news is seductive, it ultimately hurts one’s perspective by presenting narrower and narrower viewpoints.

It is disappointing that a company that has gotten so many design things right over the years got this one so, so wrong.

More legibility = less boldface

If you have single slides with lots of words on them (such as a paragraph), don’t use bold type. Or all capital letters. Or worse, combine them (bold all capitals). It makes your text very difficult to read.

Here’s why:

Roman (or normal or regular) type is designed to be read and is at the core of all text faces.* Bold type usually has less white space, both inside the letters and between letters, and so the letters visually blend together more than their roman counterparts. The result is big white or black perceptual masses with less distinct letter shapes, and so your readers need to slow down to recognize letters and words. And if your audience is spending more mental energy processing text shapes, that’s less mental energy available to pay attention to you and your message.

Traditional typography sets most text in roman type with italics and bold reserved for specific uses or headlines. (And bold italic faces were rarely seen before the 1980’s). These conventions exist because they work. Roman type is easier to read, especially in larger blocks of text. Even projected, medium weight letters read better than all bold ones.

Here’s another, more practical reason not to make your slides all bold, all the time (or all-cap, all bold, all the time – shudder). If you start with bold all-caps, how do you emphasize something? Make it bigger, brighter, even harder to read? There’s nothing left.

So, if you have slides with bunches of words that looks similar to paragraphs, then this applies to you:

• If you are designing slides in PP to project to a large group, it would be best to remove most of the words from your slides. Then you can feel free to use bold for the remaining 4 words on the slide.
• If you are designing a slideument (a document that will be printed and may be projected), please “unbold” all that bold type (you’ll use less toner when you print, too).

Your audience will thank you.

* Display faces – those that are not designed to be used for entire paragraphs of text – usually don’t have many variations, if any.

Not getting the whole “user in control” thing

I just had an interesting loop experience on a popular site.

1. The banner ad automatically popped up covering some of the content. Ok, this is annoying and obviously not respecting the site visitor, but it happens and I expect it will either a) close itself in a few seconds, or b) close when I find and click the Close link.
2. I find the Close link and click it.
3. The ad closes. But wait – it pops up again. What?
4. So I repeat step 2. And it happens again: it seems to close and then open right back. What is going on?

As it turns out, a clever combination of marketers and programmers have put a rollover action in the same spot as the Close link, so unless I move the mouse really quickly, the rollover action triggers the pop-up again. Clever eh?

But what is the real effect? I spent 10 seconds interacting with a company I didn’t want to pay attention to in the first place. Do you suppose I’m inclined to think better of them now that I have had to defeat their ad in order to read what I originally wanted?

Me either.

To be fair, maybe this was unintentional. Maybe this little endless loop was an accident. But wouldn’t that be even worse? That would imply the advertiser didn’t test their banner ad. Hmm, old advertising habits die hard. Good design puts users in control.