In­ter­ac­tive content: basics, tips, and tools

Most website operators aim to inform their visitors about par­tic­u­lar topics or to entertain them. Today, more than ever, we rely on unique, high-quality content to stand out from the crowd. In­ter­ac­tive content (content that en­cour­ages the visitor to par­tic­i­pate), in par­tic­u­lar, is becoming more and more important.

The reasoning is simple: In­ter­ac­tive content speaks to the visitor on many levels. The visitor does not simply read a text or look at an image, but can engage with elements directly, unlock access to further in­for­ma­tion, and disclose their opinion on topics. This makes the content more memorable as well as fun. In­ter­act­ing with the website and therefore also with the brand or service is a lot more intense than just reading a paragraph of text. It also increases the prob­a­bil­i­ty of the user being satisfied, which will lead to more con­ver­sions and a longer length of stay.

In the following article, we provide an overview of the different types of in­ter­ac­tive content and introduce you to useful tools that you can use to create or embed this type of content into your website.

The types of content presented above all require con­sid­er­ably more effort than ordinary text and image content. They are also more expensive, es­pe­cial­ly the tools and services needed to create these in­ter­ac­tive elements. If you are not an expert when it comes to game pro­gram­ming, but want to integrate a game into your website, it makes sense to get help from an external agency. This also applies to pro­fes­sion­al 360° videos, which are a lot more work than you would think at first glance. The demand for high-quality equipment and the time required to process the raw materials as quickly as possible can lead to costs in the five-digit range – just for a few minutes of film.

However, some in­ter­ac­tive content such as in­ter­ac­tive graphics, quizzes, or slideshows can often be produced without the help of external service providers. You just need a good concept and the right tool. Some of the most helpful tools are presented below.

The basic version of the image editor is free to use, although it only offers a standard button in different colors to indicate in­ter­ac­tive elements. In addition, the number of monthly views for the image or graphics is limited to 10,000. If you want to customize the design of the button and any ad­di­tion­al in­for­ma­tion, you can make use of the ‘Pro­fes­sion­al’ plan ($20 per month per user – 100k views per month). You also receive extensive analysis sta­tis­tics and the in­ter­ac­tive graphics will be free from any ThingLink branding. With the ‘Premium’ plan ($125 per month for five users and 1 million views), you can also create 360° images and videos with in­ter­ac­tive content.

The basic version of Infogram is com­plete­ly free to use for creating in­ter­ac­tive content. However, you’re quite limited to what you can do with the software: only a handful of maps (including USA, Europe, and Africa) and a small selection of icons and images are available to use. In addition, you are obliged to keep projects publicly available. To be able to create private projects and to gain access to over a million images and icons, the paid packages 'Pro' (from $19 per month for up to 100 projects), 'Busi­ness' (from $67 per month for up to 1,000 projects), or 'En­ter­prise' (price on request, for unlimited number of projects) are required. The 'Busi­ness' and 'En­ter­prise' plans also allow you to use your own logo. Normally the graphics and images are branded with Infogram’s own logo.

Qzzr not only allows you to create in­ter­ac­tive content, but also provides detailed sta­tis­tics on user ac­tiv­i­ties. For example, it tells you how many users completed a quiz or par­tic­i­pat­ed in a survey, how much time they spent on average, and whether they finished the quiz or survey (com­ple­tion rate). If you connect a call-to-action with your content, you can also find out the con­ver­sion rate.

If you just want to create a simple quiz or small survey for your website, there’s a free basic package available. For pro­fes­sion­al, in­ter­ac­tive content, however, you should invest in the 'Pro' account ($24.99 per month). In this version, there’s only a small reference to Qzzr (whereas in the basic version, the logo even appears in shared content). In addition, you can au­to­mat­i­cal­ly recommend other quizzes and surveys from the Qzzr network. If you do not want there to be any reference to the tool or provider, then this is only possible with the 'Per­for­mance' version. There is no flat rate for this; you need to enquire for rates.

To create the desired in­ter­ac­tive media content, the Cincopa user can choose from a variety of templates: Among other things, there are templates for collages, slideshows, video players, playlists, or timelines, all of which are available in the free version. However, this basic tariff is limited to one domain, 50 images and three audio and video files, as well as one gigabyte of traffic. In addition, the phrase 'Powered by Cincopa' can be seen in the content. If you want to regularly create and publish in­ter­ac­tive content, you should opt for one of the paid services: 'Startup' (1 domain, 5 video/audio files, 1,500 images, 10 GB traffic for a one time payment of $99), 'Plus' (5 domains, 50 videos, 200 audio files, 2,000 images, 100 GB traffic for $25 per month), or 'Cor­po­rate' (unlimited domains, 500 videos, 1,000 audio files, 5,000 images, 400 GB traffic for $99 per month).

To fill your own projects with content, you can also upload and use your own image material. In addition, you can create headings, text blocks, and buttons and position them wherever you want in your web stories. By choosing a theme, you can also influence the design. To import clips, you only need to specify the URL. The content can be shared either via the au­to­mat­i­cal­ly generated link (in­te­grat­ed functions for Facebook and Twitter), sent by e-mail, or embedded into your own website using a code. The use of Spark ap­pli­ca­tions, which are also available as iOS apps, is com­plete­ly free. Although sub­scribers of Creative Cloud are able to remove the logo from their content.

If you want to use Mapme to create your own in­ter­ac­tive content for your website, you need one of the paid versions. The free version of the web ap­pli­ca­tion is only really a demon­stra­tion of the tool and does not provide you with the pos­si­bil­i­ty of pub­lish­ing or embedding created maps. Users can choose between the three premium plans: 'Basic' (from $19 per month), 'Standard' (from $29 per month), and 'Plus' (from $49 per month). The latter plan not only allows an unlimited number of locations to be pinned, but also uses 3D effects for a more in­ter­est­ing map design. In addition, those using the 'Plus' license can customize the map via CSS.

The afore­men­tioned tools offer different options to make your own web project more in­ter­ac­tive even on a small budget. Fi­nan­cial­ly-strong companies also have the means to enlist agencies to take care of the creation and main­te­nance of in­ter­ac­tive website content. In­ter­ac­tive content makes a website more at­trac­tive, but only if it is used correctly and doesn’t lead the visitor away from your product or service. It is therefore necessary to create the ap­pro­pri­ate framework for the in­ter­ac­tive content and, on the other hand, to find the right balance between in­for­ma­tion and en­ter­tain­ment – a task that has been mastered by the following websites:

• Airbnb: Using an in­ter­ac­tive in­fo­graph­ic
   
• Fillory: Using an im­pres­sive in­ter­ac­tive map, the website wel­cometofil­lo­ry.com presents the fantasy world Fillory of Syfy series 'The Ma­gi­cian­s' (based on Lev Grossman’s trilogy of the same name). There is also detailed in­for­ma­tion on the main char­ac­ters as well as various mini games and quizzes under the heading 'Quests'. When the second season came about, the channel decided to have the website created through the pro­duc­tion studio, UNIT9.
   
• Walmart: The landing page of the famous store, Walmart, is an example of how a slideshow works. The main slideshow moves au­to­mat­i­cal­ly to show the store’s offers and events, whereas the slideshow un­der­neath can be moved by the user and presents the products available to buy.
   
• mymuesli: Users can make their own muesli from lots of different in­gre­di­ents using the online con­fig­u­ra­tor from mymuesli. Once you’ve chosen a muesli base and added fruits, nuts, or chocolate, you can directly order it, or save it on the website and share the link with friends.