SPEAK VISUALLY Receive practical tips on how to
communicate visually, right in your inbox.
Have you run out of ideas for catching your audience’s attention? Have you tried everything short of interactive content, for fear it is too costly and time-consuming to produce?
Well, the good news is that interactive content is now easier and less resource intensive to create than ever before. Not only does interactive content drive higher engagement times compared to static content, it also leads to “greater cognitive absorption of content,” according to a 2015 study conducted by Killer Infographics.
While there are many online tools you can use to create interactive content, Visme is a particularly good option for those who want to produce interactive and animated infographics and presentations (you can look at an interactive slideshow we created with Visme here).
In this short step-by-step tutorial, we’ll show you how you can create this interactive annual report (view full-screen version here) without having to be an all-star graphic designer, much less a skilled coder.
The first, and perhaps the most important, step to designing your own shareworthy interactive annual report is to gather all pertinent information you want to visualize in your infographic. This may mean having to contact different departments within your organization to find figures and numbers your audience will find the most relevant and interesting.
Once you’ve chosen your specific topic, you can then decide on the visual approach that best suits your content. For example, if you want to visualize your organization’s brand story, then you can choose from the dozens of timeline templates available within Visme. Or, if you want to compare product features, you can choose one of the dozens of comparison templates.
To start designing your own interactive infographic in no time, first choose one of hundreds of infographic templates available within Visme or start from scratch by selecting the Custom Dimensions option, as seen above. (If you don’t already have a Visme account, simply go to www.visme.co and insert your name, email and password.)
Once within Visme’s custom design area, you can start defining your visual style by choosing from hundreds of fonts, thousands of vector icons and millions of images. Also, you can use tools like Adobe CC, Coolors or Google Eye Dropper to choose an appropriate color scheme for your report.
For our report, we decided to go with a muted background with a vibrant and eye-catching accent color. In order to visually separate each section from the previous one, we simply reversed the color scheme and applied white to the background.
Once you’ve decided on the visual style of your infographic, you can start inserting your information into the different sections. When it comes to text, you have several different options within Visme: You can choose from the stylized text frames called text widgets, the animated text boxes and the static text boxes.
You can now easily create animated charts within Visme by simply clicking on the Charts tool and then clicking on the Create Charts button from the panel that appears to the left of your screen. Here, you can choose from a variety of chart styles, such as bar charts, line graphs, area charts, scatter plots, doughnut charts and pie charts.
Next, you can copy and paste your Excel data into the spreadsheet that appears on your screen or manually enter your data in the case of simple charts. In the settings tab, you can change the color of any element (including the background) or label and customize the look of your chart by choosing to make the labels, axes and grid visible or invisible. Also, you can insert a title and subtitle for your chart.
Besides using animation, you can also make your report stand out by making each section of your infographic interactive.
For example, you can create interactive charts like the one in the report above (under the second section), by first creating each of the interactive buttons. First, choose the Text tool, then insert a one-word title (such as year, section name, etc.) and apply a fill color, as seen above. You can also adjust the padding to give it the look of a button.
Then, you can decide which type of chart or graph will appear when the user clicks on each button. In this case, we decided to display different variations of the same graph for three different years, so we created each of the different data visualizations with the Chart tool, as explained in the previous step.
Once you have all your charts, navigate to the slide panel on the right side of your screen and clicking on the gear to the top left of your slide.
When you choose the option “Duplicate,” your infographic will be copied onto another slide. The number of times you duplicate your slide will depend on the number of interactive buttons you want to create. If you have four buttons, for example, then you should have four slides.
All your graphs will appear on all slides at first. What you want, however, is for only one graph to appear on each slide so that when the user clicks on a button, he/she is taken to the slide with the corresponding chart.
You can do this by going to each of the slides and eliminating all the other charts except for the one you want on that slide (it doesn’t matter which one, just that each appears on a different slide).
Finally, you can go back to your first slide and link each of the buttons to the slide which contains the corresponding graph, as seen above. This way, when a user clicks on the button, they will be shown the appropriate graph or chart. Do the same with each of the buttons on the remaining slides.
Finally, you can add further interactivity to your report by creating what are called rollover effects. You’ve probably seen these before: When users hovers their cursors over an element, an image, word or title appears.
In our interactive annual report, we decided to create a map of the world with office locations. Every time the user hovers their cursor over a specific point on the map, the name of the city appears.
To do this, we simply created text boxes with the name of each city and then linked each text box to the corresponding dot on the map. To do this, click on the circle or dot, then choose Link from the pop-up menu and choose the name of the text box you want to appear from the menu under the section “Popup Layer.” Then, choose “Hover” from the second drop-down menu in the same section.
Did you find this tutorial interesting or useful? If you would like to share your project, ask a question or tell us about your experience, don’t hesitate to drop us a line in the comments section below. We’d love to hear from you.
Want to set yourself apart from the rest? Start creating stunning infographics within minutes with our easy drag-and-drop software. Access 100+ beautiful templates, 100+ free fonts and millions of images and icons right now.