Rhetorical Design Analysis: New York Times Homepage
Newspaper editors and designers have long relied on the careful combination of text and image to present information to readers. With the proliferation of the Internet in the 1990s and into the 21st century, newspapers have been forced to repurpose and redesign their content for a new digital medium with starkly different properties, strengths, and weaknesses than traditional newsprint. Using the New York Times home page as a focal point, this case study explores the complex interplay between verbal and visual information and the strategies used by editorial and design staff to present useful and compelling news content on the web.
Documents on the World Wide Web are ever changing. A major point of contrast among print and online media is that the former are primarily static, physically bound to a specific existence of ink and paper, while the latter are immaterial and thus more dynamic. Web pages are always reducible to lines of code, written and re-written and generated on the fly. Thus, web documents are particularly adept at presenting up to date information. Printed publications however, in their relative permanence, do not stay current for long. Newspapers, reliant on timely delivery of information, are seemingly well suited to appropriate the flexibility of the web for their business practices, even as they struggle to make the transition.
This characteristic flexibility also serves to make news web sites a challenge to study. The New York Times home page is no exception; content and design attributes change over time as the site is updated to adapt to the demands of the changing web environment. Periodically throughout the day, the site’s content is refreshed to remain current, however, when news breaks the site is updated almost instantaneously. For the purpose of this analysis it is most effective to focus on a single moment in time, a specific iteration of the site’s history. Despite the fluid content, certain common design conventions such as specific uses of icons and layout formats always apply to the site. All data and screen captures for this study were obtained midday on Friday, April 20, 2007 (The New York Times Company).
Visual Hierarchy: The function and value of order
Immediately upon navigating to the New York Times home page, the viewer is presented with a large amount of visual information. Text is arranged in various typefaces, groupings, and sizes, while photographs and graphic elements are placed around and among the textual components. The web page as a whole is a complex combination of what Doumont (2002) calls “visual and verbal codings” (p. 219). Yet, the viewer is able to make sense of this formidable mass of information because of the sometimes subtle, other times explicit rhetorical and design techniques employed by the website’s content and design team. This analysis draws out and calls attention to these “behind the scenes” mechanisms that help to shape and order the viewer experience.
Figure A is a screen capture of the top half of the New York Times home page. It contains seven news story headlines and bylines, four accompanying images, at least five banner advertisement images, and a host of headings and sub-headings, hyperlinks, and graphic icons. Clearly, all of this stimuli would quickly devolve into anarchy were it not for the presence of a clear visual hierarchy on the page. Wroblewski (2003) conceptualizes visual hierarchy as the purposed establishment of an importance-based organization of visual elements in a given design artifact.
On the New York Times home page, visual hierarchy is established among various design elements through the use of 1) spatial groupings, 2) visual contrast, and 3) visual weight. The spatial groupings on the page take shape through the Gestalt laws of proximity and similarity. The Gestalt law of proximity dictates simply that those objects proximate to each other in a given design space will be visually grouped by the viewer and perceived as a unit rather than as separate elements. This is illustrated in Figure B via the headline/byline arrangement of news stories. The headline “Federal Database Exposes Social Security Numbers” is located directly above the byline “The social security numbers of tens of thousands of people were disclosed for years in a publicly available database.” There are no other bylines on the page that are spatially closer to the “Federal Database” headline, therefore the viewer automatically associates the two textual elements as belonging to a specific unitary group of visual information. This pattern is repeated (with variations) throughout the page for headlines, bylines, section headings, authors, and so on.
Taking the same headline/byline groupings in Figure B as an example, the Gestalt law of similarity comes into play on a slightly different level. For each main story link on the page, the size, color, and typeface of the headline, byline, author, and timestamp remains consistent. Always, the headline is presented in a large serif font with a blue color, the author’s name appears capitalized in gray, and the byline is a smaller font size and different shade of gray. These proximate spatial groupings and the repetition of similarity add an element of consistency to the overall visual hierarchy of the page and in so doing create a structural logic to the viewing experience.
Visual differentiation, or visual contrast, among elements adds to visual hierarchy as well. It is the balance of similarity and contrast that ultimately creates order on a page. The hyperlink menu in the far left column of Figure C illustrates the interplay of proximity, similarity, and contrast.
The viewer understands that all the links in the menu are functionally equivalent because they are located proximate to one another in a vertical column. Likewise, all the links are similar in typeface, color, capitalization, and size. However, visual contrast among the links is necessary for certain sections such as “Arts” that have sub-categories (Books, Movies, Music, etc.). By presenting the sub-category links in standard capitalization and a slightly lighter shade of gray, they are effectively contrasted from the main section links.
Visual weight is the third main strategy for establishing hierarchy on the Times home page. Visual weight is a flexible term used to denote the relative importance of different elements in a layout. For Wroblewski (2003), “visual weight can be measured by the degree to which a page element demands our attention or keeps our interest.” Visual weight can be conceptualized as an impression-driven design category. Those elements that immediately attract the focus, or first impression, of the viewer have greater weight than others. The “heaviest” observable elements in Figure A are the top and center New York Times logo, the lead photograph placed directly below the logo, and the major news headlines. This disbursement of visual weight organizes the hierarchy of the page by first alerting the viewer to the site’s owner/publisher, which also creates a branding moment for the New York Times. Slightly less prominent than the logo are the major headlines, i.e. the content that drives the viewer to the site in the first place.
The fact that the Times logo and the major news stories are given preference necessarily means that other page elements are shifted into subdominant roles. The stock indices are present on the home page because they are a valuable and popular component of financial news reporting, but they are not the main attraction for this particular page and therefore they are allotted less visual weight than the major headlines. The subordinate role of the stock indices, and indeed most of the elements on the home page, is necessary because if all page elements were given equal visual weight, order would be lost. Again, like similarity and contrast, it is the balance of dominant and sub-dominant elements that establish a logical visual hierarchy. “The relative position of each element in the hierarchy provides valuable information about its importance to the big picture” (Wroblewski, 2003).
We conceptualize the Times home page as a unified whole as the result of the purposeful arrangement of disparate design elements into a logical visual hierarchy. Without the order imposed by the construction of visual hierarchy, the cohesiveness of the page would significantly diminish and the apparent unified whole would disappear. The idea that the perceived whole is greater than the sum of its parts is known as the Gestalt Effect. The Gestalt Effect implies the principle of totality, which puts forth that we experience components as parts in systems of dynamic relationships. In other words, the principle of totality suggests that when possible, the mind orders elements into systems and groups. The viewer of the Times home page experiences the different sections and headlines not as a mass of separate parts, but rather as constitutive elements of a unified design artifact.
As Wroblewski (2003) notes, visual hierarchy serves a higher function than just ordering elements in a design space. Importantly, it also “guides users through the site’s content and interactions.” As such, the hierarchy of a page must ultimately be driven by the “content, audience, and goals” of the page’s producers/authors. The content of the New York Times website is primarily national and international news and the audience is a certain English-speaking demographic of news seekers. The goal of the audience is to easily and efficiently gather news information; viewers come to the home page to learn about important and breaking news stories and they expect an element of logic and consistency in the layout so they may easily locate whatever particular news category or item they seek. The dual objectives of the New York Times are to deliver news to the audience and the audience to advertisers (the particular order of importance of these goals is debatable, but subject for a different study). The hierarchy of the home page, as described above, reflects these goals.
Images in Action: Icons as signs, symbols, and pictures
As a hypertextual web document, the Times home page contains an array of miniature images that serve as navigational signposts to the site’s users. In an early analysis of computer writing, Bolter (1991) describes these tiny design elements as icons. An icon is “above all a picture that performs or receives an action, and that action gives the icon its meaning” (p. 52). Icons on the Times home page (Figure D) appear in tandem with hyperlinks and serve to denote specific categories of user interactions and navigations. Rather than convey any particular message to be received passively by the user (as a typical photograph might), icons illuminate possibilities for action on the web.
Using Arnheim’s (2004) taxonomy for describing the various functions of images, the icons on the New York Times home page can be categorized as signs, symbols, and pictures dependant upon their particular purposes and intentions.
Arnheim argues “an image serves merely as a sign to the extent which it stands for a particular content without reflecting its characteristics visually” (p. 138). McCloud (1993) notes that signs are a means by which communicators offer messages with “meaning retained,” but “resemblance gone” (p. 47). The conversation bubble icon (Figure E) is used to indicate new stories that are available for reader comment. The icon directs users to an online forum where they have options to participate in discussions regarding given news pieces. In this instance, the conversation bubble icon acts as a sign. The particular shape of the icon’s image bears no representative relation to its corresponding signification, an online discussion forum. The image of a bubble that denotes conversation is an utter convention of culture. It is an arbitrary sign that represents the concept of communication because communication itself cannot be directly conveyed through a representational image. The icon relies heavily on shared cultural context to communicate its message effectively.
The orange “T” icon (Figure E) is another example of an image acting as a sign. The “T” icon indicates that the related hyperlink takes the user to Times Select content, a premium, subscription-based section of the Times website. Again, the icon (“T”) is used to signify a particular meaning in the absence of any direct representational relationship. The image of an orange “T” in no way “resembles” the notion of Times Select content; it is merely a sign.
In a certain sense, all icons are indeed signs insofar as they serve to signify meaning and some are more representational than others. Using Arheim’s vocabulary, we can further distinguish between icons that function as symbols and those that function as pictures.
For Arnheim, “an image acts as a symbol to the extent to which it portrays things which are at a higher level of abstractness than is the symbol itself. A symbol gives particular shape to types of things or constellations of forces” (p. 139). The video camera icon in Figure E is a symbol used to communicate the idea that the corresponding link contains digital video. Symbols are always less abstract than the things they portray, that is to say they are more detailed than the things they portray. However simplified, the video camera icon is a relatively particular depiction of a specific physical object, but it is used here in a symbolic function to indicate the non-specific concept of video in general. The user does not follow the “The Victims” link only to arrive at a page full of articles about video cameras. Instead, understanding the icon, she clicks the link to watch a video about the victims of the Virginia Tech tragedy.
“Images are pictures to the extent to which they portray things located at a lower level of abstractness than they are themselves. They do their work by grasping and rendering some relevant qualities ” shape, color, movement “of the objects or activities they represent” (Arnheim, 2004, p. 138). The newspaper icon in Figure E serves as a picture in this instance because although it resembles that which it is attempting to signify, a printed edition of the New York Times, it does so in a more abstract way. An actual printed newspaper is much less abstract than the picture icon, however, the newspaper’s essential elements – text and photos on the front page, folded rectangular shape, leafed sections, etc. – are given across so viewers can make the representational connection.
Verbal Codings, Visual Codings: The relationship of text and image
Doumont presents another useful lens through which to analyze the complex interplay of text and image on the New York Times home page. He distinguishes between verbal and visual codings where verbal codings (text) work through a process of “interpretive” signification and visual codings (images) are not “read” like a text, but are instead more “intuitive and global.” In saying that visual codings are not “read” like a text, Doumont suggests that effective use of images should not rely on any secondary level of interpretation to achieve a desired meaning. Instead, visual codings should be immediate and intuitive.
Figure F shows an interactive map that takes the user step by step through the tragic events that occurred at Virginia Tech University on April 16, 2007. A link to this map was presented as a supplement to news coverage of the event on the Times home page. The use of direct labeling rather than separate legends removes the need for the viewer to make an “interpretive step” toward understanding the information on the map. The building Norris Hall is clearly marked and captioned within the map’s content area, rather than in the margins of the page. Associations between specific map locations and their significance to the events are immediate and intuitive because direct labeling removes the interpretive step of matching the content of the map to a separate legend.
Notice also the importance here of the law of proximity; because image (map object) and text (label) are located proximate to each other, they are naturally grouped by the viewer. A specific understanding of the map is created based on these proximate groupings.
The Times home page exemplifies Doumont’s notion that visual and verbal codings should be used to compliment each other precisely because they map to “distinct intellectual processes” (p. 222). One way to achieve this complimentary balance is through “effective redundancy,” whereby singular messages are conveyed both visually and verbally to form a reinforcing relationship. Figure G displays the layout of a lead news story that covered the activities of mourners from the Virginia Tech shootings. The headline, “A Day of Mourning” is accompanied by a solemn image of Virginia Tech students standing in vigil to honor their classmates. To further contextualize the story, the byline reads “Mourners from Colorado to Israel remembered the 32 victims killed on the campus of Virginia Tech.”
In Figure G, verbal codings contextualize visual codings. The inclusion of text that highlights the “so what” next to the “what” of the photograph makes a big difference in the accuracy and efficiency of message construction. This type of text/image relationship occurs on the Times home page in every instance when a photograph and caption are displayed together. A further example occurs throughout the interactive map (Figure H). In almost every stage of the map, the upper-left corner contains a short paragraph that helps the viewer to place the images in a specific context relevant to the events of the attack.
Conclusion: Journey from Print to the Web
In trying to access the overall “feel” of the Times home page, it is helpful to compare the web version to the printed newspaper itself. Generally, the “theme” of the two products is quite consistent, although variations among them highlight some of the fundamental design differences between print and web media, as well as certain challenges inherent in repurposing content from print to the web.
The cohesive design of the two products makes sense from a branding strategy perspective. Maintaining a similarity in design promotes familiarity for print readers who may or may not be comfortable with accessing news on the web and builds on an established and effective layout.
In both versions (Figure I), the New York Times logo is prominently displayed at the top-center of the page and the lead story and photograph are placed as the dominant content pieces. The general layout is consistent in that narrow, vertical, text-only columns surround the wider center column, which contains the lead story and photo. Notably, the web version contains much more content. The page is much busier and the “real estate” is maximized almost to the extent of overwhelming the viewer with options. This difference is likely related to the fact that the physical paper has limited space resources; page editors can only fit so much on a page. The web version, however, is virtually limitless. Ignoring advertisements, there are 47 hyperlinks just on the portion of the Times home page pictured in Figure I. Each link directs the user to a new page, itself full of content and additional links. The sheer breadth of information available on the web cannot be rivaled in even the thickest of printed Times editions and this availability or scarcity of content real estate impacts the design of each format.
Another interesting carryover from print to web is the concept of “below the fold.” In traditional printed front pages, stories that are front-page material, but not the most important stories of the day, are printed literally below the line where the paper is creased and folded in half. In Figure I, the visible page content on the printed papers is “above the fold.” On the web, this concept is repurposed as the area above and below the limits of the scroll bar. As shown in Figure J, the immediately viewable portion of the Times home page is roughly the top half of the page’s full content. Users must scroll down to see the content placed “below the scroll.”
Even with limitless space for content on the web, digital media designers must still prioritize information, establish visual hierarchies, and utilize basic visual design principles, much like editors of printed publications have been doing for centuries. The web’s interactive properties transform certain images into icons, which in turn function as signs, symbols, and pictures. As a new media design artifact, the Times home page combines traditional rhetorical and design strategies with new elements of interactivity, dynamic content, and hyperlinking. The site illustrates many of the complexities designers encounter when determining the strengths, weaknesses, and interrelationships of verbal and visual codings, of text and image, in new media formats.
Arnheim, R. (2004). Pictures, symbols, and signs. In C. Handa (Ed.), Visual rhetoric in a digital world: A critical sourcebook (pp. 137-151). Boston: Bedford/St. Martin’s. Original publication 1969.
Bolter, J. D. (1991). Writing Space: The Computer, Hypertext, and the History of Writing LEA.
Doumont, J.-L. (2002). Verbal Versus Visual: A Word Is Worth a Thousand Pictures, Too. Technical Communication, 49(2), 219-224.
McCloud, S. (1993). Understanding Comics: The Invisible Art (2nd ed.): Kitchen Sink Press.
The New York Times Company. (2007). New York Times Home Page. Retrieved 4-20-2007, from http://www.nytimes.com/
Wroblewski, L. (2003). Visible Narratives: Understanding Visual Organization. Boxes and Arrows Retrieved 5-12007, from http://www.boxesandarrows.com/view/visible_narratives_understanding_visual_organization