UX Across Multiple Platforms

While different form factors require different layouts (that is, a mobile view is smaller than a 10-foot one), the user experience of your app across form factors should essentially remain consistent. The platforms you have selected for your app to support will have a significant effect on the decisions you will need to make to deliver a consistent experience. The breadth of devices supported on each platform can add to the complexity by introducing a range of performance and memory capabilities.

Handsets and tablets will tend towards denser screen resolutions due to being experienced more intimately than a 10-foot device. A user typically watches a television from approximately 10 feet away, and the human eye is capable of detecting a limited amount of detail from that far away.

The limits of certain platforms and of device memory are important considerations in your design and development process. To avoid the pitfalls of these limitations, conduct regular memory audits and testing of your app; these kinds of reviews should be conducted throughout the development process to provide you with valuable feedback. Conduct ongoing reviews of all development and design decisions in light of the end result for the user, to ensure that none adversely affect the user’s experience of your app.

One example is a mechanism like Single Sign On. In some platforms, when a user is prompted to sign in, the app will automatically be backgrounded. If the device happens to be lower performance, with more restrictive memory requirements, the process of SSO can crash the app. A memory audit can uncover these kinds of issues well in advance.

Asset Requirements

Once you have decided on the form factors you are designing for, you will be able to compile the specifications for each. Screen resolutions, specifically, vary between form factors, and even in different versions of a similar form factor. Not all image file formats are supported by each platform, either. If you have an idea of the form factors you will eventually be supporting, you can develop a list of required specifications for image formats to ensure that you will have all images in the correct dimensions and formats for any desired platform. Refer to the specific platform vendors for supported image formats.

When speaking about visual assets such as images, it’s important to delineate between static and dynamic images. Static images are anything that is integral to the display of the app. These can include logos, background images, gradients, buttons and anything that is local to the interface. Dynamic images are those that are transient, like a poster image for a movie, and which may be created in multiple resolutions for different platforms and hosted someplace, or accessed through a resizing service that will display the correct image for the platform and device at runtime.

Knowing the screen resolutions for the form factors and devices your app will support is important as this is the first step in knowing what assets you will need per platform and device, but also for optimizing and packaging your assets later on. Even if two supported devices are technically within the same form factor, they may have different screen resolutions requiring some careful consideration of how to manage the assets for each version of an app.

Interactions

One of the most basic UX considerations has to do with the way the user selects or chooses an item or function within an app. In a mobile version, a user may swipe or touch a screen with their fingers to scroll through a list of items and select the one they want. In 10-foot, this action is usually mediated by a remote control device. When selecting an item with a remote, the user needs to know what they have selected, which is referred to as a focus. How you choose to indicate focus may depend on the limitations and formatting of the platform and devices you are designing for. Understanding how focus works on the platform and devices you are targeting will help you navigate this.

Additionally, even within the 10-foot experience, remote control devices may vary, and this can also affect focus behavior on that device. There is a built-in flow for determining focus that may be particular to a device, but also within the structure of the app itself, and these differences may require some adjustments during design and development.

Typically, the You.i C++ app logic for focus behavior is to move to the next closest element in a screen. This may not always align with the design of an app, or with the most logical way to treat focus for a particular device, so custom views and workarounds may be required to navigate these differences. For example, the flow of focus may be hard coded into an app to get around the Engine’s default focus flow, but dynamic elements within a user interface can create other issues when the focus behavior is hard coded.

Screen Designs

Determining the best experience for users of your app starts at the design phase, and requires consideration of many design variables in light of their impact on device performance. Generally speaking, the more complex the design, the greater the impact on device memory. This may not be as large a factor with a higher performing device, but most likely will be on the lower-end devices, which your app may also need to support.

Because the You.i Engine is designed to meld visual and interactive designs with code that creates the final app package, many of the challenges that affect functionality and performance of your app originate in the initial stages of design. These decisions will in large part depend on the form factor as well as the platform.

Animations and Transitions

An example of this are button animations. Button animations on a touchscreen should generally be short as the action on a mobile touchscreen device is fairly responsive. These animations may work differently on a 10-foot app where focus is dictated by a remote controlled input device.

Transitions are another variable. They determine how a user is moved from one screen to the next, or from one state to the next in a screen. Some platforms have restrictions on how long transitions are allowed to last; Roku, for example, has certification requirements that dictate how long transitions can take.