Assignment: 10ft UI & Remote - Draft and Final Iteration

Preface: This was a school assignment for the UXD Master’s program at Kent State University: Principles of Interaction Spring 2023

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.