Category: Gestalt Principles / Representations of Affordance Discussion

Gestalt in the News

Analysis of rules seen in the front-page of www.wsj.com (The Wall Street Journal)

Rule #1 – Headings
Consistent formatting helps show what kind of text something is – tab, article title, body, or subsection header. The tabs are indicated by sans serif font (Whitney SSM or Arial), a slightly heavier weight font, small size, black. The titles of articles are indicated by serif font (Chronic Display or Georgia), bold, larger size, black. The body text of articles is serif font (Chronicle SSM or Georgia), regular font weight, small size, black. The subsection/topic headers are sans serif font (Whitney SSM or Helvetica), small caps, of various colors, but all colors have similar value.

Rule #2 – Borders
Borders divide up the page, and the border thickness and color denote how “deep” this divide is. Between completely different sections such as between the tabs and the content, there is a strong black thick border. Between different articles in the same section, there is a pale thin gray border.

Rule #3 – “Read More” Arrow
There is a “right arrow” for each section to read more. This rule is somewhat inconsistently applied. For the “Opinion” section this arrow is at the top to the right of the section title, and is close enough to the section title to be associated with the section title. The “Markets” section has its arrow at the bottom with an additional smaller “MARKETS” label. The “What’s News” has it at the top, but this header bar is so wide that the arrow all the way to the right is so far away from the “What’s News” at the left that in my mind they are not clearly associated.

Rule #4 – Data Visualizations
Data visualizations use a consistent shade of blue for the graphs. The text is gray sans serif.

Rule #5 – 12 Column Grid
The page appears to be laid out on a 12 column grid. In its widest layout, the four columns on the page are, from left to right, width 3, width 4, width 2, width 3.

Rule #6 – Image Aspect Ratio
The image aspect ratio is usually the same for images. This helps gives rhythm rather than chaos to the webpage, which is crowded with text and images.

*Gestalt Principles in play*

Contrast:
The WSJ website uses a reverse-contrast to distinguish between static content on the site (black foreground on white background) and the dynamic content represented by the stock ticker at the top (white foreground on black background). This according to us is a very good use of contrast as it in terms of scale (thin strip compared to the rest of the site), it creates a different context of lower relative emphasis.

Emphasis:

There are a few different ways the WSJ hompage communicates emphasis. The first one is through space. Note that the headings for each subsection of the paper are not much bigger than the rest of the text on the page. The way they stand out is that their entire right side is cleared, giving that word notable prominence, as nothing is on its same level, vertically, until you get to the next section. Another (more obvious) way is font size, as demonstrated by the top left headline. A third way is the use of center alignment for Opinion articles. Everything else is right-aligned, and the disruption of the rhythm created by this alignment is what sets off the section as important.

Balance:

We noticed some imbalance in WSJ.com’s header. The designers seem to have placed all the “extras” in the header on the right side, with nothing on the left to balance it. Subscribe and Sign In links are there, along with a red 50% OFF indicator.

Harmony:

All of the images in WSJ’s layout seem to be of the same 1.5 aspect ratio, despite their varying sizes. This adds a sense of consistency throughout. Also, they tend to use a consistent accent color (a mid-blue) seen in mouse-over transitions and in the Market section’s line graph.

Rhythm:

As I mentioned above, left justification is used almost exclusively throughout. There also seems to be consistent horizontal space between columns and consistent vertical space between vertical elements. As the eye travels down the page, one can see which articles are related through alignment of photos and text, such as the strategy employed with stacked boxes in the business section containing right-aligned photos of the same size surrounded by left-aligned text

Other Case Studies

In getting away from traditional new outlets, we wanted to consider NPR.org, whose news is generally disseminated in audio format, with text being secondary. This website is much simpler than WSJ.com, and after a menu on top, takes advantage of a pattern called “cards” to create a nice sense of rhythm. Each card is the same width with the same amount of space between itself and the next one. Each card is labeled with a category, and most feature a headline, a picture, and a button that allows the user to listen to a story. The type treatment is consistent across roles, so without reading the text, you know what information it’s going to tell you.

Another news website that our group studied which is quite unconventional in terms of visual representation was Slate (www.slate.com). Slate again used reverse contrast but this time, augmented it with scale to add emphasis to the most important article on the front page. To indicate difference in context of the link to the Facebook page as well as the request to disable the Ad Blocker (both of which are lower in hierarchy compared to the main news content), Slate glued thin strips of reverse contrast to the top and bottom of the page. As you scroll down further, there is a clear shift in weight to the top right as the heavy Slate logo stays glued to the top right of the page. This, we thought was an excellent manipulation of balance as users can find the menu and the search option on this ‘heavy’ block.

Al Jazeera, as we studied also had some interesting variations on contrast, emphasis and overall balance across its American, English and Arabic versions. The American version had a visual identity that was quite distant from its English and Arabic counterparts and used scale to indicate hierarchical difference in menu, space to indicate emphasis of the titles and contrast to indicate selected menu item. The English and Arabic version, while more similar at a glance, had some differences in the way they used balance and contrast. The English website was a more Left-to-Right oriented website with the emphatic elements predominantly on the left while the Arabic version followed the opposite trend. However, while the live news update was reverse contrasted, it stayed on the left side of the screen for both versions.

The Guatemalan newspaper Prensa Libre appears well-balanced at the top of the web page, but the design rules do not stay consistent as one scrolls down. In the header, the wide white side bars, use of free space and symmetrical layout create a feeling of balance. The distinctive brush-like font used for “Prensa Libre” contrasts dramatically with the Palatino/ Arial font of the rest of the page. The consistency of the font types, blue/gray colors and balanced arrangement create a sense of harmony. The main content is arranged in three columns of unequal width, with some emphasis given to the headline photo on the upper-left that takes up two columns, and greater emphasis given to the column on the right which is slightly wider than the rest and demarcated with a red line and small red clock symbols highlighting the latest news updates. Since the rest of the text and formatting lines are blue, black or gray, the red contrasts dramatically. The red clock symbols match the one in the drop-down menu, creating a clear consistency. On the other side of the page, the upper-left corner is grounded by a large black box with a simple white outline of a house; our eye is clearly drawn to the homepage link. As we scroll down the page, we see a balanced rhythm of column layout alternating image/ text/ image / text. However, as we scroll further down the page, we hit a shadowed line break where the “headlining news” ends and the “Mas noticias” and “Editorial” sections begin. The right column drops out and the other columns do not realign; instead, we are left with a glaring white space which feels unbalanced. For the first time, we have a left-aligned column of bullet points. The inconsistency is startling – I suppose that it is effective in making us feel like we have moved into another section of the paper.. At the bottom of the page, we hit another shadowed line break and the layout shifts entirely for the “Opinion” section; now we have four equal columns with titles that are center-aligned. If we were to study the “Opinion” section in isolation it would appear well-balanced, but the dramatic shifts in layout between sections destroys the overall harmonicity of the page.