As an information junkie, I click a lot of links. My MO for accessing content is to right-click the link and open it in a new tab. A row of tabs forms my day’s reading list for the day.
And I can’t stand it when I open a link only to realize (normally about 30 seconds too late) that a video is silently playing in one of those tabs.
My use case is not typical, but all users need to know what’s a video and what’s an article is.
Lately, I’ve noted that news organizations are experimenting ways to indicate video-based. Some sites are making great progress, while others aren’t keeping pace. This post explores video linking patterns from 9 major news organizations, from worst to best — then offers some summarized best practices.
Behind the times
Three of the nine news sites used video treatments one might have expected to see circa 2004.
- Al Jazeera English treats their video simply, separating it into a module of its own on the homepage. Unfortunately, the title of the module is easy to miss when users are focused on the content instead. Users could easily miss the header and unexpectedly launch a video.
- Fox News adheres to the video camera icon design pattern, an aesthetically funky (and now outdated) treatment that never quite acheived widespread acceptance.
- CNBC News, like Fox News, places a camera icon at the end of the title to indicate video. The thumbnail itself contains no indication. As you can see, this design pattern quickly gets jagged and repetitive when chunks of a layout are linking to video.
Video Panel from Al Jazeera Homepage
Fox News Homepage
CNBC Video Treatment
Prize for participation
Others in the category used more modern approaches.
- ABC News pairs a tiny play icon on the thumbnail with word “watch” in RED CAPS at the start of each video title. The downside of this approach is that it impedes scanning & selection between the titles themselves. With a more prominent play icon, “watch” could be removed entirely.
- CBS News also separates video into a module all of its own. They pair a play icon with written CTA language — “Play CBS Video”. The high-contrast, all-caps text treatment is hard to miss, but it also competes with the video title. Would that explanatory language even be necessary if the play button was just a tiny bit more prominent?
- The New York Times uses a separate video module on their homepage which allows uses to see larger previews of the thumbnails lined up slideshow-style at bottom. While the thumbnail at bottom uses a play icon & written identifier, the larger preview module at top does not.
ABC News Homepage Video Treatment
CBS Homepage Video Treatment
New York Times Homepage Video Treatment
Best in show
- Washington Post combines a section header with a hover state to remind users before click that they’re about to access video. Increasing the prominence of the indicator on hover is a surefire way to reduce video abandonment, because it ensures that the user knows what they’re getting.
- USA Today lines top content up in a prominent module on the page and uses different treatment for photos, interactive pieces, and video. For video, an icon and label at top are paired with a play icon on the thumbnail itself, setting clear expectations but also treating video as one of many content types they provide.
USA Today Homepage Video Treatment
- CNN News promotes videos in line with articles, and uses a prominent, transparent play icon on the thumbnail that goes opaque on hover. CNN scores bonus points for including video run time at the end of the caption, which usability constantly tells us is paramount in the user’s decision: to watch or not to watch?
Washington Post Video Treatment
CNN Homepage Video Treatment
Punch list
As you see, some sites are charting new territory, while others are caught in the 00′s. The best practices I took away from the exercise include:
- Layer a simple, transparent, prominent play icon on top of thumbnail and include a hover effect. Watch your video abandonment rate drop.
- Include video play time. Clickthrough to your videos will adjust, but abandonment should dip again.
A final consideration
Many of today’s news homepages include separate sections for video, but how many users visit a website specifically in search of one content type? Although I have no data to confirm it, I’d assume that most user choose contnet by subject rather than method of presentation.
As video becomes less costly and easier to produce, users will come to expect it. Organizations will offer a more diverse array of content: interactive pieces, video, infographics, and photography in addition to today’s text-based articles. I look forward to the creative solutions we’ll see for offering all types of content in line by subject matter, while setting clear user expectations (see USA Today).
Do you recommend segmenting content by media type? Maybe you have other good design samples for linking to video? Please join the dialog; comment below.
See also
0 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.