tvOS App Development Challenges: Focus Effects & Infinite Carousel

Apple’s tvOS is based on iOS 9 and uses many of the same frameworks and technologies, but building apps for Apple TV comes with some unique challenges. Because users are interacting with the device from across the room instead of in the palm of their hand, making something as engaging and immersive as Apple’s native tvOS apps requires developers and designers to think creatively.

Experiencing applications on this platform is largely influenced by the focus engine, a system within UIKit that controls focus and focus movement. While building Apple TV apps for our clients, we encountered two primary challenges around the focus engine: focus effects and infinite carousel. We also developed some inventive solutions.

Focus Effects

One of our clients tasked us with building an Apple TV app that presented unique content with a memorable design. We knew it needed to feel lively and visceral. In particular, we wanted to make sure that all the interactive elements used animated focus effects.

Focus effects on the Apple TV are similar to what happens when you hover a mouse cursor over a Web page. As your thumb flicks around the Siri remote touchpad, focus zooms around your television screen.

Focus effects in Apple’s built-in apps are always interactive. Gently wiggling your finger on the touchpad makes the focused element wiggle around, as if you were in direct contact with it. There are cool three-dimensional effects too, which contribute to the overall experience.

Unlike iOS, where your finger taps directly on the screen, tvOS uses the focus engine as a proxy of where your finger is on the touchpad. Focus effects, especially interactive wiggle animations, draw your eyes to a focused element, making apps easier to use and more fun. Consider this example from the native Movies app:

With interactive animations, there’s no mistaking which movie poster is currently in focus.

The Challenge

Our goal was to implement focus effects into our client’s app that were as good as, or better than, the ones in Apple’s own apps. But, when we started working on the project, we ran into a big problem.

Except for static rectangular images, there’s no straightforward way to add interactive focus effects to arbitrary UI elements. Other kinds of elements (circular avatars, text boxes, buttons, embedded videos, etc.) are not supported out of the box.

After lots of research and experimentation, we realized that all the raw ingredients we needed to recreate Apple’s standard effects were already there. We just had to find the right recipe.

The challenge was two fold. First, we needed to break down all of Apple’s focus effects into their basic elements, writing smaller chunks of code that would recreate each one. Second, we needed a way to mix and match the basic effects, composing them into groupings that work best for each particular kind of UI element.

The Solution

By combining a number of older APIs ported to tvOS from iOS and wrapping them in a custom framework, we built the tool we needed to add focus effects to every view in our client’s app. We were even able to tweak subtle aspects like drop shadow radii and maximum tilt angles to achieve effects that were perfectly suited to the client’s design goals, rather than the one-size-fits-most approach of the limited built-in option.

While we can’t show you our client’s actual app, we are able to show you some examples from a test project. Below is an sample of a “flattened” view hierarchy. Each cell has a rounded-corner background image, a big emoji character text label, and a title label. All three of these elements are moving in unison as if they were one view.

We took great pains to make our focus effects precisely match Apple’s own effects,so the user feels instantly familiar with the app. Only a trained developer’s eye should be able to notice the hidden extra effort it took to create these effects. This is another example of how we can create custom parallax effects with multiple views.

Each cell has a big text label displaying a single emoji character and a number of image views behind it to create a tunnel effect. These views could be anything: more text labels, embedded video players, animated GIFs. Our custom framework allows us to combine any elements we wish, independently controlling the parallax effects for each layer.

With this custom framework in hand, we were able to tweak the finer details of each element until it looked exactly the way our client wished. It felt really good to be able to say, “Yes, we can do that,” instead of, “Sorry, that’s too hard.”

Infinite Carousel

Another client tasked us with a design that included an “infinite carousel” at the top of their app’s main screen. An example of this is the carousel at the top of the Movies app on the Apple TV:

The user can scroll to the right or left without reaching the end. The content keeps repeating as far as you wish to scroll.

Apple’s carousel was good inspiration, but we wanted our client to have something even better. Our design goals included:

• Allowing the user to infinitely move focus right or left along the carousel.
• Allowing the user to interrupt scroll animations between cards while the animation is “in-flight” (not yet finished). This makes the carousel feel responsive and pleasant to the touch.
• Focus effect animations (items changing size as they’re focused or unfocused) that have the correct timing. Legacy approaches had intermittently buggy animations that revealed the “seams” between loops of the carousel items. Ours should always have smooth animations.
• A focused card that consistently took the center-stage position and animated smoothly into place. We had to prevent the focus engine from interfering with this animation.

Since our client’s carousel is the first and largest UI element that new users will interact with in the app, its implementation needed to be great.

The Challenge

It should be noted that infinite carousels are nothing new on iOS. There are plenty of examples in iPhone and iPad apps. Underneath the hood, there are many different ways to implement them.

The new Apple TV runs tvOS, which is like a cousin of iOS. At first blush, it seemed like we could just reuse some code that served us well on iOS. However, soon after development got underway we encountered a big challenge: None of the strategies that work well on iOS work perfectly (or, sometimes, at all) on tvOS.

In this case, the challenge centered around our access to the focus engine. Unlike an iPhone, where your finger touches the glass directly, with Apple TV your finger is on the remote. The operating system plays the middleman, responding to touches on the remote by moving the focus around the screen. Focus movement is not something that developers can tightly control though. Instead, developers are somewhat dependent on the focus engine to follow the cues that we build into the app.

The Solution

In order for our carousel to scroll infinitely, we had to give the right cues to the focus engine. It took a lot of attempts and dead ends until we found the best solution.

We arrived at an approach that combines a handful of simple views with one of Apple’s more recent tools: [UIStackView][stack]. With custom animations to mimic standard scrolling animations, and some special logic to make the items loop infinitely, we were able to get the exact experience we needed.

This approach nailed all of our design goals. We were quite pleased to be able to give our client the best possible carousel for their app.

As we dive into new projects for Apple TV, we will continue sharing what we learn. Check back next week as we discuss more tips and tricks for building better Apple TV apps.

For more insights on design and development, subscribe to BPXL Craft and follow Black Pixel on Twitter.