UX flaws – Netflix

The other day my friend was struggling a bit with the Netflix user interface. We decided we wanted to try watch a foreign series without subtitles to improve our language skills (in the Netherlands we generally don’s dub movies and series, but use subtitles). So she tried to turn the subtitles off. But she had trouble with it, because the user interface was not working as she expected.

Now I have this rule of thumb, that basically says:

If a reasonably skilled user has trouble with a user interface, it can usually be traced back to a flaw in the user interface, not to a lack of understanding of the user.

It took me a moment to realize what the flaw was, but sure enough it was there.

I have been using the rule of thumb above for a long time now and so far, it has almost always proven to be correct. So what was the flaw? Have a look at the Netflix UX for changing subtitles:

UX-flaws-Netflix

The audio and subtitles popup showing in the screenshot opens when you click the little white text balloon in the footer bar. It’s split into two panes. On the left you can select the different audio streams available and on the right you can select the subtitles you want.

So what’s the flaw?

It’s very subtle, but it’s there. The popup is sending 2 conflicting messages. On the one hand it uses a checkmark in front of the different options to show which one is selected (in combination with making the font for that option bold), on the other hand it’s listing ‘Uit’ (off) as a separate option in the list.

A checkmark in front of an option generally means: This option is on, but it can be turned off by clicking it again. For example, have a look at this menu (From the Google Chrome browser) for turning the favorites bar on or off:

Chrome-menu

Notice how it’s using a checkmark to indicate that the menu option can be toggled? This has been a user interface convention for years and years. It’s in use all over, not just in Google Chrome, but in many applications and in operating system dialogs as well.

Netflix is breaking the convention here. By using a checkmark, they are suggesting that you can click the option again to deselect it. And that’s exactly what my friend tried. Only when after a couple of clicks nothing was changing, did she examine the menu closer and discovered that ‘Uit’ (off) was actually listed as a separate item in the menu.

So what did Netflix do wrong? They chose the wrong icon. They should have used an arrow icon instead.

arrow-right-1

Using an arrow icon here makes a lot more sense, because many applications that make you select one option from a list of options use such an icon in front of the currently selected option. By using a checkmark here instead, the Netflix UI is sending a subtle, mixed message that ends up confusing the user.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s