The best examples of using interactive infographics on landing pages. Infographics: Job Types, Job Examples, Future Draw It Yourself: How Household Income Predicts a Child's Chances of Going to College

The future of data visualization is interactivity.

But how do you create truly stunning interactive infographics?

Infographics are ubiquitous and have become increasingly interactive lately.

In today's article, we will share with you the secrets of creating interactive infographics, as well as links to useful resources.

1. Understand psychology

Before making an infographic interactive, it's important to understand why you want to make it the way it is.

As detailed in this infographic, people perceive visual information better. We are much more likely to read, understand, and memorize a presentation if it contains engaging visuals. is an effective learning tool, but it can get even better.

Kinetic learning is a great alternative, as humans absorb information better through physical actions.

That's why adding interactivity to a promising visualization field can help you create even more memorable and effective infographics.

This combination of visual and kinetic approaches makes animated infographics the content of the future. Of course, for some themes it is better not to use interactive elements, but in most cases they will only improve the content.

Movement adds meaning to information, empowers the user to control the experience, and engages the imagination in a way that static infographics cannot.

2. Add scrolling effects

In the past few years, infographics have evolved from static images to rich interactive experiences with animation and video elements adapted to unique content. It is no longer limited to pre-built, generic templates. And today's collection contains the best infographics to showcase what an interesting and informative experience looks like.

Most of the infographics on this list have been selected to show different ways with which designers approach data visualization. However, there are also several “hybrids” here, illustrating blurring the lines between infographics and rich multimedia experiences while creating engaging content and compelling stories on landing pages. Departure from traditional forms means we are entering a more complex media landscape, and it is this kind of experimentation with technology and storytelling that will be critical to shaping the future of graphic design.

1. Map of winds

The Wind Map is a spectacular design that shows the direction and speed of the wind over the United States. This design has an artistic rather than a utilitarian purpose, which is great: it’s very nice to just sit and watch the thin threads twist around the map. A simple yet well thought-out example of how infographics showing the paths of shapes benefit from animation and motion graphics.

2. In flight

In 2014, The Guardian launched an In Flight infographic showing real-time data on commercial flights (it seems that the information is not updated now, which is a pity), as well as a lesson on the history of aviation. Subdued conversations between the flight crews at the start of the interactive show create a special atmosphere. It seems like infographics are slowly turning into cinematic experiences these days. At least "In Flight" points to this direction ...

3. Dial the moon

Not much happens in the Dial A Moon infographic, but it serves its purpose quite well. In 2015, thanks to NASA, the lunar phase infographics were updated every hour, and you could not go to Google in search of this mysterious information. Now you can view the pictures by manually entering the month, day and time.

4. Day with Pluto

Nature magazine publishes many interesting infographics for its science-interested audience. Among them was one about the famous flight of a spacecraft near Pluto (24 Hours Of Pluto). The infographics included many text information, but the visuals provided an easy understanding of the most interesting, from the structure of a dwarf planet to the formation of its moons. Now the text part is available on the Internet, as well as two animated videos from the infographics.

5. How American homes have changed

Take a journey through the great American dream, reflected through evolution in house styles. This well-illustrated infographic allows you to get behind the wheel of a car (also changing its appearance as you scroll to keep up with the era) and navigate from the 1900s to the 2000s, driving past popular buildings for decades. Along the way, you will encounter a wealth of useful material (including the socio-political conditions of the time, as well as trends in fashion), and it all ends with a question that prompts you to envision the future of the American home. The Decades Of American Homes infographic is a great example of horizontal scrolling, and it fits in here.

6. The evolution of marketing analytics

In its Evolution of Insight infographic, the intelligent user research company Vision Critical tracks the evolution of the marketing technology market around the world from the 1890s to the present day. It functions similarly to the How American Homes Changed infographic, and thus allows you to compare the effectiveness of using an interactive timeline for two very different stories. The Decades Of American Homes infographic has the advantage that viewing houses as you drive is far more intuitive than traveling through great American analytics. Good infographics are created with the content in mind, not around it.

7. The rights of the LGBT community around the world

The Guardian grabs another position on our list with this elegant infographic explaining the legal situation of LGBT rights across a range of issues (marriage, workplace discrimination, hate crimes, etc.) in every nation in the world. Moving in a semicircle provides a quick and easy way to compare statistics between different countries and the infographic composition keeps the global status in the foreground in the center. There is also a powerful call to action here that aims to bridge the gap between simple awareness and activism.

8. Inequality is fixable

Another great example of interactive infographics, Inequality Is Fixable invites the audience to immerse themselves in the problem, making it deeply personal. The viewer is guaranteed not to lose interest in the material telling him or her how much his / her boss is underpaid and why. By making the user a part of the story, the developers whet curiosity and walk the user through all the necessary steps right to the call to action (Call-To-Action) at the end.

"We let it happen - how can we fix it now?"

9. Draw Yourself: How Household Income Predicts A Child's Chances of Going to College

Many of the infographics on this list use animation and interactivity to provide a rich experience. Visually, this infographic from The New York Times (You Draw It: How Family Income Predicts Children’s College Chances) adheres to the classic chart format, but it also uses insight into user behavior to expand the field of infographic design, such as proactive and interactive visualization. By asking readers to draw their own curve, they introduce an element of self-interest and thus provide people with really valuable information.

Not the worst result! The vertical axis is the percentage of children who go to college. Horizontal axis - parental income percentile

10. How Americans die

Except for the title image, this example uses mostly good old-fashioned diagrams to render content. But this is not boring at all, since users can independently navigate through the data by moving the cursor along the graphs. This makes it much easier to compare, for example, the number of deaths associated with suicide in the 70s versus the current one (hint: it is on the rise now), a static chart would not have handled this so neatly.

11.

Ever since its debut Project Snowfall, which earned everyone's attention and accolades, the New York Times has maintained its reputation as a leader in multimedia journalism. The publishing team uses a combination of infographic design and in-depth storytelling to create an impressively engaging experience. They have more vivid examples, but The Russia Left Behind is a work that has caused a certain resonance. The infographics function like an interactive tour of Russia (you make your way on the map).

12. Bond cars

If you ever want to get acquainted with the history of James Bond by looking at his cars, then thank the British car dealer Evans Halshaw - he gave you such a chance. Its interactive Bond Cars infographic allows you to explore the model and design of each of the Bond cars, as well as some additional interesting facts... Using the ubiquitous slider tactic, you can also "reveal" the car in all its metallic glory (only a single color pattern is given by default). So the authors creatively solved the problem of the need to include photos that do not quite fit the aesthetics of infographics.

13. Colors of movement

The Colors Of Motion is an infographic series that analyzes films only by their color palette, derived from the combination of all frames. If you've ever wondered, now you have the answer. Can't find the title in the database? Just send a message to the developers - they are accepting requests.

14. Royal tomb in Peru

National Geographic has a pretty impressive collection of what they call it, "interactive graphics" (most of which are accompanied by detailed text descriptions as in the case of Trajan's Column), but we chose this relatively simple example to highlight which techniques are really effective in interactive infographics. "The Royal Wari Tomb" (Peru's Royal Wari Tomb) reveals the peculiarities of the burial of a noblewoman of those times. The focus shifts from winding the mummy to its decoration and position. By separating information into small pieces and allowing the user to navigate between them, interactive graphics avoid the most insidious pitfalls: data overload and visual effects. Moreover, each subsequent interaction expands the experience, making it much more rewarding than if everything was presented at once. Our brain has a mechanism that rejects suppressive stimuli, and this type of interaction becomes an excellent solution for the user, making it easy to absorb information.

15. What is the Scottish Referendum? Explanation for non-British

The Guardian, like the New York Times, relies on multimedia journalism, and their video copes with one of the main functions of infographics: to give bulky information an acceptable form. For many of us outside the UK, the referendum is a very confusing topic. Fortunately, this video (Scottish Referendum Explained For Non-Brits) will help you quickly learn about its important aspects without requiring a deep dive into the history.

16. Public health

The Atlantic was tasked with developing a vision for improving public health. It commissioned Truth Labs to transform the 3-part series on Population Health into digital storytelling. The primary goal of the artist was to maintain the natural scrolling of the document and the user's normal reading experience, while creating an experience that was different from the visual perspective. To bring this vision to life, they borrowed tools and strategies from cinematography, but also focused on a set of design principles to support the principle of readability as a key rule.

17. Joho's grains

Austrian coffee maker Joho "s created an impressive multimedia experience Joho's Bean to tell the story of the origin of the coffee beans. The narrative harmoniously combines audio, video and photographic material that engages almost all of the user's senses. the chirping of birds, the sound of bagged roasted coffee beans, and the noise of the busy streets and traffic in the city.

Joho's takes you on a journey explaining the origin of their coffee beans

18. Primordial road

The Wild Path is an interactive travel story created with Canvas. The main element is the map, which animates the path on the map when scrolling the page. The project may not work in all browsers. But it is accompanied by an accompanying article that explains all the technologies behind the scenes for creating infographics.

19.

The Guardian's (Live Election Results) coverage of the 2016 U.S. presidential election brought a fun element to the serious matter of percentages and polling stations. Interactive infographics tracked votes in four states. By default, the graph showed the results for the whole country, and if the user hovered the cursor over any area on the map, it was shown which numbers the candidates typed there. The presidential candidates were presented as funny pixelated avatars. As the infographics were updated in live time, the little men tinted the states in which they won. From time to time, a quote of the candidate would appear in a bubble next to the candidate.

Reflection of election results in real time

The trick of virtual reality is that to others you will look like an idiot.

Google's Cardboard Design Lab is a good “tutorial” for aspiring virtual reality designers

Infographics are like an adventure game

The problem with Unity is that it's not easy to do a good thing on the web.

Virtual reality is like headphones for your eyes

Virtual reality requires a safe environment, you cannot go into it on the go. This limits the possibilities of VR

Closed the session in the morning Archie tse from The new York Times with the provocative theme “Why NYT Does Less Interactive Work”.

NYT's work is based on three rules of visual storytelling:

If the reader needs to click, not scroll, then something out of the ordinary must happen.
Assume that tooltips and any other hover effects will never be seen by anyone. If the content is important, make it so that the reader sees it right away.
If you want to make something interactive, remember - it will be expensive to make it work on all platforms.

You will have to redraw your graphics 2 or 3 times for everything to work on both desktop and mobile

How these rules changed NYT's approach:

Most renderings are now static
More texts
If you need movement in the picture, it appears during scrolling

(The fourth point says that they are still doing interactive work. But now the reason should be VERY meaningful).

We did "multi-step" steps. Users stopped at step 3. Readers just want to scroll, not click

Archie Tse: Scrolling Vs. clicking

For 18 weeks, Andy Kriebel has been publishing infographics and data every Sunday night on VizWiz. The task is to allocate about an hour of time during Monday, quickly analyze the visualization and make your own version.

Below we publish the results of last week - Slavery in the XXI century.

#MakeoverMonday by Andy Kriebel. Detailed description and interactive - on Andy's blog:

#MakeoverMonday by Andy Cotgreave. Detailed description and interactive - in Andy's blog:

I also learned that 51% of the people in the world are younger than me, and 63% in Russia are older, and that my chances of dying right now are not so great. The numbers suddenly ceased to be "statistics" and hit me on the fast track.

Data visualization - Uses large datasets with less manual design work; based on algorithms. For example, the interactive work of the New York Times.

Visual arts - unidirectional coding. Beautiful but hard to decipher visualizations, such as the computational art of Kunal Anand.

What is the problem?

As a result, many works attract only sophisticated users, but do not allow uninitiated readers to understand the essence of the issue, thereby harming the purpose of visualization - to inform the public. That is why it is so important to understand and understand the problem of visual literacy in the context of visualization.

New "visual grammar" of journalism

Here are three examples that are experimenting with ways of presenting interactive journalism. They look impressive, but their interpretation can be a daunting task for many.

Gay rights in the United States, state by state

The number of data sources available today and tools for their processing in itself already clearly shows that so many people have never tried to get comfortable in the world of data visualization. And when there are so many materials available for study, there is only one question "Where to begin?" can scare every newbie. So what are the best libraries and what do the professionals advise? This is what will be discussed in this article.

Talking about data visualization and not mentioning it is like talking about the history of creation. personal computers and never say a word about Steve Jobs. D3 (Data Driven Documents) is, without exaggeration, the most important and dominant open source JavaScript library on the market. source code which is commonly used to create SVG graphics. SVG (Scalable Vector Graphics) is, in turn, a vector image format supported by web browsers, but previously little used.

The D3 library owes much of its popularity to the sudden interest in SVG on the part of web designers, which is largely due to how winning vector graphics look on high-resolution screens (in particular, Retina-displays used in Apple devices), which are becoming more common.

“Let's be honest, if the task is SVG-based data visualization, then all the other libraries weren't even close to solve it,” says Moritz Stefaner, independent data visualization expert and company owner. Truth & Beauty... “There are also quite a few interesting D3-based projects, such as NVD3, which provides standard graphics components — ready to use but customizable; or, say, Crossfilter is simply an outstanding data filtering tool. "

Scott Murray, programmer-designer and book author Interactive Data Visualization for the Web, I agree with the previous opinion: “D3 is extremely powerful in that it uses everything that browsers have to offer. Although this has a downside: if the browser does not support something, for example, 3D images based on WebGL (from the English Web Graphics Library), then D3 will not support it either. "

Although this library is truly versatile, it is still not the ideal solution for every task. "The main drawback of the D3 library, so to speak, is that it does not prescribe or even offer any specific rendering approach," adds Scott Murray. "So it really is a tool for loading data into a browser and then generating DOM components based on that data."

While D3 is a great toolkit for custom images, if you want to create a standard graph without much visual work, then a tool like Vega... As a D3-based framework, Vega provides an alternative for displaying graphical components. Using Vega, you can visualize JSON data European Journalism Center and Data Driven Journalism project. The exact dates of the course are not yet known, but you can register now.

In five days, course participants will be able to learn what data journalism is, how it works, and what key skills are worth mastering to become a specialist in this field. Figure out where to look for data to support your stories and how to find new ideas in the data. Learn the art of turning boring data into a compelling story, infographic, or even interactive visualization. Get acquainted with the basic principles of graphic design that a journalist needs to know.

The course instructors are five of the world's leading experts in data journalism and visualization.

You've probably noticed a massive shift in the online world from text-based content to visual content.

There is no denying the power of visuals on the Internet and in our daily lives. On YouTube and Instagram, visual content dominates; YouTube is the 3rd most visited site on the web, with over 80 million photos posted on Instagram every day.

Blog posts and articles are 80% more "consumable" if they have color images, headers or thumbnails, and people will spend no more than 15 seconds on a site if it doesn't grab their attention from the first seconds.

Infographics are a favorite among audiences and sellers, and are 800% more interesting to people today than they were in 2012.

On top of that, content is being created at an alarming rate - 60% of marketers create at least a small chunk of new content every day! You can find out more in the overview article.

As more and more people create content, something is becoming clear: in order to be seen, you need to stand out.

Naturally, content marketers are already thinking about the future of visual content, figuring out what they can do now, what they can do, and what new technologies are already on the horizon. This kind of forward thinking is something that can create everything or destroy all of your content marketing efforts; you have to adapt, or you will drown.

With visual content like infographics, marketers are uniquely positioned to see the future as it gets closer. Companies, graphic designers, and marketers are all starting to use infographics - updating them to make them even more appealing to their audiences. Even if you already “just post” infographics on a regular basis, it’s never too early to know about trends that are just starting to develop, just as it’s not too early to know how to implement them in your content marketing strategies.

If you want to look into the future, and maybe even learn a few tricks before everyone else, now is the time!

Here are three types of infographics that will be the most common in the (near) future.

If you're looking for a cool infographic tool, I recommend checking out Visme. For starters, they offer a free account and great handy features for non-design people. You can get a free account now.

1. Interactive infographics

While we see the beauty of interactive websites and easy-to-use games, interactive infographics are still fairly new in their field. Like infographics, they obviously contain some information, and they are usually dynamic. But using interactive elements gives users the ability to connect with information and create their own.

Regardless of your business, product, service, or message, you can create interactive infographics that allow people to rate themselves (for example, “Calculate your BMI here”). Users can also click on relevant information, which will send them to a more deeply targeted resource, or back to the landing page, thereby generating traffic. This is a highly adaptable and fun way to engage your audience.

Many marketers have already adapted to this type of infographic, and it gets passed on quickly. But at the same time, many, nevertheless, take as a basis simple infographic:

.... just imagine what else you can do with interactive infographics.

You can try:

Using scrolling techniques that make images or shapes stand out from the background
Building "pop-ups" that expand areas of text
Floating images or statistics when you click on them
Turning your infographics into multiple pages that users can view

For a more detailed example of interactive infographics, take a look at this one:

To make your infographic highly interactive (with scrolling, pop-ups, etc.) you will need to learn a little about HTML5 or CSS, or hire someone else to figure it out for you.

Despite the extra effort, you will be rewarded with a unique, engaging, and effective piece of content.

Why should you try to implement infographics in the near future?

It encourages your audience to engage and share with your content.
This generates traffic (via links)
It proves to your audience that you are innovative, resourceful, and committed to delivering timely and engaging content.
There are levels of interactive infographics that drive its development.

2. Embedded video and GIF

This is another type of infographic that we see more and more often today. Infographics offering short videos or even GIF (Graphics Interchange Format) - great way grab attention and make your infographic stand out from the crowd. While this limits platforms, you can share your infographics in real time.

Many simple infographic tools such as Easel.ly offer an “Embedded YouTube Video” option, or you can add video to infographics you create in Photoshop using a video layer. You can even add a video to your Powerpoint slide, which you can also turn into infographics.

What's more, you can find millions of GIFs on the net and insert them in the same way. The catch here is that you'll have to distribute your infographic as a URL to make sure it's properly embedded in your site. You may not distribute or save such infographics in .jpeg or PDF format. Undoubtedly, as this becomes more and more popular, there will be other video and gif insertion tools to make the process even easier.

But if you want to use this type of infographic before everyone around you, and even their dogs, learn how to do it, start now with the tools you find online.

If you want to take it to the next level, you can make a video from the infographic you already have. This is a great opportunity to be seen on YouTube, Instagram, and even on video platforms like Vimeo, Snapchat, and others. The video below is a great example of how to turn an infographic into a video.

Why embed videos or GIFs in infographics?

This gives you an element of surprise - people don't expect the picture to start moving!
It's a lot of fun and original, which increases the chance that people will interact and share your infographic.
it good way show everyone the uniqueness of your brand

3. Animated infographics

Animated infographics have a huge number of visual models and require a lot of attention. When a user views a page, they usually don't expect anything to move, so it's a good idea if you learn all of these techniques before everyone else does.

Due to the fact that many animated infographics are quite complex and may require some kind of graphic design, coding, and / or software knowledge, they are highly regarded.

Here's an example of what I'm talking about:

If you'd like to learn more about how to create animated infographics, check out this infographic from Tabletop Whale. You can also find various services that help you create infographics of this kind. In any case, this is one of the most difficult processes in the evolution of infographics.

Why should you spend your time, energy and / or money creating animated infographics?

It will actually set you apart from the crowd, because not everyone has access to this kind of software or content
In a couple of years it will be commonplace - you will be one of the first to do it!
Animation will make information inside infographics more memorable
It will inspire your users to work with you.

All this is not science fiction

It may sound too technical and seem like something out of your reach now, but it is likely that these types of infographics will become very common in 2-3 years. We can already see a strong breakthrough in animated infographics and GIF infographics, especially as the popularity of GIFs continues to grow. Infographics are becoming one of the most consumed and most frequently created types of content on the Internet. Why? Because the brain only needs 250 milliseconds to receive and process the value of a symbol.

If the average person spends about 15 seconds on a website and then starts to get bored, then of course you will want to pull up anything that might delay them - or at least get a message in 15 seconds or less. Some studies have even proven that people can focus on something for no more than 8 seconds, and this figure decreases every year.

This is the reason and possibly a by-product of our constant need for information. We live in the information age and all information is available to us. But it also means that the more people try to share messages and reply to all possible questions, the more generated content becomes background noise.

If the availability of infographics is an indicator today, then soon they will be everywhere. This means new changes in your work. No marketing campaign in history has been successful by doing the same thing all the time.

The idea here is to see more than a jpeg image in the infographic. Infographics can be adapted to different environments and used on a huge variety of platforms. Entrepreneurs and marketers have already seen the potential in this. And you?