Vimeo Apple TV App

2016 was an exciting year for TV design. Apple TV, Android TV devices, Smart TVs and the like, all made great strides in pushing the TV experience into the modern age. I was fortunate enough to design a number of TV apps for Vimeo this year, and our Apple TV product is definitely the most noteworthy of the group. Earlier in the year, Apple unveiled their updated Apple TV hardware, as well as a brand new version of their software, tvOS.

From a design perspective, tvOS was a huge step up from the static, flat and frankly uninspiring designs of their earlier design standards. The update included more familiar Apple UI, their San Fransisco typeface, their trademark background blurs, siri integration, and a new focus state paradigm that uses depth and motion to reinforce where the user is focused at a given time.

While the updated designs and app templates were much improved (and got the job done for basic video consumption), I think they’re still just starting points for what the future of the TV experience could become. TV design poses a lot of inherent challenges, but there’s also a lot of potential for meaningful innovation.

If a designer moves from desktop or mobile to TV design, they might immediately feel limited by the lack of complex user controls, and the need for simplicity that comes with the terrain. On a desktop or a phone, the user can literally click or touch anywhere on the screen, and there’s no need for a constant focus state. By contrast, when designing for TV, we typically only have a directional pad and a few other buttons to work with. Swipe gestures, double taps and similar interaction standards have kind of spoiled us in the mobile realm. After pairings things back to basics, it can be difficult to fit our wildest dreams into the practicality and modesty of a simple remote thats 10 feet away from the surface of our screen.

With this in mind, we still wanted to push the interaction envelope at Vimeo. We explored a lot of different ideas, and while a number of them did get chopped down by the constraints mentioned above, we were able to innovate in ways that we hadn’t really seen on a TV app before.

One of the problems we wanted to try to solve within the app was that nagging pain-point of users spending way too much time looking through thumbnails, trying to decide what to watch. In the standard TV design paradigm, users are presented with rows of video clip thumbnails, that they can click on to enter playback. While this is an obvious and simple solution to organizing video content, its a pretty far departure from our TV experience from yesteryear, which entailed more immediate decisions. We would flip through channels and decide what we wanted to watch based on the actual video content itself.

The biggest way we addressed the browsing vs. watching problem is by creating a feature that we call “cinema.” At the top of our Explore page, we present the user with the best videos (selected by our curation team) for a number of different categories. The videos begin playing automatically, and let the user quickly switch between the different playlists, as well as between videos within that playlist. It brings the feeling of channel surfing back into the experience.

If you’re on on your desktop, you might be ready to browse, explore and interact with other members of the community. If you’re home on your couch, however, odds are you’re ready to watch.

Here’s a rough video preview of how it works:

I think this is an important feature, not only for the app, but for the Vimeo brand. Many Vimeo users may not have ever been able to experience Vimeo content in such a way. Usually a user will scour their feed or search for videos they might like, often by relying only on thumbnails and titles. They might very well skip over what could have been a new favorite video, simply because the thumbnail didn’t resonate with them. Now, however, they can start each video immediately and decide whether or not they’re interested. It turns the Vimeo universe into more of a standard definition of a television channel.

This isn’t the main structure of our app, however. Elsewhere in the app, we do rely on the standard grid views, for users who have something more specific in mind, or who would rather do some more browsing or investigation about what they’re going to watch. We use video cells in a relatively standard grid approach, but we’ve added our own spin on them.

Let’s talk about standard cells. Usually, if you open an Apple TV app, each cell will really only have two pieces of information: the thumbnail and the title of the video. If that’s the only information you’re giving the user about a video (which is what comes standard in the Apple TV templates), it can be hard for someone to know whether or not they’ll be interested in it. To learn more, they often have to click into playback, watch it for a bit, and then click back out. This is a pretty labor-intensive experience for someone who just wants to sit back and watch some TV, especially if the videos are more short-from in nature.

I do, however, find that this simplistic approach to videos cells can be appropriate when users are familiar with the content. For example, if an app is showing the user a grid of well known movies and shows, odds are they already have some knowledge of those titles, which will greatly ease their decision-making process. This can be more-or-less sufficient for brands like Netflix, who provide block-busters and shows that are often widely marketed.

For a brand like Vimeo, however, that often serves up lesser known, short-form, creative content, the user typically will have no prior knowledge of what’s being presented. This means its up to us to provide them with as much information as possible, to help guide their decision. One of the ways we addressed this was by providing more information in each cell. We provide the video thumbnail, the title, the name of the creator, and the duration of the video.

In the “feed” view (shown below), we also provide context as to why that video appears in your feed, such as a friend of yours liking or uploading a new video.

In terms of the actual visual style of the cells, we chose to break from the standard style here as well. One of the things that immediately struck me when I opened the new tvOS for the first time was how bright the screen was. Typical TV apps specify using a dark UI environment to keep it easy on your eyes when you’re in a dark room. Apple’s first release seemed to blatantly ignore this rule. We started designing with a dark theme even before Apple even added “dark mode.” We think its the way to go. The focus state enlarges the cell, adds depth (using shadows that are still visible on a dark background), and inverts the background color to white, making it totally clear whats in focus.

In my opinion, the best hardware improvement on the new Apple TV is the trackpad on the remote. It comes into play in a lot of subtle ways, such as giving you hints as to where you’re focused on the screen. Your thumb will cause the focus cell to shift a bit, immediately signaling where you are. While I love this feature, I think the perspective and parallax additions are a little overkill. You don’t really need to shift the perspective of the cell to accomplish the real utility of the feature. In our app, the cells simply move in one direction or another, instead of tilting and making the text less legible.

Regarding parallax, Apple’s splashiest visual addition: I get that it adds some flare and visual depth, but I think it directly contradicts the depth paradigm that they’re already creating when they pop one of the cells off of the background. Without parallax, we have a super clean representation of a card coming towards us and off the screen. When you start adding other layers on top of, or below it, it creates a sort of “spinning plates” effect that defies the physics of the environment they’ve created. You’ll often get backgrounds that start bleeding off of the card, or logos that start shifting around in an unnatural ways, breaking the visual illusion of one cell that drifts closer to the user.

The second way we provide more information is by giving them the option to show a full detail view, simply by pressing and holding down on the trackpad. If a user simply clicks on the video cell, they’ll go right into playback. When the user initiates the long-press, however, a new screen appears over the grid, providing a full description of the video, a larger thumbnail, and how many people have liked or watched the video. The user can also choose to add the video to their Watch Later list, see the creator’s profile, or take a number of other actions. To encourage discovery of this feature, just resting your thumb on the trackpad (but not actually clicking it) will reveal a tooltip that reads “Click and hold for more info.”

Regarding the player, we’re using the standard tvOS player as of now. It will, however, have a few tricks up its sleeve in the near future.

Promo video:

Updates to come soon! Keep an eye on the app (and this post) for developments.