Netflix — a House of Cards
Boasting a user-base of over 100 million across the world, it is hard for anyone who uses the internet regularly to not be aware of the brand. Netflix has moved from a DVD-rental service to an online streaming medium to one of the best production houses on the planet with many of their truly binge-worthy series.
Content is only a part of the work done if they choose to have a loyal user-base especially in the digital age where piracy is so freely done. To convert people who stream pirated content regularly on services like fmovies and popcorn time for free, to people who are willing to pay to watch such content is truly a marvelous feat. And, they have been doing a splendid job at it.
Part of what made Netflix so famous was its release of an entire series at one go. If it was an episode-after-episode release strategy people have sufficient time to wait and download a pirated copy of it. By providing the same content — faster than the pirated content providers, all at one go, at a really good quality, and instantly (which is basically removing download time of content from the picture), Netflix has managed to win the market and started to kill piracy which was previously thought to be something impossible. Not to mention Netflix now allowing users to download its shows on devices and also the video-continuity feature where people can switch within devices effortlessly to stream content.
Simply put, it has reduced the time to reach quality content in great quality.
All of this is applicable to its prime competitors as well. (Pun intended!) So, what really makes Netflix so attractive to use and has its users hooked to it. They are two parts to it in my opinion, one has to do with a law and another with a design element.
The Law
Fitts’s Law — “ (often cited as Fitts’ law) is a predictive model of human movement primarily used in human-computer interaction and ergonomics. This predicts that the time required to rapidly move to a target area is a function of the ratio between the distance to the target and the width of the target. Fitts’s law is used to model the act of pointing, either by physically touching an object with a hand or finger, or virtually, by pointing to an object on a screen using a pointing device.”
Simply put, it talks about the relation between the size of a target, proximity to the person, speed to reach it and ease to choose it.
Drilling down further into it, one can say, the larger and closer a target is, the faster the user will get to it.
Fitts’s law, as you can see, can be applied to anything and anywhere where the user needs to guided to do something. It can be ads, it can be UI design, and even product design among many other tons of applications.
Now, let’s apply Fitts’s law into UI design.
So, how does it actually aid it? — As you might have probably guessed now, it can be used to design the buttons, their sizes, their relative positions on the screen etc.,
So, does this mean the big goofy buttons which can take up the whole screens are the best way to go forward? NO. After a certain point in increasing the size of a button, Fitts’s Law stops being effective.
The above image demonstrates how the relative size of a button stops being effective after a certain size increase.
The Design Element
Cards — “One of the recent design trends, also propagated extensively by Google’s Material Design, is the usage of Cards to display information, CTAs (Call-To-Action), and also serve as an entry point to more detailed information. Providing information in a compact form factor and giving the user a sense of satisfaction after absorbing a piece of information alongside the ease of design has made it a very successful UI design trend over the years.
Some social networks and apps have achieved tremendous success due to the successful implementation of Cards. One of the most notable of those is Pinterest.
Let me summarise just some of the advantages of using Cards for UI:
- Condensed content — Giving users a lot of information in a condensed form. Eg. Google search app cards
- Look great everywhere — Cards can morph according to the device being used and can look great on screens of different sizes. Eg. Pinterest UI
- Can be CTAs themselves — By making cards clickable and adding interactions on it, they can reduce the need for buttons and become large attractive buttons themselves. Eg. Tinder App
Besides all these, Cards are natural to use for all of us. Cards have always been a part of our life.
Started with board games, and playing cards and now, all the way into exchanging visiting cards.
How does Netflix use these?
A combination of successful implementations of both Fitts’s law and cards is what makes the UI so addictive and powerful.
The unique Netflix experience starts with the above itself with a clean red CTA button conveying the message — which is essentially a small card.
And this card experience continues onto the profile selection screen as well. Do note the size of the profile cards here. They’re not so small as to make you forget the function of the screen nor are they big enough for you to find it imposing. It’s just the right size.
As Fitts’s Law says, beyond a point, a size increase will not be making a significant difference.
I particularly love this part of the Netflix loading experience. They literally just use cards as a loading screen. Eventually the grey rectangles get filled up with thumbnails. This is such an innovative loading idea. It doesn’t take up any additional loading screen or uses a different design element and works as a brilliant pointer to let us know where to keep our eyes fixed.
The next part is the home-screen. Before going into the details of the homepage, I want to take your attention to the image I created below:
The various UI elements of the homepage have been populated in the breakdown diagram above. Note that the importance level of the UI elements rises from the bottom left quadrant to the top right quadrant.
The diagram should sufficiently explain to you on how the sizes of the elements vary in the homepage. Sizes can help the user make better decisions and can make navigating the website a whole lot easier.
The rest of the website’s experience has to do with cards.
Notice in the image above on how the card serves some important functions — to play the video, the duration, age limit, short synopsis, rating, adding to the list — all in that order.
Also, the card can perform multiple interactions with it. Clicking it on top would play the selection and the clicking the arrow mark in the bottom would actually allow the card to serve as an entry point to more information.
Navigating through the episodes section leads to another section filled with cards yet again.
Using just cards and working around with their various sizes, the UI creates a powerful user-experience.
So, does this make it the best UI possible?
Yes and No.
Yes, simply because this is one of the finest ways one can represent visual content for making the website very enticing and easy to use. The UI also is coloured minimally, graciously making space for the colours of thumbnails to catch our attention.
No, because, one of things I feel about the UI is that it is rigid. It doesn’t give a friendly feeling to explore. It feels more like a gallery but not something that was meant to be explored. With the relative sizes of the cards and their titles on top of the section, one can even forget what section he or she browsing in. This can kind of be a turn off because the website has zero breathing space to do anything but get to that play button. One more problem I feel with the UI is nesting cards within cards which can often lead to a confusion where it can make the user feel like he hasn’t navigated to anywhere new.
However, having said all this, considering Netflix just wants us to click that damn play button and nothing else; it does a very fine job at it.
That's a wrap for today! See you on Friday!