Page hierarchy

I just watched this great video by Ryan Singer (37 Signals) about Web Application Usablility. I wrote this summary:

When creating a page keep in mind the hierarchy of elements. Pages that are well structured and prioritised naturally create esthetic layouts. It works good so it feels good.

A page consists roughly of three object types:
1. Things that pop out (strong)
2. Things that belong to the basics (normal)
3. Things that need minor attention (weak)

Optical gradient
Things that need minor attention can have a smaller font and more opacity (grey text). In this way you create a ‘optical’ gradient, the eye will move from the bigger, stronger parts to the smaller, less visible parts. This created contrast helps the user to distinguish important from less important content. Also, contrast by headers, bold text, smaller text, highlighted menu items, links etc. serve as the handles we use to scan a page. They give the user control over the page.

Create handles
Create handles that hold the site. For instance: big headers, outlined text, an image or a (navigation) stroke.

Create importance levels, also in one line
When interface-elements look exactly the same it only means that the design decided they are all equally important. Here two things mather: 1. Which features are used the most by the visitors and 2. Which features do we want them to use. However, we should emphasize more important features, e.g. by greying ot this additional info. Also, we should de-emphasize additional info behind certain elements. By doing this we don’t bother the user with this info while he is scanning a page. If he’s interested in a an option, he’ll read on.

It all comes down to
1. Decide what matters
2. Make that pop out
3. Make everything else fade back