For my talk at Books in Browsers 2012, I decided to explore the idea of the reading experience on the big screen. I have terrible theater karma—I’ll invariably sit behind a guy with an afro, or next to a screaming baby when I got to the cinema—so some years ago I decided to save myself some aggravation and purchased a Very Large Television. This 60″ behemoth, aside from being a pain to transport whenever I have to move apartments (which happens quite often in NYC), has enticed me to play around with putting all sorts of non-video content on it over the years. In 2009 I edited a comic by Dan Goldman [EDIT: sadly, the link to that comic is no longer available], and discovered that placing JPEGs of each page into iPhoto, then syncing them with my Apple TV led to a very pleasurable editing experience: big images on the big screen, note-taking on my laptop on the couch, frosty beverage in hand. These explorations eventually led to an interesting sidetrack which resulted in the talk I gave at BiB last year, on Responsive Comics. This year, I decided to circle back and expand on the original idea.
Up to this point, the general computing world has been dominated by small screens:
- Hand-held devices like mobile phones
- Tablets like the iPad and Nexus 7 (and now the iPad mini and Nexus 10)
- Consumer-grade laptop and desktop computer screens
Now, we’ve always had big screens in our living room (I’m not going to call them ‘televisions,’ because, frankly, that’s a limiting term—‘watching television’ is one of the many things you can do on these screens, but, increasingly, it’s going to be less of a segmented activity), but these big screens have effectively been quarantined from the rest of our computing ecosystems, mostly due to terrible UI design on the part of manufacturers and terribly user-hostile business practices from the part of content providers and telcos (have you ever tried to explain to your mom how to program her DVR? Say no more).
Fortunately, this is changing. Gaming consoles like the Xbox and the PS3 are becoming more of multimedia hubs, and companies like Apple, Google, and Roku are all getting into the set-top box game, and bringing their sensibility for refined user experiences to bear on the traditional television. In particular, Apple’s AirPlay technology, which allows you to stream the screen on any iOS device or Mac to an HDTV via Apple TV, has made strides in bridging the gap between our smart devices and our big dumb screens. On the general computing side, displays for consumer-grade desktop computers are getting larger and sporting higher and higher resolutions.
So the big screen is finally poised to become part of the mainstream computing ecosystem. One of the things that all these efforts have in common is that, in one way or another, they’re bringing the web browser onto the big screen. As such, we can use existing, standard technology like HTML and CSS to create viewing and reading experiences tailor-made for this new context.
But the fact remains that this is, indeed, a completely new context. In many ways, it’s radically different to the contexts in which we’re used to operating, both as general purpose designers, and as designers of the reading experience. In comparison with smaller screens, big screens are generally not portable (what Jason Grigsby calls ‘the immobile web’); persistent: always there, often powered on in the background; generally viewed from a greater distance than other screens; and often a shared display—everyone uses it, and it has no one owner. (This is why slinging services like AirPlay are so important—AirPlay eliminates the problem of an anonymous, general-purpose screen in a personalized world).
Additionally, no two big screens are alike: big screens are much more heterogeneous than small screens: sizes vary dramatically, viewing distances vary widely; and hardware (resolution, physical size, refresh rates, processing speed of onboard components) and software (browsers, interfaces, etc) varies unpredictably in quality and capability.
Everyone talks about the living room television set when talking about big screens, and that is, in fact, the most high-visibility use-case for large screens. But actually, there are two very distinct types of big screens, each with their own physical characteristics and particular design needs.
It’s probably just the printmaking geek in me, but the ‘digital broadsheet’ is a term I’m using to describe large monitors that are 22-30″ in size, and sport high resolutions (and getting higher all the time). I’m using the term ‘broadsheet’ in order to purposefully hearken back to the days of large, tabloid-sized newspapers, the kind that you had to learn how to fold correctly in order to read it comfortably (kids, ask your parents)—these are displays that are tailor made for high-resolution, immersive, and content-rich experiences.
These big screens are generally used 18-24 inches away from the eyes, and are primarily used for prosumer-level computing (think of a 27-inch iMac, or a large 30-inch display like the ones graphic designers or movie editors use). The high-resolutions on these screens, combined with the close viewing distances from which they’re generally viewed, allow us to design for high information density. This facilitates the creation and display of complex layouts, in which a lot of information (or content) can be presented holistically, in order to afford the viewer or reader a 10,000-foot view of the material presented.
Although large, stationery displays are not the optimal place to read long form text (imho), it’s not entirely unpleasant, and many people do it. If and when digital broadside-type displays become more portable, that could change, though: Imagine a bendable, high-resolution 30-inch display you could fold into the magazine pocket of a briefcase (before you go for the lulz, it’s not that far-fetched of a notion).
For now, the higher information density allowed by these types of displays enables the collecting and contextualizing of lots of information surrounding long form text. You can consider the digital broadside to be the 10,000-foot view of your content. This is where you can show off notes, multimedia, place related files for download, and store or point to archival content, all as part of the front-and-center layout presented to the reader (as opposed to hidden away behind links, navigation hierarchies, or other UI elements).
The ‘big board’ is your typical television set: generally 30 to 60 inches, low-to-mid resolution, and viewed 5 to 8 feet away from the eyes. The big board also encompasses room projections: 30-100’, also low-to-mid resolution, generally viewed 5-10 feet away from the eyes; as well as outdoor displays: honkin’ huge billboards with super-low resolution, viewed hundreds of feet away from the eyes.
In the consumer space, these screens are mostly used as the primary screen for media consumption, and are sometimes secondary or complementary to another, smaller screen like a tablet or a mobile phone. Commercial uses for these big boards include environmental information display, or outdoor advertising, often used at much larger distances (think of the LED billboards in Times Square).
The low-resolutions on these screens, combined with the larger distances from which they’re generally viewed, allow for less information density. These contexts demand simplified layouts, with information presented via linear (possibly screen-based), hierarchical navigation, as well as larger type, and more whitespace.
There are two big caveats to keep in mind when designing for the big board: resolution inconsistency and overscan.
Big boards come in all shapes and sizes. Where digital broadsheets more or less stick to the rule of ‘larger physical size, higher resolution,’ this is just not so for big board-type displays. Go to any given Best Buy, and check out the TVs on sale: you’ll see models from 60-inch monsters with resolutions of 1280 x 720 pixels, to 32-inch kitchen TVs with a resolution of 1920 x 1080 pixels (which, while being marketed as ‘HD’ sets, are, in fact, lower resolutions that most modern-day small screens used in computing devices.
Given the varied ranges of resolution and size, and the lack of correlation between the two, resolution is not an accurate indicator of context when designing for the big board (here’s another nail in the coffin for resolution-based breakpoints in responsive design, but I digress).
Overscan is the area on a screen that may or may not not be seen reliably by the viewer (for us print rats, the closest analogue is the concept of a bleed). This is mostly a legacy problem from old-school cathode-ray tubes (which is why it’s not a problem on digital broadside-type displays), compounded by the fact that many big screen manufacturers tuck parts of the active display on their sets behind thick bezels. As a result, designers can’t guarantee that the edges of a video image are always going to show on every type of screen. Video editors and motion graphics designers have traditionally addressed this issue by setting safe areas on their designs: a smaller area within the video frame in which all important information is contained. Since different hardware has different overscan settings, as well as different bezel arrangements, overcompensation is probably not a bad idea.
Reading on the big board is particularly suited to communal, primarily visual reading experiences, such as a mom reading a children’s book to her toddlers, or a group of friends ‘leafing’ through a coffee table art book. Big, bright images and large text on a big, bright screen. Additionally, the use of a second screen along with the big board is becoming more and more prevalent. This means that while a reader may be using teh big board for their main content, they may be supplementing it with additional content on a smaller screen. For example, someone reading a comic on a big board may also be looking up character bios, or continuity trivia on their mobile phone.
Designing for multiple screens also enables additional functionality when creating content for use on big screens.
For example, a group of friends playing a game on their iPads may decide to sling the video of the main gameplay onto an Apple TV-equipped big board, and use their iPads as controllers; or maybe someone watching a tutorial video on their big screen is also following along on practice files with their laptop.
This is where it gets really interesting, because you can start to mix and match different viewing contexts as customized for simultaneous or complementary viewing and reading experiences. For example, if you create a responsive textbook for use in the classroom, you can create different content for different devices: a teacher can walk students through a presentation on the big board, which can be accompanied by an in-depth, long-form essay which can be read on tablets, and coupled with a commenting, note-taking, or quizzing interface for the handheld screen or for laptops, all while also offering a ‘kitchen sink’ view for desktops and digital broadsides—including all elements from other screens, as well as links to reference material, multimedia assets, and practice files—all from the same source point.
The most exciting thing about these different approaches to reading on the big screen is that we’re barely out of the start gate—the display technology, as well as the design thinking around how best to use these big screens is barely getting started.
In the last five years alone we’ve seen tremendous improvements in resolution, fidelity, refresh rates, and general image quality, and many of the incredible technologies currently in R&D labs around the world, like foldable and bendable displays, or low-power, non-backlit panels could be just around the corner. Eventually, the big screen may expand beyond the big board—motion capture input, combined with environmental projections, may open up additional challenges or avenues for design.
In the meantime, the opportunities afforded to us as designers of the reading experience are wide open. The topics covered in this post barely scratch the surface of the thinking being done in this area. If you’re interested in further reading on this topic, check out the following links:
Ideal line length for content, by Russ Weakley
Responsive Typography: The Basics, by Oliver Reichenstein
All The Screens: Cross Platform Design Strategies, by Theresa Neil
Designing for Tablets & Smart TVs, by Andy Fitzgerald