The Culture To Our Clutter
The Clutter Culture
We are bombarded with visual information wherever we look. Billboards, television programs (especially news programs), product packaging, websites, newspapers – all of these cram every available inch with information and distractions. The shot of New York City above shows numerous advertisements screaming for attention, but these do not so much gain that attention as they strengthen our mental filters. We tune this kind of clutter out.
Instead of approaching things from a different angle, however, marketing designers have instead upped the ante. The signs get brighter, more colorful, more animated, flashier. Likewise, product packaging gets more bullet points, more bright colors, and more stickers to help it stand out. On his Presentation Zen blog, Garr Reynolds has a few examples of how this practice has gotten out of control where he lives in Japan. (This post on Cabel's blog has some great pictures from Japan as well, and other posts of his show off some truly loud packaging for the States.)
When it comes to packaging, which of these two boxes do you find most striking? Which one would grab your attention as you walked past it in CompUSA of BestBuy?
photos by goodrob13 and hyku respectively
Based on my experience, the MacBook Air's box is an attention-grabber. It's incredibly small, and it stands in contrast to more visually cluttered boxes sitting nearby. Its packaging is visibly different from the brightly colored boxes in other parts of the store. System specifications fill one spine, and the rest of the package draws attention solely to the product inside. The box is minimal, simple, and elegant. That simplicity more easily breaks past the noise filters in your mind.
Who can forget this classic parody video about Microsoft repackaging the Apple iPod? As it turns out, the video was commissioned by Microsoft's packaging team, demonstrating their own awareness of the clutter culture that had invaded their package design.
Try Some Cable News
On the subject of YouTube, you should also check out this interview with Lewis Black where he criticizes the ever-present news ticker that crawls along the bottom of the screen while people are talking.Here's your challenge: Watch a segment on MSNBC, Fox News, or CNN and read the news ticker for the entire duration of the segment. Read every word. Then, at the end of the segment, explain in detail what the anchor was talking about to someone else.
The Ticker and Slides
What has happened is that we have begun to equate clutter with the concept of professionalism. We see sources like CNN, CNET, USA Today, Sony, and others using visual clutter to communicate, and we try to emulate the professionals. Unfortunately, the results end up looking something like this.
alas, I did not make these up
We leave our audience squinting, trying to read our slides while we are talking, diverting their attention from our material so they can comprehend the clutter on our slides. On the other hand, the audience's noise filters might kick in, instructing them to ignore the slides. Instead, we might want to try a simpler approach.
simplifying, while staying true to the originals
A less cluttered approach allows your slides to act as a reinforcement rather than a distraction. It gives them purpose. Instead of the slides focusing on every little detail, they highlight the most important snippets to impress these points on the audience. If your audience has to divert concentration to understand your slides, you are losing out as the speaker.
Quoting Leonardo da Vinci (once again), "Simplicity is the ultimate sophistication." Avoid the pitfalls of our clutter culture when preparing your slides. Leave the fine details for your handout. Keep the slides simple and clear, and they will help you stand out as a speaker.
Negative (Space) Is Good
There's a trend in the media, it seems, to pack as much information into every square inch of visible medium as possible. Whether you are talking about print, packaging, or television, the result is the same – a deluge of information and graphics for the viewer to receive and process.
This philosophy also seems to influence slide design, hence results like these:
slides from the Hillary Clinton campaign and Intel respectively
In all honesty, the Clinton campaign's slide is tame compared to its neighbor, but both of these slides suffer from cramming too much information to digest all at once. I don't even understand the Intel slide enough to make a crack at it, but here's my attempt at cleaning up the Clinton slide.
This slide is talking about districts that Bush won in the last general election and who have traditionally supported Republican seats in congress. It's a big deal, but it's also easy to lose sight of on a cluttered slide – especially since someone felt the need to list each specified district. This alternative slide pulls out much of the visual distraction and focuses on the single most important fact: the victories.
Give your information room to breath, and make sure the most important element is the focus of your slide. Don't let the urge to fill every inch of available space crowd out the real message. Oh, and there's one more small reason to avoid this kind of clutter: the more time your audience is deciphering your slides, the less they are paying attention to what you are saying!
Respecting Space
These little icons fascinate me. The images in this post are from XBox360achievements.org, and they are all 64x64 pixels – an incredibly small amount of space in which to work. Still some game developers succeed in creating excellent icons to represent their achievements. However, many more fail to do so. Here are some examples of achievement icons.
The Good!
In order, these icons are from Bioshock, GUN, Call of Duty 3, Elder Scrolls: Oblivion, Need for Spped: Carbon, FlatOut, Quake II, Ghost Recon: AR 2, and Skate.
The Bad...
In order, these icons are from Ninety-Nine Nights, Kameo, Blacksite: Area 51, Looney Tunes: Acme Arsenal, Championship Manager 2007, NBA Live '06, Final Fantasy XI, Overloard, Jericho, and Tomb Raider Anniversary
A good set of achievement icons will do several things. They fit well together. Images are crisp. They provide some kind of visual clue as to what the achievement criteria is. Most of all, though, they make good use of space. Contrast the top set of icons with the bottom. Can you see how much more cluttered the bottom set is – the designers trying to fit too much information into too small a space. (The Ninety-Nine Nights icon not actually crowded at all. It's a poor resolution image, which it shouldn't be at that small of a size.)
If you are working in PowerPoint, you are working on a canvas that is 720x540 pixels. This is a few more pixels than a standard-definition TV (640x480), and Mac OS X Leopard has icons nearly as large (512x512). Regardless of your computer's monitor size and resolution, these are the constrictions of a PowerPoint slide. More important, though, is that your audience will be viewing these slides on a screen at some distance from where they are sitting.
image by Vicky S on stock.xchng
Even a moderately large screen appears smaller than one's hand from ten to twenty feet away. Your slides, while they appear large on your computer screen – are actually a small canvas, and they should be treated accordingly. Like the XBox 360 achievement icons, cramming too much into the space will make slides that are incomprehensible – resulting in the slides attracting more concentration than the speaker.
Sometimes less in indeed more. And a clear image with minimal text serves better to illustrate your point than a slide crammed with distractions. If your audience can't instantly recognize what's on your slide, I'd wager it's too cluttered.
clutter versus clarity
Respect the space you have, and consider what your slides will look like from twenty feet away – more in many situations. Don't make your audience have to think harder about what's on your slides than what you are saying. Work with the space you have, and avoid over-packing. Your audience's eyes will thank you.
All achievement icons are © their respective holders.
Lost in the Overflow
To get all of the images clear of the sidebar, I had to widen my browser window to almost 1400 pixels. Mac Mojo uses a flexible width, allowing the site's borders and sections adjust to the width of your browser window. Unfortunately, images do not have flexible widths, and these images seem particularly problematic. After all, how many people reading this blog have displays 1400+ pixels wide? Between my computer at work, my PowerMac, and my MacBook Pro, only the MacBook has a display wide enough to properly display the blog with these images.
The pictures are very aesthetically pleasing, but they exist to the detriment of the site's usability. This brings to mind how many merely adequate presentations I've listened to and given that would have been better if only some of the excess had been cut. Too often, we feel the need to cram as much material as possible into a 30-45 minute talk, and the quality suffers due to the quantity. There is so much material that it is difficult for the audience to determine what is most important, and irrelevance may end up covering up the most vital parts.
I keep this slide deck around as a reminder of how cluttered my slides once were. Here are 118 bullet points over 32 slides. The presentation is about Attachment Disorder behavior classes and how to best intervene for some of the symptomatic behaviors. Of those 32 slides, 13 of them are introductory material. When I gave this talk in a 45-minute block for the first time, you can guess what happened. I ended up spending 30 minutes on the introduction and had to fly through the rest of the material in the remaining 15 minutes. My content was lost in overflow.
This is a later revision of that same presentation. Now I'm down to twelve slides of content. I still feel like those slides perhaps have too much text, but now I'm allowing myself to cover the most vital information without it being buried in a wash of corollary facts that could just be included in a supplemental handout. This talk is much more focused than my previous effort, and it can be easily covered in 30 minutes.
When practicing your presentations, ask yourself, "Is this really necessary?" What information serves as padding? Chances are there is a fair amount of unnecessary material in the first draft of your presentation. Look for the details that bury the meaning, and cut them out. Don't let an overflow of supplemental information crowd out the actual point of your talk.
Visual Clutter and the Loss of Intent
"Your job is to tell stories, it's not to tell us in the middle of the story what show is coming on next or which one is premiering two weeks from now! What do you want me to do, stop and get a pencil and write it down? Do you want me to stop watching and prepare myself for the next show?"
(Head over to Presentation Zen for a video of the whole thing.) This reminds of when the wife and I went out to see The Simpsons Movie. At one point during the movie, a mock ad for FOX programming appeared along the bottom of the screen. It recieved knowing laughter from the audience, but I remember hearing some other audience members expressing moments of bafflement – wondering if the studio had in fact resorted to plugging itself during its movies.
Mr. Reynolds goes on to speculate that this visual bombardment reinforces much of the bad PowerPoint design we see in presentations today.
When possible, put more "stuff" in there--more glitter, more boxes of info, more colors, more, more, more. Is this where "bad PowerPoint" comes from? Do we say to ourselves "Well, if CNN (FOX, MSNBC, etc.) does it I guess more text and lines and boxes, more logos and 3-D graphics in assorted colors must be how it's done. That's how serious presenters with serious tools do it," we say.
The same is true of several websites. The main content seems to take a back seat to the self-referencing links and advertisements splattered across the page. I took these screenshots of a couple popular websites and blacked out everything that wasn't article content.
x
The noise ratio on these pages is very high. Contrast this to a couple of (in my opinion) good blogs: Daring Fireball and Cabel's Blog.
x
On both of these pages, there is much more signal than noise. Daring Fireball has two ads and a simple menu while Cabel's Blog has no ads. Both sites feature very clean layouts and priority is given to content – a practice that I think respects the reader more than those corporate sites.
As Mr. Reynolds points out, these same principles apply to our slides. We can follow a traditional corporate approach to our visuals that contains a lot of clutter that overwhelms our audience with graphics and information, or we can take a simpler, more basic approach. Here are a couple of mockups based off Apple's recent fourth-quarter quarter financial results.
The first slide indeed has more information on it, but is that information presented effectively? It is conventional, but does it respect your audience? It took me a lot longer to create that first mockup, but I think the second is actually the better slide. It presents the most important fact clearly and succinctly. The touch of humor adds a human element without detracting from the overall package or insulting the audience's intelligence. It allows your audience to focus on you after the snapshot of information rather than forcing them to concentrate on deciphering small text among competing visuals.
Whatever your medium of communication, simpler is almost always better. Reduce the clutter. Eliminate visual noise, and allow the main focus of your content to shine through.
Making Over Mitt
From the first slide, it's possible to predict some of the issues we're going to run into while going through Mr. Romney's visuals. Too much text is on the slide. The planet graphic is obviously clip art, and overall, the slide is pretty hard on the eyes.
x
Even though the title slide is unnecessary in and of itself, using it sets a tone for the entire presentation. You want it to look nice. In this alteration, most of the text has been cut from the slide, focusing on two words: "values" and "freedom." I retained the global theme but used a higher quality image from Corbis. Also, I used a color scheme that suggests patriotism and bipartisan qualities. The text is a very classic-looking font called Cochin.
I had a hard time deciding what to do with the next slide (only partially because I couldn't read some of the text at all), but I think it would be appropriate to divide this single slide into multiple slides – taking a thematic approach rather than chronological.
x
A strong theme that I took away from this slide is Romney's desire to discredit Iranian president Mahmoud Ahmadinejad. I retained the color scheme from the first slide and faded a common media image of Ahmadinejad into the background, focusing on one quote in particular. The presenter could keep this background intact while transitioning between facts and quotes rather than cramming tons of tiny text together. Font sizes on my version of this slide are 64 points and 96 points.
The final slide in this re-imagining contains a couple of quotes by Tony Blair. A similar approach to the preceding slide seems best, and this should be broken up into two slides because there are two quotes.
x
Because Tony Blair is placed in opposition to Ahmadinejad in this presentation, he is facing the opposite direction. Also, I removed "Marketing Values" as the title. Talking about war in terms of marketing just doesn't seem to fit in with the themes of freedom and values. I'm not sure what Romney was trying to communicate with that title, but I think it sends a wrong message.
Every aspect of your slides – from the graphics used to the font to the color scheme to the amount of text – creates a feel for your presentation. The visual aspects of your presentation can either be powerful tools that help create a memorable experience for the audience, or they can serve as mindless filler that facilitates the audience in filtering you and your message out. If you prepare slides, create visuals that enhance your message and that serve as an evocative backdrop to your own performance. If you are in politics, such attention to detail might even help your momentum.
Simplifying Cluttered Information
x
Imagine looking at these slides from fifty feet away on a screen only six feet tall.
This is obviously a case of visual clutter. The presenter is trying to cram too much information on a slide. Some people think this looks impressive, but what are you trying to accomplish? Do you want your audience to say, "Wow! That's a lot of information to digest," or do you want them to say, "Wow! It's so clear to me now?"
In these slides, the y-axis represents the Bloom's taxonomy level of a task, and the x-axis describes how broadly-applicable a task is. Items in the A quadrant would have a low cognitive domain and narrow application while items in the D quadrant would require higher-level cognitive skills and have very broad application. This is good information, but the delivery leaves much to be desired. Here is one possible alternative.
x
Now no one will need new glasses!
This approach keeps the same basic approach as the example slides. The first slide retains the chart, but it is vastly simplified. I've eliminated the miniscule text that obscured the labels. Also, the numbers are gone. Simple, meaningful labels win over meaningless numbers any day. A simple gradient and translucent border was added to the circles to give the illusion of depth, and a soft white drop-shadow is applied behind the skill set we're going to cover next.
The second slide just highlights important verbs in the skills we're talking about, emphasizing what is done in higher-order, broadly-applicable tasks. The various steps do not need to be typed out word for word. Of course, if you wanted to include more verbs, build out those points you are finished with, and build in the new ones as you are ready. This simply helps to control slide clutter.
This is only one possible approach to this information. What would you do differently? How would you convey this information in your own style? One of the great things about having someone else look over your material and slides before you present is that they may suggest an entirely different approach to your material. However you organize your content, though, cluttered slides will either be distracting and frustrating to your audience, or they will be utterly forgettable because that's how so many other presentations look. Taking the time to illustrate your material uniquely and clearly will make your presentation stand out as something different.
Simplicity As a Standard
Unfortunately, many slides trip down this same path. The audience gets it. They understand the meaning of the slides, but the slides are overcomplicated. Visually, they are as annoying as the cell phone's menus.
These Microsoft slides are favorites of mine. I honestly don't think I could design more visually complicated slides if I tried.
x
© Microsoft. How complicated can you get?
What ends up being the result? The speaker has to keep referencing the slide, pointing out various areas, and defining what the slide is explaining. It becomes tedious and exhausting. The slides do not support the talk. Rather, the talk is supporting the slides. This is the danger in overcomplicating your slides. You may accidentally let yourself become servant to the visuals.
In contrast, if you set simplicity as a standard in your design, clearer results happen. Many claim the iPod's runaway success is due, largely in part, to its simplicity of design. The same is true of the Nintendo DS. David Pogue spoke at length for TED 2006 about the "Cult of Simplicity." Simplicity sells – not just products but ideas as well. Keep your slides simple and clean, and your audience will be more likely to buy into your message because they are no longer distracted by trying to decipher complex visuals.
Here is one way to simplify the slides above:
x
Same message, different approach. (Windows screenshots from GUIdebook.)
It would be unfair to say that there is never a place for complex slides, but, more often than not, simplicity trumps the alternative. When preparing your presentation, have others look at your slides. Ask them if they easily understand the big ideas conveyed. How much reading is involved with your slides? Are they visually cluttered? Make simplicity a standard, and understanding will follow.
Ditch the Pointer
In many business and technical presentations (as well as in the education field) it is not unusual to see someone whip out a laser pointer during his of her presentation to highlight important details on the slides. Somehow, if the important points are not already clear enough, this tiny shaking red dot is supposed to bring clarity to the situation.
The simple fact of the matter is this: if you prepared your slides well, you will never – and I mean never – need to use a laser pointer. Never.
Why do we even use those little things? Do we really think they are effective at highlighting points, or do we just feel more professional holding it? Like bulleted slides, does the pointer create a sense of security and comfort when we are presenting? I don't know. I've never used one, but I've seen them plenty of times and have played "find the dot" during many presentations – even some given at church!
Like slides, we have come to use the pointer as a crutch. Our slides are not clear, so we use the red dot to light the way – separating important bullets and charts from the filler we put in so we don't look unprepared.
x
The above are two slides that we might feel merit the use of a laser pointer. There is a ton of information on each slide, and we want to make sure our audience knows exactly what the most important facts on each slide are. However, instead of using a pointer, what if we just simplified our approach?
x
Stripping out the unnecessary makes it easier to emphasize the vital information. In this case, the most important facts include how much laptops are outpacing desktops by and the reasons consumers are choosing laptops over desktops. (By the way, these figures are completely made up, so don't cite them elsewhere.)
Still, there might be times that we feel the inspiration to highlight something that seems earth-shattering to us. In this case, during my talk, I might decide to draw my audience's attention to the fact that many modern laptops are perceived to be every bit as capable as desktops. At this point, a handy little utility called OmniDazzle comes to my rescue.
Using a designated keystroke, OmniDazzle creates a spotlight effect (or one of several other effects) in the cursor location, enabling me to highlight this text much more effectively than if I began waving a red pinpoint around. Alternatively, if I had this point planned out, I could have created a similar effect from within Keynote without needing to resort to an additional application.
Laser pointers are wholly unnecessary. They don't help you clarify your points; they can be difficult for the audience to see; and they are often symptomatic of slides that are too cluttered to begin with. Before you think to pack that pointer, rethink your slides and how you can simplify them.
Bonus: While I was working on this post, I found this article on KeynoteUser that has a ton of great tips on how to avoid using pointers. Go check it out!
This Slide Is Brought To you By...
Just in case you forgot whose event you were at.
Even at talks given within my own school district, I've seen presentations where our township logo appears in the bottom corner of every slide. This is totally unnecessary clutter, and it makes your slides feel generic and impersonal. Besides, your slides are not a marketing avenue. Your audience should not feel they are watching a feature-length advertisement – even if you are pitching a product or service.
Now, don't get me wrong. Even Apple uses branding for their presentations, but it usually looks like this.
x
Before the presentation formally begins, a solitary Apple logo will be present, and in-your-face branding will pretty much remain absent for the remainder of the talk. You don't need to be reminded whose products you are learning about. The slides remain clean of marketing, and the whole experience is the better for it.
If you prepare slides for a company, business, or other organization, avoid bombarding your audience with your corporate identity. Yes, use the first and possibly the last slide to display your logo, but keep the rest of the slides clear of unnecessary clutter. your slides are meant to reinforce your talk. They are not an advertisement.
Can Our Images Become Mere Filler?
Seriously, though, this is a perfect example of just plugging in an image to have an image – which we can be guilty of in our slide presentation all too often. In this ad, would it have not made sense to have chosen an image of a twenty-something man or woman, perhaps looking somewhat self-conscious? Our self-assured woman in late midlife simply fails to reinforce the statement made in the advertisement. Forget about impressing your in-laws with taxes! How about you go and visit them more than three times a year? That will impress them even more!
As we design our slides, it is common to want to use images to reinforce what we are saying. (In some cases, we may feel the need to reduce negative space, but we should really resist that particular urge.) Unfortunately, if we don't respect the time it might take to select the right images, we may end up with pictures that merely feel tacked on – pictures that fail to really reinforce our message.
Let's return to some slides on conservation. In the two slides below, which seems to create the greater impact?
x
Both slides emphasize the visual nature of the medium, and both use high quality images. However, the first slide, while very nice, fails to make a connection with the subject. The second actually illustrates the topic. The second slide forges a stronger connection between the subject matter and the audience.
When choosing images for our presentations, we shouldn't just plug something in to fill space or because it creates a certain effect. We need to make sure the images are meaningful to the topic we are presenting on.
PS: Now that I think of it, the woman in the ad may be the in-law in question. Unfortunately, the way the ad is laid out, it still looks life she is the one making the quote.
Text Overload
Below is a slide from a Intel business presentation. Now, I don't know the exact context of this slide, but it does provide a nice example of some of the traps we fall into when creating our own slides – creating walls of unreadable and overly detailed text.
Behold the wall of text.
Now I don't know about you, but I can't read those bullet points without really straining my eyes, and I imagine that anyone sitting in an auditorium or conference room would have the same problem. The slide is just overloaded with text, and I can just hear the presenter saying exactly what is on the slide verbatim.
How can we approach this differently? In this case, I think adding slides will actually help. I'm going to take a part of the second bullet point, and turn it into two independent slides. The first will introduce the Core 2 Duo processor, and the second slide will reinforce the fact that these processors are shipping ahead of schedule. (That struck me as an important point.)
x
The initial build shows the logo for Core 2 Duo, and the presenter can extoll the benefits of this advancement. Perhaps even some highlights appear next to the image. Then those highlights fade away, and the Core 2 Duo Extreme appears. Core 2 Duo may disappear, and highlights of the Extreme edition can appear to the left.
x
The second slide shows a desktop calendar with the date of July 27. That's when the Core 2 Duo was supposed to begin shipping. The date fades out, and the slide reveals that Intel is ahead of schedule.
While far less detailed, this second set of slides succeeds at visual communication where the initial slide fails. Our slides do not have to serve as subtitles to our voices. Remember, slides are supplementary visuals to the presentation. They are not your notes. They are not the handout, and they are most certainly not the presentation itself You are the presentation. Your slides should serve to support you, not supplant you.
A Case of Overshadowed Text
This theme makes liberal use of Keynote's high quality shadows, and the shadows are enabled by default when you insert a table like the one seen above. It looks very pleasing, but a serious issue comes up when one tries to read the text below the graph. The shadow is obscuring the text. Now, Macintalk is not entirely to blame here. The author was not preparing an actual presentation, and this is the default location for the shadow.
Still, if I was going to present this at a technology conference or tradeshow, I would not want these shadows getting in the way of making my point. Fortunately, the solution is very easy. Using Keynote's Inspector palette, I can simply disable the shadow, or I can change its placement. Additionally, setting the text below the graph to bold will make it easier to read since it is smaller than 30 points.
In the image below, I tried to replicate the Macintalk slide as best I could quickly, and I made two changes. First, I set the text below the graph to bold. Second, I altered the shadow – decreasing its offset and changing the angel. The result?
Our table is still very attractive, and now everyone can read our text. We could still make some tweaks, but those two easy adjustments make the slide much more readable (and, if I worked for the OmniGroup, that would make me a very happy camper).
The basic lesson is this: Form is important in giving a presentation. Good slides make a good impact. However, do not let the aesthetic touches get in the way of your slides conveying your intended meaning. Look for confusing graphics and obscured text, and, if you find troublesome spots, simply fix them. After all, you don't want you audience squinting as the result of overshadowed text.