Embrace the 10-ft. Space
Designing for the Living Room
by Dru Sidle, Principal Product Designer
You finish working a long day and you badly need a break, a respite from balancing several projects all with end-of-the-week deadlines. You could go for a jog or clean up around your place, but neither would give you the pause for your mind to recover. So you settle into your couch (by yourself or with a loved one), pick up the remote, and start watching your favorite tv show or movie.
Ahhhhhhhhh… you can finally relax. You even notice that your headspace feels lighter.
What you aren’t likely noticing is all of the micro-interactions that make your experience tailored just for you, the specific button presses you make to watch or learn more about a new series, and the invisible patterns that make all of this possible. By now, it’s a routine that you have developed. It’s subconscious and you do it with ease.
Our job at Hulu is to make the experience simple, intuitive, personalized, and most importantly, fun. When designing for the Living Room, we focus on those interactions, handle all of the details, and think about the best experience for the viewer. All you have to do is relax and enjoy the shows and movies you love.
Hulu lives on a wide range of devices, from phones and tablets, to web browsers, smart TVs, game consoles, and more. As Living Room designers (a team focused on the features and overall design system for Living Room devices) our motto is Embrace the 10-ft. Space.
The distance between a viewer and their device has implications on how we design an ideal experience. In a typical living room, you are likely somewhere between 5 and 10 feet from your flat-screen TV. You hold your phone about 12 to 18 inches away from your face, and when you’re not flying in basic economy, you are a comfy 2 feet from your laptop. Lastly, a VR/AR headset literally rests on your face, but displays depth and interaction in an entirely different paradigm than these other devices.
Now that we’ve touched on the range of experiences, let’s focus on that 10-ft. distance.
Know your Limitations. Know your Viewer.
The first thing I tell someone who hasn’t designed for Living Room before is get to know your device limitations, capabilities, and native patterns. By native patterns, I’m referring to those interactions, usage patterns, or remote inputs that are unique to a specific device family. For example, saying specific voice commands to engage a virtual assistant or respecting native focus patterns when creating an app interaction. Leveraging native patterns while designing goes a long way towards a smoother viewer experience since they’re already familiar with them.
We design for every Living Room device that Hulu supports. These devices range from high- to low-power and vary in their capabilities. We employ 3 different codebases: Swift for tvOS, Brightscript for Roku, and a modified Webkit for game consoles, streaming devices, and smart TVs. For more on that, there is a great piece that our Hulu engineering team wrote on building the Living Room experience.
Here are some high-level things to keep in mind as you start designing for the Living Room:
Leave the Special Effects to the Content
When designing for the “big screen,” it’s tempting to fill it up. Don’t. Avoid filling the space with small design elements and keep it light and intuitive instead. Respect that 10-ft. distance; make sure your typefaces aren’t too thin and your text boxes aren’t too wide for communicating series and movie details. Also, let’s not go overboard with animations and motion — doing so can distract and detract from the viewer’s experience. It’s the opposite of what our viewer (who’s here to relax and enjoy) wants. This approach isn’t common practice yet, but focuses on the content that drives viewers’ behaviors. The same content written about way back in a 1982 article on the impact of special effects in film and tv.
My Monitor ≠ Your TV
Designing would be a lot easier if we could count on everyone having the exact TV calibration, quality level, and the latest model, but that just isn’t reality. TVs vary quite a bit when it comes to their hardware, native picture mode, overscan, and video quality. Even the most common LED-lit LCD or LCD TVs still have different color ranges and illumination — CCFL backlighting, full array LED backlighting, and LED edge lighting are the most common. (More on that here.) So we must consider a range of TV specs and diligently test and dogfood to prevent situations where the color is way too bright or causes unintended visual vibrations.
Getting the Highest Return on Low-Power Devices
We can’t only design for the latest, super-high res TVs and high-powered gaming consoles. There are just way more inexpensive streaming sticks and TVs out there than not. And these low-power devices can’t necessarily handle all of the animations and scrolling that a high-power device can. We see a significant portion of our audience in this camp, not to mention that research shows that viewers keep their TVs for more than 5 years, on average. So we’ve been looking at this through the lens of Progressive Enhancement and a base design system that works efficiently everywhere and building from there.
Consider Human Factors
We are all human. Anyone less than an egomaniac can admit that we have our limitations. These limitations affect our attention span, cognitive load, and physical energy. When you create a design that requires changing focus and movement all around the screen, it can create fatigue within the viewer. In this way, it is easier to sway; moving your head/eyes (or attention) left or right to track focus; than to headbang; moving your head/eyes (or attention) up and down; throughout the experience. Designers also need to consider frequency and pace when creating elements of the design that will either animate in/out or change on the screen to ensure that a viewer will notice and process the change taking place.
You are not the end user. The viewer is.
Consider the individuals using the application or feature. Conduct qualitative user testing, read articles, and develop user stories to help drive your understanding of the viewer’s habits and routines. Consider the viewer’s actual living space, which likely differs from our clean/modern living room research areas and recognize that they may not be giving their undivided attention within their complex living environments. They’re probably also multi-tasking; it is their home or apartment, after all. Within the varied environments and taking into account our viewer’s busy schedules, we need to make sure that we simplify our experience to make it as easy to use as possible.
This leads us to one of our design tenets for Living Room Design:
Create a simple, viewer-focused experience that functions efficiently on viewers’ Living Room devices.
And now let’s get to (the) work.
How We Solve Stuff at Hulu
At Hulu, we leverage a component-based design system while embracing each device’s native patterns. We do this across all platforms that we support (web, phone/tablet, & Living Room) and are constantly working to improve our design operations to work more efficiently and more collaboratively with engineering and product management. In fact, we like to collaborate early and often within Hulu to ensure we have a variety of viewpoints and expertise.
In addition to evolving our Design System and App features, here are a few more practical considerations when designing for the Living Room:
Keep Interactions Super Simple
Building upon the human factors we mentioned earlier, it’s extremely important that we keep our app interactions simple to keep the viewers’ cognitive load low. We recognize that moving a viewer’s focus without clear intent or including animations that occur too fast could be confusing or missed by our viewers. Additionally, we have focused our efforts to make every button press explicit so the viewer knows clearly what content, category, or action they are selecting.
Build on What They Already Know
Every time you create a new interaction, flow, or responsive design component, you potentially introduce a new pattern. Unless there’s a valid design reason for it, please don’t suggest a different pattern for every different page within your Living Room application or feature. Instead, reuse successful patterns that the viewer has already learned on their specific device. This keys into muscle memory and meets a viewer expectation that already exists within the experience.
Follow Your Eyes
Hulu prioritizes ease of use and pays special attention to our viewers’ behaviors by leveraging F and Z-patterns when creating designs and page hierarchy. The F-Pattern shows that people typically read and digest a page’s content by moving horizontally first, left to right, horizontally a second time but not as far and then vertically. This pattern reflects the common way that the Roman alphabet is written and read, leading to an intuitive understanding of the layout when followed. Similar studies found that when simplicity and a clear call to action are priority, the same people will more naturally follow a Z-pattern across the page (more in-depth explanation here). You can clearly see these patterns mirrored within our app whether you are browsing on home or deep within a TV show’s details. This helps us set context, create intuitive page layouts, and better map our back stack logic.
Use Your Math
You’ve probably heard about designing on a Base-8 grid for mobile apps or websites which originates from the octal numeral system made from binary numerals by grouping consecutive binary digits into groups of three. This baseline grid varies based upon the device increments (points, pixels, dp) but scaled especially well to modern design development. Since Living Room design typically lives at three sizes (720p, 1080p, and 4K), we need a grid that can scale easily and mathematically between the various screen sizes. For this reason, we optimally design at 1920x1080 on a Base-12 grid which allows us to scale down to 720p creating a Base-8 at our smallest screen size and scale up 2x for 4K televisions. At the smallest increment, we aim to always use multiples of 3 so we can easily scale down for 720p. Using the Base-12 grid also allows us to break down the measurements for grid layouts of 2, 3, 4, and 6 columns very easily. The clear benefit in doing this is that we avoid components that might render oddly during the scaling up or down process and avoid falling on any partial-pixels. Over the last 20+ years, the typical Living Room display proportion has been 16:9 which directly correlates to a 1920x1080 screen size.
Bonus Math! 3x4 = 12 and 42 : 32 results in the 16:9 proportion.
Design for Worst-Case Scenarios
It’s great when you’ve got your ideal design with perfect imagery and type that fits just right, but don’t stop there — make it a habit to also stress test your design with busy, too-bright or too-dark images to see how non-ideal elements or worst-case scenarios play out. There’s no accounting for every single image or asset that gets imported or pulled from a back end. Same goes for long text strings which may truncate awkwardly or go through a translation that exceeds your character limit (looking at you, German).
Consider Lean Back vs. Lean In (while on the couch)
Certain experiences within your living room create a “Lean In” experience, such as searching for a specific tv show or movie title, or playing a button-mashing, dopamine-inducing video game. A viewer will be applying more direct focus and effort while they lean in to accomplish their task. The rest of the time? Lean back.
Considering both of these will allow you to design your app appropriately to meet both types of viewer behavior. Remember that the viewer is typically 5 to 10 feet away from their television in both scenarios, and only likely adjusts their posture (and focus) when switching from Lean In to Lean Back.
Can’t Pivot if You’re Not Flexible
Viewer habits and routines always evolve. And so we have to, too. It’s on us to stay flexible so we can develop and introduce features that delight viewers and pivot our design system accordingly. We’re continually observing how our Living Room viewers interact with content — whether binge watching solo, a family night, or a social thing with friends. These scenarios inform how we design and what features we may release to our viewers.
Parting Thoughts (and a Challenge)
You made it to the end. Thank you for going down the rabbit hole of Living Room thoughts, habits and ideas for the future with me. Hopefully it inspires you and informs new concepts or approaches for the 10-ft space. Here are a few key tl;dr takeaways to share:
Design for Viewer Habits
Always consider the Living Room viewer and their weekly habits and routines. Recognize those human and environmental factors that will impact their attention span and cognitive load. Understand how “Lean In” and “Lean Back” behaviors impact your experience and create areas for both paradigms to exist.
TV is Social
Shows and movies are part of the zeitgeist. They bring people together, drive conversation, and impact points of view. People discuss the latest episode or how badly they want the next season to start. They watch with their friends and family, discuss the next day with their co-workers, and debate on social media. Never underestimate the power of FOMO.
Think Beyond the Living Room
Voice Control and virtual assistants are already changing the way people interact with their television. They’re also lessening our dependence on physical remote controls. How might other applications, changes in viewer behavior, and IoT everywhere change the way we interact within our living rooms?
Whatever you do, let’s agree to not make it dull; we are designing for the living room, after all.
