A great web page is structured like a good dinner party – not everyone can be the center of attention at the same time. To maximize effective participation it is best to have small pockets of focus exist throughout the dinner that people can engage with. In order for those pockets of focus to stand out in the crowd, there needs to be space for people to differentiate themselves. For this same reason not everything on a web page can scream for attention if the guest is to have a good experience.
If everyone at a dinner party were to be shouting over each other, they would be be drowned out in the crowd and create a confusing, noisy, chaotic, user experience for any visitors. Contrast needs to exist to help people to quickly decide what information or discussion they would like to engage in. Thinking about a web page like a dinner party can help to guide how many things on a page can speak to the users and a particular volume.
This analogy has helped me to highlight the importance of establishing focus on pages to non-ux oriented business analysts. In order to make the most of all of their hard work gathering business requirements and forming a solution, we need to ensure that the party we host is enjoyable for our guests. To take our analogy a bit further we can view a site (our dinner party) as simplistically having two parts – an “arrival” (a home or departmental landing page) and a “joining a discussion” (detail page) portion.
This generic framework helps us to establish some guidelines that can be extrapolated out further as needed.
Arrival – Critical to have Effective Contrast
When arriving at a good dinner party there are small groups of people, perhaps three to five clusters, that are carrying on individual discussions. From quickly surveying the room a guest is able to get a sense of who is involved in each discussion and the topics of conversation in each. In each conversation there is generally one person that at any given time is the main participant in the discussion, allowing the guest to discern the composition of each discussion.
This is exactly how we want our guest to experience our site upon arrival to a home or departmental page. This allows users to quickly understand the content and or actions that are available to them without having to arduously examine the page. It is critical that only a few messages on the page can have high contrast – all other supporting material must be displayed at a lower “volume”. This is just as with a series of dinner party discussions – there needs to be contrast, it cannot be a noisy room if the guests are to comfortably navigate the page.
As illustrated above, the top layer of the above pyramid accommodates a few main points that represent the discussion groups within the room. The supporting materials take a back seat to the main focal points and provide further detail to help the user understand if the content or action pertains to them. Any unrelated material should only have briefly detailed links for more detail.
A good example of this might be a page that supplies information about travel and expenses to users within an intranet. The page would have guidelines on meals, corporate credit card sign-up, automobile rentals, and an application that will let users submit expenses as well as contact information for accounts payable employees.
To demonstrate polar opposite examples of a poorly structured landing page vs a well structured one please reference the following examples.
I am not singling out Microsoft due to beliefs around their platform, but from a user experience standpoint Microsoft has done a very poor job of structuring their home page. I would guess that they have ended up designing the site by “committee” and the poor user experience is not due to lack of design experience within their organization.
In sharp contrast, SAP also has many products and services, but does a much better job of giving users a clear understanding of where they should look and interact for more information. They closely follow the Arrival Volume Pyramid methodology.
Group Discussion – Tight Focus with Relevant Material and Depth
Once within a discussion it is even more important to constrain the volume of each participant if the discussion is going to be effective. There should be one message and all supporting materials shoudl directly support the main message.
For the purposes of relating the dinner party group discussion to an intranet page, we can continue our example from the “arrival” scenario described above and think of this as a detail page describing expense policies for automobile rentals that was accessed from a page outlining all expenses policies.
The pyramid above illustrates the increased focus that is needed to make a detail type of page effective for the guests. The supporting information on the page only supports the main point. Any of the other material generally does not have more detail than a nagivational link to another section of the site.
I hope that the above explanation can help people to convey the importance of contrast in their designs in order to make a guest’s experience as efficient as possible. For information around prioritizing, organizing content and messaging on a page take a look at Intranet User Experience Design.