Reduction vs. Addition: Improving the TV Program Guide
I don’t normally watch television, but on the rare occasion that I interact with one I become quickly frustrated with the program guide (and the remote, but that’s another story...). I use COX’s service and have yet to encounter an interface from my friends’ competing services that have resolved my concerns with their approach as well. In fact, most employ the same executions as if it were a standard of excellence.
When designing program guides, it has become popular to display the titles of the programs vertically by channel number and horizontally in a chronological order. While the origin of this method is unclear (to me), it seems to have become ubiquitous. And because of this, one would believe that it is the best method for selecting programs. Unfortunately, that’s very far from the truth.
The problem
With cable providers offering more programming, the long lists that come with it become more unruly. And the dated convention used for presentation becomes inefficient for this ever-growing amount of information. This is compounded with the limited screen resolutions common on most TVs that allow very little room for all that information. In the end, it leaves us with a list of information that requires a tremendous amount of clicking to browse in its entirety. This seems to be the case for COX’s design as well. Because I only have access to their interface, I’ll be analyzing it here. But here are some others I found via a quick "Google Images" search for you to compare.
A collection of several interfaces for displaying program guides. You’ll notice all the executions are undeniably based on the same concept.
How can this be fixed?
Reduction: Inefficient use of screen real estate
The strength of television is that it provides access to real-time live content unlike other entertainment delivery methods such as movies or theater. Even the web has been slow at adopting live streaming, though that will likely change soon. But one of the more obvious shortcomings of today’s program guide interfaces is the lack of space dedicated to view what’s available to watch at that very moment. These program guides have adopted a design that allows the user to peruse programs playing now and in the next half hour or later. Access to viewing programs playing in the future assists in planning ahead, but it’s not useable information in terms of interactivity. These are not programs that a user can watch at that moment. And because we’re not comparing DVR interfaces, allowing access to forthcoming programs isn’t nearly as crucial. So a better solution would be to use that space for usable information—namely, programs that a user can consume at that very moment.
The purple highlight indicates the amount of area dedicated to content the user can consume at that very moment. When compared to the size of the screen, the interface only uses 14% of the available space to display usable information.
Reduction: Navigation clutter
There are areas in which today’s program guide interfaces can be simplified. By removing clutter, the content becomes the focus and this allows the user to easily find what they’re looking for. What the product should do is facilitate browsing and selection in methods that are intuitive and efficient, given the restrictions of the TV interface. Most of these interfaces suffer from unnecessary navigation elements and compromise useful screen real estate from content for what the designers think will "guide" the user.
Kevin Mullet and Darrell Sano further reinforce this concept in their book, Designing Visual Interfaces: Communication Oriented Techniques:
“Unnecessary navigational aids that might be useful the first time a user sees a product quickly get in the way as soon as even a basic familiarity with the application has been established.”
It’s important to note that over-abundance of information isn’t considered complexity when the information comes in the form of consumable content. Removing unnecessary or unwanted information is what will benefit the end user most, not removing useful information for the sake of simplifying the interface.
Reducing the navigation to the absolute minimum allows more content to occupy the screen. It is considered good practice to aim for dedicating 80% of the overall screen interface towards content and 20% of it for navigation.
Reduction: Information Over Time
Time can be used to introduce more information but also can be used to simplify the interface. A common use of this comes in the form of controls that appear upon initial interaction and disappear over time, thereby allowing unobstructed consumption of content. A perfect example of this are DVD video controls for full-screen viewing on personal computers. For the purposes of this analysis though, time can work slightly differently. Once a user pauses on a selection for a slight moment, one can imply the user has interest in that specific selection. Additional information presented over time can assist the user in deciding whether they’d like to commit to the program or it can simply be another method to introduce relevant information. An efficient use of this would be to display the length of the program and its progress at that moment in time. The length of the program can be alluded to in the form of a simple video scrub bar, which also doubles nicely as a progress indicator. Selecting another option will dismiss this expanded information.
Pausing over a title can retrieve further information about the selected program. Quick navigation through all of the selections will dismiss the additional information until the user pauses once more on the next selectable option.
Reduction: Channel Numbers
There are several reasons channel numbers are unnecessary as a practical means of browsing content. First, it’s difficult to learn and remember all the channel numbers especially when the association has no relevant meaning to the content. Second, when analyzed, what the user actually wants to do is to view a specific show based on the content they like or want to watch, or to view a preferred network’s content. The number is irrelevant and arbitrarily assigned by the cable companies with no meaning. As a user, I don’t care what channel number is associated to HBO. I just want to access that network’s content easily.
Jakob Nielsen covers a similar topic in his analysis of dialing numbers with the telephone in his book "Designing Web Usability":
“...they are hard to type, and there is no forgiveness if you mistype a digit: nothing to do but hang up and start over.
The real usability problems of the telephone show up when we do a task analysis. What does the user really want to accomplish? In most cases, you want to talk to a specific person. To do so, you have to find that person in the telephone directory (or another list of phone numbers) and then dial the number. Who wants to talk to a number?
It would be better to be able to search a database and click on the person’s name or photo to get connected, something a computer interface does well. ”
Addition: Content as Visuals
“The distinguishing characteristic of visual phenomena is apparent in the viewer’s ability to holistically and automatically extract information from the “snapshot” of the overall display that can be perceived during the span of a single glance. The impact, or “graphical power” of effective visual signs springs directly from this quality of perceptual immediacy. ”
Kevin Mullet and Darrell Sano, Designing Visual Interfaces: Communication Oriented Techniques
Because symbols and graphic visuals are much quicker and easier for our brains to interpret, a conscious effort should be made to introduce these in a way that would enhance the interface. Most of the interfaces used for program guides rely solely on text. We’ve looked at reducing unnecessary elements from the interface, which would seemingly allow plenty of room for additional content. But imagine if text would occupy the increased content area, or the entire screen even, simply with columns upon columns of program names. It would be a nightmare for our eyes to attempt to scan all that information and isolate the desired program quickly. But if the text were to be accompanied with a symbol or an image that carries contextual relevance, it becomes instantly easier to identify and isolate.
Visuals along with text create an easily scannable interface because of recognizable shapes and images. This allows the user to find what they're looking for more efficiently.
The Result
Before
The amount of usable information in this format occupies only 14% of the entire screen real estate. In addition, it only displays 5 currently playing programs at a time.
After
The revised design places more emphasis on the content with it occupying 78% of the overall screen real estate. This yields an increase of 64% in usable content within the same restrictive screen dimension. This also increases the amount of currently playing programs that are visible at once from 5 to 21. Not only is the resulting design more efficient, it's more intuitive, useful and aesthetically pleasing.
Pausing on a selected program will play it in thumbnail form while displaying the progress and duration.
Selecting the title at very top allows the user to navigate through forthcoming programming.
