The Metaphor of the System, Part 2

Whenever I think of interaction models, I visualize in my mind an imaginary modern art gallery designed by a famous architect. Let's walk inside, pay our admission fee, and enter the first gallery from the grand foyer.

At first, what we notice are the other people milling about the space. There must be hundreds of visitors from around the world, listening to their self-guided audio tours and quietly shuffling to and fro.

To your left, there's a security guard perched on a high chair. He's supposed to make sure we don't deface the art with our No. 2 pencils. When you glance at him sideways out of the corner of your eye, he looks a bit hung over. In a few minutes, another security guard will come in to replace him, so he can grab a quick smoke outside.

There are benches, plants, and other cues that let us know we can rest and linger if we wish. Right now, schoolchildren are perched in the room's centre, either texting their friends or doodling in their notebooks.

And, lest we not forget, there are works of art. Some are on the walls, winking from baroque gilt gold frames. Others are non-traditional, like video installations and sculptures that rest like melted wrecking balls on the scarred hardwood floors. You'll have to wait a minute or two until you can make your way to what seems to be the most popular works. Most of the people are bunched around two specific paintings, perhaps by Picasso.

Much of this experience is "designed." I put that word in quotes, as there is no designer holding us by the elbow, shepherding us through the room. The designer has considered the various points of contact that a person may have with the items and people within the space: the picture frames, the benches, the pots for the plants, the uniform of the security guard. (Though the guard may not like that polka-dot tie.)

Along with the curator, the designer may have determined the containers around content—the specific framing and placement of each work—and how those containers relate to communicate a particular story. The designer may be aware of the narrative flow of the exhibit, and how visitors can create different stories from the content based on when they encounter it. The designer may have worked alongside the curator to selectively manage what content may appear on the gallery walls beside the art, such as placards, infographics, and other wayfinding moments.

However, separate of what we see within the space, there is more to examine from above. Looking upwards, we notice that light shines down through a diamond-shaped skylight. Why didn't we notice it before?

With the permission, we hike up the stairs and climb up a ladder, pushing ourselves out onto the building's roof. Standing above this room and gazing down into this gallery space, we realize that it was designed structurally to encourage a specific kind of motion, from door to door. In fact, as we walk across the roof to examine other rooms, we realize that each room winds into the other like a nautilus shell. Visitors begin each exhibit from the center of the shell—the main foyer—spinning their way outward into deeper explorations of specific subjects. The skeleton of the building's space, when abstracted from its drywall and plumbing, its specific artworks and security guards, would resemble the elegant interior form of some crustacean sea life.

 

Interaction Design, Late to the Parti

When considering the structure of a building, architects often define its central, organizing idea as part of their ideation and design process. This unifying idea is known as the parti. The overall expression and movement of people through the space, the actual flow that happens through daily use, emanates from and returns to this fundamental idea.

In the case of our imagined art gallery, I've noted that there is a parti that organizes its space. We could summarize it in the idea, "Nautilus shell."

The central idea or concept implicitly encourages flow and movement from room to room, via a metaphor that manifests itself implicitly in how the space is used.

When designing for interaction, well-constructed systems can have a similar unifying idea. (See Luke Wroblewski's great talk on the parti and the design sandwich, which this piece is building upon and evolving.)

But in the realm of interaction, we're not just focusing on the elements within the system—the people, the potted plants, the artwork, the security guards. We're also not solely constructing the overall architecture of the system independent of the individual actors: the blueprints, the drywall, the plumbing. We are grappling with how the whole system functions as a living, breathing organism, meant to live symbiotically with humans.

So an interaction model, when well-defined, describes how a system is intended to function over time. It is comprised of the following elements:

• UX patterns: Repetitive structures and pathways that people will encounter and move through over and over again. Example: A news feed in Facebook would always scroll downward, containing endless objects that a user could act upon. This is important: A UX pattern describes where actions will take place, rarely a range of specific actions. That is reserved for…
• Feature clusters: The specific functionality that a system contains. The features should be organized in a manner that makes logical sense to the people who use it, and have a dynamic relationship with the UX patterns. Example: When using my Facebook news feed, I am able to act upon an object by commenting on it, liking it, sharing it, etc.
• System behaviour over time: The animation, transitions, and other ways that the system behaves in response to (or anticipating) user input. Example: I click on a field that says, "Write a comment..." in my news feed. It dynamically exposes a larger box with my photos, encouraging text input. If I click away, it snaps shut automatically.
• UX principles: A set of guidelines tailored by the designer that governs the elements above. Violating the UX principles can causes all the other elements to suffer in both usability and desirability for end users. Example: I'd imagine that Facebook wants the minimum number of interactions or clicks possible from scrolling a news feed to interacting with content—one or two at most. Any new functionality must try to preserve this principle.

All of these elements are required for a system to feel unified during use. To quote Mr. Dan Saffer,

"A device without an interaction model will likely seem disjointed and made up of pieces, instead of as a whole. Pieces of functionality will work differently and the overall concept will be hard to grasp. Many mobile phones, appliances, and consumer electronics suffer from this problem. A solid interaction model is the basis for any great device."

Beyond devices, a solid interaction model can help organize practically any kind of designed experience: an art exhibit, an in-store sales experience, a board game. Any kind of product, service, or system that requires repetitive input and output would benefit. The material outputs may look different—i.e. you're not creating user flows and wireframes in all cases—but there may be a similar process in structuring the desired design outcome.

In describing the imaginary building above, I was outlining patterns of how people should enter and exit each room. There were principles that governed how those patterns are employed, and what specific features map to those patterns and principles. Specific features and content map to those patterns and principles.

But what differentiates an interaction model—at least in the process of brainstorming and crafting an interactive experience—is in what central idea or concept helps to cohere what would otherwise be "disjointed and made of pieces." I like to call these central ideas "interaction metaphors," or the metaphor of the system.

In my next post, I'll outline what makes an interaction metaphor distinct from a parti, and how these metaphors are created through the brainstorming process.