Lecture Notes: Week 04 » The Static and Kinetic Screen, Module 2

Posted on March 23, 2011


Module 2 of week four’s lecture goes back to Polaine’s quote in Module 1 where he states that interactive design is “about making complicated things easier and more pleasurable to use.” Module 2 explores how this is made possible through Visual Hierarchy.

When dealing with Infographics or Information Design, visual hierarchy helps users navigate around the design. This can be done through a variety of different methods. The first one is the ‘point of interest’ or the ‘point of focus’. The diagram below is an example of this. The red circle is the point of interest and it is the focus point of the composition. It can also be referred to as the leader in the Visual Hierarchy.


The below diagram shows the many different levels of information in a static composition:

The different shades of red shows the visual hierarchy of the image. The dark colours represent the point of interest or focus point (level one) and the light shades show the subpoint (level two and three and so forth).

Contrast is another method of Visual Hierarchy and can be defined as “the difference between visual elements within a work” and “the relative difference between light and dark areas”. Contrast is used to determine the importance between different information for example, if one button in your interactive is more important than another then using more contrast will make it identifiable to your users.

Tone is the relative lightness or darkness of a colour and helps to establish contrast and helps to strengthen or weaken the point of interest.

Scale and weight is the relative size of a graphic form and closely relates to perspective and depth. For example the following diagram shows how the human eye see the smaller soldiers as being further in the background. The bigger soldiers are in the front and henceforth more predominant and can be perceived as more important.

Use of colours also help to establish Visual Hierarchy and is generally used with scale and weight to help categorize information. An example is shown in the diagram below. Colour and scale is used to help make the headlines more accessible and easier to process as opposed to having just a list of headlines that are the same in colour and size.

The use of Typography is also concerned with Visual Hierarchy. Typography is concerned with the readability (the degree to which the meaning of the text is understandable) and legibility (how clear the text is visually).  Scale, weight and contrast can make a difference in the legibility and readability of text or information.

This lecture helped me understand the importance of Visual Hierarchy, and not just in interactive design but also in graphic design. Visual Hierarchy helps users navigate around a design from the point of focus to the subpoints. Visual Hierarchy is also imperative to the success of an interactive design because if there is no hierarchy to the information being presented, users will get lost. For example, if an important button is not big enough (scale) or if it does not stand out enough (contrast) it may get lost amongst all the other info. This may result in the user losing interest due to confusion and frustration.

Posted in: Lecture Notes