    
|
|
|
|
|
|
|
|
|
|
|
 |
Too often when working in information design, you’ll hear the request, “Can you make the data look cool?” “Cool” is a rather ambiguous term, and means different things to different people. Unfortunately, when working with data, the term “cool” is often directly juxtaposed with common charts like line, bar and pie, which are often relegated to the backbench, and written off as “boring.”
The emphasis on the instant visual appeal of an infographic over the clarity of the presentation of data is a troubling trend that plagues the modern incarnation of the infographic.
“The important criterion for a graph is not simply how fast we can see a result; rather it is whether through the use of the graph we can see something that would have been harder to see otherwise or that could not have been seen at all.”
– William Cleveland, Web Application Design Handbook
When presenting data visually, our main aim should be to look for ways to effectively communicate the stories hidden in the depths of the spreadsheet. Data visualization grants a means for discovery. It frees the data from the confines of its tabulated raw format and provides a way for the viewer to see trends, gather insights and understand complex stories without the need for words.
However, the average infographic that you’ll likely come across online today focuses more on the overall aesthetic of the piece, the “cool” factor, than on the data itself. “Info-posters” that are heavily illustrated and have a low information-to-pixel density currently dominate the infographic landscape, many of which dumb down data and spoon-feed the audience a choice set of factoids for easy digestion of the chosen topic.
In an effort to make the data appear more interesting, some infographics use design elements to distract the viewer. Large view.
In striving to achieve coolness, the examples above forgo the integrity of the data and, hence, the main function of the infographic. The design, rather than clarifying the data, actually distracts the audience from the information presented, encouraging them to engage with the visual elements rather than with the data itself.
Now, that’s not to say that being informative and beautiful are mutually exclusive. There are many wonderful examples of data being presented in an efficient, effective and visually stunning way. But the beauty of most of them lies in their simplicity.
“US Gun Deaths” by Periscopic. Large view.
The most effective infographics and visualizations present data as clearly and concisely as possible, free from most distractions and embellishments — the emphasis being not on making the data look cool, but on ensuring that the data’s story is clearly communicated.
Decisions made during the design process will either help or hinder the viewer’s comprehension of the subject matter. So, although it is often said that the type of data will determine the type of visualization, design choices involving color, shape, layout and typography are also extremely important and will affect the ease with which the information can be understood. For example, color can highlight key insights, size can demonstrate change, and proximity can imply correlation.
A common misconception is that the audience will be interested in your data only if it looks exciting and is broken down into bite-sized chunks. In reality, you don’t need to dress up the data to make it more interesting. The information in the graphic, or the story you’re revealing, will ultimately determine the appeal of the piece, not the fancy illustrations. As Brian Suda puts it in his book Designing With Data, “Graphic design is not a panacea for bad copy, poor layout or misleading statistics”.
When the focus is on communicating data effectively, common chart types should not be dismissed as boring alternatives, and you certainly shouldn’t be afraid to use them when telling stories with data.
News organizations such as The New York Times and The Guardian rely heavily on these common chart types, because simplicity and efficiency will often trump novelty in conveying complex information to a wide audience.
“Why Is Her Paycheck Smaller?” by The New York Times. Large view.
Charts such as line, bar and pie have been in constant use since the 18th century for good reason. How information is displayed and organized in these charts appeals directly to the intrinsic way in which humans perceive things. According to the Gestalt laws of perception, the human brain automatically organizes and groups the things it sees by proximity, similarity, continuity and symmetry.
Designing with data in a way that supports these relationships (for example, by using color to show similarity, or by using a connecting line to imply continuity) makes it easier for viewers to understand what the data is showing and to draw certain conclusions that would be a lot harder to come to had the data been merely displayed in tabular format.
According to Andy Kirk in his book Data Visualization: A Successful Design Process, by presenting data in a visually effective way, you “move from just looking at the data, to actually seeing it.”
The following “infographic” was probably the unfortunate result of a designer being asked to make the data look cool — a predicament I can certainly sympathize with, having been given the exact same creative direction in a number of projects. On more than one occasion, I have been explicitly asked not to use bar or line charts and been told that I simply needed to “jazz up the data,” much to my concern.
The presentation of the information below certainly is unique, and effort has been exerted to make the information look interesting. The graphic fails, however, in actually conveying information.
“Top 10 Salaries at Google”: Making the data appear more interesting does not necessarily make it any easier to understand. Large view.
This graphic’s primary purpose should have been to present the data in a format that is easier to read than a table.
In this instance, however, the table functions more efficiently than the graphic as a way to explore the data. If the salary range for each job was not present in the graphic, it would be nigh impossible to read. The pie-chart format adopted here actually obscures the data, rather than makes it accessible. Additionally, the colors are somewhat confusing; the radius of the pie slices are meaningless; and the number and size of the people figures don’t seem to correspond to anything.
(Update:The number of people figures in fact relate to whether that role involves two salaries. The double-salary category is in itself problematic, as it’s not completely clear whether those salary ranges relate to one salary or the sum of both salaries for that role. Additionally, the usage of multiple people figures to illustrate the double-salary point is also misleading. At first glance, this particular use of iconography could imply the number of people associated with that role, rather than its intended use of demonstrating number of salaries per role. Perhaps a different icon to represent salary is needed in this instance.)
So, how could this be better visualized? Focusing first and foremost on the clarity of the data, I’ve explored just two possible ways in which this small data set could have been presented. I’m sure there are many, many more.
One possible alternative to the infographic above. Large view.
This first option gives the viewer a much clearer representation of the data. With the linear organization, the viewer can understand at a glance what the data is showing, without having to work too hard. In stark contrast to the original, this graph makes the data instantly accessible, allowing for easy comparison between the jobs.
The first complaint I would likely hear is that the graph has an abundance of empty space. This space, however, actually tells a big part of the story. On the one hand, we’re presenting a comparison of 10 jobs; on the other, we also want to highlight that these salaries are actually very high, and the white space reinforces that.
Alternatively, the data could be presented as a slope graph:
Any one data set can be presented in a number of ways. Large view.
Here, we’ve zoomed into a portion of the graph. On the left side, markers pinpoint the low end of the salary range; on the right, markers pinpoint the high end. This version more clearly highlights those jobs with the widest ranges in salary, and it shows us that different presentation methods can tell slightly different stories.
These two examples may not have the visual pizazz of the original, but unlike the original, the data and the story are easily accessible to the viewer and not hindered by the motivation to look cool.
The request to simply make data look interesting is all too common in information design, and it might seem innocent at first. But if you forgo the integrity of the data to achieve this goal, then you run the risk of turning your infographic into merely a graphic with information, and that’s a big difference.
All that glitters is not necessarily gold.
(al) (ea)
© Tiffany Farrant for Smashing Magazine, 2013.
]]>|
|
|
|
|
|
One of the things about advancements online is the ability for us to learn. We’re able to not only be easily connected to our colleges and universities, but we have the ability to get our degrees, diplomas and certificates online. It’s convenient and also helps those who have been desiring education to get it.
There are so many options where we are talking about learning online. You can learn via speciality sites like Team Treehouse or Lynda or through open learning platforms such as Open University. Today, we’re going to focus on tertiary education and the universities and colleges that are using good design in their online presence.
We start with Boston University’s website, which seems to be pretty traditional, but the more you poke your nose around, the more you realize they have done a great job at incorporating some of the modern web design standards. It’s a really, super clean approach to an education website, that still keeps it’s roots in what makes a traditional university site.
Obviously, a school that specializes in visual arts cannot have a website that’s a complete eyesore. SVA does a great job of creating a site that first creates some excitement. The colors, the graphics, and photographs are all great, but what’s of great importance is the SVA layout. They don’t get right into how people should come to SVA, but they have a bunch of trending news articles on the visual arts and design community within SVA. That connection building is ideal for websites.
University websites are typically really busy and you have a lot of things pulling for your attention. NYU is another example of a university that decided to go really simple with their web design. The colors are cool and inviting and don’t seem to be extremely aggressive. They also do a good job of breaking up lots of long copy to make it easier to read and understand.
This is completely unorthodox for a university website. As a matter of fact, it kind of feels like a museum or something. But what’s great is that the graphics speak tons for the creativity and exploration that you can get at Biola. The aesthetics of the site are so high so they’ve done a good job of balancing that with nice, small and easy to digest chunks of text as well. This is really another level of web design, let alone college web design.
What makes this website good is that the homepage is a slider for photographs. Of course, this links to different pages throughout the site. This is great because again, many traditional sites have so many things that are trying to get your attention that it’s just nice to go to a site and have control over what you see and what you don’t see. Also, the typography throughout the website is nothing to sneeze at!
Simply put, this web design is beautiful. It’s captivating, interesting and absolutely makes me want to get a passport and travel to the campus in Canada. In all actuality, the layout isn’t too far from what you’d see anywhere else, but the graphics and aesthetic quality is just so high. The use of color and shapes plays a huge part in making Regent College’s web design so exceptional.
Drexel rather surprised me because in my familiarity with the school, it’s nothing to really write home about. But they did something really creative with their web design. It almost kind of reminds you of an agency’s website with the full image backgrounds. They do a great job of keeping it simple and streamlined, while heavily representing their schools’colors.
I saw this web design and almost lost my mind. This is a completely different approach to web design in general, but it absolutely works. There are so many small elements that you could easily look over, but would be missed if they weren’t there. This design exceptional and should be used for inspiration in all web design. I think they know what they’re doing up in Canada.
Sometimes we use different design techniques because they’re trendy and other times we use them because they just make sense. In this case, everything on the UCLA AUD website makes sense. They have a grid-based system, which not only helps organize their work, but also kind of alludes to building stuff–like architects do! The use of color also helps organize things. Overall, you can just tell there was a lot of thinking and planning that went into this website for people who have to think and plan.
Just like Drexel’s web design, this one puts you in the mind of a creative agency’s. And much like a creative agency, RIT used an extremely clean and simple approach to their design. If you browse through the site, there are different elements introduced that continue to keep your attention. This is absolutely important because they are trying to sell their visual communication to prospective students.
Strelka is not your typical undergrad or graduation institute of higher-learning. They are a non-profit organization aimed at educating students who want to use their talents and use them for the greater good. They deal with mainly creative students and get them to think about what’s next rather than what’s right now. Their website is bold yet simple in it’s approach, creating a genuine interest in the work they produce.
The Brandcenter is one of the top advertising graduate schools in the United States. They boast connections with some of the top agencies around today. Because of this, they have to make sure their image is in line with that. They have a really interesting visual brand that generates excitement and promotes creativity. Much like SVA’s site, they don’t concern you with why you should attend the Brandcenter. Instead, they focus on helpful videos and pieces of news for the community.
According to Forbes, Williams College is the #2 College or University in the nation, right behind Princeton. Why is that important? Take a look at Princeton’s website, then take a look at Williams College’s. There’s a great difference in the role of design on these sites. Williams College actually seems like it might be fun to attend, and not your typical, boring private school. Kudos to them for stepping out the box a little!
The D School at Stanford has been making a little bit of noise lately with their academics and connections. They should also be recognized for this wonderful design they have. Everything is spot on from the graphical elements to the use of typography. This is another, all around solid web design.
Stanford twice? Well, they really know what they’re doing when it comes to design. In particular, on this site for the arts, they do a great job of fusing a traditional or typical university site design with some very new elements. In addition, when you browse around, they’ve done a great job of not making it salesy at all. As a matter of fact, looking at content on different pages is very similar to reading a blog or online magazine.
We’re so used to seeing colleges and universities putting academics and information first. It’s a breath of fresh air to see them create ways to combine academia with good and aesthetically pleasing design. It makes the university more attractive and a standout amongst the mundane, typical university website. Education sites have to continue to find ways to appeal to their younger, prospective students and improving designs may just be that way.
What are some of your favorite education websites? What college or university did you attend? Let us know in the comments below.
| Mini Font Bundle: 3 Fonts for only $9! |  |
|
|
