user experience video
UX best practices from social media every website should apply
How do Social Media platforms attract and retain their users? Learnings from Google, Pinterest, Instagram, and TikTok.
Camille Adamczyk November 22, 2022 · 5 min read
Social Media are uncontestable champions in attracting and engaging users. The number of active network users should reach 4.9 billion by 2023, or 61 percent of the world's population, according to Augusta Free Press. By 2027, the number of social media users is even expected to grow to 5.8 billion worldwide.
With continuous outstanding growth of more than 300 million users each year, TikTok is the most attractive platform even though Facebook remains at the top of the ranking with 2.6 billion users. Next on the podium is Instagram with more than 1.2 billion users by 2022. Snapchat and Twitter are the followers with 548 million and 397 million users respectively this year.
60 percent of Gen Z and 56 percent of millennials plan to use social media for holiday shopping this year according to a Deloitte study.
“What’s more, social media is a key starting point: 6 in 10 shoppers say they get inspiration and ideas from the sites, according to a global survey by the IBM Institute for Business Value, in association with the National Retail Federation.” Source: The Washington Post.
The social media marketing strategies for B2C brands are a vast issue. The goal of the present article is to consider another aspect: the modern UX best practices of social networks that are rapidly becoming the new standard for the web in general.
What learnings can ecommerce websites take from social media platforms in order to get a higher engagement and conversion rate? Zoom on 2 tips to replicate social media features on your website: LQIP & short videos.
Social media know how to keep you waiting
While browsing on mobile, a slow or unstable connection often deteriorates the navigation experience. Images and videos are not showing up. You don’t know how long you’ll have to wait. Content is shifting when the assets are loading…
On the other hand, your favorite social networks know how to keep you waiting. Thanks to LQIP, you are under the impression that the visual content is getting loaded progressively. The perceived performance is improved.
What does LQIP stand for?
Low-Quality Image Placeholders (LQIP) are a powerful lever to reduce perceived page load time. The placeholders have the same dimensions as the original image but typically weigh a few kilobytes, so that the stable and interactive page layout is delivered to the visitor's browser almost immediately. Any CLS is avoided. Coupled with lazy loading, you’ll deliver a particularly fluid User Experience.
There are a variety of modern solutions for image placeholders (e.g CSS background-color, LQIP, SQIP, Blur Hash, Potrace).
IRL examples
Let’s dig into the web to find some inspirational behaviors. While Twitter, Google, and Pinterest are using color blocks, Instagram uses blurred previews.
Use TwicPics to generate placeholders in the blink of an eye on your websites
TwicPics makes the implementation of image placeholders straightforward. There are different ways to build placeholders. Available preview types with TwicPics API are blank, maincolor, meancolor and preview.
maincolor: a solid color image containing the most important color in the resulting image.
<img
src=”https://assets.twic.pics/blog/ux-best-practices-from-social-media-every-website-should-apply/woman-and-sunglasses.jpg?twic=v1/output=maincolor”
/>
meancolor: a solid color image containing the mean color of the resulting image.
<img
src=”https://assets.twic.pics/blog/ux-best-practices-from-social-media-every-website-should-apply/woman-and-sunglasses.jpg?twic=v1/output=meancolor”
/>
preview: a blurry preview of the resulting image.
<img
src=”https://assets.twic.pics/blog/ux-best-practices-from-social-media-every-website-should-apply/woman-and-sunglasses.jpg?twic=v1/output=preview"
/>
And if you’re working with reactive frameworks, we’ve got you covered. It’s easy as a breeze, here are the demos:
The only difficulty will be to choose your favorite placeholder behavior…
Animated content to attract and retain users
One format to rule them all
Videos represent 90% of the content viewed on the Internet. On social media platforms, videos are the new images. Following the example of TikTok, created in 2016, Facebook launched Facebook Stories in 2017 and Instagram created the new format Reels in 2020.
This highly interactive format is attracting more and more companies in their communication and marketing strategy. Whether it is to highlight a company's employees or to promote a new product, video captures 90% more attention. 80% of Internet users remember the videos they have seen against 20% of images and 12% of the text.
Video offers retailers the opportunity to create immersive and memorable experiences online. It allows brands to show their products in motion to engage users and encourage them to make a purchase on their ecommerce platforms. Indeed 64% of users are ready to make a purchase after watching a video, that's 4 times more than for a picture or photo. Proof that animated content must be considered and displayed on your websites if your want to stay competitive.
Get your animated content on your websites with TwicPics Videos
Now that you’re convinced of the importance of videos, you might ask how to display them on your websites. Well. Meet TwicPics Videos! You can go through our documentation or ask for a demo.