"Beyond Touch Screens: Designing Great TV" Michael Swingler, Ignite at #ProductSF | Summary and Q&A

TL;DR

Designing television apps requires careful consideration of the remote, distance from the TV, and platform compatibility.

Key Insights

• 🎨 The remote is a significant consideration in TV app design, influencing navigation and design decisions.
• 👤 Designing with a grid-based system helps users navigate TV interfaces more easily.
• 🌥️ Distance affects legibility, necessitating larger sizes for buttons and text on TV interfaces.
• 😀 Platform compatibility and interface conventions must be kept in mind for consistency across different apps.
• 😀 Complex tasks like entering data are better suited for devices with keyboards rather than TV apps.
• 📺 Color profiles differ between TVs and other devices, requiring careful attention to prevent color banding.
• 👏 The use of typography is crucial in TV app design, selecting legible typefaces and appropriate font weights.

Transcript

so i'm michael swingler i'm the associate creative director at kincaid and we are a product design and development studio based as he said in the bay area and also in new york so some of the biggest considerations that we like to take into account when we're working on televisions for uh the tele applications for the television are we like to consi... Read More

Questions & Answers

Q: How does the remote affect the design decisions for television apps?

The remote dictates many design choices, as it limits navigation to a linear mode. Overcoming this, designers use default selected states to guide users and create a visual representation of where to begin navigating.

Q: What approach is taken when designing navigation in TV apps?

TV interface navigation is treated like the game Frogger, where action happens along the x and y axis. Designers use a grid-based system to facilitate navigation and strategically locate core functionalities to minimize button clicks.

Q: How does distance affect TV app design?

Distance affects legibility, prompting designers to make elements larger on TV interfaces. Buttons, logos, and text input boxes must all be larger than on other devices for optimal visibility from a distance.

Q: How does color affect TV app design?

Color profiles differ between televisions and other devices, causing issues like color banding. Designers must pay attention to colors and gradients to ensure a smooth appearance on TV apps.

Summary

In this video, Michael Swingler, the Associate Creative Director at Kincaid, discusses the considerations and challenges involved in designing television applications. He highlights the importance of the remote control, the distance between the user and the television, and the platform on which the applications run. Swingler shares insights from a recent project where they ported an iPad app for Gaiam TV to the Amazon Fire platform, explaining the design decisions made to address issues such as navigation and legibility.

Questions & Answers

Q: What are some of the key considerations when designing television applications?

When designing television applications, we take into account factors such as the remote control, the user's distance from the television, and the specific platform the app runs on. These considerations greatly influence the design decisions we make throughout the project.

Q: How does the remote control influence the design of television apps?

The remote control plays a crucial role in interfacing with television apps. It often dictates the design decisions we make. For example, while an iPad app may offer non-linear navigation, the linear nature of the remote control forces us to overcome specific design challenges. To address this, we utilize default selected states to visually guide users in navigating the app.

Q: How do you approach navigation in television interface design?

Television interface navigation is akin to the classic video game Frogger, where action happens along the x and y axis. We consider this grid-like approach while designing the interface, as it facilitates navigation. By strategically locating core functionalities, such as the video play button, we reduce the number of button clicks required and make it easier for users to access features.

Q: How do you simplify complex elements on the television screen?

When dealing with complex elements on the television screen, such as search functionality, we strive to keep the interface simple. By stripping away unnecessary user interface elements, we allow users to focus on their intended tasks without distractions. Simplifying the screen also helps improve usability, given the limitations of the television interface.

Q: How does distance affect the design of television applications?

Distance plays a significant role in the legibility of elements on a television screen. To address this, we make sure to enlarge buttons, logos, and text input boxes. Compared to laptops or tablets, these elements need to be larger to ensure visibility from a distance. Taking distance into account is crucial for creating a user-friendly television application.

Q: What role does typography play in television interface design?

Typography selection is essential for television interfaces. It is important to choose a typeface that remains visible when viewed from a distance, such as when sitting on a couch. In addition to selecting the right typeface, we also consider the appropriate weights within that font family. Thin fonts may look appealing in print, but they can become illegible on-screen, so choosing the right font weight is crucial.

Q: How does contrast contribute to clarity in television app design?

Contrast plays a vital role in creating clarity and visual hierarchy within television applications. By using appropriate color choices and contrasting elements, we can guide users and prioritize specific sections or features. For example, applying contrast to indicate the selected style filter in the yoga section helps users navigate the application with ease.

Q: How do different platforms impact television app design?

Every platform has its unique characteristics, including varying shapes and sizes, different remote controls, processing powers, and interface conventions. While the specific project discussed in the video did not require accommodating any specific interface conventions, ensuring consistency in design is crucial since the application will be part of a larger ecosystem. Future support for other app platforms necessitates keeping interface conventions in mind.

Q: Are complex tasks like data entry well-suited for television applications?

Television platforms lack a keyboard, making complex tasks like data entry challenging. Therefore, we believe that these types of actions are better suited for other devices, such as laptops or mobile phones, which offer more convenient input methods. Television apps should prioritize tasks that align with the limitations of the platform.

Q: How do you address color inconsistencies in television app design?

Color becomes an issue in television app design due to the differences in color profiles between televisions and other devices like laptops or computers. To mitigate the problem of color banding and ensure consistent color representation, we pay close attention to color choices and gradients, ensuring they translate well across different television screens.

Takeaways

Designing television applications requires consideration of various factors, including the impact of the remote control on design decisions, legibility at different viewing distances, and platform-specific interface conventions. Navigating linearly on television interfaces can present challenges, but the use of default selected states and grid-based design principles helps in providing a smooth user experience. Simplifying complex elements and prioritizing visibility through typography and appropriate color contrast improves usability. While television platforms lack keyboards, they excel in other areas, making them better suited for certain tasks. Attention to color profiles and consistency is essential to ensure optimal visual representation across different television screens.

Summary & Key Takeaways

• The remote is crucial for interfacing with TV apps, and its limitations influence design decisions.

• Designing with a grid-based navigation system helps users easily navigate through TV interfaces.

• The distance from the television affects legibility, requiring larger sizes for buttons and text.