Netflix Touch Targets

Hi, my name is Cem, and I’m a binge-watcher.
I can’t eat, work, drink, or sleep without Netflix.

I got a TV 10 months after I moved to Toronto, though. Before then, I used my iPad for my binge-watching cravings habits.

Throughout those 10 months, I found 2 rather annoying UI quirks in the Netflix iOS app.

Quirk 1: Can’t Touch The Thumbnail

When an episode finishes, Netflix automatically switches to the next. Sometimes, the timing works great. Most of the times, it needs a nudge.

Netflix app shows a group photo of Friends cast, with a thumbnail of the next episode and a countdown to start the next episode with 4 seconds on the clock.
Handsome fellas and pretty ladies, but I’d rather watch the next episode than stare at them.

Here’s the problem:

Only the circle within the play icon is a button. Unlike the home screen, where the whole thumbnail takes you to the episode, when switching between episodes the thumbnail doesn’t allow you to tap on it.

Square thumbnail with a circle play button inside.

This is especially annoying if you’re eating chicken wings. Or fries. Or onion rings. Any finger food that can/will be dunked in sauce, really.

Quirk 2: Can’t Find the Back Button

On iOS, back button has the title of the previous screen attached to it, and the current screen name is either below it, or to the middle of the title area.

A sample of the two navigation structures, as provided in the Sketch Library Apple provides.

On Netflix, the title of the current episode is next to the back button, but they are not linked. So only the back icon is clickable, but at a glance, the user expects the whole title to be part of the back button, and taps on it to take the action.

Here is a comparison of how it works in Apple’s guidelines versus how it works in Netflix:

Navigation bar areas showing the discrepancy between iOS guidelines and Netflix's usage.

Tapping on the title does nothing, and the app hides all of the on-screen controls like any other point on the screen is touched. So, when in fact the user expects to get taken to the previous page, they lose all of the on-screen controls.

I have seen many people get thrown off by this. They are visibly annoyed when they expect to go back to the episode list, but just lose the button that would take them back. It takes a couple of taps for them to realize what’s wrong.

Bonus: The One with the A/B Tested UI

While writing a draft for this blog post, I came accross a different video player UI in Netflix.

Here’s a comparison:

Current video player UI for Netflix. Back button and title top left, AirPlay/Episodes/Subtitles icons and volum slider top right. Bottom row has play/pause button, 10-second rewind button, progress bar, reamining time and video size button, stretched out.
Current player for Netflix.
Netflix player UI I briefly saw. Top row has AirPlay button in the top left corner, the title in the middle, and the volume slider and 'close' button on the top right corner. There are huge rewind 10 seconds, play/pause, and fast forward 10 seconds buttons in the middle of the screen. On the second-to-the-bottom row, the progress bar is stretched from edge to edge, only with the remaining time attached to the right side of it. The bottom line has episodes, audio and subtitles, share, and next episode buttons in the center, with labels, and there is a single icon for video size button, at the bottom right corner.
The different player I came across.

While this did solve some issues with the player interface, it still was not that much better than the old/current one.

The good:

  • More prominent player controls.
  • Text labels for functions.
  • Addition of functionality: Fast-forward and Next Episode.
  • Title is centered, as it should be.

The bad:

  • No “Back” button; “Close” button moved to the other side, very close to the volume slider.

If this version had the Back button with the name of the show on the top left, and the AirPlay icon next to the volume slider (where it deserves to be, logically), it would have been perfect. Hopefully, they are testing this version with a few fixes, and we will soon see it in an update.