Color
The Wall Street Journal only uses color to a small extent to create hierarchy and emphasis. However, this creates an even stronger hierarchy and gives more weight and emphasis to certain elements. In About Face Alan Cooper, Robert Reimann, David Cronin and Christopher Noessel describe the different ways of creating hierarchy through color. They state that differences in hue, value, or saturation compared to the overall background or full set of colors used can create hierarchy. An additional hierarchical element is the size of a colored element. As an example less important elements could be less saturated and have less value and hue contrast to the background or overall color scheme. Often just varying one of these properties does the trick.
These patterns are clearly applied when looking at the color elements of the WSJ homepage.
While the homepage uses color minimally, it focuses on blue schemes. Therefore the few red elements represent a strong contrast in hue and stick out. There are also differences in value and saturation. Elements with high saturation and dark elements stick out compared to the overall bright appearance of the homepage and its white background. Bright colors, on the contrary, are sometimes barely noticeable and seem to have even less emphasis than purely black elements. When hovering over certains links or categories the color of the headlines changes to a saturated dark blue tone creating high contrast and emphasize on the element.
Typography
The Wall Street Journal homepage uses various typographic techniques to communicate to their readers such as scale, weight, font families, alignments and style. Although the specifics of the hierarchy change depending on the viewing device, one element is constant, size (realtive terms). The Wall Street Journal uses the font size and style to communicate what information should be viewed first and what information is more important. As the book About Face discusses, humans have the ability to differentiate between objects (e.g.big/small) immediately and draw either connections or distinctions between the two. The Wall Street Journal capitalizes on this and uses a difference in size to allow the reader to naturally sequence the objects and attribute relative importance to them. An important principle to take into account is that using size does however have tradeoffs; by using size (large or small) you make it more difficult for the user to decipher the value of other variables, such as shape. This may very well be the reason that the Wall Street Journal does not have many additional shapes/colors on their website.
Here are the fonts that are used on the the Wall Street Journal homepage. One can tell that they use variations of one font for the header and body of the homepage and a contrasting font for the menu (something with different functionality than the previous two).
Head:chronicle display
Font Body: chronicle ssm
Highlight (bolded): chronicle ssm
Menu: Whitney SSm
Image
The Wall Street Journal homepage places the largest image in the widest center left column, making this the most important element in the hierarchy of the page contents. The images in the center right column add weight and draw readers’ attention to this column despite the fact that it is the smallest column. The smaller text does not outweigh the images in the center right column but the larger text at the upper left does. The image of the chart is less prioritized because it is on the far right.
Similar to the color of other elements the colors of the images vary in hue, value and saturation. Most pictures have a blue tone and only vary in terms of saturation and value. Because of the bright homepage background, darker blue tones tend to stand more out and have stronger emphasis whereas an image with light blue colors is inconspicuous. The biggest picture which is also allocated in the middle of the homepage is further emphasised through its strong hue contrast compared to other pictures and used colors. It is the only element that uses a yellow orange tone and therefore draws additional attention.
Composition (Gestalt)
Dondis discusses balance in composition, pointing out that it can be more dynamic and interesting to create balance with asymmetry. On the Wall Street Journal homepage the outer left and outer right columns are the same width, providing some balance. There is sharpening with the two inner columns which are very different in size. The column on the inner left is much wider than the inner right. Here, it is clear that the inner left column is the most important. If the widths were more subtly different, the balance would be ambiguous, making it more difficult to discern which column is more important in the hierarchy. Sharpening can add interest to visual compositions while still achieving balance. In contrast, ambiguity in compositions violates the Gestalt principle of simplicity.
The felt axis of the homepage is actually in the middle of the screen with the larger inner column’s weight overlapping slightly onto the other side of the axis. This positioning of the larger column creates a sense of balance. This felt axis is also the origin of the primary scanning pattern proposed by Dondis. The WSJ homepage could be seen to follow Dondis’s primary scanning pattern or the more recently proposed f-scanning pattern argued to be the primary scanning pattern for websites. Both of these scanning patterns reflect the behaviors of readers of languages that are written left-to-right.
Objectivity/Subjectivity
These assessments are subjective because the principles of hierarchy are quite abstract and different people may interpret and apply them differently. There is likely to be considerable consistency across different people’s interpretations because of similarities in perception. Some of these similarities may be biological and others cultural. We believe that some people would argue that this assessment is objective because there are clearly established principles of color, typography, and composition and it is possible to apply them correctly or incorrectly. However, due to the fact that there is room for interpretation, and because we believe that everything is influenced by our subjectivity, we see this exercise as subjective.
Class Discussion Questions
What visual metaphors are used to deliver information using hierarchy?
Visual metaphors of physical space, weight, and gravity are used in hierarchy, in particular in achieving balance in composition. In addition, metaphors pertaining to size or order can often indicate importance or the order objects should be consumed in.
Can design hierarchy be measured quantitatively? How so?
Certain aspects of design hierarchy can be measured quantitatively. For example, you could quantitatively measure balance in composition and identify the most important elements by looking at the size (pixels or inches), area, and x and y positions of the elements. Elements such as font size, font weight and design pertaining to the grid system can often be measured to an exact pixel. The measurement may be in accordance with web standards or ones developed by the “brand.”
Can design hierarchy be measured qualitatively? How so?
Design hierarchy can also be measured qualitatively by asking people to provide feedback on which elements stand out to them the most on a page. It would also be possible to develop a qualitative coding scheme or set of categories that could be used to assess hierarchy.
Is it possible to create a universal set of parameters for hierarchy?
As mentioned earlier, the part of a page or composition that is automatically perceived as the most important differs based on culture, in particular based on the directions in which people are accustomed to reading. Taking this into it is may be possible to create some parameters for hierarchy (such as what difference/size equates to) but in short, due to social and design constructs it would be very difficult to create a universal set of parameters.