10 Ft Interface, Streaming Media (Portfolio Piece)
For: Kent State University | Role: Student | Fall 2019
In this academic scenario I was asked to design a streaming media services interface, aka a 10 Ft Interface. It’s the kind of interface you use when you navigate apps like Netflix or Hulu. The “client” asked for two sample views that demonstrated how the Interface Design and remote control design would optimize usability.
The client, a media company that had only distributed its array of content through web browsers, had identified an opportunity to compete with a physical streaming device for televisions. Because their only previous experience was in media licensing and not over-the-top distribution, they reached out for assistance with this problem.
Research – 10 Ft Design Rules
Setting up this design first required looking at the required inputs and expected outputs from the client. In this case, it was clear that images, titles, descriptions, and other video details would need to be displayed in category and featured video view ports. Additionally, the remote control would also need to have only the necessary navigation and media control buttons.
Designs like this also are even more heavily reliant on accessibility rules than other apps. The designs also included considerations for font sizing, colors, opacity, and simplified navigation. Especially helpful was this video from Mark Brown over at Game Makers Toolkit.
The initial viewport sketches were rough but adequate for moving forward. One thing I learned when researching this kind of work was to start your drawings at as small of scale as you can handle, which would prevent you from including too much information on the window from the beginning.
I found that these three screens met the deliverable requirements of the client, but did end up adding another viewport for user with vision disability.
The original remote design was based on existing streaming remotes; single handed, limited buttons, circle pad navigation, and a central select button.
I also originally imagined users paging through results and included a scroll slider, but later realized that the added functionality didn’t reduce the number of interactions enough to warrant its existence.
Finally, you can see how the final design was influenced by the natural movement of the thumb sketch on the right. The thumb naturally moves in a sort of hourglass pattern, with the most natural movement on the curve from bottom-left to top-right.
A simple grid view that makes the media title, year made, runtime, age restrictions, and viewer rating. Also note the bottom row of images are cut off, indicating that there are more options below.
The decision here was to avoid image only swimlanes used by other apps to allow for more details rather than relying on images only.
The is an alternate view that allows users to view descriptions and cast information while browsing. This decision was intended to avoid users having to go into media items and then repeatedly backing out. This allows for a single click (up/down) to view more info.
This viewport allows the user to play the media, view photos, or select cast and crew profiles to find similar media. One of the differentiating factors of this app is that its design is intended to assist cinephiles get deeper into the films they watch, and this viewport helps users do that.
As you can see, this is a very simple prototype. However, that is appropriate given the medium of this application and the posture of the user. This is not an application that you want to get fancy with otherwise you will confuse users.
Here you can see the progress from the initial prototype. The first version’s size was good, but the input options were unclear and ergonomically lacking. In the final version, buttons were removed and placed in line with the natural movement of the thumb (red line).
- Fonts for 10 ft designs should be no less than 28 pt fonts, as readability degrades quickly below that threshold
- The use of typeface, font size, and case all help distinguish text affordances
- Other affordances are also paramount to usability, helping user distinguish what is selected, what can be selected, and what selection options exist
- A distinct need for long text entries to be handled in a way that is usable and non-distracting