To make it easier for you to ensure your messages are inclusive, a working group of the systemwide Electronic Accessibility Leadership Team maintains a UC web accessibility site for web developers, content developers, and writers and editors.

In addition to guidelines for these audiences, the Website has an array of useful tips, tools and techniques to help you make your site accessible.  The Website includes sections on guiding principles, recommended standards, technical standards, finding assistance on your campus, training opportunities for developers, other resources, UC’s Electronic Resources policy, and a link to the initiative to promote electronic accessibility throughout the University of California.

Do you want to learn more?  UC employees may join a Universitywide e-mail discussion list of technical and other UC personnel interested in IT accessibility issues. To join the list (accessible-l@ucop.edu), send an e-mail to Yvonne Tevis.

Let’s look at some examples of data visualization — also called information visualization and information graphics or infographics. (They are closely related and for our purposes it’s not worth distinguishing the differences.) What’s important to us is how these examples use visual means to convey information clearly and in memorable, creative, and often humorous ways.

9 Places to Find Amazing Data Visualization Examples

1. The World of 100

The World of 100 project by Toby Ng Design uses simple graphics to explain demographic relationships in global society.  For example, in Skin Colour a zebra’s stripes show the proportion of white and non-white people in the world. In Nationality a world map shows continents drawn to scale with their population, which makes it easy to see at a glance where most of the world’s population lives.

Takeaway: You can do this! The “100 method” is powerful and it’s easy enough for any of us to use. Take a look at the World of 100 project visualizations (and the Twitter example cited below in #4) and you’ll see how to apply it to your own visualizations. It’s an effective and simple way to make a compelling point; it reduces complexity and focuses on things people can easily relate to and that capture their imagination. We can all picture one hundred people.

2. Not Just Another Pretty Picture

Especially for libraries: “An exploration of visualization techniques that can help libraries make a compelling case to stakeholders and get insight about how data visualization can help libraries make more informed decisions.”  This is a blog post by Hilary Davis in the In the Library with the Lead Pipe blog (November 2009). It’s a fantastic resource with an overview of data visualization, visualization tools, and recommended visualization blogs.

3. FlowingData

FlowingData is the visualization and statistics blog of Nathan Yau, a UCLA PhD candidate in statistics with a focus in data visualization. In his own words: “I highlight how designers, programmers, and statisticians are putting data to good use.” He is prolific in posting outstanding data visualization examples from other sources annotated with his personal insights, and he posts his own projects and experiments with data visualization.  The topics span the gamut from 7 Basic Rules for Making Charts and Graphs to History of the Beatles as told by their hair, in more than twenty categories like Infographics, Statistical Visualization, and Data Design Tips. Tip: Categories are not listed on the home page.  Click on a category link in the byline of any post to get to a page with the full list of categories.

4. Information Is Beautiful

The blog’s tagline is “Ideas, issues, knowledge, data – visualized!” Stunning examples by London-based data journalist and data designer David McCandless include The Hierarchy of Digital Distractions, If Twitter Was 100 People, and his recent visualization based on Clay Shirky’s writings on Cognitive Surplus. In his words: “My pet-hate is pie charts. Love pie. Hate pie-charts.”

5. xBlog: The Visual Thinking Weblog (category: data visualization)

XPLANE’s xBlog is “widely respected as a definitive resource for designers, visual storytellers and information architects. You’ll find links to sites discussing visual thinking, web design, art, creativity, information architecture and design, graphic design, symbols, typography, photography, information graphics, illustration, interface design, usability, language and more.” I found the actual design of the blog a little difficult to navigate; I wasn’t sure where to click, but the content makes it worthwhile.

XPLANE‘s mission is to create understanding. They clarify complex business issues through visual collaboration. Their tagline is “The Visual Thinking Company.” In their own words: “We visualize clarity.” XPLANE was founded by Dave Gray in 1993 and is now the leading design firm focused on information-driven communications.

6. VizThink

VizThink is a community focusing on infographics, sketching, and presentations. You can join their email list and find out about conferences, classes, and other news. In their own words: “VizThink is a global community for visual thinkers and communicators who like to get beyond words and believe that visuals can be an effective tool whether you’re just trying to work through your ideas or working to get your message across as simply as possible.”

7.  Smashing Magazine’s Data Visualization: Modern Approaches

Vitaly Friedman, who wrote this post in 2007, is editor-in-chief of Smashing Magazine and a successful designer.  Some of the topics covered are mindmaps, displaying news, displaying data, displaying connections.  Caveat: Since this is a static blog post and not a blog continuously posting new examples, these examples may be slightly dated. Tip: Smashing Magazine, which began in 2006, is a great resource for web design tips for designers and developers.

8. Cool Infographics

The Cool Infographics blog by Randy Krum “highlights examples of data visualizations and infographics found in magazines, newspapers and on the Internet” and includes a useful list of Cool Links of other data visualization and infographics blogs. In his own words, he’s “always looking for better ways to get the point across.” His logo, a smiley face with sunglasses (similar to the Yahoo “what’s cool” icon from the 1990′s) started making me crazy after a few minutes, but he admits he’s not a designer, so I can’t hold that against him.

9. Flowcharts are a good place to start. Last but not least, I couldn’t resist including a couple of humorous flowcharts. Flowcharts are a simple way to communicate visually and most of us have created at least one. A key principle in designing flowcharts is “reduction” — eliminating as much extraneous information and design elements as you can. And have some fun!

Do you need a new logo? (flowchart) — One of the decision points in the center of the graphic is “Does your logo use clip art?” and one of the possible answers is, “Wait, clip art is a bad thing?”

Bacon Flowchart — Needs no introduction.

“As intelligence goes up, happiness goes down. See, I made a graph. I make lots of graphs.” — Lisa Simpson. The Simpsons. Episode 257. January 7, 2001. Source: FlowingData.

Now, It’s Your Turn

1. Check out one of the examples above and try your hand at inventing your own ways to visualize data.

• Start with the “100 method” or do a simple flowchart.
• Many visualization images can be reused for non-commercial purposes. Find some favorites to use in your presentations.

2. Carry a camera everywhere and take photos of things that inspire you. It’s an easy way to capture ideas, to train yourself to really look at things, and to think visually. Since cameras are built into most mobile phones, it’s convenient. For example, I take photos of houses in San Francisco that are adjacent to each other and identical in architecture but have been decorated differently over the years.  I tag this photo series as “twins.”  It’s a treasure hunt for me and it trains me to spot subtle differences — like those “what’s different in these two pictures” books that we enjoyed as kids.

Image credit: Are you happy? flowchart by Alex Koplin and David Meiklejohn at h34dup.com

Read more posts from Your Life@Work.

It’s not as hard as you think. Let’s get inspired by a visually stunning example, then I’ll offer a few tips to help you punch up your own visuals. You don’t have to be a design genius; the trick is to borrow respectfully from the best and teach yourself to improve over time.

Keep Calm and Carry On was a World War II slogan in England. It’s had a recent resurgence in the design world (do a search in Google Images on that phrase to find some creative variations) and it’s a great example of a powerful visual. Maira Kalman, our design inspiration below, pays homage to it in her blog.

Tell A Story

What makes Maira Kalman’s blog And the Pursuit of Happiness so amazing is her talent for storytelling and her expertise at interweaving writing and illustration. Kalman uses words sparingly, considering the ground she covers –- a history of American democracy. Her words draw a thread among the elements of the story, unfolding in a continuous stream as you scroll down the page. At the heart of Kalman’s style is her inclusion of quirky and unexpected tangents. How else could an homage to George Washington include a snapshot of napkin folding? She takes you by surprise with her juxtaposition of different media –- paintings, drawings, photographs, calligraphy –- and her unique way of elevating everyday and even silly things to a noble level.

Lesson: Find an interesting way to tell your story. Don’t be afraid to look at things from a different perspective. Experiment with mixing media, but find a common thread. Kalman’s common thread is her beautiful handwriting. She chooses a stark black background to contrast against her white writing and colorful images. Her writing takes the form of an ephemeral message scrawled on a chalkboard and it beckons us to follow it.

8 Tips to Make Your Point with Visuals

1. Avoid clip art. We’ve all used cheesy clip art illustrations at some point. These illustrations come with Microsoft Word, PowerPoint and other design software. They rarely add anything to a document and can make your work look downright silly. It’s even worse to pepper multiple clip art images on the same page shotgun style.

2. Pay attention to your text layout. Before searching for images to bring life to your document or presentation, focus on making your text and layout visually engaging. Think about magazine layouts: they use call-outs, columns, and scaled font sizes to differentiate among page elements.

Font size differences should be decisive — differences of at least two to four points are easier to discern. For example, a typical website uses the font sizes shown below to create an obvious hierarchy.

• 9 point – text you want to minimize (captions, disclaimers)
• 11 point – most content
• 14 point – labels on grouped items
• 20 point – major headers/titles

Last, but not least, emulate professional designers and treat white space (the space around objects) as sacred –- leave plenty of empty “breathing space” in your layout.

3. Use one large image rather than a bunch of small ones. It’s visually compelling. The California Digital Library website does a nice job of this on the home page.

4. Match your point and your tone to your visuals. An image doesn’t have to be completely literal. I laughed (and drooled) at the image on this gift certificate web page. It doesn’t have anything to do with the product, but you get the point immediately. For this blog, Leslie and I select images that convey the main concept of the post. Our post on personal branding, How to Discover Your DNA, used an image of six goldfish with one fish a different color to show individuality. We could have used the classic double helix DNA image, but that would have missed the point of the post.

5. Don’t use too many colors to differentiate your data. Consider this when you are creating charts: Extra colors create extra cognitive work because our brains must try to figure out the scheme. One color is optimal; it reduces search time for your brain. It may seem counter-intuitive, but more color adds less value. At seven colors, your brain’s performance degrades significantly. Choose a neutral color (black, gray, brown, etc.) and one contrasting color for emphasis (red, orange, green, pink, blue, etc.). Make sure the contrast color is dark enough and stands out sufficiently to be immediately noticed.

Try to figure out what’s important here
Try to figure out what’s important here
Try to figure out what’s important here

It’s clear what’s important here
It’s clear what’s important here
It’s clear what’s important here

6. Quality matters. Never scale up a small image; it will look terrible. Choose images that look crisp. For a few dollars you can purchase a stock image, which is a good option if you intend to publish an image on a website or in an article. Search for the phrase “stock images” to find vendors. For free images, try Wikimedia Commons or Flickr. For historical photos, try University of California’s Calisphere.

7. Use video and animation. A picture may be worth a thousand words, but video is priceless in getting your point across. It engages both our visual and auditory senses. Grab a Flip, iPhone or video recorder and make your own video. An easier option is to simply embed or link to others’ videos from YouTube, Vimeo, or other sources. Animoto is a free way to turn images into an animated slide show video. Flash is a relatively easy way to add motion to your website. The California Academy of Sciences has a fun Flash video on their home page.

If I could only give one tip, it would be this one:

8. Copy designs you like. Professional designers do this all the time. Find visual examples you admire and save them as reference for your own designs.  Take a screen shot of a particular aspect of a design or save the whole thing. I keep a folder on my computer called “design inspiration” to capture visually compelling reports, presentations, and screen shots that focus on one element. Add a word or two in the filename — buttons, layout, color, or wording — for ease of finding later.

“A picture is worth a thousand words. An interface is worth a thousand pictures.” – Ben Shneiderman

Now It’s Your Turn

• Take a fresh look at documents, presentations and websites with an eye to the visual. Decide what’s pleasing to you and why. Keep a folder of compelling visuals. Don’t forget, it’s OK to find something you like and use it as a template; you don’t have to be creative from scratch.

• Ask yourself what you’ll do next time you create a presentation for work. Always keep in mind why you are doing it, who you are doing it for, and what your goal is so you can engage in the right way — fabulous visuals and poor writing will get you nowhere.

• Look at Nancy Duarte’s great advice on designing meaningful presentations.
  • website: Duarte Design
  • videos: Five Rules for Presentations and Slide:ology (highlights from her book on creating inspiring presentations)

• Take a class on visual thinking at VizThink.

• Take a 3-day overview class in Visual Interface Design at Cooper.

• If Maira Kalman enchanted you, check out her TedTalk video

Read more posts from Your Life@Work.