Tag Archives: visualization

Designing for Hierarchy

Not all information was created equal. Or perhaps you could say that some information is more equal than others. Regardless, there are few times in which, as a designer, you want to splay it out with equal weight on the screen.

The vast majority of the time, you want to determine the information hierarchy. What should the viewer see as the top-level, categorizing content? What should they see as the important detail? As we view web pages (and, indeed, life in general), we as humans are always building mental models of what we’re experiencing. That helps us fit experiences into patterns and then know how to react.

So when people experience one of our web applications or websites, we want to make sure it feels at least a little familiar (even when we’re designing something way-wacky, there has to be something for the user to grab onto). So one of the first things we do when wireframing or mocking up pages is to determine the information hierarchy.

Once the chunks of content are bucketed that way, it becomes a matter of how to represent that in the design. There are several ways to do that, including through spacing, through padding or placement, through color, and through size.

This is an important header!

Virtually all of those four were employed in the above header, and as the eye scans the page, the viewer will assume that’s an organizational point for the content. But you need not be so obvious about it – often, we will use some subset of the characteristics to consistently denote hierarchies.

For example, one more subtle way to accomplish this is through strategic shading. Of course, we don’t use shading where it will impede accessibility or readability, but some light changes can help the eye determine where the important content is and where it isn’t. (Or, to be more generous, where the slightly less-promoted content is.)

In any event, the conversation about information hierarchy is one that comes pretty early in our discussions with almost every client project. And it’s a key fundamental of visual design.

Retro Geekiness: Sorting Out Sorting

As a child about thirty years ago, when I decided to transition from computer programming hobbyist to student, one of the big topics that represented that transition was algorithms. These “recipes for the computer,” as I was taught at the time, were the key — the secret to unlocking the potential of this great technology.

One of the first areas of algorithmic exploration I embarked on was sorting algorithms. Which, although it was probably a pretty haphazard selection, turned out to be a good choice. Even now, three decades later, knowing how sorting algorithms work and when to choose the right one comes up all the time.

But back then, it was a brave new world to me, and I was just trying to figure out how they worked at a basic level. It was a struggle — I knew that some were faster than others in certain cases, some really sucked all the time (using the vernacular of the time), but I was having a little trouble grasping the nuances.

Then one day, while I was idly flipping through my school district’s central film and video catalog (the depth of my geekiness as a child is unending), I saw — what’s this? — a video about programming! I quickly badgered the librarian to request it, and when it came, I beheld: Sorting Out Sorting.

This 30-minute video was created entirely on the computer in 1980 — an impressive feat by itself — by the University of Toronto. And it remains, I think, the best teaching material on sorting algorithms in existence. When I started teaching computer science, I went on to show it to several classes of students over the years, and while it’s certainly dated (oh, man, is it dated), the information remains stellar.

There really is no substitution for seeing the algorithms in action. These days, there are websites like this one that show you much of the same animations in a browser window, but the movie gives you more in-depth detail about each one.

This is by no means a film review website, but this is one I’d give two-thumbs up. Put some legwarmers on, turn down the Huey Lewis & The News for a minute, and check it out.