Radio for SoundCloud: Part Two
Designing and developing an application for Apple TV
In part one of this series, we talked about our experience developing an Apple Watch counterpart to our iOS application, Radio for SoundCloud. After the release of our Apple Watch app, we shifted focus to the Apple TV. Porting an iOS app to tvOS presented some interesting challenges. Along the way, we learned a few things about code reuse and designing for a fundamentally different platform.
Code Reuse: A Good Thing?
While reusing code from an existing iOS app for Apple TV certainly helps get a project started, it’s not always a perfect solution. iOS applications are written for a touch interface, while TV is based on a focus model
in which users select targets via a remote. This naturally affects the development of the tvOS app, but more importantly, must be accounted for in the user interface (UI) design.
The visuals of the station view from our iOS app translated nicely to the TV screen, so we decided to port this code to tvOS to get us started. In doing so, we immediately encountered a problem with applying the focus model to a gesture-driven view. We knew that we needed to make this view work within the paradigm of Apple TV, so we created an invisible view that captures focus events and controls the station view by centering the selected station on screen. At the end of the day, it was a lot of work to reuse an iOS UI component.
In terms of visual design, UI elements will need to be sized appropriately for a TV screen. Designers will also need to think about how the tvOS standard focus state, an enlarged item with a drop shadow, will fit into screens initially created for iOS.
UX for the Big Screen
While Apple allows for one-to-one conversion of iOS apps to tvOS, directly converting software designed for one device to another does not always offer the best experience. With new navigation patterns and a larger screen, it was important to reconsider our intended user interactions and how to best utilize screen real estate.
With this in mind, we designed a new player screen for our TV app that allows users to perform all actions within one view. Once inside the player, the user may swipe though tracks or swipe up to reveal a tray, allowing users to change stations without leaving the player view. While this screen is based on the iOS player view, we took advantage of the vast screen real estate to breathe new life into a familiar screen.
From a development standpoint, writing new code made it easier to add new features. The screens created from brand-new code granted us the luxury of developing via small, incremental updates that were easy to understand and modify. However, the station view was more difficult, because enhancements needed to be built around and integrated with existing functionality.
Designing for a Stationary Device
Revising our iOS designs for Apple TV also meant considering the way in which people interact with a stationary device. The majority of user flows can be characterized by short interactions: browsing, selecting content, and playing that content. After content is selected, in the case of a music player, the TV becomes an object in the background.
Thinking about an “in the background” experience, lead us to add a music visualizer to our application. We created a custom mosaic with album artwork and color fills that respond to the beat of the music. The visualizer allows the app to become part of the background without becoming static.
What We Learned
A tvOS app is a fundamentally different experience than that of iOS. The larger screen size and focus model create different UX requirements that can make recycling components from an iOS app ineffective. These two factors alone are reason enough to design a new experience specifically for this platform when developing a tvOS app.
Getting to the final build was a team effort. Continual communication between design and development teams allowed us to adapt to new paradigms and solve any problems we encountered. Together, we were able to create a unique and experimental set of apps, and we’re very happy with the result.
Contributors
Laura Levisay, Designer at thirteen23
Max Wade, iOS and Android Developer at thirteen23
Tom Nelson, iOS Developer at thirteen23
Find us on Facebook, Twitter, and Instagram or get in touch at thirteen23.com.
