9 Design Techniques Used to Create Interactive Articles (with Examples)

Interactive articles take long-form to a new level, involving readers in the narrative and even letting them guide it.

Whether reading a news story, blog post, or advertorial, most people scan digital content looking for things that jump out at them, instead of reading the whole thing word for word. The inverted pyramid writing style is designed to make the best of this reality, but it isn't enough to hold a modern audience's attention.

Increasingly, elite publishers are swapping flat text-and-image articles for interactive ones—producing more visually stunning content to improve engagement, retention, and conversion rates. With advancements in web design and web creation tools, creating interactive articles is now more accessible and cost-effective than ever.

What is an Interactive Article?

Interactive articles combine text with cutting-edge web design techniques to engage and involve the reader. Interactive articles can take the form of news editorials and features, product or service advertorials, blog articles, and beyond. Used by journalists, publishers, and marketers alike, interactive articles allow you to bring stories to life and stand out from competitors by offering immersive experiences—full of animations, micro-interactions and other dynamic visual media.

Interactivity within articles can be implemented and experienced in a variety of ways, and let readers personalize their journey. Readers can take various different paths through the content based on their choices: clicking button X may lead you on a different path to clicking button Y. This process uses the same logic of the much loved decision-making flowchart quizzes of '90s print magazines. Translated to an entire digital journey, readers can discover entire hidden pieces of content, play with different media on the page, or trigger animations as they move through an article.

Interactivity can also be as simple as asking your audience to click arrows on a carousel, or triggering an animated chart on scroll. These actions and reactions involve the reader in the article, immerse them within it, and—when done right—will hold their attention and guide them through the entire thing.

The Benefits of Interactive Articles

We know what interactive articles are, but we should probably explore why they are worth investing time into. Whilst publishing a text-based article would be quicker, there are a number of reasons why interactive articles should be your go-to.

Higher Conversion Rate

One benefit of creating interactive articles, and perhaps the best, is a higher conversion rate. Many articles have a goal—be it an advertorial aiming to sell a product or service, a news outlet looking to attract a wider readership, or a story on a charitable mission seeking donations. Interactive articles improve success rates in achieving these end-goals because they ask us to explore and invest in the narrative at hand. Articles that lack interactivity struggle to hold attention, whereas interactive articles keep us scrolling until the end goal is achieved.

Visually Exciting and Memorable

Interactive articles are also visually stunning and create a lasting impression. When you ask people to physically engage with your article through scroll, click and hover interactions, and add some amazing visuals to boot, your article and your brand will be easier to remember. The New York Times jumped on this opportunity early, so much so that their long-form interactive features are highly aniticipated events and their entire brand is shorthand for "quality editorial".

Shareable Content

As well as memorability, these articles are key for shareability. Let’s face it, interactive content is cool. What do people do in today’s world when they find something cool? They share it with other people in their network. Next time you are creating a piece of content, keep that in mind. Make it something you would be proud to share, and something that you think others will enjoy. Chances are, more people will share your interactive articles than your static ones.

Design Techniques to Use in Your Interactive Articles

Once you have your copy ready, it’s time to explore how to convert this into interactive content that is visually interesting. Let’s take a look at the design techniques you should use in your next interactive article.

Show/Hide

Including a show/hide micro-interaction in your interactive article serves users additional content upon clicking, revealing extra information, images, or videos. This interactive experience allows users to explore the content at their own pace, without being overwhelmed with everything at once.

An example of this can be found in WWF Canada’s interactive article “Priority Threat Management: A Better Way To Recover Species”. Made in Vev, the article uses a show/hide add-on to allow users to reveal further information on four key strategies they propose for their mission. If this text was included in the main body of the page, people would most likely scroll past. Instead, our attention is drawn to the four strategies by placing the key ideas into their own boxes with plus symbols to indicate they offer further insight upon clicking.

This use of show/hide allows the main article to remain cleanly designed and concise in its content, yet detailed upon further investigation. This technique offers up a sense of mystery and excitement, allowing users to discover additional elements of the content as if they were unwrapping a present.

Before/After Images

An effective way to introduce interactivity into your article is to include a before/after image slider which allows users to reveal an image in different states.

This advertorial about the Google Pixel 7 Pro was made in Vev and uses Vev’s image compare slider element to showcase the phone’s camera quality in comparison to different phone models. This allows users to compare the photos themselves through clicking and dragging from left to right.

This design technique is an easy way to create interactive articles that make users feel like they are uncovering the story, rather than forcing a narrative upon your audience, which is particularly useful when it comes to advertorials.

Horizontal Scrolling

When creating interactive articles, adding a horizontal scrolling section can add subtle scroll-triggered interaction which breaks up long-form content by switching the user experience from one of vertical scrolling to horizontal scrolling.

This is used effectively by Message Lab on this article about rebranding. Here, a horizontal scroll section is used not only to break up long-form content, but to visually show a timeline progression. Horizontally-scrolled timelines make sense for this traditionally linear, left-to-right type of content, so in this case a scroll-triggered interaction enables information to be delivered in a more natural way.

Audio

Audio can be used to enhance interactive articles, triggering sound through click, hover and scroll, or playing automatically upon page load. The audio can be short—for example, to indicate a micro-interaction has taken place or enhance visuals with a background sound effect—or more prominent. It's a particularly great way to include archival footage and oral histories in your article where video footage isn't available.

This interactive article from 1News uses audio throughout as a sensory addition to the visuals and text on the screen. Users can play audio from the start or within whichever section they choose to hear the author tell them the story, rather than or in addition to reading it.

Animated Charts

Using animated charts in your interactive articles allows you to turn data into visual focal points, calling attention to data visualizations upon scrolling, hovering, or clicking.

An example of scroll-triggered animated charts can be found in this report from ServiceNow which was made in Vev. As you scroll down, segments of the pie chart fall into place, emphasizing the statistic that is prominently displayed next to the chart.

Image Hotspots

If you have photos in your article, adding clickable labels is a simple way to add interactivity. These hotspots allow readers to explore the image in greater depth, saving space from lengthy captions in the main body of the page and creating excitement as users get to discover more information themselves.

This example of hotspots in an advertorial for Mercedes Benz allows users to click to learn more about the product the article is about. Interactive articles shouldn’t overwhelm users, so subtle and user-triggered animations like this are the perfect way to enhance your content with interactivity without forcing it.

Scroll Progress Visualization

You are probably familiar with scroll progress bars that sit at the top or bottom of a web page to indicate how far you have scrolled, but these can be more creative and even be designed as part of the overall article.

A stunning example of this can be seen in the Washington Post’s article “Scaling Everest”. The article asks you to click a button labeled “Climb Everest”, which then transports you to the bottom of the page like a reverse back-to-top button. This is the first interaction that sets the scene, immersing you in the story and placing you at the bottom of the mountain.

From then on, scrolling causes you to scale the mountain (i.e. climb the web page). The scroll progress bar in this case is an illustration of the mountain to the left of the screen, placing you not on a web page but on Everest. This interactive article truly captures the attention of users, placing you in geographically and historically different times through micro-interactions, illustration and animation.

Scroll Zoom

The Sydney Morning Herald’s use of scroll zoom transforms their interactive article into an immersive story. Scroll zoom makes the size of an element change gradually on scroll, creating a close up of the element and adding three-dimensionality to your screen.

This technique is often used for visual storytelling, and works particularly well in the case of this example to emphasize data concerned with air traffic during the Covid-19 pandemic.

Scrollytelling Photos and Videos

Perhaps one of the most popular storytelling techniques in recent times is the use of scrollytelling photos and videos. A breathtaking example of this can be seen in the New Yorker’s interactive article on detention camps in China.

Striking and emotive black and white illustrations shift on scroll, sometimes to the side, sometimes up, and sometimes even around the same illustration as though we as viewers are walking amongst the scene. These illustrations are given context by text which floats over them, sweeping in and out with each scroll movement.

This use of scrollytelling sections breaks up any larger sections of text in the article, and really embraces the “show, don’t tell” philosophy of visual storytelling. Not only does this keep users engaged and continuing to scroll, it helps convey the emotions of the subject matter and evoke them within the audience.

Techniques like this and those mentioned above also help to create memorable pieces of content due to the technicality people assume it takes to create them. These are impressive features within the world of web, and will make any interactive article shine.

Create Interactive Articles with Vev

Stunning interactive articles don't have to be expensive or time consuming to create. With Vev's extensive library of drag-and-drop design elements—including scrollytelling, horizontal scrolling, 3D objects, show/hide elements, and video backgrounds—you can create a stunning, publication-ready article without coding a thing. Publish your article anywhere on the web, either through your existing CMS or with us.