In systems design there is a rule of thumb known as Gall’s law. It states:
“A complex system that works is invariably found to have evolved from a simple system that worked. A complex system designed from scratch never works and cannot be patched up to make it work. You have to start over with a working simple system.”
— John Gall
Information environments (websites, apps, etc.) are systems, so this law applies. (I’ve seen it in action.) We acknowledge this when we talk about starting with a minimum viable product (MVP).
One of the main challenges teams face in such projects is arriving at agreement at what constitutes the “minimal” feature set. Designers can — and should — help teams clarify the product vision upfront. This helps make the process less painful.
Once a clear vision is agreed upon, the designer’s role shifts to defender of the vision. This is necessary because there will always be forces pulling things away from the minimal feature set — often for valid reasons.
When the product is real and can be tested, it can (and should) evolve towards something more complex. But baking complexity into the first release is a costly mistake. (Note I didn’t say it “can be”. It’s guaranteed.)
If you design software, you need to know about placemaking. Why? Because the websites and apps you design will create the contexts in which people shop, bank, learn, gossip with their friends, store their photos, etc. While people will experience these things primarily through screens in phones, tablets, and computers, they actually perceive them as places they go to to do particular things.
Your users need to be able to make sense of these information environments so they can get around in them and find and do the things they came for, just as they do with physical environments such as towns and buildings. People need to form accurate mental models of these environments if they are to use them skillfully.
As a discipline, software user interface design has only been around for about sixty years. However, we’ve been designing places for much longer. There’s much we can learn from architecture and urban design to help us create more effective apps and websites. This article is a short case study in the design of a particular physical environment that has valuable lessons for those of us who design information environments: Disneyland.
Why Disneyland?
To start with, as a designed place, Disneyland is unarguably successful. Since its opening in 1955, it has received over 650 million visitors and has become a cultural touchstone. (And it’s not even most popular of Disney’s “castle” parks!)
Disneyland is also a large-scale environment (smaller than a town, but larger than a building) that has been carefully designed and managed by a single entity — the Walt Disney Company — for over sixty years. This allows us to examine the evolution of major placemaking principles in a very crisp way over a long period of time.
Another reason to study Disneyland is that it was designed with storytelling in mind, so it has rich semantic and narrative layers that separate it from most other built environments. As a result, it has more in common with interactive information environments than many other physical places.
A “hidden Mickey” in the queue for Gadget’s Go Coaster in Disneyland. Image: Loren Javier
And finally, Disneyland is a lot of fun! It’s not only fun to visit: it’s also fun to read and write about. But as we’ll see, Disneyland is serious fun, since it addresses and reflects the anxieties and aspirations of the time and place it was created in. In fact, Disneyland is a perfect example of what the architect Christopher Alexander calls good fit: a successful relationship between a form and the context it was created to address.
So in this article we’ll be looking at Disneyland as an information environment that happens to be built in the real world, and see what we can learn from it. Let’s start at the beginning: with the core vision that animates the design of the place.
Lesson 1: Start with a vision that resonates with your users
One Saturday in 1947, Disney animator John Hench drove into the parking lot at the studio and saw a peculiar sight: his boss, Walt Disney, was pacing an empty lot across the street. When Hench asked Walt what he was doing, he told him he had this idea for a “Mickey Mouse park” to entertain studio visitors.
World fairs and places like Coney Island, Kennywood, and “trolley parks” such as Oakland’s Idora Park (pictured here) had been entertaining people since before Walt was born. Image: Wikimedia (Public domain)
Amusement parks had been around for a long time prior to the mid-1940s. These parks were groups of independently owned attractions, and tended to be chaotic, dirty, and seedy. Walt had a different idea for his park: He wanted a clean, family-friendly place that emphasized storytelling through unified theming, a place where the people who loved Disney movies could come to experience them “in real life”.
The initial plan was to create an Old West-themed park in the narrow lot across the street from the studio where Hench had seen Walt pacing. However, Burbank city officials rejected this plan (remember, amusement parks were seedy!), and Disney was forced to look elsewhere.
Unbound from the constraints of the small lot, Walt’s ambitions grew to encompass more than just the Old West. Given this broader scope, the design team divided the park into sections, called lands, which represented various themes. For example, one land would be devoted to fairy tales such as those featured in Disney movies, another to the Old West, etc. (Lots of different themes were explored at first, including clunkers such as Lilliputian Land, in which everything would be miniaturized — including tiny hot dogs which could be purchased and eaten!)
Early Disneyland map. Image: Disney (via Malia Munday)
The park would eventually open with five themed lands:
Fantasyland, which brought fairy tales to life,
Frontierland, a recreation of the American Old West as understood by 1950s audiences,
Adventureland, an expression of exotic locales and cultures,
Tomorrowland, which presented an optimistic view of a future made better through science, technology, and corporate largesse,
and Main Street U.S.A., a nostalgic recreation of the type of small-town American Main Street that automobile culture was displacing at the time.
These themed lands became the conceptual framework around which the entire Disneyland experience was organized. It’s worth noting that this exact framework also served as the organizing principle for Disney’s first foray into the new medium of television — a show also called Disneyland — which appeared concurrently with the park’s construction (and which helped finance it).
Stills from the first season of the Disneyland TV show (1954). Image: Disney
The Disney organization is often cited as an early case study in corporate synergy: different, but related, businesses working in concert to improve each other’s position in the marketplace. The TV show would promote the park, the park would promote the movies, the movies would promote consumer products, in a virtuous cycle revolving around a consistent set of themes: nostalgia, fantasy, adventure, the old frontier, and new frontiers, all of which informed the products of the Disney studio (and many of its competitors) in the mid-1950s.
This was no coincidence. In 1950s America, the economy (and the population) was booming, the automobile (and the interstate highways and suburbs it enabled) was changing the ways people lived, and the Cold War (which brought the ambivalence of technology to the fore) cast a shadow over everything. The themes that informed early Disneyland (the opening of the frontier, nostalgia, the promise of tomorrow) resonated deeply with this primary audience. More than an amusement park, Disneyland would be a place where Americans could physically indulge in fantasies about their past, their future, and the innocence of youth.
This is a powerful vision, and it would prove an important competitive advantage for the park when it opened. You’re reminded of it every time you enter the park; it’s engraved in a little plaque that hangs above the entrance. It reads:
A clear, compelling vision such as Disneyland’s can inspire and guide design teams around a singular direction. That said, having a compelling vision and a clear conceptual framework is not enough. The vision and framework must be organized in a way that makes it possible for people to relate to it, to interact with it. This brings us to our second lesson.
Lesson 2: Organize the experience into a coherent structure
The second lesson is the importance of having a coherent, extensible structure. This structure brings order to what could otherwise be a chaotic environment, and helps create a clear mental model so people experiencing the place can understand where they are, what they can do there, and where they can go next.
Disneyland’s structure makes it easier for new visitors to understand the place. It also allows the park to change and grow gracefully. Let’s examine three key structural aspects of the Disneyland experience:
Its taxonomy
Its topology
The use of language and metaphor in the park
The taxonomy of Disneyland
As I mentioned previously, Disneyland is divided into various lands, such as Tomorrowland, Fantasyland, and Adventureland. This group of lands, and the attractions they contain, can be represented as a traditional taxonomy. For example, the Jungle Cruise attraction is located in Adventureland, and only makes sense there.
1963 Disneyland map. Image: Disney (via Tom Simpson)
You could create an outline of the lands in Disneyland and the attractions and other elements they offer, and it would look much like the outline for the structure of a website. You can think of this taxonomy as a map to the content of Disneyland: the specific things it offers.
The topology of Disneyland
When you examine this taxonomy, you’ll notice that even though each land contains things that are unique to it, such as the Jungle Cruise in Adventureland, all lands offer the same types of things: They all have attractions, restaurants, shops, and guest services facilities (such as bathrooms, first aid stations, etc.) I call this self-similarity between the main areas of the place its topological structure.
Topology is a term that comes from mathematics: It’s the study of the properties that are preserved when something undergoes non-destructive transformations such as twisting, stretching, and scaling. Think of a circle. If you stretch the circle, you create an ellipse. The ellipse and the circle are topologically equivalent. However, if you tear the ellipse in half, it would no longer be topologically equivalent to the circle.
Even though the lands in Disneyland feature very different attractions, they share a common structure that make them topologically equivalent with each other. The attractions-restaurants-shops-services template is an invariant structural construct: all lands in all Disneyland parks use it.
The topology of Disneyland
This arrangement has an important effect in the way visitors understand and navigate the park. For one thing, the themes are made clearer because they are presented as narrative variations on top of an invariant, predictable structure.
For another, this also makes the environment easier to learn, since the affordances provided by one land are present in all the others. Should the Tomorrowland visitor feel the sudden urge to use the restroom, he doesn’t need to rush back to Main Street U.S.A. since he knows all lands have at least one restroom facility.
It’s worth noting that this invariance doesn’t mean the relationships, proportions, and amounts of the elements are identical in all the lands. Adventureland has more attractions than Main Street U.S.A., for example. What’s important is that the underlying structure itself remains constant as the visitor moves from one land to the next.
This topological structure has made it possible for Disneyland to change and grow over the decades while preserving the clarity of the environment. Park designers occasionally add and remove attractions, restaurants, shops, and services to the park. Every once in a while, they also add a new land, with its own set of attractions, restaurants, shops, and services. (There’s a new one being built right now, based on the Star Wars movies.) And of course, the entire park-land construct can be replicated. (It has been, once per decade, over the past sixty years. There are now Disneyland-style parks in Florida, Tokyo, Paris, Hong Kong, and Shanghai.)
The latest Disneyland park opened in Shanghai in June 2016. Image: Baycrest
So how does this apply to UX? Consider how a key function of content strategy is identifying and defining content types so large-scale information environments can change organically while maintaining coherence and understandability. These content types are a topological construct of the sort I’m talking about. That said, topologies are applicable to more than just content-heavy systems; they’re an important consideration for any large information environment that must adapt to change over time. (Don’t they all?)
Language and metaphor in Disneyland
Another cunning use of structure in Disneyland is the way Disney designers use language and metaphor to influence behavior. For example, the people who work in the park are not called employees; they are cast members. These cast members don’t wear uniforms; their on-the-job clothes are referred to as costumes. And did you notice I referred to park visitors as guests? This was another semantic innovation Disney brought to the amusement park business. (The traditional term used in the industry was marks, which says a lot about how park operators thought of their customers.)
Underlying these terms is a ubiquitous metaphor: that the park and its employees are putting on a show. This metaphor informs everything about the Disneyland experience. For example, areas of the park that are forbidden to guests are said to be backstage. When something in the park is broken in plain sight of guests, it is said to be bad show.
Custodial staff member entertaining guests. Image: Loren Javier
The choice of words we use to describe elements and actors in information environments has an important effect in how we act with and within them. Think about the way your team talks about the people who use your information environments. Do you refer to them as users? Maybe you may think of them as customers? Or perhaps you have some other term, particular to your industry, such as patients. Whichever the case, the term you use will have a subtle influence in the way you design for and interact with these people. Because Disney refers to its customers as guests, Disneyland cast members are more willing to accommodate their whims than if they thought of them as marks.
This showbiz metaphor, as expressed through particular language, is an important part of the semantic structure that organizes and directs the Disneyland experience. This structure establishes the divisions and connections between the elements that compose the information environment. A coherent structure can make the environment easier to learn and navigate, and makes it possible for the environment to grow and change over time.
Semantic structures have a huge influence in how people think and behave when they interact in an environment. That said, these are abstract ideas. For people to be able to relate with the environment, these structures must be made into things people can actually experience. That brings us to the final lesson: the importance of using traditional placemaking principles to create an environment the people can actually interact with.
Lesson 3: Use traditional principles to create a sense of place
With a structural framework in place, we now face the challenge of making a place that people can move around in and enjoy. This is where the learnings from urban design and architecture really pay off.
The Image of the City (1960)
The study of how people form mental models of the places they inhabit can be particularly useful. Kevin Lynch’s book The Image of the City (1960) offers insights into this. It presents five elements that define how people experience urban environments:
Districts: The sections of the town or city, which have their own character, and which people have a sense of being “inside of”.
Paths: The means by which people get around the environment.
Landmarks: Physical structures that give people a sense of bearing.
Edges: Boundaries between two phases, lines that break continuity in the place.
Nodes: Areas of concentration of activity that serve as focal points for people to go to or from.
Particular combinations of these elements make cities and towns different from each other and allow people to create mental models of the one they’re in. Because Disneyland is an urban-sized environment that has been designed and maintained by a single entity, these elements come together in a particularly harmonious and focused manner. Careful attention to the hierarchy of the various components of the environment, the transitions and boundaries between areas of the park, and the connections between them, create a place that is not only easy to get around in, but also coherent, learnable, and memorable.
When navigating an information environment, we also need to make sense of where we are, what we can do there, and where we can go next. Studying these elements can help us design information environments that make this possible. Let’s examine how they come together in Disneyland.
Paths, nodes, and landmarks
Let’s start by looking at how people navigate the environment. When UX designers think of navigation systems, we usually think about navigation bars and search engines. The purpose of these things is to make it possible for people to move from one area of the website or app to another, to get closer to what they’re looking for.
usatoday.com’s primary navigation system allows visitors to go to the main areas of the site.
Navigation in Disneyland has similar purposes. However, since the park is a physical environment, it takes its design cues from architecture and urban design.
Disneyland implements a “hub and spoke” navigation model: There is a central hub, and all lands radiate off it. The park’s original design had a single entrance, located in the front of Main Street U.S.A., which led directly to this central hub. (It’s worth noting that this, too, was a Disney innovation in amusement park design: when Walt consulted other amusement park operators during the design of Disneyland, he was told this scheme wouldn’t work because it would limit the amount of people that could enter the park.)
Visitors enter the park from two tunnels underneath a train station. They then head down Main Street U.S.A. towards the hub, from which they can choose to visit any of the other four lands. Main Street U.S.A. is an example of the paths Lynch presents in his book: a way for users to get from one place to the next.
People instinctively know to walk down Main Street because their attention is drawn to a very unusual element at the end of the street: Sleeping Beauty Castle, a sight never before seen at the end of a traditional American Main Street. The castle is an example of what Walt called a wienie: a prominent vertical element meant to pique the interest of guests and entice them to move in that direction.
The TWA Moonliner rocket served as an early Tomorrowland landmark. Image: Tom Simpson
Once in the hub, guests would look around and see other wienies beckoning them: the Swiss Family Robinson’s tree house in Adventureland, the Mark Twain riverboat in Frontierland, and the TWA rocket ship in Tomorrowland. In Disneyland, these wienies serve as landmarks: they not only attract people by standing out, but also help keep them oriented as they move around a potentially chaotic environment.
Placemaking elements in Disneyland’s original (1955) layout.
Walking toward the weinies, Disneyland visitors eventually find themselves in a central opening, or plaza, where they can experience the theming, attractions, etc. that are unique to each land. These are examples of nodes in the sense Lynch talks about.
This combination of nodes, paths that connect them, and landmarks that draw people’s attention towards them, makes Disneyland easy to move around in. We have equivalents to all three in user experience design. As I’ve mentioned, navigation bars and search systems provide means for users of information environments to go from one part of the environment to another. Semantic elements such as labels and icons provide the landmarks and affordances that indicate where people can go within the environment, and second-level screens serve as nodes by providing concentrated access to related information elements and a sense of local identity for different areas of the environment.
With its prominent location, the iconic Amazon shopping cart serves as a wienie, always beckoning the user to initiate the checkout process.
Districts
These different areas of the environment can be thought of as districts in the sense Lynch talks about. As you may have guessed, Disneyland’s individual lands — Fantasyland, Adventureland, Tomorrowland, etc. — are districts in this sense; they all have unique characteristics that set them apart from each other and give them particular flavors.
The lands convey these concepts and narrative — i.e. the things that make them different from each other — through incredibly thorough and detailed theming. For example, everything in Adventureland — the architecture, the foliage, the music, etc. — has been carefully designed to make you feel like you’re standing in an exotic jungle outpost.
The main sections of the USA Today website are differentiated using color and particular semantic structures.
When I think of theming in the context of UX, two main areas of focus come to mind:
Visual presentation
Style of writing or tone of voice
In both cases, style and theming should be in service to the conceptual framework that underlies the work. Many designers understand the importance of choosing the right style or tone when it comes to language. However, when it comes to visual design, we are still much too driven by trends.
For example, think of the move we saw a few years ago towards “flat” visual design, which eschews “skeuomorphic” (or “realistic”) details in favor of a more pure “digital” esthetic. While I have nothing per se against this style, I don’t like it when designers select it for their projects just because everyone else is doing it. Visual style should reinforce and support narrative.
Disneyland would’ve been much less successful if its designers had decided to have the environment reflect the “pure” nature of the materials its made from: fiberglass, wood, steel, etc. Instead, designers harnessed the plastic capabilities of those materials to reinforce the differences between lands, in support of the conceptual framework that makes the park such a compelling experience.
“Gratuitous”, “skeuomorphic” (or to be kinder, “whimsical”) theming is not only ok to do — sometimes, it’s the right approach.
Edges
Finally, let’s look at edges. One of Disneyland’s most interesting design features is how it deals with transitions: those between the individual lands, and those between the park itself and the outside world.
The park’s lands have been carefully designed so their themes blend smoothly into each other. If you’re walking from Adventureland to Frontierland, you won’t experience an abrupt change. Instead, the architecture, foliage, etc. subtly blend together to achieve what has been compared to a cinematic cross-dissolve in real-life. (Many of Disneyland’s designers came from the movie industry; the park’s design is heavily influenced by cinema.) These smooth transitions are what I refer to as “soft” edges.
The opposite, “hard” edges, are transitions that have been intentionally designed to keep things apart. Disneyland also offers a prime example of these. Walt wanted to keep visitors from seeing the outside world so their experience of being in the park could be more immersive. To do this, he surrounded Disneyland with a train track atop a raised earth berm, which occludes sight lines into and out of the park. When the park first opened, this berm was crossed at only one point: the entrance tunnels leading to Main Street which we have spoken of earlier. So you could say this is a very hard edge.
In order to occlude views of the outside world, Disneyland is surrounded by an earth berm with a railroad running on top of it. Note the tunnels passing under the tracks on both sides of the train station. Image: Imagineering Disney
In UX design, we often have to deal with edges between different parts of information environments, and we need to decide how hard or soft they need to be. For example, many financial services websites include areas of the environment that are meant for public use and the more private, “logged in” areas meant for customer use only.
The public and private areas of citibank.com look similar, but are in fact very different places. Crossing this boundary requres entering a user name and password. This is a rather hard edge.
Some of these transitions need to be very hard, with the user being explicitly presented with stops when they try to cross over from public to private. In others, this boundary is much softer: the transition happens more gradually. Knowing these edges can have different levels of softness helps us frame the conversation with the design team so that decisions happen in an informed manner.
The Citibank iPhone app, on the other hand, offers an intermediate state between logged in/out that offers the user some information about her accounts before she’s logged in. The user can also log in faster using Touch ID. This is a much softer edge. Image: Citibank
Let’s recap
People form mental images of urban environments, such as towns and cities, using five elements: districts, edges, nodes, paths, and landmarks. Information environments have comparable elements that help people make sense where they are and what they can do there.
These placemaking elements are most effective when they work together to implement a semantic structure that brings coherence to the environment. This structure implements differentiations and metaphors that allow people to relate to and understand the environment.
This structure is most effective when it’s informed by a clear vision. In the case of Disneyland, this vision was set forth early on in the design process. It guided the design team towards the creation of a new type of environment that had never been experienced before, and which resonated deeply with its users.
These three components — vision, structure, and placemaking elements — build upon each other respectively. It’s difficult to create a meaningful structure if the vision isn’t clear, and designing placemaking elements without a clear semantic structure supporting them can only lead to an incoherent environment.
As they do with physical environments, people who use an information environment need to be able to create a mental model of the environment so they can act skillfully in it. As designers, we can help them along by using traditional principles to create a strong sense of place, informed by a coherent structure that articulates a resonant vision. Disneyland offers a perfect model for us to study.
Postscript: Crafting a vision statement for your environment
While all three components — vision, structure, and placemaking — are critical, designers most often take for granted the vision component. Design projects usually start with some sort of brief that lays out high-level requirements and objectives, but the vision of what the place is going to be (and how the people who use it will experience it) is seldom discussed. Because everything that follows will build upon it, it’s critical that the vision of the place be clear from the start.
In order to help clarify the vision for the design team, I’ve started doing a small exercise at the beginning of projects to produce what I call a “here you”, or vision of place, statement. This is a short sentence that articulates succinctly and powerfully what this place will be about, and how it will act on the people who experience it.
It’s called a “here you” statement because we use as our model Disneyland’s vision of place statement. (“Here you leave today and enter the world of yesterday, tomorrow, and fantasy.”) We take out everything but the words “here you” from Disneyland’s statement, and fill out our own words from there on:
A few guidelines to help you create a “here you” statement:
Keep it short! (It should be able to fit in the brass plaque above the entrance to Disneyland.)
You’re not writing a vision for your team or your organization. You’re writing a vision for the place you are creating.
It should not reflect your point of view of the place, but that of the people who use your place. (That’s why it starts with the words “here you,” addressing the visitor.)
The language should be energizing. Visitors should be excited to visit this place; avoid clichés.
Be realistic about what you’re trying to achieve with the place you’re making. That said, don’t be afraid to aim high!
You’ll have better traction if you work on this together with your team.
A well-crafted vision of place can help energize the design team, and get it working in a singular direction. When the time comes to make difficult design decisions, the vision of place statement can help the team make the right decision by honoring the intent behind the project.
This post is based on a speech I wrote for two back-to-back keynotes delivered in November 2016 at Interaction South America (Santiago, Chile) and the Italian IA Summit (Rome). The U.S. election was decided on the eve before I flew to Rome.
When architects tour Rome, one of the things they learn is that buildings can last a long time. When I was younger, I had the privilege of studying architecture for two semesters in the city, and one building stood out for me: the Basilica of San Clemente al Laterano, a beautiful church built during the middle ages. I was struck by the fact that the basilica had been built on top of an earlier building: a 4th century church which you can visit by descending to a basement under the main structure. That church, in turn, was also built atop an earlier building which was used by followers of the cult of Mithra, and which you can also visit today. The Basilica of San Clemente has been used as a place of worship for almost twenty centuries. When you visit it, you have a tangible experience of the evolution of Western spiritual practice over that span of time.
Buildings serve more than mere utilitarian purposes, such as keeping us dry from the rain or giving us a safe place to rest. They’re also physical manifestations of the political, social, and cultural environments that produced them. Buildings tell stories about who we are — and who we were — as a people. As an architect, I often think about the longevity and cultural import of buildings and how it contrasts with what I currently design: software. If buildings are among our longest-lived cultural artifacts, apps and websites are among our most ephemeral. Software is changing all the time, sometimes in big ways. For example, iOS 7 introduced a completely new visual design to the iPhone’s operating system. From one day to the next, the feeling of the entire information environment changed. Perfectly functional applications that didn’t immediately implement the new style suddenly looked old and out-of-place. This change was experienced by millions of people, literally overnight.
There’s some irony in the fact that the first cell phones were derided as “bricks”.
Unlike building materials, such as brick, wood, and steel, software is malleable, reproducible, iterative, and ubiquitous. These characteristics have allowed it to address a wide variety of problems, and to get better, faster, and cheaper all the time. As a result, software is taking over more and more tasks we previously did in buildings. It wasn’t long ago that you would’ve visited a record store if you wanted to buy music. Now you pay for the (temporary) privilege to stream to your phone the bits that represent music. Record stores are all but gone, and many musicians have had to shift to other means of earning a living. This transformation is a clear illustration of the phenomenon described in Marc Andreesen’s Wall Street Journal essay Why Software is Eating the World, in which he proposed that
we are in the middle of a dramatic and broad technological and economic shift in which software companies are poised to take over large swathes of the economy.
And it’s not just information-based industries, such as music, that are being “eaten”. We’re also adding a layer of information on top of the physical world that changes how we experience it. Think of an app like Yelp, which allows us to locate the best nearby gelateria. You’d expect ice cream — that most sensuous of gastronomic pleasures — to be immune from being eaten by software, yet many shops and restaurants are coming to depend on digital information as the primary means for people to find them.
Software also makes possible things that were previously impossible. I recently traveled to the Netherlands, where I had the opportunity to test Google Translate’s “Word Lens” feature, which uses my iPhone’s camera to provide a live translation of non-English words in the environment. This allowed me to get on the right train, and to order food from a menu, even though I can’t read Dutch. The ability to act skillfully within an environment encoded in a language I don’t understand is a superpower I now have, and it was made possible by software. This changes my relationship with the physical environment.
We need to recognize that in some important ways, software is taking over from architecture as the medium where many of our day-to-day activities happen. The writer and designer Edwin Schlossberg has said that “the skill of writing is creating a context in which other people can think.” Well, I think the skill of designing — especially designing software — is creating contexts in which other people can work, learn, play, organize, bank, shop, gossip, and find great gelato.
As someone tasked with designing these information environments, I find this exhilarating. We have such a broad scope of action! However, when I speak with other designers, I get the impression that often our focus is too narrow. Many of us are thinking about very small parts of these environments; one component of one screen of one version of one app on one platform at a time. Enthralled by the amazing artifacts we’re creating, we’re oblivious to the bigger picture. Again, the things we’re designing are complementing — and often obviating — physical environments that have served as our contexts for centuries, and we’re doing so with extremely ephemeral mechanisms. If we’re going to build our society upon software, it’s not unreasonable to expect that it provide us with the sort of contextual stability we’ve come to expect from our built environments. So the central question for me at the moment is: How can we design information environments that support wholeness in the long-term?
Harvard Business Review, September 2015
This is easier said than done, in no small part because designers have been blindsided by success. Design is now accepted as key aspect of business, and competent designers are in high demand. At a time when the middle class is shrinking, salaries and jobs for designers seem secure. Even the Harvard Business Review touts our accomplishments! Why should we be concerned about wholeness and longevity? Well, we should be concerned because we — and our kids — need to live in the world we’re creating. As you may have surmised, I’m not convinced we’re going about the design of information products and services in a way that leads us to a viable future.
In the early 1990s, the U.S. Army War College created an acronym to describe the geopolitical situation after the Cold War: VUCA. It stands for volatility, uncertainty, complexity, and ambiguity, four characteristics they saw as defining the multilateral post-Cold War world. The rise of information technologies — and the internet in particular — has radically transformed our political, economical, and social reality. We are all now living in a generalized state of VUCA. We see signs of it everywhere.
VUCA is when a few disenfranchised citizens come together in a social network and start a movement that topples a 30-year-old dictatorship in a matter of weeks.
BREXIT is a sign of VUCA. So is the election of Donald Trump.
The things we design are the mechanisms more and more people are using to understand and interact with the world and with each other. Information environments can either help open our minds and increase our understanding, or mislead us by feeding us “fake news”, or trapping us in “opinion bubbles” that make us believe everyone thinks the same way we do. Information environments can help us act more skillfully in a VUCA world, or make us victims of our circumstances. Designers need to approach our craft with much greater conscientiousness. With that in mind, I’d like to offer three perspectives to help us design information environments that create more viable contexts in the long term.
Structure
The first perspective is that all information environments have underlying semantic structures that support them. These structures exist whether they’ve been designed intentionally or not. I’m talking about information architecture, which includes (among other things) the categories, hierarchies, and particular language that make one information environment different from another.
For our purposes here, it’s important to recognize that these semantic structures change more slowly than the user interfaces they support. When I was working on the fourth edition of the polar bear book, one of my tasks was updating the examples in the book. This required that I re-visit many of the websites featured in previous editions. One of those websites — fedex.com — had a very different visual presentation in the mid-2000s (when the third edition of the book was written) than it did ten years later. However, when I started examining the site’s semantic structures, it struck me how little they had changed over that decade. I’ve seen this in my work as well: It’s not uncommon for organizations to overhaul their websites’ and apps’ “look and feel” while leaving their major categorization and language schemes largely untouched.
Of course, this phenomenon is not unique to information environments. There are many other things in the world that don’t change in a uniform way. In his book How Buildings Learn: What Happens After They’re Built, Stewart Brand explains that buildings are composed of layers that change at different rates. These layers are (from slowest to fastest): site, structure, skin, services, space plan, and stuff. “Site” — the ground upon which the building rests — changes very slowly, at geological pace. “Stuff”, on the other hand, refers to the things we put inside buildings, such as furniture and appliances, which can easily be moved and therefore change much faster. As buildings adapt to change over time, the form they take is affected on the differences in malleability of the various layers.
Brand’s “shearing layers” model (1994)
In a subsequent book, The Clock of the Long Now, Brand extended this “shearing layers” model to explain how civilizations change. This broader model is also composed of six layers (again, from slowest to fastest): nature, culture, governance, infrastructure, commerce, and fashion. Brand explains that because fashion (and art) change so quickly, this is where the civilization experiments with new ideas and ways of being. Worthwhile ideas are assimilated into the underlying layers, where they become more permanent parts of the civilization. As Brand explains,
The combination of fast and slow components makes the system resilient, along with the way the differently paced parts affect each other. Fast learns, slow remembers. Fast proposes, slow disposes. Fast is discontinuous, slow is continuous. Fast and small instructs slow and big by accrued innovation an occasional revolution. Slow and big controls small and fast by constraint and constancy. Fast gets all our attention, slow has all the power. All durable dynamic systems have this sort of structure; it is what makes them adaptable and robust.
Brand’s “pace layers” model (1999)
This is a very useful insight. It helps us understand how the unevenly-changing parts of a system can help make it stronger as it evolves.
As I’ve been thinking about how to make information environments more resilient, I’ve started mapping my work to a pace-layer model. These are the layers I’ve come up with, from slowest to fastest:
Purpose: Why the organization, team, or product exists. This is not a goal, since it can never be achieved; it’s an aspiration that the system is always working towards.
Strategy: How the organization aspires to do things differently in order to strive towards its purpose; how it’s going to compete.
Governance: How the organization shapes itself to implement its strategy. The rules and means of engagement, including the organization’s internal hierarchy.
Structure: The information architecture that will inform end products and services.
Form: The user interfaces that people use to interact with the organization’s products and services. This is where the structure is articulated as artifacts that humans can experience.
I separate form from structure for two reasons:
As I mentioned earlier, the structure that informs these products and services changes more slowly than the user interfaces that are built upon it.
We experience the things we design through apps, websites, social media, and a variety of other touch points. For the sake of coherence, an organization’s various user-facing artifacts should share a common semantic structure.
Many designers spend a disproportionate amount of time focused on the user interface layer. This is understandable. The UI is where the “new and shiny” action is happening. It’s also much easier to discuss UI artifacts, since structure is more abstract.
Note that the first three layers aren’t normally thought to be the domain of designers at all; the last two are where we’re usually brought in. However, in order to be successful, designers should be conversant in all of the layers, and move effortlessly between them. Understanding which layer we’re acting on at any given time is key to being effective as change agents, since all the layers require different approaches. I’ve found this pace layer model useful to not only understand the relationship between form, structure, and strategy, but also in helping us navigate complex design challenges at Futuredraft.
In any case, as designers we need to acknowledge that structural decisions are going to be a part of our information environments longer than its user interfaces. If we expect these environments to last, we need to pay careful attention to their structural underpinnings.
Systems
The second perspective is that the products and services we design don’t exist on their own: they create and participate in systems. As a passenger, the Uber app in your phone would be useless if there wasn’t someone out there driving around with a complementary Uber driver app in their phone, and an infrastructure — invisible to you both — which brings you together. Uber isn’t really a product or service: It’s a marketplace; a system. The touchpoints you experience — the driver app, the passenger app, the Uber website — are merely how you interact with this system. They can’t stand on their own.
What is a system? Simply, it’s a set of elements connected to each other in ways that allow them to form complex wholes. Think of your body. It’s composed of various organs (your liver, brain, lungs, etc.) and sub-systems (your digestive system, your circulatory system, etc.) working in concert to make a more complex whole: you. The system that is your body serves a purpose: keeping you alive. It has feedback mechanisms that let it know when it needs more energy (sleepy! hungry!), when it needs to cool off, and more. You’d be in deep trouble if these mechanisms failed.
What I’m saying here should be obvious. Systems are everywhere. They’re part of our day-to-day experience. However, understanding systemic relationships requires looking at things holistically (looking at the “big picture”), a skill that seems to have atrophied after three centuries of mostly reductionist thinking. We like to break things down into smaller chunks we can understand. We want quick, easy answers. We want someone to blame when things go wrong. As a result, we suffer from a cultural blindness to systems and their implications.
Systemic failures are everywhere. For example, recently Wells Fargo — the third largest bank in the U.S. — was engulfed in a huge scandal. Bank personnel had been pressured to sell new accounts, and some of them resorted to “selling” close to two million accounts to existing customers without their consent. The bank’s management denied any “orchestrated effort” to defraud customers, and blamed employees. Orchestrated effort or not, the incentives to meet sales quotas at Wells Fargo (which reportedly included denying bathroom brakes to underperforming employees) were clearly stronger than incentives to obey the law (and common decency). As Steve Jobs said,
Incentive structures work. So you have to be very careful of what you incent people to do, because various incentive structures create all sorts of consequences that you can’t anticipate.
Misaligned incentives, like the ones in the Wells Fargo case, are a systemic problem.
For an example closer to our discipline, consider iTunes. It may not be obvious now, but iTunes was once considered an example of a well-designed system. As the folks from Adaptive Path pointed out in their book Subject To Change (2008), the success of the iPod was due in part to the fact that it was designed to be a participant in a broader system in which the device itself took on the minimal possible functionality (playing media) while other required functions (such as acquiring and managing media) were delegated onto iTunes. iTunes was never a simple application, but it was simple enough to get many jobs done well. Over the last decade, however, the ecosystem around it has become increasingly complex: Instead of merely “ripping, mixing, and burning” music to load on their iPod, today’s iTunes users can also buy or stream music, buy or rent movies and TV shows, subscribe and listen to podcasts, sit in on university courses, manage their ringtones and audiobooks, examine their iOS (but not macOS!) apps, manage device backups, and much more. Although iTunes has changed cosmetically over the past decade, it hasn’t scaled to serve these new functions of the system in an elegant way. The result is often frustration.
So how can designers think more systemically? One way to start is by mapping out the elements that will be part of the system and the relationships between them. Before architects start to design the form of a building, they often explore the possible relationships of its spaces using bubble diagrams, simple sketches that eschew such critical details as materials and physical structures in favor of more abstract representations. This allows architects to run quick what-if scenarios to solve high-level project goals such as meeting functional requirements, establishing the right balance between private and public spaces, and enabling efficient circulation. The building’s “look and feel” can be resolved later, once these deeper issues have been thought through.
An architectural bubble diagram. Image source: Lily Glover.
In experience design, the equivalent of a bubble diagram is the conceptual model. These are diagrams that articulate the concepts the users of a system will be interacting with and the relationships between them. As with bubble diagrams, designers can use conceptual models to quickly evaluate high level what-if scenarios without getting mired in aesthetic discussions. Conceptual models are key to the design of effective information environments, and a good tool to help us start thinking more systemically about the work we do. (For a deeper discussion of this subject, see Conceptual Models: Core to Good Design, by Jeff Johnson and Austin Henderson.)
Sustainability
Let’s move on to the third perspective. As we saw with iTunes, systems aren’t static: they’re always evolving as they react to changing external and internal conditions. Perhaps the means people use to interact with the system have changed in some fundamental way (e.g. iPhones versus iPods), or the system must provide a new service (e.g. streaming music). In any case, change will happen, and the system should respond in ways that allow for (at least) its continued operation. In other words, the system must be sustainable.
When you see the word “sustainable”, you may think of the physical environment. For example, you may have heard it’s unsustainable for us to keep relying on fossil fuels for our energy. Why? Because we now understand they will run out at some point, and burning them can harm the environment. These factors cast fossil fuels as a threat to the long-term viability of our civilization. If we left our dependency on them unchecked, the system would eventually collapse.
You can think of sustainability as creating the conditions necessary for a system to meet the needs of its present stakeholders without compromising the needs of its future stakeholders. In the case of the physical environment, our primary goal should be to ensure it can sustain life in the long term. When dealing with an information environment, our goal should be to ensure that it can remain viable and useful in the long term. In order to do this, it must sustain:
Itself; it should be able to generate enough resources to support its continued existence.
Its purpose; it should generate these resources without compromising the reason(s) why it exists.
Its social context; it should achieve its purpose(s) without compromising the societies that host it.
These goals mirror the goals of sustainable development formulated during the 2005 World Summit on Social Development: the economic, social, and ecological “pillars”, or fundamental aspects of the system. Let’s see how they map to our work.
The Economic Pillar
Creating and maintaining an information environment requires resources. This includes labor to design, create, test, and manage software, servers to host it, energy to power them, infrastructure to deal with logistics, and more. The system should be able to generate enough value to produce the resources necessary to ensure its continuing existence. This seems like an obvious statement, perhaps one not even worth mentioning. However, in the past couple of decades we’ve seen many information environments capture our attention without generating enough value to remain viable in the long term.
The Social Pillar
Information environments exist within a broader social construct. In order for them to remain viable in the long-term, society as a whole must remain viable as well. Again, this seems like an obvious thing to say. However, many information environments are based on business models that, while viable from the economic perspective, may be unsustainable from the social perspective. For example, advertising-based business models can be problematic, since advertising drives us towards more consumption and does so by targeting us as members of ever-narrower demographic segments. Given the challenges we face as a society, we should be striving to be more mindful of our consumption and more focused on the things that unite us.
The Ecological Pillar
The third and final pillar is the least obvious, yet no less important: the ecological pillar. The things we design participate in and create communication ecosystems that can either sustain or harm our societies’ long-term prospects. We need to consider the impact our information environments have on these ecosystems.
Media critic and educator Neil Postman pointed out that communication happens in semantic environments that have parallels to physical environments. If you consider the “goal” of the physical environment to be sustaining life, then the goal of the semantic environment is conveying meaning. Both types of environments can become polluted, making them incapable of achieving these objectives. In the case of the semantic environment, pollution happens when the language, rules, and purposes of one particular semantic environment (e.g. science) start to be blurred with those of another (e.g. religion).
For example, after the 2016 U.S. election, there has been much talk about the problem of “fake news” in social networks. What this means is that a particular semantic environment (social media, which we’re using to inform our worldview) is becoming polluted with material from another semantic environment (outright propaganda, or in some cases, satire). This is not new, of course — disinformation has been around for a while. What is new is the pervasiveness of the problem, and the fact that now we move much more fluidly between different semantic environments. This makes it more challenging for us to understand how we’re supposed to interpret what we’re looking at. As the designers of these systems, it behooves us to understand how they can become polluted, and work to ensure that the transmission of meaning can happen as “cleanly” as possible.
Non-renewable Resources
When we discuss sustainability of the physical environment, we often talk about non-renewable resources. These include things that are essential for our survival, like air and water, and some that are key for our current way of life, such as fossil fuels. The essential characteristic of these resources is that they’re limited: once they run out, the system collapses. Because of this, responsible stewardship is essential for the continuing survival of the system.
Information environments also have an essential non-renewable resource, one without which the entire system collapses: the attention of the human beings who will be interacting with the products and services we design. We only spend two-thirds of our (already short!) lives conscious enough to use a smartphone. What are we doing with the precious time of our apps’ users? Are we helping them be more effective parents, co-workers, citizens? Or are we merely giving them a quick dopamine fix so we can show them more ads?
Every day, people are spending more of their time using the apps and websites we create. We should honor this privilege by not squandering their attention.
Towards a Co-creative Design Practice
Let’s summarize. Information is changing the world. Information environments — experienced through digital products and services such as apps — are becoming the contexts in which people are carrying out more and more of their day-to-day activities. In some important ways, these systems are assuming roles that have been served by architecture. As with buildings, information environments affect how we understand ourselves and our societies. Because they’re made of an incredibly malleable material — software — the contexts they create are in constant state of change. This is new for us. As designers, we need to accept responsibility for the long-term viability of these environments and the societies which host them. We’ve examined three perspectives that can help us do this:
The semantic structures that underlie our systems change more slowly than their user interfaces.
The products and services we design don’t stand on their own; they participate in and create broader systems.
These systems should be able to adapt to changes sustainably.
Design, as it’s been traditionally practiced — with its “hero” designers and its emphasis on the form of individual artifacts and achievements over the systems they create — is incompatible with a world that is characterized by rapid change, systemic challenges, and ambiguity. At Futuredraft, we believe designers are being asked to show the way towards a more complete utilization of existing knowledge, which in turn produces the comprehensive and sustainable solutions needed today. This requires we become aware of — and master — our own filters, opinions, and preconceptions, which interfere with the emergence of clear seeing. By doing so, we can move towards a more co-creative practice that integrates the design skills of those who will actually live and work with (and in) these information environments. Only by working together to design new possibilities can we overcome the enormous challenges we currently face. This sentiment was expressed more succinctly (and beautifully) by Christopher Alexander:
Making wholeness heals the maker.
This is my wish for us: that we learn to use our craft to heal ourselves and our world. We are all stakeholders in the design of a more viable future.
Update 2017-01-12: I’ve published a post based on this presentation.
I delivered this presentation at the 2016 IA Summit in Atlanta, Georgia
Presentation Summary:
Digital products and services are new types of places that alter how people understand information. This presentation distills lessons in placemaking from one of the most successful places ever created—Disneyland—to help you design more effective information environments.
When designing a digital product or service, you are engaging in a new type of placemaking: one that alters how people perceive and understand information. As with (building) architects, digital designers seek to create environments that are understandable and usable by human beings, and which can grow and adapt over time to meet their needs and those of their organizations. This presentation will help you create more effective digital products and services by distilling lessons in placemaking from one of the most successful physical environments ever designed: Disneyland (and the subsequent Magic Kingdom-style theme parks around the world). You will learn how to create conceptual frameworks that allow users to make sense of and find their way through your information environment, and how those frameworks can inform a clear structure for your user’s experiences.
Last night Futuredraft hosted a great conversation about video games and user experience design as part of our Designer’s Studio series. The speakers were Adaptive Path’s Jesse James Garrett, and Bungie’s Patrick O’Kelley, executive producer of Destiny, a major first-person console game. I was ostensibly moderating the discussion, but really I was just marveling as these two smart guys geeked out on games.
The entire conversation was lively and inspiring, but one thought that has stayed with me is that first-person games, which aim to present rich simulated worlds, are effective entertainment in part because of the psychological distance afforded by the fact that the simulation is taking place on a screen, with indirect input devices. As realistic as the sensory signals may be (and Destiny is amazingly realistic), the experience is still framed by the “real” world. Your psyche can engage in (and enjoy) the game because at a deep level it knows that the experience isn’t real; it’s happening “out there”, within the clear boundaries of the screen and the controllers.
Bringing such an experience closer to the psyche by removing that distance (for example, using seamless VR, where the psyche is in the simulation) could be more disturbing than entertaining. For example, think of the action of quickly switching the camera from first-person perspective to the third-person “behind the character” view, as often happens in these games when you board a vehicle. While this seems like an acceptable transition on-screen, I wonder what it would feel like to unexpectedly jump out of “me” after the simulation has convinced me that “I” am there.
The history of digital user interfaces is a path from abstraction (and therefore detachment) towards a narrowing of the distance between the user, the information environment, and the “real” world: first we were flipping binary bits with switches, then entering characters in text-based terminals, then pointing-and-clicking in metaphor-heavy GUIs, then manipulating information by touching it directly on glass surfaces. It’s a progression from indirect interaction with abstractions towards direct interaction with the actual information being manipulated. VR-based experiences could be the next milestone in this trajectory, and for the most part this is unexplored territory vis-a-vis its impact on our consciousness.
Given simulated experiences that are close to seamless and completely engrossing – and therefore, potentially deeply terrifying – could users suffer mental harm? If so, will these experiences be regulated? What are the ethical implications of convincingly replacing the user’s reality, albeit temporarily?
Like yours, my life has been changed by the smartphone. The iPhone in my pocket is an incredible device that lets me take amazing pictures, send and receive emails, access the web, become oriented when trying to navigate unknown environs, and so much more. It’s the perfect mobile communications complement to my larger (notebook) computers, which serve a whole range of other needs. However, as amazing as all of these digital devices are, there is a huge aspect of my workflow that has remained mostly analog over the years: sketching. I’ve been looking for a long time for an efficient way for my sketching to leverage the benefits of being digital – a “smart sketchbook”, if you will – and now I’m ready to share a solution that works for me.
Sketching and the shortcomings of paper
As a visually-oriented person, sketching is how I take notes, formulate ideas, explore possibilities, avoid dead ends, and – most importantly – give shape to the amorphous stuff that my subconscious mind has been working on while I’m sleeping, showering, walking in the park, or otherwise goofing around. It’s also a very efficient way of capturing ideas in interviews, meetings, and other situations in which a laptop sets up a physical barrier between me and the person(s) I’m communicating with. In short, sketching is the most effective (and socially acceptable) channel I’ve found for talking with myself. I’ve been doing it informally since I was about eight years old, and formally since attending architecture school over twenty years ago. At this point in my life, it’s fundamental to how I think and work, and I do it mostly on paper. (For a good overview of the importance of sketching in UX design, see Bill Buxton’s Sketching User Experiences.)
As you may surmise, I love sketching. However, there is a downside to sketching on paper when doing UX work: at some point the drawings and notes must make the leap to digital, and with paper this is very inconvenient. For example, now that I’m working remotely, I want to be able to communicate and iterate on ideas with my team. In the office, we would do this by sketching together in person. Now we must find another way. I’ve tried various approaches:
Scanning pages with a flatbed scanner. (Kludgy, time-consuming, and who has access to a flatbed scanner in a coffee shop?)
Scanning pages with a smartphone. (Faster, and more convenient, but keeping pages flat for scanning can be a challenge. On iOS, I use and recommend Readdle’s Scanner Pro.)
Transcribing and refining sketches using an app like OmniGraffle. (Time-consuming, and loses some of the spontaneity and ambiguity that sketches have and which can lead to good things. This will be the subject of a future post.)
So there are limitations when making the leap from analog to digital, but it’s doable. However, a more serious limitation is paper’s inability to make the leap in the other direction: from digital to sketchbook. For example, there are many times when I’m doing research that I wish I could include a crop of what I was looking at on my screen into my sketchbook, so that I could annotate it or compare it with other specimens. I’ve also wanted to include photographs or videos of stuff in the real world, or copy text blocks from emails or other digital documents, into my sketchbook. And of course, it’s not possible to access my old sketches if I don’t have the physical notebook with me, nor is it possible for me to do a text search on my handwritten notes. None of these use cases are well served by pen-and-paper, and I’ve started to find these limitations increasingly constraining.
I’ve been looking for a long time for technology that would allow me to bridge this digital-analog divide. Now that I have a phone that is smart, I want a sketchbook that is smart too.
My previous setup
Before I describe what I want a smart sketchbook to do, I’ll give you a peek into the system it’s meant to replace. I’ve always (since childhood!) preferred to draw with stark fine black pens on smooth off-white stock. Recently, I’ve been using Pilot Precise V5 pens on Leuchtturm medium-sized notebooks (which I’ve found to be more durable than the Moleskine equivalents, and can be had with a subtle dotted grid which I love). I always start a new page when sitting down to think about a particular project or idea. I always write the name of the project/idea/topic on the upper left corner of the page, and the current date on the upper right corner. (So notes are organized chronologically, rather than by topic or project.) When a notebook fills up, I always write the start date and the end date on the spine with a metallic Sharpie pen. I have a shelf full of these notebooks stacked in chronological order. It’s a fairly well organized system, but highly dependent on chronology, and because it’s paper-based, can’t be easily re-sorted.
What I want from a smart sketchbook
A smart sketchbook would be to a sketchbook what a smart phone is to a phone: it should provide the basics (sketching, taking down notes) while augmenting them with the ability to obviate the digital-analog divide outlined above. It should allow me to capture ideas with the fluidity, precision, and freedom afforded by paper, but directly into digital so that I can enjoy all the benefits and flexibility afforded by the digital medium: fast random access to my work, treating digital objects as part of the subject matter and canvas of my doodling, easily sharing and/or collaborating on ideas, etc.
Specifically, these are the things I want from a smart sketchbook:
Drawing on the sketchbook should feel like using pen on paper.
The sketchbook should have a canvas that can be arbitrarily subdivided into notebooks or categories.
It should allow me to arbitrarily organize notes by other facets besides chronology. (And wouldn’t it be awesome if I could search my handwritten notes?)
It should have a modern web browser.
It should allow me to crop elements from said web browser and paste them into the canvas.
It should have a camera so that I can include quick snapshots into my sketches and notes.
It should allow me to easily share notebooks or pages with others and with myself using standard file formats (like PDF).
It should allow me access the other project documents (which I keep in Dropbox).
It should have a decent PDF reader.
It should have a decent image management app.
It should provide mobile internet access.
It should have a portable form factor, as close as possible (in size and weight) to the third-gen iPad (my other tablet device).
It should have an all-day battery, a la iPad.
Bonus points:
It should allow me to share the drawing process in real-time. (Double-bonus points: allow me to do so collaboratively over the Internet!)
It should serve as an agenda on a pinch; this means it should include a decent calendar app and allow me to access my task lists (which I manage in OmniFocus and Asana) and contacts.
It should read (and ideally, produce) standard file formats such as XLSX and DOCX.
It should be able to run a good plain text editor (ideally one that understands Markdown).
It should be able to ride au naturel in my day pack like my paper sketchbook does… durability is important!
It should be able to serve as an e-book reader. In my case, this means a decent implementation of Kindle.app and a decent ePub reader.
Some approaches I tried (and gave up on)
Like I said, I’ve been trying to build the perfect smart sketchbook for years, and at this point have spent thousands of dollars and countless hours with various setups. Here are some I’ve tried, and why they didn’t do the job:
iPad & stylus. You may be thinking, “this sounds like a job the iPad could do”. So did I, and embarked on a quixotic (and expensive) multi-year quest for the elusive Perfect Stylus. At this point I’ve tried over a dozen different styluses (or is it styli?), and feel confident in telling you that as long as the iPad relies solely on capacitive touch for input, it will be impossible for me to sketch on its screen with the precision and fluidity I’m after. Drawing on the iPad with a stylus is akin to drawing on a very small whiteboard with a dry-erase marker. It has its uses, but the experience is very far from pen-on-paper.
Paper sketchbook & Scanner Pro on iOS. As I mentioned above, Scanner Pro is my preferred scanning app on iOS. It allows me to take a snapshot with the iPhone’s (or iPad’s) camera and then correct the image for perspective distortions and contrast adjustments. Used in combination with an iPad, it satisfies many of the points I outlined in my list. However, there is still the issue of not being able to include digital objects in the sketches themselves. This method also turns the sketching exercise into a phased affair: first you work on paper, then you stop to take pictures (an awkward, slow process if you’re a prolific sketcher), then you process and organize them. This takes a LOT of time. There’s also the problem that now you have a “master” document (the paper version) and a secondary captured version; you need to be very disciplined about capture, lest important things get left out of your digital repository. It’s too much hassle; I would much rather have to manage a single system than two.
Notecards with Fujitsu ScanSnap scanner. I’m one of those insufferable nerds that swears by his Fujitsu ScanSnap scanner. The advantage of using a ScanSnap is that it can automatically scan dozens of double-sided loose leaf sets of documents on one go, so scanning is much faster than with a flatbed scanner or a scanning app like the one outlined above. The downside is that the ScanSnaps can only take loose leafs, so for a while I tried foregoing a notebook in favor of individual notecards which I would then feed into the scanner. Like the previous attempt, this is a phased process, which I find inconvenient. This system became very messy very quickly, so I didn’t stick with it very long. (I still use the ScanSnap for most of my other scanning needs. It’s an essential piece of kit.)
Galaxy Note devices & LectureNotes. Most of this year I used a Galaxy Note II as my primary smartphone, with a terrific note-taking app called LectureNotes. This system was the closest I’d come to achieving the elusive smart sketchbook: the Note has a Wacom digitizer and stylus, and so offers a much more pen-like experience than the iPad. The only real complaint I had was that the screen wasn’t big enough to do the type of sketching that I do. Samsung has since released the Galaxy Note 8, which features a much larger screen (akin to a medium Moleskine). My partner in the office bought one, and it seemed a great solution, but I thought there was too little difference between it and my phone to justify carrying both of them. Then my Note’s screen broke, and Samsung’s tech support was so bad that it turned me off their products. That said, the Galaxy Note 8 is the closest solution I’d seen, until… [Drumroll]
The Lenovo Thinkpad Tablet 2 and OneNote
This is it folks, I think I finally found the smart sketchbook I’ve been looking for: the Lenovo Thinkpad Tablet 2. The TPT2, as I’ll be referring to it throughout the remainder of this article, is a small (iPad-sized) Windows 8 slate computer which offers most of the features I’m looking for in a smart sketchbook:
Size and weight similar to (actually lighter than) my iPad 3.
Pressure-sensitive Wacom digitizer and stylus.
A full, modern, desktop web browser (and the ability to install many others).
Two cameras. (Front- and rear-facing.)
OneNote, the best note-taking app I’ve ever used. More on this below.
Because this is a full Windows 8 computer (and not a neutered RT device), there are lots of apps available for it, including the real filesystem-syncing Dropbox app. (Unlike iOS, with Windows you have access to the device’s filesystem.) You can run Microsoft Office on it, and while MS Office isn’t touch-optimized, you can pair the TPT2 with a Bluetooth keyboard and mouse to create a highly portable mini-desktop. I’ve been using Microsoft’s Wedge keyboard and mouse, both very well-designed products that complement the TPT2 beautifully:
Unlike the Microsoft Surface, the TPT2 (at least the model I have) also has an LTE radio, so I can go work in the beautiful City Park if I feel like it. And also unlike the Surface, the battery on the TPT2 lasts about as long as an iPad’s (around eight and a half hours, in my experience). It’s also worth noting that the SIM-enabled 64 GB TPT2 costs less than the comparable iPad model, and has a microSD slot which has allowed me to expand storage by an additional 64 GB.
The TPT2 is a pretty cool smart sketchbook out of the box, but I’ve added two other accessories that have taken my sketching experience to a whole different level. The first is a matte film made by 3M that you stick on the TPT2’s glossy screen. This has two important effects: 1) it reduces reflections considerably, making the surface of the screen reflect light more like paper does, and 2) it adds tooth to the surface of the screen, so that when you slide the stylus across it feels like you’re writing on paper and not on glass. The other item is Wacom’s Bamboo feel pen, a metallic stylus that feels more like a real pen than the chintzy plastic one that comes with the TPT2. The combination is surprisingly similar to pen-on-paper.
And then there is OneNote, a fabulous note-taking application made by Microsoft and available as part of the Office suite. This app allows you to combine text, images, and “ink” into pages that can be arranged arbitrarily into notebooks that can be categorized in any way you can think of. OneNote integrates with the other office apps, and notebooks can be shared with other people for collaboration. The lot synchronizes over the air using Microsoft’s SkyDrive service (which in my experience is more reliable than iCloud for this sort of task), and can be accessed online using any modern web browser in (almost) real time. And that wistful little side point about being able to search your handwritten notes? Yes, OneNote does that too. The whole feature set is extraordinary: I’m still learning new things after many months of using it.
OneNote comes in two versions: the “desktop” version (currently OneNote 2013) and the “modern” version. The latter is free and is a bit slower and less functional than the desktop version, but has a really cool advantage: it can be used in Windows 8’s split screen mode to take notes alongside other apps. For example, I use this feature to take rich marginal notes when reading books on the Kindle app:
This is much more convenient than having to switch back and forth between apps, as would be the case in an iPad. Data in both the desktop and modern versions of the app is kept in sync using SkyDrive, so you can switch between them depending on your needs. (I learned of OneNote’s potential for UX sketching in a series of articles in the Cooper website; I urge you to explore them if you’re into this topic.)
So what’s not to like? Well, there are a few downsides to the TPT2. The first is that it achieves its magical price-weight-size-battery life combo by using a skimpy Atom processor like the ones used in netbooks. This means it’s not a fast device; for sketching it’s fine, but large animated transitions (like the ones in Flipboard) stutter. Another shortcoming is that the TPT2 has a relatively low-resolution screen; reading text on a high-density screen like the one on the iPad 3 is much more comfortable and paper-like. Another downside is that the TPT2 sometimes has a hard time keeping up when there are two Bluetooth input devices in use (for example, when using the mouse and keyboard, the latter sometimes lags, stutters, and repeats keystrokes). Also, even though you can charge the TPT2’s battery using any USB charger, it charges VERY slowly (sometimes even leaving it overnight is not enough). And of course, I don’t have access to Apple-only apps like OmniGraffle and OmniFocus.
The main downside, however, is that this is a Windows device. After more than a decade of primarily using OS X-based machines, I’ve gotten used to the wonders of no-hassle, low-maintenance personal computing. Even with its elegant modern UI, Windows 8 is still Windows: I still have to worry about device driver incompatibilities, I still have to dig into the registry sometimes, and I still have to occasionally put up with the dreaded Blue Screen of Death:
I waited a while to upgrade after Windows 8.1 came out, and there were still driver snafus and little technical niggles to deal with when I did. These types of inconveniences are rare in Appleland; I wish my Windows sketchbook were as reliable and trouble-free as my Apple devices. If you decide to tread into these waters, be prepared to set aside time for hunting down and fixing tech issues with the OS.
Are the inconveniences worth it? Thus far, the answer for me is yes. Apart from finally getting close to achieving the smart sketchbook I’ve wanted all these years, it’s also given me the opportunity to explore Windows 8’s modern UI, which I find more elegant, intuitive, and coherent than iOS 7. Mind you, I’m setting the bar rather low: I’m not trying to replace my laptop with this device; it’s meant to replace my paper sketchbook. It does so wonderfully, and it does a lot more besides. But there is one device that it has mostly supplanted in my toolbox: the iPad, which still offers a much better reading experience but which I can’t use for sketching or some important productivity tasks.
Even while it’s somewhat slow and hampered by a fussy OS, the TPT2 + OneNote combo is the closest I’ve found to the perfect smart sketchbook. There are rumors of a faster and higher-res Thinkpad Tablet 3 in the pipeline for next year, so I will be paying close attention to developments in this area. For the time being, I’m actively exploring new ways in which this new, more organic, way of working digitally can make me a more productive UX designer.
I delivered this presentation at the first Experience Design Summit in San José, Costa Rica, in September 2013.
Presentation summary:
We can’t talk about design without in the 21st Century without talking about information. The majority of products and services that we interact with are part of information environments that teach, entertain, guide, and influence us. This presentation examines the importance of context in the way that users understand and navigate information, and what we can do to create more successful information-based solutions.
UX Total is the first Spanish-language podcast focused on user experience design and related topics. Iván Alarcón, the creator of the podcast, invited me to be the second guest in the show. The resulting interview is primarily about information architecture, but we also delved into topics that are near to my heart, such as the impact of information technologies on the urban fabric.
People often ask me: “How does an architect get into designing websites?” I tell them that when I was studying, there were few academic disciplines as relevant to web design as architecture. The reason for this is that successful architectural design balances a series of forces that pull a project in different directions:
