Statistical  Infographic

This statistical infographic is an engaging display of information using many interactive features to break down content into simple visual displays that make key points easy to understand. Visitors are welcomed with moving text animation, full page hero background, and an anchor CTA leading to additional content below. Navigating through the experience, visitors will notice animated content and figures, as well as reveals when hovering or clicking through key figures that display additional facts. This infographic uses bold colors, imagery, icons, and stats to encourage visitors to learn more about the experience.  

COMPLEXITY

Medium

TYPE

Infographic

USE CASE

Education

Features available

Here are the major features, abilities, and interactive elements used in this template.

Flows

Flow will allow you to build step-based interactive elements, such as Tabs, Accordions, and other elements, with great customizability. Use cases and examples of its power are the ability to create a carousel of images all the way to a one page assessment that presents one question at a time.

Anchor

Anchor will allow you to link a section or page element to a specific link or button. A use case for this would be to place an anchor on an about section that links to the About link in the page's navigation.

Animation

Animation will allow you to animate elements via microthemes. A use case for this would be to have a section fade up and into a page via scroll.

How-to use

Here is a helpful guide on how to handle all the major features, abilities, and interactive elements available to make the most out of this template.
Place an interactive Flow Step element in the existing flow.
Navigate to the previous flow step, use the arrow keys on your keyboard to go one level down to the element that is nested within the flow step. Select the element, copy it, and paste it in the new flow step that has been added from Step 1.
* In this creative the first element that is nested inside the flow step is a container.
Copy an unselected reveal state, and place it within the column level. To do this select the reveal, hold the option key down on your keyboard, with your mouse click and drag the reveal until the column level is highlighted in green and says “Copy reveal into column”.
* You can also use the same controls and drag the reveal between two reveals. It will highlight green to show where the placement of the duplicated reveal will be pasted. 
Drag the reveal to match the order of the navigation and adjust the content within the reveal. The stand alone container is the selected state when the user is on the current flowstep they do not see the reveal to indicate that is the current step they are on. Update the stand alone container to show the copy for the new flowstep.
Navigate to the new flowstep, add an anchor and assign the flow step a tag.
*Tagging allows behavioral data to be collected. Make sure the name that is assigned is unique to that step for identification purposes.
Duplicate a reveal in all other flow steps and adjust the icon, and copy to match the last flow step. Don’t forget to update both the reveal trigger and the reveal.
Select the new reveal added, navigate to the Behaviors panel, select Scroll To, choose the anchor name of the new flow step from the drop down and assign a tag. Repeat this on the new reveal added in each flow step.
Select a section where you want the CTA to scroll to and add an anchor. 
Assign the anchor with a unique name (ie: Section 1).
Select the button and in the behavior panel, select the anchor and assign a unique tag. 

To add or adjust the animation on an element, first select the element the animation is applied to or you would like to apply too. Navigate to the Animations panel, select a trigger state, then select the type of animation to apply.

Content structure

Here is the content structure’s template to make it easier for you when providing content guidelines or creating the copy for this template, from understanding the content structure to getting to know the amount of words needed to each text piece.
Preview Content Writing TemplateOpens in a new window.

Best practices

Be sure to tag everything that is "taggable" so that you are able to review everything at a later time in your reports.

Reveals
Flows
Flowsteps
Links
Tabs
Accordions
Lightboxes
Rotators
Sliders

Your conversion point is the most important measurement in determining whether your creative is converting visitors. We recommend having one conversion point per creative. Here is the element and methods in which to set your conversions:

Links
Behaviors
Actions

Before going live with your experience, you want to run a final proofing process. This will review the experience as a whole, with any final revisions necessary. Here is the most important items to be reviewed before GoLive:

  • Review of any integrations
  • Review of conversion point
  • Review of tagging
  • External links are working correctly (opening in a new window)
  • Mark respondents as always new if used for conference or live event
  • Uncheck the robot meta directives (no archive, no follow, no index)
  • Remove path description (if applicable)
  • Make sure traffic source has been added to social share — og URL, twitter (create bit.ly), email share
  • Once live, debug on Facebook (if applicable)

Related templates

If you like this template, you might want to check out these other similar models.

Have a question?

Still have questions or are facing troubles when handling this template? Please do not hesitate to send any additional questions, so we can make sure to have this page constantly up to date.