Reading on the Big Screen
[NB: For my talk at Books in Browsers 2012, I decided to explore the idea of the reading experience on big screens. I later wrote up the first version of the following article, and published it as a post on the Safari blog in November of 2012. On the heels of Apple’s announcement of the iPad pro and the new Apple TV, Jason Grigsby’s post on the web for TVs made me think that it would be worth revisiting some of the ideas in that presentation, so I’ve updated and lightly edited the original post, and republished it here.]
I have terrible theater karma — I’ll invariably sit behind a guy with an afro, or next to a screaming baby when I go to the cinema — so some years ago I decided to save myself some aggravation and purchased a projector for my home. The 100-inch image it throws up on my living room wall 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, 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 in 2011, on Responsive Comics (stay tuned for an update on that later this year). For 2012, 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 Apple iPad and the Microsoft Surface
- 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 a non-tech-savvy relative how to program their DVR? Say no more).
Fortunately, this is changing. Gaming consoles like the Xbox and the PS4 are becoming more of multimedia hubs, and companies like Apple and Roku are in the set-top box game, and bringing their sensibility for refined user experiences to bear on the traditional television. In particular, Apple’s AirPlay and Google’s Chromecast, which allow you to stream the screen on your mobile device or Mac to an HDTV, have 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 an integrated part of the mainstream computing ecosystem. 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 principal owner. (This is why slinging services like AirPlay are so important — AirPlay addresses some use cases for 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 and conditions 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 at least two very distinct types of big screens, each with their own physical characteristics and particular design needs: I’m calling them the ‘digital broadsheet’ and the ‘big board’.
The Digital Broadsheet
It’s probably just the printmaking geek in me, but the ‘digital broadsheet’ is a term I’m using to describe large screens that are roughly 18–30″ in size (although I think the new iPad Pro, at 12.5″, fits in this category, but I’m not sure yet), 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 comfortably on the subway (ask your parents, kids) — these are displays that are tailor-made for high-resolution, immersive, and content-rich experiences.
These big screens are generally viewed 18 to 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 pixel density 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; ymmv), it’s not entirely unpleasant, and many people do it. As digital broadside-style displays become more portable, that could change: 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). In the meantime, larger tablet devices like the iPad Pro are hints in this direction.
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, contextual menus, navigation hierarchies, or other UI/IA elements).
The big board
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 (what we think of when we refer to ‘the television’), 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, like in museums or hotels; 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 single-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 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’ displays, are, in fact, lower resolutions that most modern-day small screens used in mobile and general 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 fixed, pixel-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 — those are all LCD or LED, and don’t suffer from overscan), 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 should be 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 the 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 tablet. Someone watching an episode of Game of Thrones may be tweeting about it 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 move the main gameplay onto their Apple TV-equipped big board, and use their iPhones 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, conversations around the content, 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 just 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:
Digital Reading Spaces: How Expert Readers Handle books, the Web, and Electronic Paper, by Terje Hillesund
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
