Through the Looking-Glass

Every weekday morning I commute to work on BART. When I look around at my fellow passengers, I’m always struck by how few of them seem to be fully present. Some seem incapacitated due to chemical intoxication, but many of them — often, most of them — are staring into little glass rectangles in their hands. Their bodies share this train car with me, but their minds and attention are somewhere else.

I sometimes catch glimpses of what they’re doing: chat bubbles, games with colorful candy explosions, videos of Bollywood dancers, a news website, a cat GIF, Facebook. Sometimes a smile or a frown flashes on their faces, cued by an interaction the rest of us are oblivious to. Their focus is intense; they only come back to the here and now when the train pulls into a station or makes an unexpected stop.

While they’re focused on their glass rectangles, we’ve somehow stopped being in the same place together. The boundaries of the physical environment we share no longer constrain their consciousness. They’re participating in something — a political argument, a shopping expedition, a flirtatious encounter — that’s happening somewhere else.

Where are these people?

Thinking and Feeling

The most intense architectural experience I’ve had was a visit to the chapel of Notre Dame du Haut in Ronchamp, France. It’s a small, peculiar building designed by Le Corbusier and built in 1954.

Image selbst fotografiert, via Wikipedia (
Image by selbst fotografiert, via Wikipedia

I was in my early twenties when I visited Ronchamp. As an architecture student, I’d seen many photos of the place, created a detailed pencil rendering of the building, and built a plaster model with classmates. Which is to say, this building was not unfamiliar to me.

Still, when I walked through its unusual pivoting door, I was overcome with emotion. Something about the place — the light coming in through the stained glass windows, the texture of the walls, its peculiar acoustic quality, the shape of the roof, the sparseness of furnishings and, perhaps, the fact I hadn’t slept much to get there — conspired to overwhelm me. I wept.

Image by Jean-Pierre Dalbéra, via Flickr (
Image by Jean-Pierre Dalbéra, via Flickr

At the risk of sounding trite, this building connected me with something eternal. It’s a place out of time: a modern work that is also entirely primal. I spent the rest of the morning walking in and around the building, in a daze. I didn’t sketch much.

I’ve had other emotional reactions to being in architecture. The Boboli Gardens in Florence. The Salk Center in La Jolla, California. Rockefeller Center in New York. None have been as intense as what I felt that day in Ronchamp.

Places like these don’t move us because of what they represent; they act on us at a level below thinking.

I’ve never had a comparable experience in a website or app. We experience information environments through language — that is, intellectually. We’re seldom moved by our experiences in them. Sure, we may have been angered by something someone’s written on Facebook, or driven to hysterics over a cat GIF. But those are not reactions to Facebook-as-place; they’re reactions to things that happened in Facebook. A key difference.

Christina Wodtke has written about poetics as a critical component of design. We don’t focus enough on this aspect of our work. When designing websites and apps, we mostly deploy language for pragmatic ends: to help people find and understand things. This constrains our ability to elicit emotional responses. Or does it? Notre Dame du Haut fulfills all of its pragmatic requirements as a building even as (or perhaps because) it moves us emotionally.

“Information” in Navigation Labels

One of the most challenging aspects of designing a navigation system is finding the right labels for its links or buttons. The words we use for these labels must be recognizable while being distinctive. They must be specific enough that users will be able to differentiate between all the choices before them, but broad enough to encompass all the things they point to. They must be pithy; you don’t have space to ramble. They must also help create a sense of context; the understanding that this place is different from others. In short, defining labels is not a trivial task. We must be careful with the words we choose.

Look at this navigation structure:

Sign-In | Banking | Credit Cards | Loans | Investments | Learning

These labels give you a clear idea of the sort of place you’re in. (A bank.) Some are more specific than others. (“Credit Cards” is more specific than “Banking,” for example.) They’re all short and to the point. I think this structure works well for a bank.

Although it feels obvious, defining a simple navigation structure such as this one probably required many hours of meetings. I’ve often been in such meetings. Team members will go through many ideas, trying various terms to see how well they describe the concepts they’re pointing to and how they relate to each other.

One of the words that inevitably comes up in such discussions is “Information.” For example, while I don’t have insights into the particular structure above, I can guarantee the team that designed it spent many hours discussing the term “Learning;” I’d bet at some point someone suggested the label “Educational Information” instead.

I always probe such suggestions. “Information” is not a helpful term in these contexts. After all, everything in the app or website is information. It’s redundant. You could as easily say “Banking Information” or “Loan Information” — “Information” doesn’t add anything. At four syllables, it’s a long word for a navigation label — and remember it never stands by itself, but always as part of a duo. (“Educational Information” has nine syllables — much too long for a label in most cases.) Some folks try to get around this by shortening it to “Info” instead:

Whether it be “Info” or “Information,” you’re not telling me anything useful by including it. Whenever you hear it suggested for a navigation structure, take a step back and examine the overall organization scheme. The appearance of “information” may be a sign that you’re trying to do too much with that one part of the environment.

The Ladder of Abstraction

You may have heard that dogs and cats only see in black and white. That’s wrong; these animals are dichromatic, which means they have limited color vision. What is true, however, is that their vision is different from ours. Other animals, such as some bats and rodents, are indeed monochromatic: they only see in black and white and shades of grey.

Before you start feeling smug, consider the limitations of your own sensory system. Some other animals, such as boa constrictors, can see infrared light, which is invisible to you and me. And you know about dogs’ sense of smell, which is much more refined than ours.

The point is that we don’t perceive the world as it is, we perceive it as our senses allow us to see it. Our sensory system presents to us an abstracted view of reality. (This suits me fine; our sensory system has evolved to allow creatures like ourselves to survive and thrive in environments like ours.) And on top of this already abstracted view, we layer another abstraction: language.

Continue reading

Navigation Sets the Stage

When you define a navigation system for a website or app, you establish the boundaries of a small world; you set the stage where interactions will happen and enable movement within a constrained space of possibilities. The range should be obvious to the people who will use the space; they should be clear on what the space is and what they can do here.

Let’s say you establish a primary navigation bar that includes the following choices:

Products | Services | Solutions

What’s the difference between products and services, or services and solutions? What about products and solutions? The answers will obviously depend on the context within which the organization operates; a power utility operates in a different context than a company that sells refurbished smartphones.

Most people probably don’t have a clear distinction between these things in their mind. When faced with these choices, they need to click around a bit to get a sense for the sort of things that are in each section. (“Oh, that’s what they mean by ‘solutions’ here.”) As the person explores the possibility space, he or she gains a clearer understanding of what each area includes and excludes. These terms (“products”, “services”, “solutions”) don’t call to mind any particular context on their own; you’ve probably seen them used to describe many different types of organizations’ offerings.

Contrast this with a navigation bar that includes these choices:

Balls | Bats | Mitts

Taken individually, none of these choices give you a definitive understanding of what the context is. (There are many types of balls in the world used in a variety of different contexts; the word ‘balls’ could refer to any one of them.) However, taken as a group, these choices suggest you’re dealing with a particular context: that of baseball. They also bring to mind clear images; it’s easier for you to visualize “bats” than “products.” As a concept, “products” sits too far up the ladder of abstraction.

As designers of information environments, we’re called to define the right level of abstraction for the terms that appear in navigation systems. More concrete terms will bring up clearer images but will be less inclusive of other elements, leading to a proliferation of options (and thus risking a paradox of choice situation.) However, using more abstract terms will require more exploration from users, particularly if they are unfamiliar with the context the organization operates within.

When we pick labels for navigation structures, we’re creating distinctions — drawing boundaries — that will affect how people understand the possibilities before them. We must do so conscientiously.

Our Own Private Idahos

I once had a client — let’s call her Mary — who’d built a business on a domain that had a good Google ranking. One day Mary called sounding distressed. The site’s traffic was not growing anymore — in fact, it was going down. “I don’t know what’s going on,” she said, “we’re still the number one result in Google for our keywords.” I checked. “No, you’re not,” I replied, “I see you way down the list.” We started comparing notes, and that’s when we realized Google was serving us different results for the same keywords.

I didn’t know what to recommend. I knew SEO was important, but​ it wasn’t the focus of my work. Still, I had a basic understanding of Google’s ranking algorithm: Roughly, it gave greater prominence to older pages that had lots of other pages pointing to it. This meant there were things you could do to the site — clarify language, structure HTML in particular ways — that could help. It also meant everyone saw the same results: if you googled something and I googled the same thing, we’d both see the same list of results ranked in the same order.

But now this had changed. The algorithm had become more complex, taking into consideration other factors. I didn’t know what they were, but it seemed clear Mary’s results were very different from mine. This place we had both referred to — the first page of Google results for keyword x — no longer existed; now there was Mary’s results page and Jorge’s results page, and the two were different.

The upside to dynamically generated environments such as this is that they make it easier for us to find the stuff we — individually — are looking for. Google’s results have been getting better over time; I usually find what I’m looking for faster. But there’s a downside too: if everyone sees a different version of the environment, how can we come to a shared understanding of what we’re looking at? How can we have a dialog when standing in different contexts? What is our common frame of reference?

For example, the algorithm that powers Facebook’s news feed generates a unique instance of that place every time you visit. It’d be meaningless for you to say to me, “Check this out, you’ll see it in your Facebook news feed!”; there’s nowhere for you to point to because the place you’re pointing to is completely ephemeral. And if you and I are chatting on​ Facebook, you may be seeing completely different things around the chat window than I am. Maybe these things are irritating or inciting me, and that’s affecting the tone (if not the content) of my messages.

Context is a very important factor on how we understand things. A conversation between two people during a wake will have a very different meaning than one during a circus performance, even if the same words are uttered. Effective dialog requires contextual stability, and we’re moving to a world where the spaces we converse in are in constant flux. Those of us who design these places are called to make them effective conduits for understanding, and this requires that we think about the contexts they create — shared and otherwise.

Creating Context With Language

Many UX designers think the purpose of navigation systems and heading labels is so users can move around and find what they’re looking for. While it’s true that making things findable is a primary function of navigation and labeling systems, they also have another critical purpose: helping set the right context for the user’s interactions in the environment. Choosing the right words can make it possible for people to know where they are, and this changes the meaning of the words.

As a mental exercise, try examining navigation structures in absence of company or app names. How much do the navigation systems tell you about what the place is? How does this change what you understand them to mean?

Here’s an example:

Website navigation system

I’ve covered the logos on this website so you can’t tell which company it is. (Although if you live in the U.S. you may be able to guess from the colors.) Look at the words on the navigation bars. You don’t need to know anything else about this environment to guess you’re in a bank. One of the labels even says it outright: Banking. This changes the meaning of the other words there. For example, the label Learning could point to many things; knowing you’re in a bank helps you constrain the possible meanings of “learning” to something like “educational material for becoming more financially savvy.”

The words you use in the navigation systems and headings of websites and app have a special role in those environments: They not only help you find what you’re looking for; they also help you understand what you’re looking at. The two functions are synergistic and must be carefully considered when choosing labels.

Considering Category Names

Let’s say you manage a large family of products. This requires you define a categorization scheme that will allow people to find the product among the family that best fits their needs. For some products, the grouping may be obvious but the category names may not.

Take eyewear for example. Products in this space come in one of two categories:

  1. Those with tinted lenses that help people see better by reducing the amount of light that comes through the lens.
  2. Those with transparent lenses that help people see better by correcting their eyesight using prescription lenses.

What do you call these two categories? (1) is obvious, since we have an English word for it: sunglasses. But what about (2)? It seems we don’t have a common word for “eyewear that is not sunglasses”. Check out how various vendors and makers call this category:

Continue reading

Opting Out of Poop

Most mornings I take my dog, Bumpkin, for a walk around our neighborhood. He’s well-trained and doesn’t poop or pee in the house, so by 7:45am, he’s usually ready to go! Houses in our neighborhood have front yards, and some have discreet — yet visible — signs such as this one:

Dog poop sign courtesy of
Dog poop sign courtesy of

Residents of these houses have chosen to explicitly opt out of allowing dogs to use their front lawns as toilets. Others (such as myself) don’t mind — as long as the dogs’ owners pick up after them. (Some houses have little signs that spell this out; mine doesn’t.)

There was a time — long before I lived here — when there were no signs on people’s lawns to indicate their willingness to allow pooping. At this time, the poopability status of front lawns was unspecified: You let your dog poop on someone’s lawn at your own risk, and the house’s residents might chastise you if they saw you. So the “don’t poop here” signs provide a valuable function in the environment.

However, these signs change the semantics of the neighborhood in an important way. The appearance of “don’t poop here” signs on some lawns explictly makes this a normative categorization facet of the environment. Before the signs, the poopability status of any given lawn was unknown. Now there are some lawns are explicitly marked “not here!” By implication, all the other lawns are ok. They don’t need to have a sign that says “yes, here it’s ok” — the absence of a “not here!” sign is enough to make it so.

Labeling some elements in an information environment with one of two binary choices (the answer to “poop ok here?” is either yes or no) will always imply the opposite choice as well, even if it hasn’t been explicitly spelled out. When labeling things, think about the dualities you’re (unwittingly?) introducing into the environment.