Design Assignment
Scenario: Tasked with creating a new studio-specific proprietary streaming device and application (like a Chromecast or FireTV stick). Plan out the interface and how the user navigates it through inputs.
Using the concepts of responsive design, plan a user-friendly 10-foot interface (Smart TV Streaming UI) that a user would interact with from approximately 10 feet away, i.e., couch and television.
Design Requirements
Create wireframes that show at least one viewport of content with two views – a grid view and a single-column view.
Grid view: Show options in a condensed view and should include:
- A screenshot thumbnail
- Movie or show name
- User rating
- Running time (or episode count)
- Year made.
Grid view should allow for more items to be on screen at once.
Single column view: Allows for more expanded metadata. Required in view:
- All elements from the grid view
- An expanded screenshot or image series
- A brief movie summary
- Top-billed cast/crew
- A similar tv/film list.
Prototype the inputs (controller): Design of the proprietary controller. Create at least a lo-fi/paper prototype of the controller. Show/describe how the controller will navigate:
- Menus
- The main interface
- Streaming content
Design Research & Considerations
Users are in a “lean-back” experience or a passive mindset. They aren’t looking to do anything complicated and often hope to relax. Because of this, this design stuck to standard UI practices and strategies for this 10ft interface.
All elements must be easily navigable on screen using a directional controller (d-pad.) Essential functions include left, right, up, down, and select.
The design must consider the text and critical on-screen actions within safe-zone margins that can vary between 85%-95% of the screen (height and width.) When designing these screens, 10ft interfaces with 1080p (and up) displays were top of mind:
- 1080p = 1920x1080px at 320dpi
- Simple san-serif fonts or simple system font
- Layouts that flow within limited-direction navigation
More Considerations
TV screens have a “Flicker” effect due to the display’s odds and even scan lines because of this, lines or borders should be no less than 2 pixels thin to prevent them from disappearing or flickering on display.
Also, when it comes to colors, it’s best to avoid using pure white (#ffffff) because it can create a halo effect. A slightly off-white (like #f1f1f1) is recommended use instead. It’s also best to avoid over-saturated colors (like red) due to their strain on the eyes. Darker colors (close to black) are opted for (mimic dark mode), keeping the eye focused on the available content.
Additionally, the font size was also a significant consideration for this project. Anywhere from 24px to 96px font size is recommended for 10ft UIs. No text should be less than 24px due to the user’s distance from the screen.
Focus/highlight states must indicate the user’s location/position within the navigable items – no ambiguity.
Design Principles
Finally, some additional principles followed include:
- Simplicity and lightweight interaction
- Clean and simple design
- Use of more prominent (larger) elements with considerable space between them.
- Presenting a clear set of actions/options on the screen
- Putting the most important content/options first for easy navigating
- Avoiding unnecessary screen levels – make it easy to get in and out of screens
Sources for standards, best practices, and inspiration:
- Cooper, Cronin, Reimann. (2014) About Face: The Essentials of Interaction Design (4th) Wiley. (Pg 564-566 – Designing for 10-foot interfaces)
- Design and User Experience Guidelines (Fire TV) | Amazon Fire TV
- Introduction – Android TV
- Designing a 10ft UI. Designing a television user interface… | by Pascal Potvin | Medium
- A Step Forward: Designing for the 10-Foot User Experience | Solid Digital
- Re-Thinking User Interface Design for the TV Platform | by Pascal Potvin | You.i TV | Medium
- Beyond the Toilet Paper Roll: Prototyping for 10ft – Medium
- How to Design a Smart TV Interface That Works
- Designing for Television, Part 1
- Design Inspiration/Examples
Submissions:
ShannonKelly_10ftInterfacePrototype_Draft – Submitted February 25, 2023
group feedback_Project310ftInterface – Submitted March 1, 2023
ShannonKelly_10ftInterface_Final – Submitted March 4, 2023
See toggle functionality in action:
https://video.kent.edu/media/SKelly_10ft+Interface_Final/1_ih8q5obq