Copy

Interactive content elements


A look at all the crazy post elements you haven’t thought of but someone else has
Every now and then you bump into a fun visual element you wish you had thought of. I’m going over a couple of examples and their purpose to show you how you can turn a plain article into an interactive one and increase your time on page metric.
 

To-do lists you can interact with


This Fellow guide has occasional checklist-like items you can mark.


Bullet list alternatives


We all know lists are good for SEO and readability, but what could increase their impact by turning the bullets into distinguishable elements? Here’s an example where the two bullet lists are used for different purposes:


Rating an article


Stars aren’t just for software or services. Resume.io has added an anonymous rating system at the end of their articles:


Slack takes a similar approach by asking readers if a post was useful:


Keep in mind a rating system like this is a must for your help pages and other customer support content.
 

Just showing appreciation


Another way to rate a post when you don’t feel like sharing it is to leave some claps:


Feature your sounds


Soundcloud players, Spotify, Acast, you name it, you add it to your post like WeTransfer does.


 

Replace boring charts with ones readers can interact with


Deducing the exact stats from a static chart can either be difficult or clutter your graphic. Instead, go the Harvard way and create these as interactive elements:


 

Feature your product


The best part with interactive elements is that you can showcase your product, functionalities, or just simple versions of a feature.
  • Loom includes video recordings done via their tool
  • Airtable adds their databases [anyone can use Airtable to showcase better spreadsheets]

The weird link hack


I’ve recently been noticing some blogs add a link icon next to each large section of their article. The goal with these is to get people to share the exact section in case they’re not interested or don’t agree with the others.


 

Various accordions and sections readers can collapse


Here’s 50+ examples of accordion elements you can take inspiration from. You can use these collapsible formats for a table of contents, Q&As, lists of tips, summary sections, spoilers you want to hide at first, post details, and more.

This post includes an advanced accordion-style list where each example further opens into more details and an embedded SlideShare presentation:



Also:


What to do with all those code snippets?


For tech posts, you can add a copy to clipboard link to make it extra easy for readers to interact with the code:



Or feature projects directly on CodePen:


 

Ditch every classic idea you know


A good way to make your post stand out is to think of how you can change the elements you currently have on your page. For instance, if you scroll down Josh Comeau’s blog posts, you’ll get a character pop-up from the side instead of your regular banner CTAs.


 

When your entire blog is the epitome of interaction but that could slow down your website


Homerun’s blog has interactive elements everywhere from their blog logo to their homepage and each guide. They’ve even replaced links with visual animated cards:



But does this slow down their pages?

It depends on the element.

Their blog logo for instance is currently a large GIF. But a quick performance check and Lighthouse will come up with a good solution to keep the interactivity but maintain top performance:



They also haven’t implemented lazy loading [a best practice will get into in a future newsletter edition]. Not even on obvious elements like a video at the end of the post which is clearly not needed straight away:



Adding multiple elements [animated or not] will make for a slower page if you don’t want to tweak every single element. That’s why their employer branding guide scores a mediocre 80:



Takeaways: Whenever you see an element you’d like to use too, check the page’s performance first to see if it affects the website’s speed or if there’s an alternative.

Choose what your priorities are and only add elements that help you reach those targets. If reader feedback is a top priority, add in a rating system. If you care more about highlighting how your feature works, just embed a view from your tool or stick to usual videos.
 
If you enjoyed this edition, don't forget to send it to a friend!

Until next time,
Alexandra Cote
Twitter
LinkedIn
Website

Was this email forwarded to you? Sign up here.

Copyright © 2021 COTE ALEXANDRA MONICA PFA, All rights reserved.


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list.

Email Marketing Powered by Mailchimp