Streaming tech in focus: building a seamless cross-platform experience

David Kovacs

David Kovacs

CTO

Technology Mobile Smart TV User Experience Product Design
01 July, 2020

A cutthroat race to conquer the new digital paradigm

Once again, home entertainment is on the brink of a serious paradigm shift. In the 1950s television, with its previously unprecedented popularity, stole the spotlight from the radio. Similarly, by today it’s an undisputed fact that subscription-based video streaming services have become real challengers to traditional television as the main entertainment platform.

Rapid digitalisation, increasing sophistication of smart device ecosystems, and widespread access to high-speed internet have resulted in more than 400 subscription-based streaming services, regularly used by over one billion subscribers worldwide. For streamers such as Netflix, Amazon Prime and Disney+ business is expected to grow rapidly in the foreseeable future both in terms of revenue and user penetration.

A plethora of operating systems exists to enable streaming on various devices, such as WebOS or Netcast for LG TV, Tizen or Orsay for Samsung, and other platforms independent of TV brands, such as RokuTV or SmartCast. And naturally, the biggest competitors of the field are Google’s Android TV and tvOS by Apple TV.

These two have embarked on different journeys, and unsurprisingly, their respective routes very much recall their approach to mobile phones. In this article, we will review these two OSs.

Google’s TV operating system is more open than Apple’s. It is built into TVs of various manufacturers, such as Sony, Philips or Xiaomi. Apple, on the contrary, once again opted for building their own hardware to house their operating system tvOS, and aims to provide more optimised performance and a more seamless— and pricey — user experience.

In the long term, both Apple and Android have the potential to become the dominating player of the smart TV industry, realising a similar growth curve to mobile.

Both Google and Apple have ample experience in viewing their platforms not only as an operating system for the given device but also as digital ecosystems and development platforms. Thanks to this approach, both are equipped with the best possible toolkit for high-quality cross-platform development processes.

In the long run, the competition of smart TVs and smart box manufacturers is not only a race for market penetration and distribution, but a battle fought for supplying the best digital innovation platform. The challenge is no less than providing the most suitable platform for developing innovative products, all the while rigging it with stunning user experience.

How streaming works behind the scenes

Streaming is a seemingly straightforward business where viewers have to navigate only three questions:

  • What content to choose?
  • Which app to use for streaming it?
  • Which device to watch it on?

However, this matrix looks a lot more complex if you are a provider, trying to find your way to optimise your streaming service for different platforms and satisfy user needs. 

Streaming tech_development platforms
Streaming tech overview: What kind of apps to develop when optimising a service for different platforms

What circumstances can be critical when designing a streaming app, and what pitfalls to expect when deciding on a certain platform? Where do big-screen and mobile devices differ, apart from the obvious? In the following sections, we are going to examine most of the above while providing tangible examples to illustrate our narrative focusing on Apple and Android operating systems.

The key challenge for big-screen players: cross-platform experience and device interconnection

A key factor why the tech giants’ solutions can win over other manufacturers dominating the market is how well their products can work together with the users’ other gadgets. There are obvious low-hanging fruits for native mobile platforms that can make users’ life easier on the big screen too.

To provide a really simple example, let’s take registration to a new store. Who likes typing their name, email address, credit card data and even billing address for the hundredth time? It can be a painful experience even on a website… let alone doing it with a remote control on a big-screen device! In such a case, implementing a mobile keyboard can come to your users’ rescue.

black quote mark

The main difference between the web, mobile and the big screen is not actually the size of the screens users have to look at, but the way they can interact with these interfaces.

A touch screen gives users access to any point of the layout with a single touch anytime, while big-screen users navigate with a remote control: item by item, in four directions. Considering the latter (and the distance between the user and the screen), ironically, a “small” mobile interface can handle significantly more separate items on a screen than a “giant” smart TV.  

Consistent Streaming User Experience

Making your users’ lives easier with comprehensive design

A cross-platform design project’s key challenge is to serve every possible user need while also being mindful of the user’s exact circumstances. Taking into account their environment, the platform they are using and even their current real-life situation (ie. commuting); yet keeping a clear consistency between all interfaces the user interacts with.

So how can we ensure maximum consistency? In addition to sticking to the usual brand colours and fonts, including the same controls for every interaction on each platform is the crucial point of applying a consistent design language and interaction design. Another cornerstone is keeping in mind what is, in fact, needed on the given platform (and not on the others), e.g., a native keyboard for a TV or mobile OS.

black quote mark

In other words: when the user looks at any of these platforms, they need to have the exact same look and feel about them, displaying the same information structure and on-screen controls.

In this area, the proven guidelines of Google and Apple can serve as a perfect baseline for a coherent and reliable cross-platform user experience.

In the next section, we will discuss the details through individual case studies to examine and break down how the above principles would work in practice.

#1 Designing and building for Android TV

Android TV is built on the same API and architecture that is used for phone and tablet apps. The two key differences of the TV platform is the form factor and the way users interact with the interface. However, there is no special API for these: since Android was designed with multiple devices in mind, the operating system supports them by default.

In order to facilitate the development of common patterns on TVs, Google has created the Leanback library. It contains UI elements and other APIs that can be used for building TV apps with a small amount of code—think carousels, side navigation, details screen, guided steps, onboarding, search and video playback.

Some customisation is available, but if you want to create radically different UIs, unfortunately, you have to forget about these built-in elements and build your new UI from scratch. However, keep in mind that switching between elements in focus could be a tricky stunt if using your own code.

If you are developing a phone app as well, you would naturally think of code sharing between the Android phone app and the TV app. 

Apart from UI code, most of the functionality can be shared almost identically on the Android phones and Android TV.

However, always bear in mind that TVs lack certain hardware features, such as GPS or telephony functions.

Parts of the UI code can also be shared—the Android platform provides great tools to do so—especially in case of non-interactive UIs where the only difference would be spacing and font sizes. In the end, it’s up to you whether you decide to deliver two separate apps, or bundle the TV and phone functions together into a single app—by the way, Google recommends the latter.

Android TV is essentially a software platform, just like Android on mobile phones. In terms of form factors, the variety is nowhere near that wide across TVs as we’ve seen with handheld devices, which helps with design and development. The TV hardware, however, can still differ, with performance typically being lower on cheaper TVs than on high-end ones.

 All in all, TVs are generally slower than phones, which could result in a lagging UI, especially with animations. You also have to prepare your app to support multiple operating system versions, since TVs could be stuck on older OSs, and owners are less likely to update and replace these as quickly as their phones.

#2 Designing and building for tvOS

Apple’s response to the rising demand for television infotainment is their proprietary hardware called Apple TV, exclusively running tvOS, the company’s own operating system. Having both software and hardware built in-house, they are known for providing a seamless, snappy and consistent user experience for their customers.

tvOS is built upon Apple’s mobile operating system, iOS. From a development perspective, the main difference between the two is the input method. On iOS devices, the user interacts with the touch screen directly, while on Apple TV they control the interface indirectly by using a remote control or another input device.

This brought certain new challenges to handling user input and navigation through code. The system for controlling this new form of indirect user input is called the Focus Engine.

It listens for incoming focus changes and movements, then gives us the possibility to react to them. Any action initiated with the remote control—e.g., lowering the volume, changing the channel, etc.—is thus processed by the Focus Engine.

The default, system-provided UI elements are very similar to what we can find on iOS. They received an updated appearance to fit well in this new environment—they contain the necessary features needed for the Focus Engine to work, and also make sure the interface will look great on a bigger screen too.

However, opting for a bespoke appearance implies that the task of implementing the constraints originally managed by the Focus Engine and the big-screen real estate will fall to your custom components.

While tvOS has clearly brought about some new features and paradigms, the majority of frameworks used during development are ported from iOS. Having the same foundations means that security, networking, video playback and several other business-critical implementations may be shared between the two platforms.

As another point, it’s worth mentioning that storage on Apple TV is limited. It is advised to use local storage as a session cache, and to store the vast majority of user-specific content remotely, accessing it on demand when needed.

Conclusion

The young but powerful market of streaming apps is characterised by constant fluctuation and turbulence. The only way to truly benefit from the latest trends and fully satisfy subscriber expectations is to design a comprehensive and delightful cross-platform experience that is absolutely consistent wherever users might open it from.

black quote mark

In order to provide such a complete UX, confidently navigating the tech aspects of this market is indispensable.

Besides keeping up with the constant motion and development of the industry, it’s crucial to be familiar with the limitations posed by various devices. In other words: your UX might be phenomenal, but if it’s not optimised for the device, your effort was for nought.

The competitive advantage that market giants such as Android or Apple possess derives from ensuring an attractive development environment and bolstering cutting-edge UX design. Make sure you take advantage of these platforms as they will stay on the top in the long run.

rotate phone rotate your phone to browse our website