Skip to content
Best Magazine Ever

Topic

Interactive Magazines

What video, galleries, 3D models, links and polls do for readers' attention, understanding and action, what they cost in speed, data and accessibility, and when an element is worth adding.

An interactive magazine gives readers something to do besides turning pages: follow a link, play a video, swipe through a gallery, turn a 3D model, answer a poll. Research on learning, usability and web performance points to one rule: an element helps when it carries what the printed page cannot, and otherwise costs attention, time and data.

What makes a magazine interactive

  • Links and navigation: a clickable contents page, links to sources, shops and events. The cheapest layer.
  • Video, audio and animation: interviews, a technique shown step by step, a podcast that extends a feature.
  • Galleries and slideshows: more photographs than the layout can hold.
  • 3D models: objects or buildings that readers rotate and zoom.
  • Forms and polls: subscriptions, feedback, registrations, quizzes.
Diagram of five kinds of interactive content: links, the cheapest layer; video and audio such as interviews and podcasts; galleries with more photos than fit the layout; 3D models that readers rotate and zoom; forms and polls such as sign-ups and quizzes.
From the cheapest layer, links, to video, galleries, 3D models, forms and polls.

An interactive PDF carries links and form fields, but embedded video and audio need testing in your readers' PDF apps; a web-native edition can reflow on a phone. A browser viewer can place media over an unchanged PDF; Viewnamic works this way, so downloaded PDFs contain no media [1].

What interactive content does for readers

Attention

Motion catches the eye, but if it is irrelevant to the task, Nielsen Norman Group warns, it can substantially degrade the experience [2]. In one usability study, a participant never noticed a £100 discount in a box that switched panels every five seconds; moving boxes, Jakob Nielsen argues, look like advertisements [3]. Some people see only the first frame of a carousel, or none at all [4].

Understanding

Moving pictures can explain better than still ones. A meta-analysis of 26 studies found a medium-sized advantage of instructional animations over static pictures (d = 0.37), larger for realistic animation such as video (d = 0.76) and largest for learning how to perform a movement (d = 1.06) [5].

Bar chart of a meta-analysis of instructional animations versus static pictures: a medium advantage for all animations, d = 0.37; larger for realistic animation such as video, d = 0.76; largest for learning how to perform a movement, d = 1.06.
Advantage of instructional animations over static pictures in a meta-analysis of 26 studies (Höffler and Leutner).

Irrelevant extras work the other way. Fiorella and Mayer's chapter in the Cambridge Handbook of Multimedia Learning cites a mean effect of g = −0.33 for interesting but irrelevant "seductive details", and a benefit of g = 0.63 for placing words and graphics together [6]: a video belongs next to the paragraph it explains.

Captions help everyone: Morton Ann Gernsbacher counts more than 100 studies showing that they improve comprehension of, attention to and memory for video [7].

And interactivity is not good in itself. In a meta-analysis of 43 studies of children's digital storybooks, multimedia features such as animated pictures and sound effects helped, while hotspots and games distracted [8]. Children are not magazine readers, but the pattern fits.

Media that carry the story help. Extras that pull readers away from it do not.

Engagement

Not every reader wants to watch. In the Reuters Institute's Digital News Report 2022, all age groups on average still preferred reading news online to watching it; those who preferred reading most often called it quicker (50%) or said pre-roll ads put them off (35%) [9]. Video takes longer than the same information as text and cannot be scanned, so viewers want to know how long a clip runs [10]. Offer media beside the text, not instead of it.

Action

Interactivity shortens the way from interest to action: a link to the ticket page, a sign-up form at the end of a story, a poll. So that videos are not dead ends, Nielsen Norman Group recommends ending them with a call to action or related links [10].

What it costs

  • Loading time. The BBC lost an additional 10% of users for every extra second its site took to load [11]; many popular embeds include over 100 KB of JavaScript, some up to 2 MB [12].
  • Data. Code-heavy pages can cost readers megabytes of data [11]. In the Reuters survey, 8% named cost or data charges as a reason to read rather than watch; in Kenya and in Nigeria, 35% [9].
  • Distraction. Moving content can severely distract some people, for example people with attention deficit disorders [13].
  • Accessibility. At WCAG level A, prerecorded video with sound needs captions [14] and a podcast a text alternative [15]. Animation can cause dizziness, nausea and headaches for people with vestibular (inner-ear) disorders; at level AAA, WCAG asks that motion triggered by an interaction, such as a page flip, can be switched off unless essential [16].
  • Production effort. Every element needs a still for print, captions or a text alternative, and tests on phones and with a keyboard; W3C advises planning accessibility with the media [17].
Diagram: what interactive content gives and costs. Readers gain attention, understanding, engagement and a shorter path to action. It costs loading time, readers' data, distraction, accessibility work such as captions and transcripts, and production effort.
An element earns its place when what readers gain outweighs what it costs them.

When it helps, and when it distracts

It helps when it

  • shows what the page cannot: motion, sound, a sequence of steps, an object from every side
  • sits next to the text it serves
  • says what it is: "Watch the two-minute interview"
  • waits for the reader to start it
  • leaves the page complete without it, in print too

It distracts when it

  • is there only because the software allows it
  • moves beside text people are reading
  • holds essential information only inside a video
  • hides behind a tap nobody can find

A quick test: if you removed the element, would readers lose information, or only movement?

Where to go next

In this section

Sources

  1. Viewnamic interactive content (videos, 3D models, click dummies, slideshows, links)
  2. The Role of Animation and Motion in UX - NN/G
  3. Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility - NN/G
  4. Carousel Usability: Designing an Effective UI for Websites with Content Overload - NN/G
  5. Instructional animation versus static pictures: A meta-analysis (Höffler & Leutner, Learning and Instruction, 2007) - Leibniz Institute for Science and Mathematics Education
  6. Principles for Reducing Extraneous Processing in Multimedia Learning (Chapter 14) - The Cambridge Handbook of Multimedia Learning
  7. Video Captions Benefit Everyone (Gernsbacher, 2015) - PMC
  8. Benefits and Pitfalls of Multimedia and Interactive Features in Technology-Enhanced Storybooks: A Meta-Analysis - PMC
  9. Overview and key findings of the 2022 Digital News Report | Reuters Institute for the Study of Journalism
  10. Video Usability - NN/G
  11. Why does speed matter? | web.dev
  12. Best practices for using third-party embeds | Articles | web.dev
  13. Understanding Success Criterion 2.2.2: Pause, Stop, Hide | WAI | W3C
  14. Understanding Success Criterion 1.2.2: Captions (Prerecorded) | WAI | W3C
  15. Understanding Success Criterion 1.2.1: Audio-only and Video-only (Prerecorded) | WAI | W3C
  16. Understanding Success Criterion 2.3.3: Animation from Interactions | WAI | W3C
  17. Planning Audio and Video Media | Web Accessibility Initiative (WAI) | W3C