Netflix and its Learnability
This article is an evaluation of the applied design usability heuristics and accessibility principles of Netflix’s desktop website for DesignLab’s UX Academy.
Learnability
The visibility & feedback of the system status not only validates the user’s action, but may also be the context and duration the action is being placed. Here, Netflix has made it very clear here that this episode is not only added to my list, but also when it’s being added (or loaded) into the list.
The mappings of a system are the relationships between moving a control (digitally) and how it results in the real world.Similarly, natural mapping refers to a system’s physical design and its relationship to it. The ease of conventional mappings depends on the prior use of similar systems.
When I drag the volume slider up and down while the episode plays, the audio gets louder or quieter, respectively. My ease of use with this depended on my experience with controlling volumes on remote controls, electronics, etc.
Affordances are the properties of an object or interface that show how it can be used based on prior knowledge.
In this .gif alone, Netflix offers a handful of affordances — First, the controls appear when the mouse has been activated or moved. The episode list icon looks like a stack of papers you can go through, and when they’re hovered over, they enlarge and the episode list appears. The separate episodes are lighter when hovered over and the downwards arrow indicates the section would expand down when clicked. The play button is afforded as clickable when hovered over as well.
An ideal system helps the user complete their task without Help & Documentation. However, it does need to be available and easily accessible for the user to find just in case. Netflix has an available question mark icon next to the episode list in the viewing screen.
Constraints are limits to the perceived operation of a device. They also draw attention to indicate being one of 5 possible states: normal, focus, hover, active, disabled. Netflix’s normal buttons are contrasted from its background and are located where a user would expect. Focused buttons typically show up in tutorials to teach the user how to use the product for the first time. The user wouldn’t initially try to interact with it, but the design points out that they can and informs them how. The hover state is best used to give users feedback of what they might select at the given location their mouse is over — much like in the provided gifs. The active state is the click itself, also used as a feedback tool. I couldn’t find a disabled button on Netflix, but if there were one, I imagine it would blend closer to the background.
Consistency makes a product feel cohesive. Inconsistencies can make the product feel broken, disjointed or confusing, and can distract the user from completed their ask. Netflix designed for consistency in its main page and list of shows or movies to watch through labeling and actions. It also utilizes a grid to create consistency in layout, padding, margins, headers, and fonts between pages of a website. — designers are intentional with their inconsistencies to draw more attention to them like how much bigger Netflix originals are here.
Conclusion
Netflix is a high-quality product because of its heuristics. Designers were intentional to utilize systems they knew users were already familiar with. This self-explanatory learnability contributes to the ease and frequent use of Netflix.
