Tags: hierarchy



Web Application Hierarchy

Luke W., master of forms, is at An Event Apart San Francisco to tell us about hierarchy in web apps. He asks whether visual hierarchy matters and how we can construct a visual hierarchy.

Let’s face it, people don’t read everything when they get to a web page. Instead, they look around frantically until they see something that looks vaguely like what they’re interested in and then click on something to find out if that’s what they want, hitting the back button if it isn’t. We have an evolutionary capability to assess things quickly and tune stuff out.

The are three design considerations with web apps:

  1. Organisation. The structure of the app.
  2. Interaction. The behaviour of the app.
  3. Presentation. How your app looks to the audience.

The presentation layer should communicate how a web app works (interaction) and where stuff is (organisation). The presentation has two components:

  1. Visual organisation.
  2. Personality.

We focus a lot on communicating What is this?, How do I use it?, Why should I care?

Luke shows a screenshot of a very generic looking interface with no real visual hierarchy. No one can tell what it does. By reorganising the page elements, it becomes clearer what the application does. All that’s changed is the hierarchy.

He shows another example: Yahoo Desktop. The old design was very flat, everything was emphasised equally. The redesigned version has emphasised the labels “Search” and “Browse”.

In another example, a listing site, we see that de-emphasising page elements is as important as emphasising. There’s no point in having everything competing for attention.

Having shown us the benefits of visual hierarchy, Luke is going to show us how.

We make sense of the world in terms of relationships. We don’t know when we smell because we’re used to the smell, but other people notice because our smell stands out. It’s much the same with sight. We can associate or disassociate things using contrast, distance and size. We can use contrast in visual weight to guide the eye and create a flow. A screenshot of the Apple website demonstrates a considered creation of flow (compare that to a site where everything has equal weight—your eyes can’t focus on any one thing).

With cheap storage and open-source development environments, the barriers to entry for creating a web application are approaching zero. With so many web apps out there, how do you communicate at a glance what your app does?

When we design web pages, we concentrate on how a page fits into the structure of the site (is it a “parent” page or a “child” page, for example). But increasingly we should be thinking about how our pages fit into the structure of the web. Most people will probably arrive at a web page directly, through a search engine or content aggregation tool, rather than by drilling through the structure of your site.

Enough about the importance of letting people know what they can do on a web page. The next step is to make good on that promise and allow people to do what they came to do. Let people get straight to what they want to do. Don’t put any roadblocks in their way.

Luke’s talk is filled with excellent examples to convey his points but of course, given the visual nature of what he’s talking about, I can’t really do them justice here. You had to be there.