Designing for Television, Part 2

Prototyping the user interface

Molly Lafferty
Sep 1, 2016 · 9 min read

Getting Started

What you’ll need to get started

Grab a browser

We used Chrome, but Firefox and Edge are also compatible.

Grab a controller

For this interface, you’ll need a game controller. Make sure it’s compatible with one of the core libraries, and keep in mind that some controllers may need drivers installed.

Connect to an HDTV

Connect your computer or laptop to an HDTV using an HDMI cable. Try to set up a 10-ft viewing distance, since that’ll be the benchmark for testing a good user experience.

Download the prototype

Download your own copy of the project directory. To view the prototype, open the prototype/index.html file in a browser.

  • js/data.js: The data that’s injected into the UI
  • js/libraries/Controller.min.js: Our custom Gamepad API library
  • js/libraries/Controller.layouts.min.js: An add-on for compatibility with more gamepads

Test the controller

Lastly, you’ll want to confirm that your controller is working with one of the core libraries, Controller.js. To test it, first go here. Then, plug your controller into your computer’s USB port.

Basic Framework

Let’s get organized and build just enough to test & tweak

app.js

Most of the prototype’s logic is located in app.js. The most important part of this file is our main object, Example, which provides a context for all of the different functions and variables that we’ll need to build the interface. After we declare all of our key functions inside this object, we’ll call Example.load() to begin the execution of our code.

var Example = {
data: prototypeCarousel,
container: document.getElementById('prototype'),
column: document.getElementById('prototype-column'),
...
}
Example.load();

data.js

It’s good practice to separate your data from your app’s logic. This makes it a lot easier to test, tweak, and calibrate your interface as you use it. We’ve stored the metadata for our design’s content, the carousel, in data.js:

var prototypeRow = {
title: 'Row',
content: [
{
eyebrow: '18PX eyebrow 1',
title: 'Show Title 92px 1',
summary: 'Lorem ipsum dolor sit'
},
{
eyebrow: '...',
title: '...',
summary: '...'
},
{...} // etc.
]
}

Mapping Button Presses

Organizing all of our buttons and events in one place

navigationHandler: function(event) {
var button = event.detail.button;
switch(button) {
case 'DPAD_RIGHT':
Example.dpadHandler(button);
break;
...
}
}

Handling Direction Events

A simple example that handles interactions with the direction pad

dpadHandler: function(button) {
var index = Example.column.getAttribute('data-selection');
var selection = document.getElementById('selected');
if (button === 'DPAD_RIGHT') {
if (index < Example.data.content.length - 1) {
index++;
Example.scroll('next');
Example.changeCursor('next', index);
} else {
Example.scrollOverflow(Example.container, 'post');
}
} else { ... }
}

Strategies for Cursor Behavior

Building a logical system for the cursor to jump around

One Dimensional List

In our example, we have a 1-dimensional layout: the selection can only move horizontally. Because of this, list traversal was the easiest method. Every item has an index, and you simply keep track of the current index and increment or decrement the index when the user moves the cursor.

Two Dimensional Grid

If your interface is a static grid of uniformly sized items, you can use a method similar to list traversal, but modify it to store two indexes: one for the row and another for the column. Remember, keep it scrappy.

Advanced Layouts

Sophisticated interfaces won’t always come in the form of a list or grid. For example, designing a radial menu on televisions is a reasonable concept given that analog sticks naturally map to a radial layout. A good strategy for enabling this type of advanced cursor movement is to perform collision detection.

Other Considerations

It’s easy to get lost in the technical complexities of list traversal or ray casting, but keep in mind a few more cursor behaviors that users will still need the interface to account for:

  • What happens if there is nothing selectable in the direction the user presses? Does the selection wrap to the beginning, or the next row?
  • Is there a need for advanced shortcuts to cut down on repetitive button mashing? For game controllers, will you use the triggers or bumpers?

Creating natural movement

Animating interaction on large format interfaces

Get Ready for Part Three

Developing our custom Gamepad API library

This Also

We help companies design products for mobile & beyond. Our studio is located in Brooklyn, NY.

Molly Lafferty

Written by

Design Director @ThisAlso Previously @Hugeinc

This Also

This Also

We help companies design products for mobile & beyond. Our studio is located in Brooklyn, NY.