CLIENT: Global Television and Electronics Manufacturer
ROLE: One of two designers, submitting work to our client and an internal team of animators.
TASK: Create interaction concepts and patterns for a Smart TV menu to be further explored and visually designed by a team of animators.
Remote Capabilities
The remote offered with the Smart TV is different than a traditional remote in several ways, but most notably that a user can navigate the screen by pointing to different areas of the screen, and select by hovering over an action area and clicking.
This functionality created a new set up design needs, and allowed us to break from traditionally clunky and slow navigation through TV menus.
Usability Testing
While the more conceptual scope of this project did not require formal user testing, we did explore the remote, along with remotes with similar point-and-click functionality, on devices like the Nintendo Wii.
Testing these types of remotes with existing interfaces allowed us to evaluate both the opportunities and frustrations that exist with this type of remote and screen functionality.
A pattern that only allows the user to "miss" their target in one direction (horizontally or vertically) avoids clicking on the wrong item.
This is especially true when the sensitivity of the remote movement is higher or the user is operating with it from a distance.
We also determined that you can browse more accurately with this remote when the pointer briefly "locks" on to a clickable element on the screen.
The level of how "magnetic" a clickable icon is to the pointer is something that should be tested with different actions and patterns, however we found that this was another example of small interactions that reduce frustrations and errant clicks and allows the user to move more quickly throughout the interface.
Sketches
We spent most of our time sketching and noting design patterns that work for this combination of remote and screen. As our sketches formed, we began to lean towards a bottom menu that is activated by hovering to the bottom of the screen.
Wireframes
We created wireframes detailing some common interactions for this Smart TV, including accessing apps, saving apps and shows to favorites, and browsing/previewing content with minimal obstruction of what the user is currently viewing.
