Beyond the Toilet Paper Roll: Prototyping for 10ft
As we’ve written about before, designing media applications for 10ft-interfaces brings a whole new crop of challenges and considerations to the playing field — as is the case with any platform.
An excellent way to combat these challenges and streamline the development process is to prototype. Popular prototyping apps such as InVison, Axure, and Pixate are great resources when testing interactions on touch-based interfaces.
But what about prototyping for 10ft?
As of yet, there aren’t any prototyping solutions in place when designing for 10ft-interfaces. This is a problem. With the over-the-top (OTT) market booming in popularity, media brands from all walks of life (sports, news, entertainment and kids) are creating video applications to stream their content.
These apps have to be accessible on a number of devices in order to accommodate for the fragmentation that exists in the market: mobiles, tablets and 10fts. Examples of devices that utilize 10ft-interfaces are game consoles, Smart TV’s and set-top boxes (Roku, Apple TV, etc.). In fact, it is slated that by 2017, over 50% of the US population will be consuming content through a connected TV device instead of a traditional pay-TV service.
Needless to say, the TV screen is making a comeback in a big way and it’s imperative that the missing piece in prototyping be filled.
Prototyping for 10ft should be seamless enough to create something that anyone can utilize to rapidly test interactions. With prototyping in place, the possibilities for the future of 10ft-interfaces are endless.
In an attempt to move the needle in the right direction, we here at You.i TV have created a rapid WYSIWYG framework for prototyping 10ft applications and we’d like to share our methods in hopes that you will be able to solve your 10ft design woes.
_______
With our 10ft prototyping model, we’re aiming to solve the disconnect between input and output. There’s no need for animations or graphics at this point in the development stage — only wireframes.
The input (a remote) functions essentially strips down to six basic commands that determine interactions: Up, Down, Left, Right, Ok and Back.
The output (a screen) provides feedback for the the input’s interactions.
With this in mind, we created an InVision like framework using Kirby’s CMS that allows a designer to upload wireframes or high fidelity mockups and assign six basic button mappings to each screen. Each button would link to another screen in the prototype and, when run in a browser (output), could be easily interacted with using a keyboard or USB remote (input).
We knew that utilizing some sort of CMS would get us to the finish line quickly and we’ve had past successes using Kirby. With the basics in place, we were able to build clickable prototypes within minutes!
The structure was simple; the user creates a screen, uploads an image and assigns anywhere from one to six button mapping configurations which link to other screens within the prototype.
FIG. 1 — Kirby prototype backend
Once all screens have been linked and the prototype is ready to go, we can then test internally using a USB remote or share a unique URL with anyone who can interact with a keyboard.
FIG. 2 — Prototype loading screen demonstrating keys used to interact with prototype
FIG. 3 — Prototype interface as seen on a desktop device.
FIG. 4 — Prototype as seen during testing (browser connected via HDMI)
You can view a sample of our prototype, here.
This setup has worked really well for us and provides flexibility and the ability to quickly iterate through design variations. We’ve found that conceptualizing ideas on a whiteboard doesn’t often translate well into a clickable interaction with a remote.
For those of you working with clients, utilizing this setup will cut your revision time in half. Without 10ft prototyping, the only way to showcase interactions on a 10ft-interface to your clients is to record a video of the input and output or send a massive document with details of each input function’s interactions with each output (lander page, pdp page, video playback page, etc.). With a CMS prototype, you’re able to send a custom link to clients for testing. You can also include release notes and user-flow patterns in the link — a process that we’ve implemented in our prototype method.
Here at You.i TV, we’re always researching and developing new ways to improve the OTT market and enhance the TV-viewing experience. More exciting trials are on the horizon as we look to build on this work and incorporate remote testing; Amazon Mechanical Turk integration, eye tracking software and much more — but those are topics for other posts.
Prototyping for 10ft is an absolute necessity.
We went through numerous prototyping iterations to find our best match, including something involving a toilet paper tube. We hope this post has provided you with a simple and flexible solution for testing interaction elements with your media application.
FIG 5. Original toilet roll tube remote
