Category Archives: Design

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.

Getting Better (Or: We Used To Be Worse)

I’m a bit of a pack rat. Somewhere, I have encomia that goes back decades. And in the digital world, this is true as well.

So when I got a new computing device recently and needed to migrate a bunch of data, I had an opportunity to look back at projects we’ve done over the years, and that I had done for at least a decade before. What I found wasn’t all that surprising, but it was instructive.

Starting with my early work, it was, well, fair. I mean, it worked and all (in fact, one web application I wrote a decade ago is still in production use on a public website – think about how much on the web has changed in that time!). But it wasn’t coded all that well, and the emphasis was on getting it done quickly and briefly. (In other words, the code was hard to read and not well documented.)

Then I look at a project from five years later, and it’s all different: sure, sure, it works – that much is the same. But under the hood, the code isn’t just quick, it’s efficient. And there are actual comments throughout. The front-end design and the ‘look’ of the work is leagues better (by that time, I didn’t do it myself, and we had a team with expertise in that area). It’s a professional product.

Then I turn to a project we finished last year, and it’s more advanced yet. The amount of growth isn’t as dramatic, but it’s still there. Development patterns are being used effectively and both programmatic and business logic is easily intuited from the code (and its documentation), and the separation of functions allows for easy manipulation of pieces and parts. It’s a great result.

This progression is hardly unique, I think – every person and every firm, if they’re stretching themselves and striving for self-improvement, has something similar. But we don’t talk about it much, because we worry that clients (or, more specifically, prospective clients) think “we get better all the time” means the same as “we aren’t really ready for prime time yet.”

But that’s pretty shortsighted thinking. Even the best sports pros are always working on their game. We can always improve – after all, that’s the whole point of professional development, right?

It was heartening to see that transformation over the last couple of decades. Who knows what the next project will bring?

Ballmer’s On The Way Out

So the news came down today that Steve Ballmer is retiring from Microsoft within the next year. And within moments of that news getting out, Microsoft’s stock rose nearly ten percent, coming close to its highest level in a year. That must be a real ego boost for Mr. Ballmer (although from all apparent signs, his ego is quite healthy, thank you).

The departure (and its aftermath) raises some interesting questions about where Microsoft has been and where it’s going, and about the tech industry as a whole.

First, a data point: Ballmer’s departure announcement was covered as an urgent, breaking-news story by financial publications (e.g., Wall Street Journal) and by general-news publications (e.g., New York Times). Some of that is probably expected, given the size and scope of Microsoft as a company, but I suspect that if the head of Nestle decided to step down over the next year, there would be articles but not breathless and speculative reportage. Clearly there’s something about Microsoft and about Ballmer that rates more amped-up coverage.

Most notably, the departure was also covered in a similarly urgent manner by Variety, a trade publication for the entertainment industry. And this is where we start to see one of the impacts of Ballmer’s tenure as head of Microsoft, and, really, of Steve Jobs’ leadership a decade ago: the worlds of tech and entertainment are separate no more.

Through his embrace of the creative community (and his extreme leveraging of it through interrelationships between Apple, Pixar, and others), Jobs educated both camps about the value of partnering with the other. But Ballmer oversaw some significant motion there, too. MSNBC, the Xbox (and subsequent iterations), and the various music initiatives (Zune, anyone? Anyone?) all had thumbprints from Ballmer on them.

His tenure at Microsoft was rocky, to be sure, and his on-stage performances that were once likened to a “humanized baboon” remain of legend. But Ballmer’s stewardship of Microsoft has resulted in some pretty great stuff, too. So maybe the tech community could keep the gleefulness down to a dull roar?

Designing With Audio: It’s Doesn’t Have To Be Annoying

We’ve been working on a project around here that is very audio-focused, and that’s a little unusual for us. Most of the time, the visual is the primary medium, and if there’s audio at all, it’s an ornament. Flipping the script, if you will, has been eye- and ear- opening. Some of what we’ve learned we will be able to use back on our more traditional projects.

The first pre-conception that some of us had was that audio was annoying, or a nuisance, or something that was frivolous. Surely, when it’s used poorly, it can be all of those things.

But as I type this blog post, I’m listening to the sound that the keys make as I strike them. It’s a feedback mechanism — in addition to the tactile one, of course, but an important one nonetheless. I still long for (and keep threatening my workmates that I’ll get) the old, heavy, metal IBM-style keyboards that really made a ruckus when you typed on them. The deeper tactile feedback was useful (and it really built finger strength!), but the more solid tapping/thunking sound was a key part of it.

If you’re an iPhone/iPad user, think of the beeping sound you get when you invoke Siri. You don’t have to be looking at the device to know what you did — it’s immediately obvious. How do you know? The sound. It becomes an interface-navigation feedback piece.

Then there’s the more traditional navigation feedback — where audio *is* the interface. The clearest example of this is hands-free interfaces in cars, but they exist on all kinds of other devices, too. Navigation systems that read out turn-by-turn directions, for instance. The audio is so important that it’s a selling-point, a key feature.

As we delved further into this audio project, we realized that by being mindful of the audio design as much as (or more than) the visual design, we could achieve a similar combination of functionality and beauty. We just had to toss our preconceptions at the door – and open our ears.