Synopsis
During my studies at Utah Valley University I was tasked with creating rapid prototypes to perform user testing. The purpose was to determine if a hypothesis I developed was valid as part of a UX Research assignment.
I based my hypothesis on the contemporary design trend of using video headers to add visual interest to a site’s landing page.
I conducted user testing to see if video headers help or hinder landing pages in the context of task performance and call-to-action recognition.
Time Frame: 4 Months (2017)
Process
I created two prototypes. One with a video header and another identical prototype except it had a large hero image in place of the video.
Video Prototype
Image Prototype
For user testing I selected six participants to optimize the efficiency of the test. I followed the reasoning provided by the Nielson Norman Group suggesting that it is better to conduct more tests with fewer participants than to do less tests with many participants.
I first asked people some qualitative questions relating to my test scenario and then tested participants by asking them to identify the call-to-action of the page. I timed how long it took them to do it, comparing the results between the prototypes.
Outline of Testing Process
Demo of Test in Action
Challenges
Creating a Prototype that Displayed Video
The biggest challenge was creating the prototypes with video. Usually, I would use Invision to create a prototype. The problem is that Invision doesn’t allow video playback so I needed to code up my own prototypes.
The biggest challenge was creating the prototypes with video. Usually, I would use Invision to create a prototype. The problem is that Invision doesn’t allow video playback so I needed to code up my own prototypes.
Solution — Code the Prototypes
It took a combination of JavaScript, JQuery, HTML, and CSS to get everything to work properly. I used the website Coverr to obtain royalty-free video headers and it includes the code for that aspect of the prototype so that helped considerably.
It took a combination of JavaScript, JQuery, HTML, and CSS to get everything to work properly. I used the website Coverr to obtain royalty-free video headers and it includes the code for that aspect of the prototype so that helped considerably.
I also decided to keep the website as simple as possible to make as few distractions from the call-to-action as I could and to make it easier to code.
What I Learned
Conducting User Tests
I learned a lot about the user testing process. I practiced developing questions to ask people for qualitative feedback. I also gained experience conducting user testing and observing people’s behavior. Through my testing I learned that my hunch was correct.
I learned a lot about the user testing process. I practiced developing questions to ask people for qualitative feedback. I also gained experience conducting user testing and observing people’s behavior. Through my testing I learned that my hunch was correct.
I found that video headers do increase cognitive load and that results in people taking a longer time to complete a task. I was also surprised to learn that about half of my participants found video headers annoying.