Designing for users is a very dynamic thing. Sometimes you may find that your intuition about a user will prove to be exactly right…sometimes to be the exact opposite. One thing is for sure, users are always evolving and something that may have been proven to be exactly right/wrong at one point in time will not always be.
|
My Role |
I took lead as the designer and worked with my awesome Product Manager Stef to explore and find a solution to maximize our video pages (which also included the homepage) through our video thumbnails and layout. We were supported by some brilliant people in data and engineering to come to our R1.
This feature went live in the month of June 2019. |
Taking a look at how many screens may be available on 2 screens (large screens - if I may add) it is interesting to see the exposure of the number of videos. It seems that there may be a clear advantage to efficiency in number of videos seen in 2 screens for Grid mode - but it has a significantly smaller screen compared to List and Carousel Mode. Let's take a look at each of these options with more depth.
|
The big pro here is that the thumbnail picture is nice and big for the user to make a decision on whether they are going to click the video or not. We know that 85% of the clicks on thumbnails are visceral and visual (especially on our site). The secondary information(video title, views, etc) are also stretched across the entire width of the screen for the user to digest.
The user will interact with this setup by scrolling down to view more content. As is, our site(on mobile) shows a total of 24 videos vertically before reaching pagination. |
Will this affect the way our thumbnails are able to draw users to click? Knowing that 85% of the clicks are because of the preview image(or video), the issue of visibility may be an issue.
This design allowed for us to have 24 videos at almost half the space on the page. Our ad partners(and importantly my PM) liked this idea… |
It seems that this can be another viable option - if the goal is to point attention to the difference sections or categories of the site.
In theory this was something that gave a clear direction to: Scroll vertically: to discover the many sections of the homepage Swipe horizontally: for content within the sections/categories |
This shows the importance of placement on a page. This also shows that page height matters.
|
Right now - we are collecting data to ensure that there is a clear winner between all three layouts. Without anything significant and conclusive(because of sample size) - we can see that users have a preference to the layouts in this order:
1. List 2. Grid 3. Carousel and may be so(with a slight bias) because... |
1. This is the traditional way of viewing this kind of information so users are trained to prefer this. It is also a swipe/scroll vertical action as opposed to introducing the horizontals swipe.
2. Users liked the fact that they were exposed to more videos but preferred List mode because of the large thumbs(duh) despite saving page height 3. This layout forces the user to use two different types of interaction (horizontal and vertical) and users seem to just care about seeing as many videos as much as possible right away. It is important to note that if this was a different product that put an emphasis on sorting/categorizing (like Netflix) then the outcome might be a little different. |
Still, it was interesting to take a look at the relationships between these three layouts. At least we can walk away with a level of confidence that we learned a little bit more about the user.
I was also looking into the concept of information overload and how that would play into these designs but unfortunately we currently don’t have enough data or a means to collect this kind of data (at least right now). |
Humans(Users) are visceral beings that have visceral reactions to visceral things. In this case, with the content being as visceral as it is (super sensitive and intimate) - us creators must also rely on our visceral reactions to arrive to a situational solution.
|
Thank you for sitting through this study and learning with me. If you have any questions or comments do not hesitate to reach out and send me an email!
|