We talk a lot here on Get Elastic about responsive design for tablets and smartphones — but what about scaling up to Smart TV? is t-commerce realistic? And if so, is responsive design the right approach to scaling up?
TV is not the first screen
Some refer to Internet enabled TV as the “immobile Web” — and many consider TV to be the second screen. Our primary screen is our smartphone. Sometimes TV has to compete with it for attention, sometimes they work in tandem. Nielsen estimates that 41% of tablet owners and 38% of smartphone owners use their devices at least once per day while watching TV. A separate Nielsen survey found 88% of people with smartphones and 86% with tablets use them while watching TV, and an estimated 25% of double-screeners view content related to what they’re watching on TV on their mobile devices.
A big problem with current connected TVs (in terms of t-commerce) is you can’t watch TV and surf the Web at the same time. Handheld devices fill that gap today, however, If television content could link out to a TV-supported browser, there would be an immediate need for TV-friendly landing pages — but we’re not there yet.
The question today is whether Web users even want to shop through a big screen — and if they do, the question of how they want to shop is important. Can (and should) an existing website with its search/browse, product pages, cart and checkout be scaled up to fit TV? Or does the device call for more app-like, or completely reinvented experiences?
The Case for TV Apps
Digital goods – the no-brainers
For digital products like video, audio, and software and games built to be consumed on Smart TVs, t-commerce is a no-brainer. However, t-commerce for these products may be more suited to run through apps rather than a TV-optimized storefront accessed through a browser, though delivering Web content to the large screen may play a part in customer acquisition — the initial download may come through a www site.
QVC is perhaps the only online retailer with a Google TV app at this time. Though it’s essentially porting a Web-like storefront experience back to TV, it’s made UI tweaks that make it more suited to the TV user experience.
QVC’s search page presents large thumbnail images, uses horizontal scrolling and large, spaced out pagination targets.
The image gallery also presents horizontal scrolling.
The product page considers the “fold,” uses larger link targets with extra spacing and removes actions not suited to the TV experience (social sharing, write review, cross-sells, email page to friend, add to wishlist, etc.)
Above: the QVC website product page
But like mobile apps, TV apps aren’t a substitute for the www site if users want to access it through their TV browser (unless they’re built with HTML5).
Not all apps need to be copies of an ecommerce site, and TV apps are a promising interactive medium for many brands. For example, think of previewing the latest model BMW through a Smart TV app. Unlike a flashy TV ad, the user is in control of the 360 degree view, the color, the options, and can take their own virtual test drive through the app — an experience that just wouldn’t be as fantastic on a smartphone or even a laptop.
Or, imagine Victoria’s Secret TV app offering a replay of its famous fashion show, enhanced with commerce-enabled hotspots with click-to-by or even click-to-try functionality (a la Xbox Kinect “magic mirror”).
Responsive for the TV Web?
While apps will have their place, there’ll be no escaping the Smart TV browser if it catches on with users. Like with mobile, doing nothing is your perogative, but your user experience and brand suffers if you ignore it. Should you decide to serve a TV audience, you’ll need to decide if you want to apply responsive design, which leverages one code base and one set of URLs, or use a TV-specific, adaptive approach with features and a UI more suited for its unique context and usability factors.
Regardless of which delivery method you choose, your design should consider:
Font size: A minimum font size of 24 is recommended, larger for headlines and sub-headlines, of course.
Image / media size: Bigger screen means bigger images and media. Your existing perfomance-optimized content may not scale up well.
Input and controls: TV input controls may be smartphone-controlled (via apps), D-pads, pointer, voice command or even gestures (think Wii). How does this impact navigation and character input on your site, and how click targets are activated (and not unintentionally activated)? Do users typically use full-screen mode or partial?
Orientation: Many designers believe vertical scrolling is problematic on TVs, and horizontal scrolling should be used instead. Think about how this impacts your category and search result pages, especially.
User context: How far away are users sitting from the screen? What is their level of attention? What other devices may they be using simultaneously? What content / features do they prefer to see on a larger screen, or actions do they prefer to take? This will affect what your optimal navigation and content presentation. It may be very different from other screens.
With respect to responsive design, accommodating Smart TV in your single HTML file to satisfy a small number of potential customers may negatively impact site performance across other screens that going TV-specific is a better option. Add the complexity of different input controls, and the nuances of user experience when you’re sitting many feet away from the screen, and simply going responsive’s lookin’ tricky. The trend may be toward app-like HTML5 experiences delivered to Smart TVs using device detection.
Thankfully, Connected TV Sucks — For Now
When users expect to be able to access your content through a device, you either satisfy that expectation or your brand will suffer. And with new technologies, the investment in a new touchpoint may only serve a small segment of your customers and not deliver great ROI. But for physical goods / traditional ecommerce, there’s no pressure to be an innovator — only opportunity — you have some time yet. (Digital goods? The pressure is coming quicker!)
But to quote Luke Wroblewski’s notes from UX Immersion’s The Mobile Web session:
Smart TVs suck right now. Don’t go build something for them yet, but don’t sell their future short based on current experiences. We can’t predict future behavior from a current experience that sucks.
Even if we don’t have to design for TVs today, we need to be aware of where things are going.
Nevertheless, as we move towards devices that are hands-free (like Google Glass) or immobile (TV) where the user is sitting feet away from the screen, context matters. Simply replicating your web storefront to fit a new screen is likely not be the optimal experience. Expect out-of-the-box shopping experiences to emerge, as larger screens give flexibility to experiment with new forms of e-shopping. We’re not married to the traditional ecommerce catalog with search boxes, category menus, product pages and a little shopping cart icon in the top right hand corner — in fact, they may be the opposite of what works on new mediums. And if that’s the case, simply going responsive won’t be smart for Smart TV.
Until Smart TV really gains traction for everyday Web surfing, you don’t need to worry about scaling your website up just yet. Work on mastering responsive design for the 3 common screens – desktop to tablet to smartphone.