Tag Archives: interface

Interface Lessons Everywhere

I was out at a restaurant a while back, and it had pretty interesting decor – a hip, modernist kind of thing. Pretty to look at.

At one point, I needed to use the restroom, so I went and did that. When it came time to wash my hands, though, I was stumped. I mean, I think of myself as a reasonably intelligent guy, but I could not figure out how to turn the water on. There was a lever. I tried lifting – no dice. I tried pushing – nope. Side-to-side? Sorry.

After what seemed like an eternity, I discovered that it was a twisting motion – something not hinted at anywhere.

It reminded me of user interface design — it was Don Norman who popularized the idea of affordances and constraint, and this was a prime example. Of it done badly, that is.

But those kinds of lessons really are everywhere. When you rent a car and have to figure out how to open the trunk from the driver’s seat. Or you go to a restaurant (can you tell I like to eat out?) and open the menu. What’s obvious? What’s not?

It is, perhaps, the curse of a designer that everywhere you turn, you notice design — good and bad. But it’s also a benefit for everyone, and we encourage our clients, when thinking about design ideas, to do the same. Look around you every day and think about what you like and what you don’t.

Context matters also, of course. The design for a menu at a pub will look quite different than one for an upscale French restaurant, for instance. So the next time you’re walking, biking or riding down a neighborhood street, look at the retail storefronts. How are they representing themselves? Are they using design and “interface” to their advantage?

Because the lessons are everywhere.

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.

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.

Fighting Friedman

Many years ago, Thomas Friedman wrote a book with the (paraphrased) title, “The World Is Flat.” He has since written other books with similar themes (and titles), each generally well-received.

It seems that in some corners, designers have jumped on the bandwagon as well, embracing flat design for everything from web pages to apps to print pieces. Perhaps it’s a pendulum shift from the previous tendency toward skeumorphism, but whatever the cause, it’s everywhere. Even Apple is doing it for the newest version of iOS!

Now I’m no design Luddite, and I’m all for the evolution of design paradigms. But as with most pendulum swings, I think when we get too far to one side or the other, we lose something. In the case of flat design, I think it’s intuitive affordances.

Although the concept of affordances predates his work by over a decade, I can’t help but associate the idea with Don Norman. His book, “The Design of Everyday Things,” was (and remains) a seminal work on how to design for the benefit of the user and not the designer’s ego. The notion of affordances is that you should be able to intuit, by looking (or touching, in the case of tangibles), how and where to use an object.

In the case of an app, for instance, you should be able to tell what’s a button and what’s not; what’s being updated and what’s not; what’s editable and what’s not. But with flat design, you often lose the intuitive features that tell you where to tap and what is happening. You can be thrown back into the old trope of having to put “Tap to start” on the page or some other such instruction.

You shouldn’t NEED that kind of instruction. It should be obvious. But by flattening everything, a key method of providing that data is gone. As an alternative, perhaps a more hybrid approach makes sense, adding some hints here and there or some visual cues that bring just a modicum of depth back to the interface.

Because even though the world may be flat (according to Friedman), that doesn’t mean the world’s interfaces need to be.