Display 2.0: A Look Forward to the High-Definition Web and Its Effect on Our Digital Experience

August 14, 2006

In the next few years, the adoption of high-resolution displays—with 150 or more pixels per inch—will significantly alter our conception of what the Web and networked applications can potentially be. As the price of high-resolution displays comes down to earth and early adopters make way for mass consumers, beautiful visualizations of data will enrich the digital realm. High-resolution displays will allow us to chart greater depth in financial data on screen, render finer lines in maps and illustrations of technical designs, and show greater detail in photographs. In specialized areas of medicine, where the price tag of these displays is unimportant, this transformation of the online world has already begun. To describe the enhanced online experience high-resolution displays will make possible, I’ll build on a term from the broadcast, cable, and satellite industries—high-definition television (HDTV)—and coin the term high-definition Web (HDWeb).

Champion Advertisement
Continue Reading…

The computer displays we use for viewing our digital world have evolved relatively slowly in comparison to other types of computer hardware and Internet infrastructure—processor speed, bandwidth, and storage capacity have all made leaps forward in the past decade. While such improvements have shaped the way designers create and what they create—affecting everything from visual style and site architecture to interaction flow and overall functionality—these changes have been incremental and manageable. However, our move to high-resolution displays will be transformative, because it will affect designers’ entire working medium. Digital designers will face numerous possibilities and challenges that huge increases in screen real estate and depth of detail will bring. Instead of a somewhat blurry and indistinct 72-pixels-per-inch working environment, high-resolution displays will provide richness and clarity. As high-resolution displays become more readily available, digital designers will find themselves at the forefront in navigating this new world.

Envisioning the Technology

As early as 2001, IBM sowed the seeds of the HDWeb when the company released, for limited distribution, the 204-ppi (pixels per inch), 22.2-inch T220 monitor, with a suggested retail price of $22,000. ViewSonic and IDTech subsequently licensed the technology, and by 2003, the cost of a 204-ppi display had come down to the somewhat less outrageous price of $8,500—making the monitors affordable for specialized corporate use, but still years away from arriving in the average home. At that time, IDTech Japan announced the arrival of the “Era of New Visualization,” saying “A monitor displaying huge amounts of digital data on one screen and near reality images is now realized….”

Usage in the Field of Medical Imaging

High-resolution monitors are already in wide use in the field of medical imaging. Both doctors and technicians use three- and four-megapixel grayscale monitors to evaluate x-rays and other monochromatic images. And remote evaluations using secured connections—across the country and even across the globe—are becoming a regular, if not commonplace, part of many hospitals’ workflows. According to “Medical Imaging” magazine, Positron Emission Tomography (PET) scans, ultrasound, and 3D-imaging software are driving the demand for high-res color displays as well.

Back to Near Reality

There are some high-res options for those of us who lack the IT budget of a major hospital as well. The 23-inch, 2.3-megapixel (1920 x 1200) Cinema Display from Apple is $1299, and the price of the Planar 21-inch, nearly 2-megapixel (1600 x 1200) flat-screen monitor is under $900. Display resolutions are increasing, and the price of the high-res display technology is falling.

Designing for the Low-Res World

Digital designers have a love/hate relationship with 72-ppi screens. The visual requirements of low-resolution displays have both burdened and spoiled designers. The constraints of low-res displays can be frustrating—blurry font rendering, lack of sharpness in photographs, and disappearing detail in graphics. People viewing large volumes of financial data—and other applications in which detail is critical—must use multiple monitors or print out files. On the other hand, the low-resolution environment has been freeing for digital designers as well. Photos and other graphic elements—for example, a small JPEG file—that would be completely unsuitable for print media might serve very well on a Web site.

But high-res displays will soon take away these limitations. What does 9 megapixels of screen real estate look like? Rather than create user interfaces for 800 x 600 screens or even the increasingly popular 1600 x 1200, digital designers will face a whopping 3840 x 2400 screen. What will we do with over ten times the detail of our current displays?

What Digital Designers Can Learn from the HDTV Transition

The sweeping changes that high-definition technology is bringing to the medium of television can provide us with a basic understanding of how high-resolution displays will change the Web.

First, the transition will be brutal. To accommodate the different grades of equipment viewers have, television companies are currently delivering the same content over multiple channels, which is why we often see the phrase “Broadcast in HDTV, Where Available” on our TV screens. Over time, there has been a gradual increase in the number of shows broadcast in HD, starting with those that have the highest profile and the greatest popularity. However, with the Federal Communications Commission deadline for HDTV transition set in 2006, stations have applied for waivers by the hundreds. Industry observers project that it could take up to fifteen more years for a complete transition to HDTV.

For digital designers, a chaotic landscape with multiple standards is not unusual. The Web is in constant transition, with new technologies fighting for space. And accommodating audiences with varying screen sizes, connection speeds, and technical savvy is all in a day’s work. However, with a greater range of monitor resolutions and sizes, creating experiences that serve both low- and high-res requirements will challenge digital designers.  For instance, designers and consumers may demand that the rudimentary image-scaling functions of today’s Web browsers become more robust, so users can cleanly scale down high-res images to the proper size for their screens. It’s more likely that Web sites and applications will—like television broadcasts and the current high-bandwidth and low-bandwidth versions of some Web sites—need to support two different formats.

The day of high-res displays isn’t far off. Even now, designers are discussing how their interface designs can use the expanded screen real estate—1600 x 1200 pixels and larger—that new flat-screen monitors offer over traditional monitors.

Getting Ready for Production Overload

The key to creating digital experiences for the HDWeb is understanding not just how to design for the extra screen real estate, but for the extra detail as well. The size of the screen is perhaps less important than the number of pixels per inch.

In high-definition television production, the planning of shots has more in common with film than with video. The production methods for a medium that records so much more data require a greater degree of care. So, it’s a safe bet that planning and constructing sites for the HDWeb will draw upon the numerous pre-press production rituals we commonly associate with printing. For example, blemishes and defects in photos are far easier to see in printed media versus on screen. High-quality reproduction of a photograph on screen requires a better grade of photograph at the outset. And the need for this high quality affects every link in the production chain—from lighting the location to scanning the film.

These production rituals are not concerns for digital designers … yet. We should expect workflow changes as high-res displays force digital designers to maintain a higher degree of quality throughout their entire production process and increase their attention to visual details. There will be more emphasis on planning the visual aspects of a Web site or application to deal with the additional complications of higher resolution.

And there will, no doubt, be much learning by trial and error—seeing what established techniques will translate to this new display format. The arsenal of magic tricks designers possess for color correction, balancing, sharpening, fixing, and disguising defects in photographs, illustrations, and other bitmapped content will not work as easily or as well as they did in a low-res environment. Low-resolution displays hide a lot of sins. Just as HDTV exposes bad makeup jobs on actors and news anchors, so will the glaring spotlight of high-res displays expose photo touchups and graphic design sleights of hand. To make ready for the HDWeb, companies may force designers to revisit every single page of their Web sites or screen of their applications.

Vectors Are Your Friends

One design solution for multiple-resolution environments may be to present any non-photographic visual elements as vector data. We could scale page elements in the form of Flash, scalable vector graphic (SVG), or perhaps, better-integrated PDF files to fit new resolutions as easily as vector-based fonts do right now. Things like icons, buttons, menu bars, drop shadows, and background gradients may render more quickly as vector data than as enormous, high-resolution bitmaps. Photographs, which we cannot turn into vector images, would then be the only remaining bitmapped data.

Since fonts, as I previously mentioned, are already vector based, they will easily translate to a new HDWeb format—something our tired eyes can look forward to with eagerness. There will be tremendous benefits. It’s likely that reading online text will approximate the print experience, with no font degradation, a sharper focus, and a reduction in the eyestrain, blurred vision, and headaches low-res displays often cause. We’ll have less difficulty reading long pages of content and be able to read online text more quickly and easily. Could this be the advent of online reading for pleasure?

Changing the Face of the Interface

As we begin to explore this high-resolution digital world, we may find that familiar user-interface models are no longer viable. User interfaces could change radically as people viewing high-res monitors demand better graphic imagery. Furthermore, the extent to which screen resolution shapes the conventions of current digital user interface design is unclear. The windows, tabs, menus, and toolbars that we use today have, to some extent, evolved to accommodate the lack of screen real estate. For example, we stack windows on top of one another in virtual space, pull-down menus, and hide toolbars, because all of this content cannot fit on our monitors at once. When screen real estate is no longer a problem, we may revisit the guidelines we’ve set. With high-resolution displays, we will be able to view our Web sites and applications in new ways.

Just as the proliferation of high-bandwidth connections and the maturation of the Web browser have fueled the Web 2.0 Renaissance, the advent of readily available high-resolution displays will push the Web and digital design forward in ways we can only begin to imagine. As high-resolution displays raise the bar for visual production, the key to creating great digital experiences will continue to be careful planning of our processes and designing for this new medium—to ensure both better-quality source material and elegant ways of displaying that material at different resolutions. 

::: See Jonathan Follett’s companion piece to this article on Digital Web, “Vision Quest: How Low-Resolution Displays Have Changed the Way We Read, Write, and Interact.”

Principal at GoInvo

Boston, Massachusetts, USA

Jonathan FollettAt GoInvo, a healthcare design and innovation firm, Jon leads the company’s emerging technologies practice, working with clients such as Partners HealthCare, the Personal Genome Project, and Walgreens. Articles in The Atlantic, Forbes, The Huffington Post, and WIRED have featured his work. Jon has written or contributed to half a dozen non-fiction books on design, technology, and popular culture. He was the editor for O’Reilly Media’s Designing for Emerging Technologies, which came out in 2014. One of the first UX books of its kind, the work offers a glimpse into what future interactions and user experiences may be for rapidly developing technologies such as genomics, nano printers, or workforce robotics. Jon’s articles on UX and information design have been translated into Russian, Chinese, Spanish, Polish, and Portuguese. Jon has also coauthored a series of alt-culture books on UFOs and millennial madness and coauthored a science-fiction novel for young readers with New York Times bestselling author Matthew Holm, Marvin and the Moths, which Scholastic published in 2016. Jon holds a Bachelor’s degree in Advertising, with an English Minor, from Boston University.  Read More

Other Columns by Jonathan Follett

Other Articles on Technology Trends

New on UXmatters