Looking at information graphics (Happify)

Following on from the post about the work of David McCandless, I looked at information graphics from various sources to see how the information was presented.  In particular, graphics from websites such as Happify are related to my own work as they often feature mindfulness, meditation and general wellbeing facts.  It has occurred to me that I can somehow combine the two "paths" I am considering for my dissertation - information graphics and image-type relations - as information graphics rely on a combination of both to inform and persuade, which was a core theme of my research last semester and something that continues to interest me.

This post will concern Happify info graphics, as there was so much to take from them.   I will cover other work from other designers in a further post.

Layout

 Most Happify infographics are long, vertical and scrollable.  The information runs smoothly from one topic to the next through the layout, rather than the subject matter.  The combination of grid layouts keeps things consistent when information is presented in different ways.

 Circular backdrops and consistent patterns help to anchor visuals together, as seen below. This is also done with a square-based layout (above).  These stop the illustrations from "floating" on the page.

One side/other side diagrams help to highlight differences in stats within the same situation.  This could be useful for my own work, as showing a before/after brain could present clearly the results a person would get from practising mindfulness.  Graphical information such as the ration of divorces (below) helps highlight benefits and differences, especially if stark, between situations.

Flow diagrams help to display benefits of doing something, as the arrows give the impression of a result or a consequence of an action. 

Illustrations

Illustrations are very flat and simplistic so as to create enough space between image and text.  They are a little lacking in detail for me, but because there is a lot of information and text I think this is a good thing in this case, otherwise the whole arrangement would be a lot for the eye to take in.  Even though they are simple and in the style of flat design, the colours are mostly high in brightness in palettes that are complementary, so the art complements the text and keeps the arrangement lively.  

 Illustrations directly relate to the text and demonstrate the situation being spoken about, which helps to re-enforce information and make it more memorable.  In the book Brain Rules by Dr John Medina, he writes that "If information is presented orally, people remember about 10% tested 72 hours after exposure.  That figure goes up to 65% if you add a picture."  (Medina, 2009).  For this reason the content and art must be linked in order to communicate the message successfully. 

Concepts like how-to's broken down into simple illustrations makes them seem easily achievable and the reader can understand the steps of the process better, especially in relation to the end goal (above).  How-to's can seem boring and instructional at times, so illustrating them in a charming, simple style brings a more personable element which makes taking in the information not only easier, but more enjoyable too. Some illustrations are small and icon like to get an idea across in a strightforward manner.  Elements of pictogram art are used so that the subject of the illustrations are instantly recognisable to the eye and the mind.  Breaking up sentences into illustrated titbits, as also seen below, helps to break down a list of informations so that it is viewed as interesting and perhaps exciting, rather than another chunk of information to be digested.

Similarly, illustrated flow or cycle charts help to make the process easier to understand and frankly less boring!  This approach is good if there is a list.

Typography

The body type is sans serf but rounded, so easy to read on screen as it has enough weight to it.  In some of Happify's information graphics there is a mix of sans serif and a cursive/decorative script font, which in the case of the images below links to the subject of romance.  Some areas of the infographic are heavy on text, which can interrupt flow and the eye can rush over words, so it is important to keep the little snaps of information consistent.  If the reader is anything like me, they will not have an amazing attention span (blame all this fast-paced technology!) and when I  get used to reading short titbits of information as seen below, I keep expecting that and tend to scan over the bigger chunks of text.  

A decorative header font creates some really nice breathing space from the consistent body font.  My ow work pieces have the same font family for the title as the body, but I may change that after looking at these.  

Highlighting of information

Important statistics are highlighted in bold and often oversized.  For example, the "50%" in the image below is bigger and punchier compared to the rest of the text in the image, die to size, colour and drop shadow.  The use of numerical statistics helps to break down information/quantity it to some degree, which can make it easier for people to wrap their heads around.

The images below are cool because they have the numbers, but also the percentage in a ring chart.  This  gives another layer to the information.  Because the results stem from the same subject (in this case, people who have a best friend at work), it is useful to present the information in a fresh way - they all  need to be separate pieces of data under the umbrella of the one subject, so using quantity values alongside the illustrations to distinguish them works well here. 

Using graphs has the same effect.  Graphs are a way of presenting data which most people instantly recognise as a way of quantifying information, and the relationship between the values shown in the graph is immediately clear.  Graphs can be glanced at and understood very quickly without perusing the information, so they are well suited to information graphics.  

Bar graphs which use symbols to represent values are a novel way to present the data - they hold all the benefits of a traditional bar graph while directly relating visually to the subject, and in the case above, could be considered part of the illustration. 

Language Used

"Personable chat" is used throughout so that the information reads in Layman's terms.  There is nothing worse than dry language when reading up on a subject you are trying to learn about, so I think this is important when handling lots of science jargon as I will be!

Using applicable examples helps the data look more valid, as shown above.   It's much easier to envision the data in a "real world" setting if real world examples are used, particularly people.  Similarly, the examples of benefits below is shown in the ways that it relates to a person, rather than a body part such as the brain.

Every infographic has a list of sources at the end, which while not usually read through, backs up the credibility.  

In my next post I will look at the work of other information designers to explore different approaches in illustration and typography, as well as how they are laid out.  I have also had Visual Language for Designers: Principles for Creating Graphics That People Understand by Connie Malamed and Language and Typography by Cal Swan delivered so those will be helpful reading.

References

All images are screen shots taken from the following info graphics on Happify.com:

Happify, 2014.  How Science Can Help You Stick To Your Goals [online] Available at:
http://my.happify.com/hd/how-science-can-help-you-stick-to-your-goals-infographic/
[Accessed 16th Feb 2015]

Happify, 2014. The Science Behind A Happy Relationship [online] Available at:  http://www.happify.com/hd/the-science-behind-a-happy-relationship/
[Accessed 16th Feb 2015]

Happify, 2014.  Benefits of Friendship Infographic [online] Available at:  http://my.happify.com/hd/benefits-of-friendship-infographic/
[Accessed 16th Feb 2015]

Happify, 2014. What Every Introvert Needs To Know To Be Happy and Successful 
[online] Available at:
http://my.happify.com/hd/what-every-introvert-needs-to-know-to-be-happy-and-successful/
[Accessed 16th Feb 2015]

Happify, 2014.  A Skeptic's Guide to Meditation [online] Available at:
http://my.happify.com/hd/skeptics-guide-to-meditation-infographic-dan-harris/
[Accessed 16th Feb 2015]