TV App — UX Case Study
Part of the Daily UI Challenge #25
Overview
Namaste! Today’s challenge focuses on creating an interface exclusively for TV. Now, what is the difference? Can’t a mobile/desktop UI be simply ported to TV? It can save a lot of time and money.
The answer is a big NO.
To help you answer the question above, I’ll write these questions down to prove why an interface should be designed exclusively for TV. The irony; answering the question with another question. :)
- Why do people watch TV (nowadays)?
- What are the limitations?
- Who uses it?
People mainly use it for streaming and gaming. Another question arises here. Can we not stream on our laptop/desktop?
The thrill of watching it on a big screen with your whole family/friends is a totally different experience.
The technical limitations of using the TV is much more than your mobile/desktop environment. So, we have to build an interface around this.
Minimal interface with a straightforward navigation system. Nothing too complicated, can be operated with just 2 or 3 buttons on a remote; just like changing a TV channel like in the old days. Besides, users don’t expect much from a TV interface like they would normally expect from a desktop environment. So, lets begin!
Process
- Searching for ideas
- Idea
- Sketching
- Mockups
- Final Product
- Uploading to design communities
- Conclusion
- Feedback from fellow designers
Searching for ideas and inspiration
This one is actually neat but there is a major issue with this one. The navigation text is small and clearly not visible from a distance. This would have been perfect for handheld devices or even laptop/desktop. The text is very hard to read even from where I am typing (on a laptop). I like the addition of the clock here which is very useful. Good use of screen space!
Keep in mind that when we are designing for TV’s or similar electronics, we’ll have to keep the text size big and bold since the optimal viewing distance is 60 inches or about 13 feet.
This one is good and the layout is awesome. I really dig the organised Episodes section. But some of the elements here are really confusing. In the Episodes section, what do the colours represent? See, I had to think for a moment there what those colours meant. Does the greyed out mean watched or the white? Although these question may sound silly, we should definitely ask them and clear it right away. When making interfaces, don’t give the opportunity or chance to make the user go, “Oh, what does this do?/what does this mean?”. It should be intuitive or almost something of second nature.
In one of my previous case studies, I mentioned about some globally recognised design guidelines. Like green is for “go” or in this case, play a particular song/movie. Try to incorporate these into the designs.
The text in the design is hardly readable too. Another interesting thing I find here is the use of the hamburger menu (also in the previous design). One of the reasons we use a hamburger menu in a mobile app/desktop app is because of the limited screen space/real estate. But in this case, it does not make that much sense. Make use of the available screen real estate which in this case is very large.
Wow! This one is just gorgeous. Kudos to Nacho! I like the navigation, the colors and the text can be easily read. I also like the addition of the clock here.
The greyed-out movies list is good design thinking! By greying out other option, it shows proper indication on which item (movie) is selected plus with the blue border.
Idea
To create something similar to Netflix, a steaming platform. Planning to design the landing page of the application. The landing page will contain the highlighted movies/tv series, navigation, movies, and tv series list.
Early Sketches
There were a lot of issues with my first sketch. I felt that the navigations links were proper and in a poor order. Highlighted content + Popular movies didn’t have any info.
The navigations links are in this order:
- Home
- Watchlist — close to home because that’s more required than other links
- Movies (general)
- TV Series (general)
The first image (from the left) is for the section titles. The title will be bold and subtext with a medium weight. The font weight difference is not that big since we are talking about a TV screen here and visibility should be high.
The second image (from the left) is for the highlighted content. The category will be caps, title; bold and subtext below.
Low Fidelity Mockup
High Fidelity Mockup
About a couple of design decisions I made.
Why the black background? (in the interface)
White text on black is more legible than the other way around. Black is a color which gives more attraction to other elements/colours. Also, it removes strain from the eyes since most of the viewers watch at night.
Why genre?
Genre is the one thing most people look for when booking/watching a movie. So, I added that too to all the movie titles.
Why landscape title (movies) images?
The main idea of an image is to convey a sense of the movie and that can be perfectly achieved with both portrait and landscape. But that raises a question here; why not portrait? Portraits would just take up more screen space. We also had to show the title and genre which would just add on to the space. We should try and optimise, take full advantage of the available screen real estate. It’s all about optimising!
Conclusion
Wow! This was an awesome experience. Kudos to Netflix, Android, Amazon Prime, and other great streaming platforms!
This has been quite a challenge and an adventure. Thank you all for your time!
Resources
