Designing Zumper for tvOS
I’ve recently designed and built the Apple TV app for Zumper and came out of it with a lot of insights on this new platform. Despite being just another app platform in the apple ecosystem, Apps on the AppleTV present a completely new user experience. First and foremost, the user input model is different. There are no taps and gestures on a display surface, but rather a new concept of “focus” before actions can be taken. Because the focus engine creates a different user interaction model, tvOS designers should take this new user behavior into account to when designing a quality tvOS app.
Here are a few points that we took into account when designing the Zumper tvOS app:
1. Avoid focus traps
Within iOS apps, the user usually has established ways of navigating through the app: a persistent upper left back button in the nav bar, a persistent tab bar at the bottom. The new interaction model on tvOS (delegating one UI component to be “focused” at a time) creates a scenario where navigation out of the current context is no longer as simple as a tap elsewhere on a display screen. The user is only able to select one thing on screen: what he’s currently focused on. Long vertically scrollable lists of content that force a user to traverse downwards ends up digging him into a hole hard to reverse out of if he wishes to return to content up top or even the nav bar.
Our solution to this problem was to keep navigational focus actions vertical (top down to get to different parts of the app) and presenting continuous content horizontally (left and right to dig deeper through items). Switching focus to different parts of the app or going to the nav bar is always a couple focus movements away at most. Digging further into content never leaves the user in a worse navigational state than they were in before.
2. Reduce movement of on screen content
Around a TV, it’s likely that a user may be interacting with the app with multiple people, each watching different parts of the screen. With only one person controlling focus, moving a UICollectionView can quickly throw the rest of the viewers out of sync — analogous to when multiple people are reading an article on a single computer screen and the computer user scrolls down before others are ready to move on.
Our attempt at mitigating this issue was to reduce movement on screen as much as possible. Content on screen would page as you moved forward, so that a set of 8 items on screen, would page to a new set of 8 items. This improves upon the default behavior of moving all the items on the screen only to reveal 2 new items. The reduction of movement made it easier for multiple people to look at more new content with one action while also minimizing the chance of disrupting other viewers with constant movement of items.
3. Engage the user with visual content
tvOS presents an opportunity to be extremely visual on a large display format. People are used to colorful captivating content on a TV screen so the potential exists to provide similar content for the user as long as you’re not sacrificing usability and legibility. Because of the large dimensions of the TV, assets that usually render well on hi-res mobile devices may not scale well fullscreen on a 1080p tv screen anymore. This may be a chance to push or encourage higher res assets and content within your product.
Since this is a completely new platform, there’s still a lot of UI standards that are not yet established or optimized. Try to not let standards of native iOS design dictate the UX of your tvOS app. Like designing for the Apple Watch, tvOS UI should be thought up from a blank slate rather than simply creating an iOS port. Test and experience your design on actual hardware before you ship.
