Regular TV Doesn't Have to Suck: Redesigning Cable TV's User Interface

No Excuse

It's no secret that cable television is on its way out. Over the course of the past several years, more and more users have been opting to stream television programs through providers like Netflix and Hulu instead of paying for a traditional cable TV subscription.

But that's no excuse for cable providers to completely neglect their user interfaces for their existing customers. I currently have Time Warner Cable and their current interface is confusing, dysfunctional and just flat-out not nice.

An example that immediately comes to mind is when watching a program on demand, after it's complete, instead of returning you to the list of similar programs/next episodes, you automatically return to the home screen. This forces the user to have to re-navigate to their desired program to watch another episode. It's time-consuming and just super annoying. This was actually my reason for starting a subscription with Hulu Plus, just so I wouldn't have to deal with that headache as frequently.

A Fresh Take

default view

The main purpose of television, unsurprisingly, is to watch television. So that means that the interface should be as subtle as possible. The user doesn't want to be distracted by buttons or titles when they're watching their favorite TV shows.

The image above is how I think the default view should be, of course this is after the user has used a remote control to activate this menu. I'm also jumping the gun a little bit here and designing for Smart TVs, hence the layout and look of the design (with older televisions, there is no cursor, therefore no ability to select particular items on the screen that aren't under a primary menu item).

The overall layout is something that I've kept. On most current cable interfaces, when the user presses a button on the remote control, a title bar is activate on the lower quadrant of the screen, displaying the channel, program, time, etc.

However, I've taken a different view of how the interface should look. Using Google's Material Design standards I've utilized solid colors and tints of solid colors for interface items, and the Roboto typeface.

roboto preview

The backgrounds and tints change color depending on the overall color of the image on the screen. For example, this image depicting a sunset uses a warm color scheme of shades of orange. Another cooler image might use blue or green, etc.

alt view

Above is an alternative view of what the interface would show during a nature show, taking the greens from the image on the screen and then applying them to the interface. This makes the design as subtle as possible. It conveys necessary information without taking away too much attention from the images on the screen.

The Minimal Menu Bar

The overall goal of this entire design is to remove any and all unnecessary items of the screen, making what the user sees as simple as possible.

This menu bar, which also changes color like the other backgrounds, just in a different tint then the programming bar, displays only what’s important to see on a smart-tv: Wifi status, Bluetooth status, and the time.

It also has the option to open the quick-links menu, which we’ll talk about right now.

Everything You Need, Nothing You Don’t

Quick Links One of the most frustrating parts of newer smart tv’s, and cable interfaces is that to utilize any additional features (apps, VOD, etc), you have to navigate through layers of menus and prompts.

I’ve added something to this design to help curb that. When moving the remote-cursor up to the top of the screen, the user has the ability to open a slide-down menu with user-defined quick links, with these the user can add favorite apps and options to this menu that are availble after only one click. Wanna watch Netflix? Just open the menu and click Netflix. BOOM done.

Of course, the top bar can only hold so many options. This is where the ‘Apps’ quick-link comes into play. By clicking this, a subtle pop-up displays on the screen, offering the user quick-access to all apps available.

app menu

On Demand, Without the Hassle

VOD

Despite online streaming services, Video-on-Demand (VOD) is still a widely popular cable services. I know I still use it all the time to catch up on my favorite television shows.

The one problem I’ve always had (at least with Time Warner Cable’s menu) is that the interactions are just terrible. Just finished watching an episode of Silicon Valley? Wanna watch the next one? Well to do that you’re gonna have to go all the way back to the primary menu and then navigate back to watch. There is the complete lack of any sort of auto-play functionality or queue.

My new VOD menu aims to eliminate this issue by changing the design to reflect recent interest in binge-watching. The background color, like all other backgrounds, changes color depending on the average color of the picture on the screen.

When the user clicks an episode, a slide-down menu appears displaying three options: Play, Add to Queue, Description. This in my opinion adds the three most popular options all in one place, significantly reducing the amount of time it takes to begin programming on VOD.

I’ve also added a small ‘play’ icon over the preview image, this is there so that when reading the description of the episode, show, etc there’s a secondary way to begin playing, which might be closer to the cursor at the time then the primary play button on the slide-down menu.

Wrap Up

This is still a work in progress, there’s still a lot of different interactions and items that I need to design and work up, but this is the general idea.

The technology of how we watch TV has changed drastically over the course of past several years, and it’s time that the UI cable companies provide reflects the present, not the past.

I'll update this as I design more features.

Love it? Hate it? Have some constructive criticism? Leave me a comment!