Interactive Infographics

Let’s be honest, nobody wants to stare at their computer screen forever reading facts, information, charts or what have you in order to understand a point. It’s monotonous, taxing, and just plain boring to try to digest information this way.

Cue interactive infographics!  

An infographic is exactly what it sounds like—information displayed in more interesting, graphic terms. It can be an illustration, photograph, animation, or other visual way to represent a topic. Infographics not only make facts and information easier to digest and comprehend, but they also add a level of entertainment for the user. Interactive infographics are a balance of visual (graphic) and kinetic (interactive) learning that encourage engagement in order to make sense of the information at hand.

This blog on Creative Bloq lists some additional resources and tips to keep in mind while creating interactive infographics in order to maintain the reader’s interest and make the information as easy to understand as possible. Some of the tips are as follows:

  1. Understand the psychology: it helps to have a clear idea in your head of the purpose of your infographic before you start designing. Why and how would an infographic be the best way to display the data?
  2. Add spice with scrolling effects: if scrolling is required, make it fun for the user! Add transitions, animations and other subtle effects that draw the users into the story you are trying to tell and make them want to stick with it to the end.
  3. Make multiple pages for easy digestion: if the information has more distinct sections, it would be beneficial to create a multipage interactive infographic. This allows users to move through one section of information at a time to comprehend gradually, or simply skip to a specific area of interest.
  4. Let users highlight certain areas: this is helpful when there is a large amount of information so the viewer can focus in on what they want to see. This feature is helpful to minimize confusion for a user who is easily overwhelmed or distracted by a ton of information.
  5. Make clicks and rollovers reveal further detail: Instead of looking at an extensive chart or graph, users can hover over certain areas to reveal the specific information they need.
  6. Encourage user participation: some infographics encourage the user to input their own information to display personalized facts or data. It’s compelling for a user to see a more individualized and unique display of information when they know they had some sort of influence in it.

For example, Arnold Clark’s infographic uses simplistic graphics to deliver the information at hand in a relatable way. It’s a good example of using scrolling effects to add interest and keep a constant flow of information. If the user needs to stop the animation at all, they can do so with the scroll bar and arrows and even scroll at their own pace. There is also a link in the lower right hand corner that is always visible and available for the user to click to get more facts about the challenge in a static format.

Arnold Clark Savings Challenge

Another solid example of an interactive infographic is the Evolution of Insight, which is an interactive timeline. It not only displays the information in a more pleasing way, but it also portrays the setting of the era in the background, which is an additional visual element to help comprehend the overall feeling of the time period. The viewer can use the arrows to move along the timeline to gain information sequentially, or they can skip ahead to a certain era by clicking on the timeline below. Even if they skip ahead, the background still displays the setting shifts throughout the years, so the scene flows and they can be sure not to miss anything important.

Evolution of Insight

As we see a shift from static infographics to interactive infographics, will be plenty of great examples out there to find inspiration. Interactivity makes information more easily understandable, relatable, and exciting for the audience.

Advertisements

E-Cards

E-cards are digital versions of cards that are sent online. They often involve some sort of movement or animation to add an extra element of interest for the viewer. E-cards can be used for solicitation purposes, holiday wishes, general greetings, or sending other information.

Solicitation

E-cards are a good source for solicitation because they can provide a variety of information in an interesting, fluid way and they often lighten the mood to make the ask for something such as a donation.

Like many other colleges and universities, Columbus School of Law sends out solicitation e-cards to alumni around the holiday season asking for gifts. This one from 2013 is a successful example of how a solicitation e-card should be. The text is legible, easy to read, displays long enough and is worded in an appropriate manner for the message to get across without being too obtrusive. The e-card is consistent in its design throughout the animation and the audio compliments the tone. It also has links available to make a gift, visit the alumni page, and connect with them on social media, as well as the option to replay the video at the end. All of these elements combine to send a clear and effective message.

Solicitation

Thank You’s

JibJab is a great resource for e-cards. They have multiple different categories to choose from for holidays, celebrations and just regular greetings. The element that makes their cards fun and successful is the fact that you can personalize them. Many of the templates allow you to upload your own pictures so that your face, or the face of someone you choose, is featured in the animation. That is why their thank you cards especially are so strong. Allowing the receiver to see your personal touches makes the message more individualized and meaningful.

JibJab        Thank You

Emotions

Just like paper cards, e-cards are successful at fostering different emotions depending on the occasion. Some of the tones that e-cards can convey include:

Humor

Who wouldn’t want to receive a birthday card with dogs barking and singing the happy birthday song? The imagery, audio and overall concept of this birthday card makes it happy, playful and funny.

Humor

Inspiration

Sometimes people need a little motivation to keep them going. This e-card is a fun way to send a little inspiration someone’s way to cheer them up. The combination of the audio shift, the typography and the turtle’s actions provide a sense of motivation and perseverance.

Inspiring

Empathy

Sometimes fun, playful, humorous cards are not appropriate for the situation. With the proper audio and text, e-cards can take on a more serious tone and be used for more sentimental purposes, like sympathy or empathy.

Empathy

As you can see, e-cards can be used for a variety of purposes, from solicitation to greetings to sharing information. There are many online resources you can use to choose, personalize and send your own e-cards for whatever purpose you see fit. Or you can always try your own hand at creating a one-of-a-kind e-card from scratch!

Web Banner Advertisements

It’s hard to go on the internet at this day in age and not see some sort of banner advertisement on your screen. However, we’re moving past those days of tacky, annoying and intrusive banners that get in your face and ruin your browsing experience and you wish would just disappear. Web banners are improving and renewing their purpose. When designed well, they provide a great opportunity to showcase creativity, catch people’s attention and get them to interact positively with the message.

This helpful post on Bannerflow explains “Display advertising itself has evolved from mere static images to one of the biggest branches of online marketing that incorporates a whole spectrum of technology from video to rich media ads and more.” This method of advertisement can be exciting, playful, humorous and interactive. This blog on MonsterPost has tons of examples of successful banner advertisements to show how this field of media is changing and developing positively.

Web banners can be appear in all different sizes, as shown in the JMCA Media Ads chart below.

banner size chart

If you’re looking to create your own web banner advertisement, here are some basic things to keep in mind:

Keep it simple: Too much information can become overwhelming and hard to grasp. Many good designs are clean, simplistic and straightforward to get the point across.

Limit duration: Any animations or movements should be limited to 15–30 seconds maximum. Your viewers won’t want to sit there much longer than that, and you’ll lost their attention before you get to your final point.

Consider readability: Don’t include too much text and consider the font size as well, make sure nothing is too small to easily read. If you have moving text, make sure it displays long enough so it can be read through twice in order for the reader to grasp the information.

Separate yourself: Your banner should have defined edges so that it doesn’t blend into the content of the webpage. Find the balance to help it stand out on its own, but not be too intrusive and tacky that the viewer wishes it would go away.

And please please please don’t forget basic design principles to avoid creating something like this…

ugly banner

Check out a helpful presentation on Slideshare for more in depth tips with visual examples to help you create a successful web banner.