Youtube video player: UX case study for iOS App

Dave Kang
UX Collective
Published in
7 min readMar 13, 2018

--

Overview

Youtube has 1 billion monthly active users which is about one third of the number of internet users worldwide, making it the second largest search engine after Google. 70% of these users watch Youtube through their mobile devices, with the average mobile viewing session lasting more than 40 minutes.

As I was watching Youtube videos on my phone, I encountered some problems with the interface while viewing it in landscape so I conducted a usability test to:

1.) See if others were experiencing the same problem

2.) Identify user pain points

3.) Inform myself in order to make the user experience more fluid and unobtrusive to the viewing experience

*Please note that I conducted these interviews early February 2018, so it doesn’t reflect changes introduced after*

Objective

To run a usability test to answer the question: Can users easily use various options while viewing videos in landscape orientation?

Target User

I conducted 7 interviews by approaching people at a library and a coffee shop. Interviewees consisted of both low and heavy users, ranging from 18–35 years old who spent anywhere from 15 min/day to +10 hrs/day. Youtube’s majority demographic is between 24–35 years old, but 18–24 year olds are the heaviest users, averaging 10 hours and 15 minutes/day on the site and app.

Phones have been increasing in size and for an app that has heavy users with lengthy session durations, those users are required to support their phones for long periods of time. I chose to interview people with different iPhones to observe if and how the user interface on varying screen sizes affected their user experience.

User Persona

I created and validated two user proto-personas of potential Youtube users based on my research and understanding of people who are active members.

Tasks Scenarios

The interview was split into two parts: survey questions and tasks scenarios. I designed these tasks to encourage user interaction with the options that overlay the video while in landscape. Through interviewing I found users used Youtube for three main purposes: downtime/relaxation, tutorials and music.

To better understand the user’s motivations and desired outcomes, I used the Jobs To Be Done Framework to create multiple stories based on my interviews.

Tasks:

1 ) Find a tutorial, turn on captions and adjust to 2x speed.

2 ) Create a new playlist of 3 videos that you would study to.

Synthesizing Notes

I marked key findings from my notes, jotted those insights onto post-it notes and organized them based on tasks. After synthesizing my notes, I noted the phone models of each interviewee and noticed that there were problems that were universal across all iPhone models, but were more apparent in models with smaller screens. Thus, I also chose to organize by phone model in addition to organizing by task.

Key Findings

Turn on Captions & Play at 2x Speed

1a ) Obtrusive Settings Menus

“I don’t like this, I can’t see anything.

This was a user’s immediate reaction when the options filled up the entire screen when performing the first task in landscape. She felt strong annoyance with the menu completely blocking her view of the video as it continued to play in the background.

1b ) Unintuitive

“I didn’t even know I could do that!”

A heavy user who binges on Youtube 10+ hours a day wasn’t aware that the options in the first task were available.

“I don’t see a 2x speed option, only 1.25x.”

Going into ‘Playback Speed’ for users with smaller screens, the options were cut off without any indication that you could scroll down. This caused a moment of hesitation and confusion thinking that 1.25x was the fastest option available.

Creating new playlist

“Why do I have to flip my phone into portrait in order to type when I’m watching my video in landscape?”

Every user expressed frustration having to change the orientation of their phone in order to name their new playlist. It went against everyone’s expectations and caught users by surprise. Forcing users to switch to portrait mode to enter information created an extra step of having to flip your phone back horizontally to resume viewing, all while the video continued to play in the background.

Bedtime routine

“I use it before I go to bed.”

5 out of 7 users used Youtube routinely before going to bed.

“Yeah I’ve dropped my phone on my face before.”

People use Youtube often and for long periods of time laying down in bed. 5 out of 7 users reported to dropping their phone on their face due to fatigue or constant grip change in order to reach a button.

Ideate & Prototype Solutions

After highlighting pain points, I began brainstorming possible solutions through paper prototypes before I moved onto wire framing and then creating detailed mockups in Sketch.

Turn on Captions & Play at 2x Speed

1a ) Obtrusive Settings Menus

“I don’t like this, I can’t see anything.”

While users performed both tasks, there were brief periods when the options filled up the entire screen. While the white space of the options menu are clickable extensions of each option, it goes unused.

The video player settings button is located in the top right corner. When clicked however, the menu would slide up showing icons on the opposite side of the screen. Users, especially ones with larger phones, had to really stretch their hands to reach inconveniently and unintuitively placed icons.

1b ) Unintuitive

“I didn’t even know I could do that!”

There were a few moments of pause and hesitation whenever there was a disconnect between the option and its corresponding icon.

A heavy user who binges on Youtube for +10 hours a day wasn’t aware that she was able to add captions and set speed. The current settings icon of 3 vertically aligned dots didn’t clearly communicate ‘Settings’. By adding a red HD symbol to accompany the cog icon, it helps grab the user’s attention and indicates what functions lie underneath the icon. It also shares the same visual language as the red video scroll bar at the bottom of the screen. Both being red, it symbolizes adjustability.

Creating New Playlist

Creating a new playlist in Youtube’s video player was the most irritating task for all my users. 100% of users were caught by surprise when forced to flip their phone into portrait in order to create a new playlist.

Bed Time Routine

Through my interviews, I found 5 out of 7 users routinely use YouTube in bed before going to sleep as a way to wind down for the day.

Unfortunately phones emit a blue wavelength that is bad for sleep. Exposure to blue light suppresses melatonin production, delaying the mental signal dictating when your body should start getting tired. This results in shortened total sleep time and diminished sleep quality.

This inspired me to add a ‘Night Mode’ feature to Youtube’s video player. This function would reduce the amount of blue light emitted while turning off ‘Autoplay’. Similar to the ‘Air Play’ function in iPhones that pop up when it detects a smart TV, ‘Night Mode’ will pop up either automatically at sunrise and sunset, or on a custom user-set schedule and fine tune itself as it learns the user’s daily habits.

Validating Solutions

To validate my final mockups, I imported them into POP app to create a prototype. I approached this testing similar to my initial testing, by approaching people in libraries and cafes while also being able to get input from two out of my seven initial testers. Prototype: https://marvelapp.com/4ge616b .

Ultimately, the user experience was more frictionless. Users were able to complete tasks quicker with all the settings accessible on the right hand side, and there was a decrease in hesitation points that came with icon changes. Due to the situational conditions of conducting user testing in a library and cafe, I wasn’t able to recreate an appropriate environment of lying down and being in bed in order to test whether or not relocation of the cancel button reduced the chances of dropping the phone.

Thanks!

Thanks so much for taking the time to read! This is a self-initiated UX Research and Design project and am no way affiliated with Youtube or Google.

--

--

Recently graduated from RISD’s Industrial Design BFA program and am currently seeking new employment opportunities as a UX Designer. Find me at iamkang.com