Annette Fowler

How to Design Video for the Web

Est. Reading Time: 2 minutes

I recently enjoyed reading this article on “How to Design for Video” from the Human Factors International monthly newsletter. More and more of our clients are requesting a video presence on their web site and it looks like they are right on track!  Here are the author’s conclusions (which we at Beacon have experienced as well):

1) TV sites tend to place additional links close to the video image. This concentration of links requires less eye movement than used on news sites where articles are spread across the page. Therefore, consider how you can offer similar clusters of links that give your reader greater eye-scan “efficiency” than with newspaper homepages. Consider how you can concentrate links to allow “one-stop shopping” for the next viewing event.

2) Likewise, consider placing videos next to text articles that relate to the videos. Readers can rapidly digest short videos that support the text. For articles about people, readers can use the video to uncover the “personality” otherwise hidden by the textual presentation. This provides greater depth of coverage.

3) Insure that your high-level navigation gives access to your videos, if other means will not expose viewers to the video right away.

4) Be consistent in your placement of elements across your pages. The research found that site visitors tended to use the same scanning pattern across websites. Therefore, end-users expect to find certain things like advertisements, groups of links, articles, videos, and pictures within each region (B, C, D and E) of your pages. Fulfill those expectations.

5) In your newspaper site, reduce scanning variability (and thus added work for the viewer) by grouping links in the upper regions of the page in a consistent manner across pages. Basically, take a page from the playbook of video sites by clustering links near a picture or video above the fold.

6) Insure that the upper regions in both TV and newspaper homepages provide both page orientation and navigational cues. This cues your end-user and reduces wasted eye-scans used in looking for those cues.

7) Initial fixations occurred in the browser bar and in the site branding areas. To make information foraging more efficient, put other links and link groups directly below those areas.

Here’s Beacon’s recent video– we’ve had a very positive response!  Can you find me in three spots?  No, that’s definitely not me on the scooter, in case you were wondering!