Video Headers: Do They Help or Hinder Task Performance?
The last thing we want to do as UX Designers is to give our users a headache. This is why it is crucial that we are careful in considering the main elements of the home pages on our websites.
The home page is often the first impression for a person viewing your site and the elements with the most visual weight are going to have the biggest impact on initial impressions.
A contemporary design trend is to use video headers to add visual interest to a site’s landing page. I conducted user testing to try and determine if video headers help or hinder landing pages in the context of task performance and CTA recognition. I used both qualitative and quantitative metrics to determine if they are better or worse than large hero images in this context.
My findings revealed some surprising insights into what people actually like and dislike about landing pages and the pros and cons of large background videos or hero images. Throughout this process I utilized the design sprint method to rapidly develop my prototype.
The 5 Day Design Sprint
I did my design sprint based on the book Sprint: how to Solve Big Problems and Test New Ideas in Just Five Days. As a class, we spread out the 5 day sprint over 4 months. I would have preferred to have done the sprint in 5 days, but that is hard to accomplish in a University setting.
The advantage of doing it this way is it allowed us to learn the procedure over a longer period of time and let the information sink in better because we spent more time on individual segments.
The 5 Day Sprint was Broken Down as Follows:
Monday — used as a springboard and critique. Geared towards refining ideas. Start at the end goal and work your way backwards. Create idea maps, narrow down your target goal. Ask peers for input.
Tuesday — advance from target stage to solutions stage, critical thinking is more important than artistry at this point. Work independently, remix and improve. Ugly is okay. Words matter. Make self-explanatory sketches. Write a catchy title.
Wednesday — shift from solutions to decisions, get sticky note feedback from peers, identify aspects of design that actually solve the problem at hand. Your goal is to solve small unanswered questions. Ugly is not okay at this point.
Thursday — move from decisions to quickly creating a prototype. Fake it to make it. Create a believable prototype and test early and often — rapid development is key! Only the essentials; quick and dirty wireframes, it is important to only build just enough to learn. Resist the urge to make prototype look real at this point. Prototypes are disposable so follow the Goldilocks rule on realism.
Friday — take the ‘fake it’ prototype and ensure that you understand if assumptions are correct by conducting casual, highly-personable interviews. Have the willingness for personal assumptions to be proven wrong. During interviews process patterns will emerge to either confirm or deny hypothesis. I amended this step with a short, quantitative data driven task. I prefer to have more types of data if it doesn’t take that much more time.
The whole point of the 5 day sprint is to be able to test early and often, not take too much time, and be able to iterate often as a result.
Project Artifacts
Throughout my project I created a collection of documentation; experiment overviews, design sprint sketches, wireframes, research evidence, and task outlines. Artifacts are an essential part of your design process and they are useful both during and after a project. They are useful during a sprint, because you get some guidance as you work and it can help transition between sprint days without getting stuck.
Artifacts are helpful after a sprint is completed because you actually have time to reflect on the project and see a bird’s-eye view of the whole process. This will help you become more proficient for your next design sprint. I’ve included the artifacts from my project if you’re interested. They’ll give a better insight into how the experiment was setup rather than just reading this case study.
Click Here to view the PDF of the Project Artifacts Full-Screen (Recommended)
The Importance of Research
As part of my experiment with video headers, I utilized several design principles. I read four different articles and summarized them. Across these four articles I examined three design principles. The articles are linked on pages 13–14 of my design artifacts along with the write-up.
The first article related to Horror Vacui or the fear of emptiness. This article describes the history of how Horror Vacui was a driving factor in art during the Victorian era and has influenced design ever since. In the early days of the Web, designers tried to fill up pages with as much content as possible. Now minimalism is the popular school of thought.
Leaving plenty of whitespace portrays a product or company as more sophisticated and valuable. This comes into play in my experiment because I have a feeling Horror Vacui is a motivating factor behind the design trend of using large hero images or video headers on the landing pages of websites. Stakeholders might not want their website to feel empty.
The second article starts out by defining inattention blindness. The term means a failure to notice an unexpected stimulus that is in one’s field of vision when other attention-demanding tasks are being performed. Another way the author defines the term is when something is in plain sight, people don’t actually perceive it. The article then describes one of my favorite psychology experiments, The Invisible Gorilla Test.
In this experiment participants were asked to watch a video of two teams of three students passing a basketball amongst each other. The viewers were tasked with counting the number of times one team passes the ball. During the video, a man in a gorilla suit walks through the middle of the students, beats his chest, and walks away. Interestingly, 50% of the viewers didn’t even notice the man in the gorilla suit. This psychology study actually was an early driving force behind my experiment motivation because I was fascinated with the result.
A secondary thing I looked at in my study was whether or not people would be distracted by the video headers and miss the CTA, the Subscribe button. There were three Subscribe buttons on the home page of my site and I purposely used a bright pink color for two of them to make it blatantly obvious. As you’ll see in just a minute when I cover my results, inattention blindness seems to have come into play within my prototype.
An important thing to keep in mind is to not fill up the entire webpage with content. The viewer can’t focus on everything at once. I think this idea was a major factor in my experiment because nearly the full viewport was filled with either a video or an image. I believe this caused some inattention blindness.
There is a limited amount of attention capacity that a viewer has. I think the simplicity of my design may have mitigated some of the effects of inattention blindness from the videos. However, it was still a factor that can’t be overlooked.
The final article is from the Nielsen Norman Group and it focuses on the impact of cognitive load. Specifically it deals with how to minimize it. Cognitive load is a psychology term referring to the amount of working memory a person is utilizing at any given time. The higher the cognitive load is for a person, the more likely they are to make mistakes and have a decrease in performance while completing a task. For these reasons it is extremely important to minimize the cognitive load of your users while they are interacting with your website or app.
The Nielson Norman Group defines two types of cognitive load, intrinsic and extraneous. Intrinsic cognitive load is the effort of retaining new information and extraneous cognitive load is mental processing that doesn’t actually help the user understand the content. The article then went on to describe some tips on how to minimize extraneous cognitive load. (It should be noted that intrinsic cognitive load is actually good — after all, your viewer came to your site to get information or be entertained).
The first tip is to avoid visual clutter. Things like meaningless typography flourishes, irrelevant images, and redundant links can cause confusion in the viewer. Another thing that can be done is to follow design conventions and affordances by placing elements in the places that most websites do.
You can also offload tasks by using alternatives for reading text, remembering information, or making a decision. Perhaps a picture can explain something better than reading something or a default option can be selected to guide the user in their decision-making.
Again, I think the simplicity of my site helped minimize extraneous cognitive load on my participants. I have a limited amount of text and I placed elements into locations on the page that follow design conventions. My goal was to have as little extraneous cognitive load as possible to better determine how much video headers affect performance. My hypothesis was that a video header would increase the extraneous cognitive load on people.
Coding the Prototype
This project was interesting because I was tasked with creating a prototype but I wasn’t able to use the usual tools such as Invision or Adobe XD to accomplish this due to the need for videos to be displayed. So I decided to use my experience with JavaScript, JQuery, HTML, and CSS to create a basic 3 page website. It was actually pretty easy to get it to work.
I had to fanangle it a bit at first, but my design was so simple that it wasn’t too bad. I didn’t design it to be responsive so that helped a lot with some of the coding complexity. I designed the website to work on my laptop that I’d be testing people with and I didn’t worry about it working on any other screens. I just needed a quick and dirty prototype with which to conduct user testing on people.
User Interviews & Performance Metrics
This is where the rubber meets the road. You’ve done your Sprint, created your prototype, and now you’re ready to test on some people. This is one of my favorite parts of the journey in digital product design.
User testing is where you find out if you’re hypothesis was correct and then you take the results and iterate a new version of your app or website. But how many people do you test with?
According to the Nielsen Norman Group:
“If you want a single number, the answer is simple: test 5 users in a usability study. Testing with 5 people lets you find almost as many usability problems as you’d find using many more test participants.”
Because I was doing A/B testing with two user groups it actually made more sense to test six people instead of five. This way I had three people who used the video header site and three people who used the hero image site. This is actually what the Nielsen Norman group recommends — three people per grouping. For my experiment I tested one fellow design student, three other friends, and two strangers at the mall. As far as demographics, I tested three women in their 20’s, a woman in her 30’s, a man in his 50’s, and a man in his 20's.
Results & What I Learned
There was a lot to take away from this experiment. This project wasn’t meant to be an in-depth analysis but more of a teaser into usability testing and conducting user interviews. I also learned a lot about doing a design sprint.
As far as the results of the actual experiment, my hypothesis appears to have been correct. Based on the average time for participants to identify and execute the CTA, it took an average of 17 seconds with images and an average of 32 seconds with video headers. I was surprised to learn that a few people in my sample group found video headers to be annoying. Most thought they were fine if they served a purpose — some food for thought.
In both groups, hero image (A) and video header (B), there was one outlier that took considerably longer than the other two people in the group. In group A, one person was visibly stressed and tired. I think this accounted for a longer performance time. In the other group, the person was in his 50’s. He was more wary to click the subscribe button but understood what it was asking. (I took off about 20 seconds of his time because he correctly identified the CTA and explained it instead of clicking it. I stopped the timer when he actually clicked it).
I learned a ton of information about usability testing and narrowing down the scope of a project to actually solve one small, focused problem. This exercise was one of the most useful experiences in my digital media career.
Russell Andlauer is a Digital Product Designer at DevSimplified and a UX Freelancer. He is also finishing up his Bachelor of Science degree at Utah Valley University in Interaction & Design. This article relates to the Interaction Design Colloquium course and is representative of the skills learned.
