Adaptive Path Newsletter for February 24, 2010

I’ve spent the last 15+ years designing digital experiences for the Web, so there are a lot of Web Pages in my past.  I’ve grown to loathe the term Web Page. Why? It’s blatantly misleading. It stinks of “horseless carriage.” Yet it’s so deeply hooked into the terminology of interactive experiences and the world of Web interfaces that it takes serious effort to dislodge it.

I honestly feel that in order to create engaging digital experiences, we need to continuously evolve how we think about them. And this means we need to change the words we use to design them. What we need are new metaphors to play around with…words and terms that unleash fresh thinking appropriate to experiences in the Web and beyond. A language of experiences that can prism through different devices, objects and spaces.

So for the past few design projects, I’ve been playing with new language with the goal of opening up new approaches to design.

Page Rage 101

Here’s the skinny on what I call Page Rage. Page Rage is the emotion that overwhelms you when you realize that continuing to use the term Web Page curdles opportunities for evolving user experiences. Why? Because the word is an artifact of the woefully outdated book metaphor — a metaphor that limits thinking.

The word “page” means paper and books. And although it never made literal sense, it was a helpful metaphor when the digital stuff on the web was mostly about static content…when it behaved more like books. But the capabilities and possibilities for digital interfaces have shifted dramatically.

Now the Web is a teeming landscape of content and services, product platforms, and social streams. It’s an ecology of software applications, gaming, multimedia, small-device displays, multi-user displays, displays on the sides of buildings that can be controlled using mobile devices…you name it, if it’s not already hooked into the Web, it’s going to be. Anyone designing stuff for today’s Web needs to be thinking way beyond sites and pages.

In Metaphors We Live By (G. Lakoff and M. Johnson) Lakoff says:

“The concepts that govern our thought are not just matters of the intellect. They also govern our everyday functioning, down to the most mundane details. […] Our conceptual system thus plays a central role in defining our everyday realities. […] But our conceptual system is not something we are normally aware of. In most of the little things we do every day, we simply think and act more of less automatically along certain lines.”

Which means that the book metaphor has the power to frame our thinking and define the opportunity space for design, all without our being aware it’s happening. In short, we’ve become shackled by the book.

What’s the nature of these shackles? Here are the elements of a book experience that I feel are deadly for interactive experiences:

• physicality (made of paper)
• singleness (a unit of “a page”)
• similarity/conformity (pages have the same size and shape…bound together into sets)
• sequence (turn page 1, then 2, then 3)
• linearity (turn page 1 first, then 2 next, then 3 after that
• succession (beginning, middle, end, sequel)
• single entry point (cover page)
• limited space (physical constraint)
• word-orientation (visuals as supports, not main content)
• implies reading and focused attention

All these associations are specific to the form of a book. They’re not limitations of the technologies we’re using today.

Think this is bunk? The definition doesn’t give a lot of wiggle room: “page” is all about the paper.

Page – noun

1. 1. one side of a leaf of something printed or written, as a book, manuscript, or letter.
2. 2. the entire leaf of such a printed or written thing: He tore out one of the pages.
3. 3. a single sheet of paper for writing.
4. 4. a noteworthy or distinctive event or period: a reign that formed a gloomy page in English history.
5. 5. Printing. The type set and arranged for a page.
6. 6. Computers.
   a. a relatively small block of main or secondary storage, up to about 1024 words.
   b. a block of program instructions or data stored in main or secondary storage.
   c. (in word processing) a portion of a document.
   d. Web page.

Yeah. Web gets a sad little shoutout in definition 6d, and it’s own puny definition. Not a lot of love for the interactive nature of the Web.

So why get all enraged about a word? It’s not the word’s fault. Nope, it’s how we, as people, act (or don’t act) as a result. Lackoff goes on to say:

“It is reasonable enough to assume that words alone don’t change reality. But changes in our conceptual system do change what is real for us and how we perceive the world and act upon those perceptions.”

I decided to banish “page” to unmoor the conceptual associations of the book metaphor. I wanted to force myself into a new conceptual system to be able to think about the interface behavior in a new way. So I blacklisted a word. And it felt awkward and weird, just like any new habit should.

Learnings from the Search & Replace experiment

In the past months, I’ve tasted a bunch of terms as a replacement for Web Page.

• The ones that were easiest to simply swap out: interface (or shortened to just “face”), screen, panel, pane, window, layer, display, frame, template.
• I also played around with: surface, folio, leaf, slip, section, tile, card, lens, slice, wafer, patch. Those were weirder, but still interesting.

Things I learned (and am still learning) by doing this.

1. When it works, no one notices.

If the replacement term makes sense, no one will notice you no longer say “page.” Some words just made sense to the team. Even though it was effort to avoid using the P-word, no one else seemed to care, as long as the term used was clear and appropriate. It was like gender-neutral language. No one notices if you say mail carrier instead of mailman. It just works.

2. Awareness takes time.

You have to take more care with your language. Which means you have to think more about what you say. This is a good thing. I also had to think more about “if it’s not a page, then what is it? A view? A lens? A folio? A stem? What does that allude to? Does it make sense? It’s an exercise in thoughtful design to consider things at this level.

3. Out with the old means in with the new.

You have to find new words to play with. I was encouraged to intentionally explore new metaphors. Was the experience like a performance? Was it more like an environment? An ecosystem? What set of terms would make sense?

I found I had better ideas more tied to the quality of the experience, based on the term and the associations. Cards hinted at interactions like shuffling, randomness, layouts and flipping. Frames showcased a central hero or focal point.

Understanding the qualities of the experience made it easier to think through how the service or information would behave in contexts beyond “sit-down-in-front-of-a-screen.” What would this product be like on an iPhone? On a Nabatag? On a billboard? In a restaurant?

It sharpened the realization that I was not a web designer. I was a designer creating an experience for the Web. And that’s a powerful shift in perspective. It’s one thing to say “I’m an experience designer.” It’s another thing to really think like one.

DIY : Your own experiment

Want to give this a try? Here are three simple steps:

1. Unseat the book metaphor.

Simply replace “Web Page” with something else.

You’ll notice that it feels awkward and uncomfortable, kinda like a new yoga move. That’s okay, it’s part of the process. But you’ll also notice a new awareness for when and how you rely on the term. Try out some different words. Some will work, some will sound bizarre. (Some won’t make sense at all.) But you’ll be playing around with new possibilities.

This step is like sorbet: it clears your palette to taste the next course.

2. Start dating new metaphors

Once you’ve gotten used to using alternate terms, work on swapping in a new metaphor. Move outside your comfort zone and get experimental. Think about the context of the design and the experience. What does a new metaphor push you to think about?

• a movie: play with words like reel, scene, shot, clip, sequence, serried, frame, screen, episode
• a play: play with words like theater, stage, setting, set, proscenium, skene, scene
• artwork: play with words like frame, figure, ground, composition, aspect, face, tableau, vista
• pieces and parts for building with: play with words like tile, block, brick, plate, pane, panel, chip, section, plan, foundation, bracket, skin

Silly? Maybe. But honestly, no sillier than Web Page.

3. Keep your eyes and ears open for new terms to love.

Stay alert for new conceptual metaphors that evoke qualities of a rich interactive experience. One that can bridge multiple channels. Find a couple that have words that carry the attributes you want to design for. Keep your eye out for keepers: words and metaphors that support:

• context-sensitivity
• unboundedness
• fluidity
• glance-ability
• distinctiveness / variation
• series & multiples
• temporality
• media-inclusive
• multifaceted
• no single entry point
• interconnected
• shuffle-able, re-orderable
• multivariate

These are the attributes that we need our metaphors to evoke when designing products and platforms that radiate through many channels.

Think about how the words scale. Can they be used to describe interfaces for any channel? Mobile, micro interfaces on devices, large-scale devices, multi-touch, immersive and ambient interfaces?

Feel the Rage

The payoff of Page Rage is that it’s a helpful wedge to break the book metaphor and to invite fresh thinking that’s inclusive to multiple product forms. At the start of the Web, many of our approaches were limited by the technology. Now we run the risk of being limited by our metaphors.

Companies are already investing in this broader thinking. The BBC recently posted a blog post about their new global visual language for the BBC’s digital services. This comprehensive effort was primarily to unify two channels: the web and mobile experiences. It’s clear that creating channel-agnostic design foundations is the next step of evolution for digital experiences. And to get there, we can’t keep designing by the book.

We won’t get there all at once, but we can start by unshackling ourselves from the book metaphor. Embrace the Rage.