Design for Hackers: Reverse-Engineering Beauty

Chapter 7: Enlivening Information: Establishing a Visual Hierarchy

The “compositions” that most of today’s designers work with are far more complex in information and clearer in objectives than a Renaissance sculpture or an Impressionist painting. If they’re designing an interface for a blog, for example, there are specific tasks and objectives for the user. The user needs to be able to navigate to any page that he wants, but at the same time, the articles on the blog need to be easy to read. Categories need to be easy to navigate to, and information about the blog and its authors need to be clearly accessible.

Making these compositions visually compelling is important for getting new users to stay and for conveying a mood to visitors. But a compelling composition is of little use if the user can’t find what she’s looking for. Many visual standards and user interface patterns have been established for designing on the web, and certain user expectations come along with them.

For a user to be able to navigate through all the information in a website or application, that information needs to be clearly presented and have a clear hierarchy.

What I Mean by “Hierarchy”

The term hierarchy implies that information has a linear progression of important to not important, but this isn’t precisely true. The importance of a piece of information in an interface can change according to the use case. If you see a new blog post on a site that you read frequently, you probably aren’t that concerned ...