Keeping It Simple — A Better Way To Navigate Smart TV Apps
In the last few years Smart TV apps have been getting much more attention than they have in the past. With more cord cutters and companies adapting to the way users are accessing content there seems to be a slight increase in the conversation about the design and development of Smart TV applications. Platforms are maturing and big companies are seeking to grab their part of this market. Which leads to a whole plethora of problems for user experience designers to solve.
One of the main issues that we’re faced with is the ability to navigate content. Lg is seeking to change that with the release of their webOS but for now we’re still stuck with the traditional directional pad navigation or d-pad for short.
The d-pad has been a standard for Smart TV and video game navigation since the beginning of time. While it may not be the easiest way to get around a Smart TV screen, it works and people are used to it. Without a major innovation in the way users can navigate on screen this is what we have for the time being. Leading me to believe that even though there is a slight limitation as to what and how we can design, there is still room for improvement.
One of the first books I read on user experience design was Don’t Make Me Think. It’s a fantastic book that points out the fact that there are established patterns and conventions in just about all digital products. It’s these patterns that users are familiar with and know how to use.
For example, if we look at a website a user knows that the main navigation is either on the top or the right of the screen. That is a pattern. And it’s that pattern that I want to talk about in relationship to Smart TV app design.
In my research and my exposure to Smart TV app design while working with Float Left, I have seen many apps and many app designs. Different platforms have basic conventions and ideas about how they think the content should be best laid out for the user.
But, I think it could be made better. As a user experience designer I want to make the time a user spends within an application as enjoyable as possible. They should not be bombarded with arduous tasks and clunky layouts. The user should be able to access their content right away without troubles.
What I have found by looking at apps that have been designed is that designers may be overlooking the use of very solid patterns which in turn could improve the overall product. I am one that stands for innovation, I do believe we need to remind ourselves that what we are designing are products that people use.
Think about it this way, a knife is a knife no matter how someone creates it. There is a blade and a handle. Well a Smart TV app is a product that allows people to access content. There are two main components two my logic. The navigation and the content itself.
Lets look at some layouts we may find on popular platforms.
Each of these home screens have a plethora of information and a similar structure. The user can navigate horizontally through a multitude of vertically stacked rows. The main navigation schema is utilizing the standard d-pads convention up, down, left, and right. But in my eyes there is a problem.
As the user once you have navigated all the way down the vertically stacked rows you need to go all the way back up to access any top level navigations. And the same goes if you have navigated all the way across a horizontal list of content. You have to go all the way back to the beginning to access that content as well.
Which sparked the thought that if we can use familiar patterns and layouts for users we can create a far better experience across any platform and allow the user to access the content they want much quicker and with less clicks.
How? Simple.
Let’s go back to the example of a website where the navigation is either on the top or the side. We can use that same layout and apply it to a Smart TV app.
If we place the main top level navigation in spots that are familiar to the user we begin to lessen the cognitive load necessary for them to find their content. However if we also juxtapose our content in a fashion that compliments the navigation pattern we can continue to improve the experience. Now if we take our design a step further by limiting the amount of information on the screen at one time we can lower the amount of clicks necessary to gain access to the content.
Looking at the example above you can see that in the layout I have chosen to go with a top level navigation which the user navigates horizontally. I have also limited the main content on the screen to two horizontally scrolling rows that the user could in turn navigate through to infinity. In this example no matter where the user is in either of the horizontal lists they are only at maximum two clicks away from accessing the top level navigation which will bring them to whatever they are looking for if they cannot find it here.
And the same could be true for a vertically juxtaposed layout. The user could navigate through a vertical list of content and again at maximum be only a few clicks away from the main navigation.
In these examples I chose to limit the content to two rows as a way to explain my ideas. But essentially there could be an endless array of designs within these constraints. As long as we keep the basic principle in mind. Which is to keep the user from having to click too many times to access the main navigation. Ideally we want them to make no more than three clicks.
Long story short, if we match the layout of our content with the layout of our navigation and limit the amount of information on screen at one time we can greatly improve the overall user experience when designing apps for the 10 foot UI. In a later article I will create some compositions further exploring my idea and dive deeper into the inner workings of some common screens found in a Smart TV app.
I would love to keep the dialogue going. Feel free to comment below or find me on the UX.guide slack channel.
