Infographics: types, examples of work, future. The best examples of using interactive infographics on landing pages Interactive infographics examples

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 Everyday life. YouTube and Instagram are dominated by visual content; YouTube is the 3rd most visited site on the web, and Instagram has over 80 million photos posted every day.

Blog posts and articles are 80% more likely to be consumed if they have color images, headlines or thumbnails, and people will spend no more than 15 seconds on a site if it doesn't grab their attention right away.

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

On top of that, content is being created at an alarming rate - 60% of marketers create at least a small amount of new content every day! You can learn more from the review article.

As more and more people start creating content, one thing 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, considering what they can do now, what they can implement, and what new technologies are on the horizon. This type of forward thinking is what can make or break your content marketing efforts; you must adapt or you will drown.

With visual content like infographics, marketers have a unique opportunity to see the future as it approaches. Companies, graphic designers, and marketers are all starting to use infographics and update them to make them even more attractive to their audience. Even if you already “just post” infographics regularly, it's never too early to learn about trends that are just starting to develop, just as it's never too early to learn how to implement them into 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 the three types of infographics that will be most common in the (near) future.

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

1. Interactive infographics

While we've seen 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 opportunity to connect with information and create their own.

No matter your business, product, service or message, you can create an interactive infographic that allows people to rate themselves (for example, “calculate your BMI here”). Users can also click on related information, which will take them to a more in-depth resource, or back to landing page, thereby creating traffic. It's a very adaptable and fun way to engage your audience.

Many marketers have already adapted to this type of infographic, and it transfers quickly. But at the same time, many still take as a basis simple infographics:

….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
• Constructing “pop-up windows” that expand text areas
• Images or statistics pop up when you click on them
• Turn your infographics into multiple pages that users can view

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

To make an infographic highly interactive (with scrolling, pop-ups, etc.) you'll 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?

• This encourages your audience to engage with and share your content.
• This generates traffic (via links)
• This proves to your audience that you are innovative, resourceful, and intend to provide timely and interesting content.
• There are layers of interactive infographics that make its development manageable

2. Embedded video and GIF

This is a different type of infographic that we are seeing 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 is limited by platforms, you can share your infographics in the present tense.

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

Moreover, you can find millions of GIFs online and insert them in the same way. The catch here is that you will have to distribute your infographic as a URL to ensure that it is properly embedded into your site. You may not distribute or save such infographics in .jpeg or PDF format. No doubt, as this becomes 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, even their dogs, learns 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 an infographic you already have. This is a great opportunity to be seen on YouTube, Instagram, and even 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 a video or GIF into an infographic?

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

3. Animated infographics

The animated infographic has great amount visual models and requires 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 these techniques before everyone else does.

Because many animated infographics are quite complex and may require some kind of graphic design, coding, and/or software knowledge, they are highly prized.

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

If you want 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 invest your time, energy and/or money into creating animated infographics?

• This will actually make you stand out from the crowd because not everyone has access to this kind of software or content
• In just a couple of years this will be commonplace - you'll be one of the first to do it!
• Animation will make the information inside the infographic more memorable
• This will inspire your users to work with you.

This is not science fiction.

This may sound too technical and beyond your capabilities right now, but it's likely that these types of infographics will become very commonplace in 2-3 years. We can already see a strong breakthrough in animated infographics and GIFs, especially as GIFs continue to grow in popularity. Infographics are becoming one of the most consumed and most frequently created types of content on the Internet. Why? Yes, because the brain only needs 250 milliseconds to accept and process the meaning of a symbol.

If the average person spends about 15 seconds on a site and then starts to get bored, then you naturally want to pull up anything on the screen that might hold them back - or at least get a message in 15 seconds or less. Some studies have even proven that people can concentrate on something for no more than 8 seconds, and this figure is decreasing every year.

This is the reason and perhaps a by-product of our constant need to receive information. We live in the information age and all information is available to us. But this also means that the more people try to share messages and answer every possible question, the more content produced becomes background noise.

If the availability of infographics today is any indication, they will soon be everywhere. This means new changes in your work. No marketing campaign in history has achieved success by doing the same thing over and over again.

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

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

Google's Cardboard Design Lab is a good "tutorial" for beginning virtual reality designers

Infographics - like an adventure game

The problem with Unity is that it's not so easy to make a good thing for 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 what VR can do

Closed the session in the first half of the day Archie Tse from The New York Times with the provocative topic “Why the NYT is doing less interactive work.”

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

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

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

How these rules changed the NYT's approach:

1. Most visualizations are now static
2. There are more texts
3. If movement in the picture is needed, it appears during scrolling

(The fourth point states that they still do interactive work. But now the reason must be VERY meaningful).

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

Archie Tse: Scrolling Vs. clicking

For the past 18 weeks, every Sunday evening Andy Kriebel has been posting the infographic and the data it's based on on VizWiz. The task is to set aside about an hour of time on Monday, quickly analyze the visualization and make your own version.

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

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

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

I also learned that 51% of people in the world are younger than me, and 63% in Russia are older, and that my chances of dying right now are not that great. The numbers suddenly stopped being “statistics” and struck a chord with me.

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

Visual art - unidirectional coding. Beautiful but difficult 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 defeating the purpose of visualization - to inform the public. This is why it is so important to recognize and understand the problem of visual literacy in the context of visualization.

A new “visual grammar” of journalism

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

Gay rights in the US, state by state

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

Talking about data visualization and not mentioning it is the same as talking about the history of creation personal computers and not say a word about Steve Jobs. D3 (from the English 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 (from the English 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 among web designers, which is largely due to how well vector graphics look on high-resolution screens (particularly the Retina displays used in Apple devices), which are becoming more and more common.

“Let’s be honest, if the problem is SVG-based data visualization, then all the other libraries are not even close to solving it,” says Moritz Stefaner, an independent data visualization expert and company owner Truth & Beauty. “There are also many interesting projects created on the basis of D3, such as NVD3, which provides standard graphics components - ready to use, but customizable; or let's say Crossfilter is simply an outstanding data filtering tool.”

Scott Murray, programmer designer and book author Interactive Data Visualization for the Web, agrees with the previous opinion: “D3 is extremely powerful because it takes advantage of everything 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.”

And although this library is truly universal, it is still not ideal solution for any task. “The main drawback of the D3 library, so to speak, is that it does not prescribe or even suggest any particular approach to visualization,” adds Scott Murray. “So it's really a tool for loading data into the browser and then generating DOM components based on that data.”

While D3 is a great tool for custom images, if you want to create a standard graph without much work on the visual aspect, then you might find a tool like Vega. As a framework developed on top of D3, Vega provides an alternative for displaying graphics components. Using Vega, you can visualize data in JSON format 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 they should master 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 existing data. Learn the art of turning boring data into a compelling story, infographic, or even an 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.

The future of data visualization is interactive.

But how do you create truly amazing interactive infographics?

Infographics are everywhere, and lately they are increasingly becoming interactive.

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 you make an infographic interactive, it's important to understand why you want to make it interactive.

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

Kinetic learning is a great alternative because people learn better through physical activities.

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

This combination of visual and kinetic approach 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, allows the user to control the experience, and engages the imagination in a way that static infographics cannot.

2. Add scrolling effects

Over the past few years, infographics have evolved from static images to rich, interactive experiences with animation and video elements tailored to unique content. It is no longer limited to pre-made, one-size-fits-all templates. And today's selection contains the best examples of infographics that demonstrate what an interesting and informative experience looks like.

Most of the infographics in this list were chosen to show various ways, with which designers approach data visualization. However, there are also a few “hybrids” here that illustrate the blurring of the lines between infographics and rich media experiences when creating engaging content and compelling stories on landing pages. Deviating from traditional forms means we are entering more complex media territory, and it is this kind of experimentation with technology and storytelling that will be critical to shaping the future of graphic design.

1. Wind map

The Wind Map is a breathtaking piece of design that shows wind direction and speed over the United States. This design has an artistic rather than a utilitarian purpose, and this is wonderful: it is very pleasant to just sit and watch how the thin, thin threads wind across the map. A simple but well-thought-out example of how infographics showing shape trajectories benefit from animation and moving images.

2. In flight

In 2014, The Guardian launched an infographic called In Flight, which showed real-time data on commercial flights (it doesn't seem to be updated anymore, which is a shame) and also included a lesson on the history of aviation. The hushed conversations between air 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 in that direction...

3. Dial Moon

There's not a lot going on in the Dial A Moon infographic, but it serves its purpose pretty well. In 2015, thanks to NASA, infographics of the lunar phases were updated every hour, and there was no need to go to Google in search of this mysterious information. Now you can view pictures by manually entering the month, day and time.

4. Day with Pluto

Nature magazine publishes a lot of interesting infographics for its science-interested audience. Among them was one about the famous spacecraft flyby near Pluto (24 Hours Of Pluto). The infographic included a lot of textual information, but the visuals made it easy to understand the highlights, from the structure of a dwarf planet to the process by which its moons formed. The text part is now available on the Internet, as well as two animated videos from the infographic.

5. How American houses have changed

Take a journey through the great American Dream as reflected through the evolution of home styles. This well-illustrated infographic lets you get behind the wheel of a car (which also changes its appearance as you scroll to keep up with the era) and navigate your way from the 1900s to the 2000s, passing buildings that were popular during individual decades. Along the way, you'll encounter a wealth of useful material (including the socio-political conditions of the time, as well as fashion trends), and it all ends with a question that challenges you to imagine the future of the American home. The Decades Of American Homes infographic is a great example of horizontal scrolling, and it comes in handy here.

6. The evolution of marketing analytics

In its Evolution of Insight infographic, user intelligence company Vision Critical tracks the development of the marketing technology market around the world from the 1890s to the present day. It functions similarly to the How American Homes Have 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 benefit of seeing homes as you drive along, which is much more intuitive than traveling through the Great American Analytics. Good infographics are created around the content, not around it.

7. LGBT rights around the world

The Guardian grabs another spot on our list with this nifty infographic explaining the legal landscape of LGBT rights across a range of issues (marriage, workplace discrimination, hate crimes, etc.) in every state in the world. Moving around the semicircle provides a quick and easy way to compare statistics between different countries, and the infographic's composition keeps the global status front and center. There is also a powerful call to action here, aiming to bridge the gap between awareness and activism.

8. Inequality is fixable.

Another great example of an interactive infographic, Inequality Is Fixable, invites the audience to dive into an issue while making it deeply personal. The viewer is guaranteed to remain interested in material that tells him or her how much his/her boss is underpaying and why. By making the user part of the story, developers pique curiosity and guide the user through all the necessary steps right to the Call-To-Action at the end.

“We let it happen—how can we fix it now?”

9. Draw for yourself: How family 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 understanding of user behavior to expand the scope of infographic design, namely the technique of proactive and interactive visualization. By asking readers to draw their own curve, they introduce an element of self-interest and thus provide people with truly valuable information.

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

10. How Americans Die

With the exception of the title image, this example uses mostly just plain old charts to visualize the content. But this is not at all boring, 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 suicide-related deaths in the 70s compared to now (hint: it's on the rise now), something a static chart wouldn't do as neatly.

11.

Since Snowfall debuted to widespread attention and praise, The New York Times has maintained its reputation for excellence in multimedia journalism. The publication team uses a combination of infographic design and in-depth storytelling to create an impressively engaging experience. They have more striking examples, but The Russia Left Behind is a work that has caused a certain resonance. The infographic functions as an interactive tour of Russia (you navigate your way on a map).

12. Bond's cars

If you ever want to experience the history of James Bond by looking at his cars, then thank British car dealer Evans Halshaw for giving you the chance. His interactive Bond Cars infographic lets you explore the make and design of each of Bond's cars, plus gives you a few extra interesting facts. Using the ubiquitous slider tactic, you can also "reveal" the car in all its metallic glory (only a single-color design is given by default). This is how the authors creatively solved the problem of the need to include photographs that do not quite fit the aesthetics of the infographic.

13. Colors of movement

The Colors Of Motion is an infographic series that analyzes films based solely on their color palette, derived from combining all the frames. If you've ever wondered, now you have the answer. Can't find a title in the database? Just send the developers a message - they accept requests.

14. Royal tomb in Peru

National Geographic has a pretty impressive collection of what they call "interactive graphics" (most of which are accompanied by detailed text descriptions, such as Trajan's Column), but we've chosen this relatively simple example to highlight the uses techniques are really effective in interactive infographics. “Peru’s Royal Wari Tomb” reveals the peculiarities of the burial of a noblewoman of those times. The focus moves from the mummy's wrappings to its decorations and position. By dividing 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 enhances the experience, making it much more rewarding than if everything were presented at once. Our brain has a mechanism that rejects overwhelming stimuli, and this type interaction becomes an excellent solution for the user, making it easy to absorb information.

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

The Guardian, like the New York Times, is committed to multimedia journalism, and their video does a great job of one of the main functions of infographics: putting cumbersome information into manageable form. For many of us living outside the UK, the referendum is a very confusing topic. Luckily, this video (Scottish Referendum Explained For Non-Brits) will help you quickly learn about the important aspects without requiring you to dive deep into the history.

16. Public health

The Atlantic's mission was to develop a vision for improving public health. It commissioned Truth Labs to develop a 3-part series on “Population Health” into digital storytelling. The artist's main goal was to preserve the natural scrolling of the document and the user's normal reading experience, while creating an experience that differs from a visual perspective. To bring it to life, they borrowed tools and strategies from film, but also relied on a set of design principles to support readability as a key rule.

17. Joho’s grains

Austrian coffee producer Joho's has created an immersive multimedia experience, Joho's Bean, to tell the story of the origins of the coffee bean. The narrative seamlessly combines audio, video and photography to engage almost all of the user's senses. As you follow a farmer through a coffee plantation, you hear , the sound of birds chirping, the sound of roasted coffee beans being packed in bags, and the sound of busy streets and traffic in the city.Total immersion!

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

18. Pristine road

The Wild Path is an interactive travelogue experience created using Canvas. The main element is the map, which animates the path on the map as you scroll the page. The project may not work in all browsers. But it comes with an accompanying article that explains all the behind-the-scenes technologies for creating infographics.

19.

The Guardian's coverage of the 2016 US presidential election (Live Election Results) brought a fun element to the serious business of poll numbers and polling stations. An interactive infographic tracked votes in four states. By default, the graph showed results for the entire country, and if the user hovered over an area on the map, it showed which numbers the candidates scored there. Presidential candidates were presented as funny pixelated avatars. As the infographic was updated in real time, the people colored in the states they won. From time to time, a quote would appear in a bubble next to the candidate.

Reflection of election results in real time