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.
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.
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.
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!)
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).
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:
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.
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.
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.)
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.
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 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.
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.
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.
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.
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.
When I think of theming in the context of UX, two main areas of focus come to mind:
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.
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 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.
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.
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.
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?
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.
VUCA is when our appliances start attacking us.
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.
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.
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.
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.
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.
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.)
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.
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.
The world is a little scary right now. In many places, the old ways of being are going away. Many people are having a hard time understanding where they fit in, and they’re reacting by making choices that go against their best interests. You’re not aware of this because mama and I are trying to not worry you, but it’s happening.
A few days ago, the United Kingdom voted to leave the European Union. This is a big change in the world, and it was triggered in no small part by fear, ignorance, and cynicism. In the United States, a dangerously unfit man is running for president by stoking the basest impulses in people, and finding support among many. And he’s not the only one: so-called leaders are once again gaining a foothold in many countries by fanning hatred and fear.
I say “once again” because this has happened before. Almost eighty years ago, the world plunged into a terrible war under similar circumstances. More than 60 million people died, and many more were left without families or homes. I hope you don’t experience anything that awful in your lifetimes. But it could happen, so I want to do everything I can to make the world safe for you.
You’re too young to understand, so I’m addressing this essay to your future selves. I’m publishing it as an open letter because I think other people could benefit from it too.
As you grow older, you’ll find that people will try to sort you into groups. They’ll tell you that your choices in politics are between the “left” and the “right”. In the U.S., these roughly map to “conservative” and “progressive” camps; in other countries, the words used are “liberal” and “socialist”. (You’ll find that most societies put their own spin on the idea that there are ideological camps with different political aims.) People will also insist that you define yourself as a Christian, a Muslim, a Jew, a Buddhist, or one of many other established religions.
These groups will often be presented to you as being opposed to each other. You’ll be told that much of the conflict in the world stems from differences between them. But these divisions are misleading. If you dig a little, you’ll find that people in the different camps have more in common with each other than they believe. In most cases, their goal is the same: they want a better world for themselves and their kids, just like I do for you.
But that doesn’t mean there aren’t any differences between people. In fact, there is an important difference you need to be aware of, one between people with fundamentally different worldviews. You can think of them as molders and dancers.
Molders are people who believe that a mold exists that can produce a perfect society. They believe that the solutions to our problems have already been addressed, whether by a sacred book, a political document, a party line, a strongman’s line of patter (it seems to always be a man), or some other authoritative source. If a society isn’t working well, molders will tell you that it’s because it doesn’t yet look enough like their mold. (Conversely, they’ll say that any society that doesn’t yet look like their mold isn’t working well.) All we must do for things to be alright is implement their system, perfectly. In any group, you can easily tell who the molders are: they’re the ones who are unwilling to compromise. You’ll find them on the left and the right and across the religious spectrum.
Dancers, on the other hand, are people who understand that both the world and our ways of living in it are always changing, always open to re-configuration. Dancers look for solutions to problems not within a fixed ideology, but by choosing from among the many ideas in the world and re-combining them into new, dynamic systems. They seek to understand their current situation as clearly and completely as possible, and then try things out. They quickly discard what doesn’t work, and keep what does. They’re always re-evaluating, always moving. They don’t consider anything to be beyond questioning, and are open to working things out. You will also find them on the left and the right and across the religious spectrum.
In your lifetimes, you’ll probably encounter challenges that we’re currently unprepared for. For example, changes in the Earth’s climate could leave many people without a home. Vital resources we take for granted — like water — could become scarce. Politics could become even more divisive as more jobs are replaced by technology. All of these things could lead to conflict. You and your peers will be called on to explore lots of new solutions, fast.
It’s always tempting to believe that there are easy answers to complex problems. Because of this, the molders will sound very convincing. (They’re always so sure of themselves!) But molders are ill-equipped to deal with complex problems, because molding seeks to constrain solution spaces to fit within the boundaries of ideology. By definition, molding excludes possibilities.
Your world will be in need of more and better solutions, not solutions formulated in (and for) small pre-defined worlds, most of which are long gone. Your world needs dancers.
In order to be effective, dancers must cultivate clear understanding. Clear understanding means learning to see and hear and think and feel for yourself. It means training your mind, and giving yourself permission to change it. It means knowing that you don’t have all the answers. It means educating yourself on the issues, and questioning what you hear. Why are people saying the things they’re saying? Could they be wrong? Could they have ulterior motives? Is there another way to look at a particular issue?
It also means being brave, because being a dancer can be scary. For one thing, you’ll have to create the dance while you’re dancing it — and often do it in public. For another, dancing can sometimes be a very serious matter. Life-or-death, even.
But you must also be brave because molders will do everything they can to “scare you straight”. They will tell you that you will burn in hell. Or that political change requires violent revolution. Or that people with different colored skins are coming for your jobs. Or that people who use the “wrong” bathroom will pervert your children. In extreme cases, they will even resort to murder. They will do and say these awful things because deep down they know that their worldview is a hard sell, and that people who are afraid, confused, and divided are easier to mold.
At this point, you may be wondering, “Who made the molds?” The answer may surprise you: many of the molds were made by people who loved dancers. Some of them may even have been dancers themselves. Entranced by the beauty and joy of the dance, they wanted to replicate it for others. So they tried to turn it a into fixed thing… To turn it into a mold.
But molding is the opposite of dancing. Molds are static and unchangeable. Dances are spontaneous and evolving. It’s impossible to mold a dance.
It’s very important that you understand the difference between molders and dancers. But it’s also important for you to know that few people are extreme in their views. Even the staunchest molder must negotiate with reality at some point. So if you decide to dance (and I hope you do), it’s important that you don’t hate the molders — no matter how despicably they behave.
Molding and dancing are not integral characteristics of people. They are ways of understanding and acting. Most molders are not evil, crazy, or stupid. Often, they’re just scared. Scared of losing their jobs. Scared of their neighbors. Scared of the government. Scared of wealth. Scared of people who refuse to be molded. Scared of going to hell. Scared that people will take their things. Scared of uncertainty. Scared of change. Scared of the world they live in, because it doesn’t — because it can’t — conform to their molds.
Hating them only reinforces their perception of you as “other” — as the enemy. That doesn’t help you, and it makes their situation worse. Hatred divides people. As a dancer, you want other people to dance with you.
Instead of hating the molders, try to understand them. Why are they scared? Is there something you can do to alleviate their suffering? Is there a way for you to bring them into the dance?
And if you do find a way to bring them in, dance! Dance gracefully, powerfully, and bravely.
In 2013 I published a blog post to explain my digital sketching and note-taking setup. Much has changed since then, so it’s time for an update.
If you want to dig deeper into this topic, you should check out that original post. But I in case you’re strapped for time, this is where it left off: I was then using a Lenovo ThinkPad Tablet 2 running OneNote (“modern” version) under Windows 8.1. That device/software combination served me very well. (So much so that I eventually upgraded to that machine’s successor, the ThinkPad 10.) However, over the past couple of years a few things have happened that have caused me to revise this setup. I’m still using OneNote, but have left Windows behind in favor of iOS. Somewhat surprisingly, I’ve also gone back to doing more sketching and note-taking with (physical) paper and pencil.
This post explains my reasoning for these changes. But first, this is what my current smart sketchbook looks like:
Procreate for more considered (or elaborate) drawing
(There are many other apps I use day-to-day, but want to keep this list succinct. These are the main ones.)
Why the change?
Although I’m a tinkerer by nature, age has beaten me into adopting the “if it ain’t broke don’t fix it” philosophy. Every minute I spend messing around with tools is a minute I’m not working on content or learning, and I’m increasingly trying to optimize for production and growth.
So the natural question to ask is: if the previous setup was working, why change at all? Well, there are a few reasons…
The Windows 10 version of OneNote is a not as good for pen users
The Windows 8 (“modern”) version of OneNote is a delightful app. Among other things, it features a fabulous radial menu that accepts flick pen gestures. This makes it incredibly fast to undo mistakes, switch pens, and control the application in general. In addition, the app’s user interface gets out of the way so most of the screen is available for drawing and writing. OneNote for Windows 8 seems to have been designed primarily for touch/pen users, and it does a great job. It’s (still!) my favorite note-taking app.
Alas, OneNote for Windows 10 has now superseded it, and this new version of the app follows what seems to be Windows 10’s primary direction: to appease the millions of Windows desktop users who were turned off by Windows 8’s “touch-first” approach. Unfortunately it achieves this mainly by sacrificing touch/pen-first features and UI elements. As you may have already guessed, my beloved radial menu did not make the cut. (Along with many other useful features, some of which are being added back… slowly.)
So the version of OneNote I love has no future, and the new version is not as good—at least for my needs. I’m hopeful that eventually OneNote will regain some of the features it had during its Windows 8 peak, but in the mean time…
Apple released a great stylus for iOS
Most of my work happens with Apple devices, and I’d rather not have to deal with a different ecosystem. (Remember: no tinkering!) I’ve been using an iPad since the first one came out, and I’ve tried many (many!) different styluses and note-taking apps on it. The primary reason I bought a Windows tablet to begin with is that there were no good styluses for iOS… until now.
With the Pencil/iPad Pro combo, the iPad finally has a stylus that can compete with Windows tablets for precision. Actually, the Pencil is much more precise than anything I’ve tried in Windows. My Lenovo tablets (which have Wacom digitizers) require constant re-calibration, and even then they are never that precise. iOS doesn’t have a stylus calibration tool — it doesn’t need one. The Apple Pencil is always spot on; I mostly forget that I’m using a computer when drawing with it.
That’s not to say the Pencil is perfect. For one thing, its battery could last longer. For another, Windows styluses have buttons — one or two on the barrel, and sometimes one in the “eraser” end of the stick — which are very handy, and which the Pencil lacks. Are these deal breakers? Not for me.
iOS has gotten much better
In the (almost) three years since my original post, iOS has matured into a more useful and robust operating system. Many of the features that made Windows 8/8.1 great for touch-first users now have counterparts in iOS. (And ironically, Windows 10 has rolled back many of these features as it attempts to entice back its primarily desktop-based audience.)
For example, iOS 9 introduced split-view multitasking. This feature, which works almost identically to its Windows counterpart, allows me to simultaneously run two apps side-by-side so I can take notes about something I’m reading in iBooks or Safari without having to do a distracting app switch.
Another new iOS feature is sharing extensions, which allows me to send whatever I’m working with in one app directly to another. For example, I can very easily post a drawing I’m working on in Paper directly to a channel in Slack. Windows 8 had a similar feature in the share charm, but app support was not great. iOS does it more seamlessly, reliably, and universally. (In general, I find that apps in the iOS App Store have much higher quality and consistency than those in the Windows Store.)
The iOS version of OneNote is very good
And on that note, one of the iOS apps that does inter-app sharing best is OneNote itself. Under Satya Nadella’s leadership, Microsoft has (mostly) abandoned its former strategy of withholding applications and features from competing operating systems. Excellent iOS versions of the major Office apps are one of the fruits of this shift.
OneNote in particular is now an first-class citizen of Apple’s ecosystem. For example, the app fully supports share extensions, which allows me to quickly import drawings, photos, and other elements directly from many other apps. On the iPhone 6s, OneNote support 3D touch, allows for quick note creation without having to open the app. Microsoft has even released an (actually useful!) Apple Watch version of OneNote that allows me to consult the most recent notes and dictate new ones when I’m not near my phone or tablet.
As you would expect, writing and drawing with the Pencil is very good. As with Windows versions of the app, handwritten text is OCRed and indexed for later search-based retrieval (even within notebooks that aren’t locally available in your device!), and inked elements are treated as objects that can be selected, copied/pasted, scaled, etc. I can use the tablet’s camera and mic to insert photos and audio into my notes in real time. In short, the main features that attracted me to note-taking in Windows are now available in iOS.
That said, there are a couple of downsides. OneNote for iOS’s user interface is very similar to the one in the Windows 10 version: there’s no radial menu, and there’s a lot of application chrome on the screen relative to the space available for note-taking. Most annoyingly, inking is a mode that you must explicitly enter by tapping a button inside a traditional tabbed menu, instead of being automatically activated when the Pencil touches the screen.
As I mentioned earlier, the Windows 8.1 version of OneNote remains my favorite note-taking app. Its user interface is unparalleled for speed of pen-based interaction. That said, the iOS version of the app is now good enough, and having access to all of the other applications in the iOS ecosystem more than makes up for its shortcomings.
So that’s what I’m using now for digital note-taking and sketching. But as I mentioned earlier, I’m also doing a lot more sketching and writing on paper as well. The reason?
There is now a great app for digitizing paper-based notes
After all this time using digital sketching tools, I’ve started using more paper in my daily workflow. The main reason for this is another great Microsoft iOS app: Office Lens. You can think of it as a camera app with special super powers that make it ideal for capturing physical notes:
It corrects for perspective distortions by automatically detecting the edges of rectangles (such as sheets of paper, stickies, and whiteboards)
It can automatically increase contrast in images to make content more legible
It can save directly to OneNote (among other destinations)
It can take multiple shots in a grouped sequence so that you can import separate pages into a single OneNote note (or to export as a PDF)
It can OCR text in images so you can search for it later
“But,” you may protest, “your previous recommendation (Readdle’s Scanner Pro) does all of these things!” Yes it does, but Office Lens has an additional trick that makes it stand out:
It can OCR your handwriting in images
This is a big deal, since it makes it possible for the notes I write in my Moleskine or in stickies to be indexed and searchable within OneNote. Living in the future!
Thanks to Office Lens, I now have a hybrid approach to note-taking: Sometimes I’m fully digital, writing and sketching directly on the iPad, but at other times I’m free to draw on loose leaf paper using Sharpies, or in my Moleskine, or on an index card. I always photograph these into my OneNote “inbox” using Office Lens, and afterwards sort them into the appropriate notebooks. The result is that I get the best of both worlds: the ubiquity, findability, and power of digital, with the flexibility and control of analog.
I’ve also become much less precious about my physical sketching: I’m no longer obsessing about the right type of paper and pen I’m using. It will all end up as bits in my note repository in the cloud anyways.
So there you have it, my updated smart sketchbook setup: Windows out, iOS in; OneNote still here, with some other apps providing specialized support. In some ways, it’s a return to the past—I’m using up more trees!—but in general I feel like my current setup is more powerful and flexible than it was before. I now have the best of both worlds always at my disposal.
I expect my system can and will continue to evolve incrementally. But barring completely unforeseen circumstances, I can’t imagine radically changing it at this point. If I do, I will publish another followup post.
This year, World IA Day was celebrated in 57 locations around the world. That’s a lot of people gathering to learn and talk about information architecture! This article, which is based on the keynote presentation I gave at WIAD San Francisco, is inspired by the thought of all these folks — mostly designers — coming together around this year’s theme: “Information Everywhere, Architects Everywhere”.
I think most of us who design digital products and services have a pretty good grasp of what we mean by “information”. Information is our raw material; we are immersed in it every day. However, I suspect “architecture” is more elusive. In what sense is what we do architecture?
Earlier in my career, I used to think that architecture was a useful metaphor for the work I was doing. I would tell clients that “I’d do for their websites what architects do for their buildings” or that “site maps are to websites what plans are to buildings”. However, I’ve come to realize that architecture is more than a metaphor in what I do. In this article, I hope to persuade you that the apps and websites we design are architecture in a very real sense, and to make you more aware of your role in the creation of architectures made of information.
Architecture is important to us as a species. In his book Fit: An Architect’s Manifesto, architect and educator Robert Geddes offers two reasons why we can’t live without architecture. They are:
First, as human animals, we must protect our bodies from hostile environments, so that we can live as individuals.
Second, as social animals, we must create protected places in our environment so that we can live together as groups.
Obviously the digital products and services we design can’t satisfy the first condition, but think about the second one. Increasingly, many of the interactive products and services we design fulfill the second role.
Eighty years ago, if you wanted to influence the way that office workers went about their duties, you needed to tweak the physical environment within which they carried out those duties. For example, the “Great Workroom” of Frank Lloyd Wright’s Johnson Wax Headquarters—one of the first open-plan office spaces—was created, in the words of architecture critic Paul Goldberger, “to give the company’s clerical workers a sense of community and nobility”.
Today, if we want to talk about creating a sense of community at work, we have to think about how we organize our information environments. For example, in Futuredraft much of our work happens in Slack; we have one collaborator who has never stepped in our physical space. Arguably, the way we’ve structured our Slack channels has as important an impact in the way we go about our duties than our physical office does.
Increasingly apps and websites such as Slack are taking over many of the roles that used to be served by physical places. Besides work, we use them to learn, shop, bank, organize, gossip, and more. These information environments set the contexts for many of our day-to-day activities. So in a very real way, the stuff we make satisfies Geddes’s second condition: They create protected places so that we can live together as groups.
In this article we will look at three ways in which we are creating architecture when we design information environments. The three are different but tightly related. But before we dive into the subject, a disclaimer: One of the occupational hazards for information architects is that we tend to obsess about labels, and one of the labels we obsess about is job titles. I don’t think this is a productive discussion. So it doesn’t matter how you describe what you do: interaction designer, product manager, visual designer, developer, researcher, or what have you. If you are doing any type of design for information environments such as websites or apps, you need to know about information architecture. In this article I will not be using “architect” as a noun — something you are — but as a verb — something you do. As a reminder that we’re talking about doing, not being, I will talk about “architecting” instead of “architect”.
With that out of the way, let’s explore the three ways in which we architect.
Architecting as Structuring
The first sense in which we architect when we design an information environment is when we are structuring it. What do we mean by structuring? Again, I’ll quote professor Geddes:
Architecture as “structure” has two meanings: one involves the materials and methods in its construction; the other involves the arrangement of parts in its organization.
It is the latter that we are mainly concerned with here. When “building” architects start working on a design, one of the first things they do is break the problem up into its program: the list of needs that the building must serve. They then analyze possible solutions by means of sketches such as bubble diagrams, which explore possible relationships between the spaces that will satisfy those needs.
You may do something similar in your on work, perhaps using sticky notes instead of bubbles. Whether you’re designing an app or a building, you want to 1) figure out what people will be doing there, 2) how you will enable them to do it, and 3) how they will move around in the environment as they go about doing it. These rough sketches help you explore different ways of structuring the environment to accomplish these things.
Information architecture is deeply rooted in structuring. My first experience with seeing the phrase “information architect” in print was with Richard Saul Wurman’s 1996 book Information Architects. Given the novelty of the phrase at the time, this book lays outs three definitions of the term in its cover. The second of these definitions gives structure a central role:
a person who creates the structure or map of information which allows others to find their personal paths to knowledge.
This concern for structure is very obvious in Wurman’s work. For example, in his design for the Tokyo subway system map you can see a very clear structure being employed to make a potentially complex diagram legible and memorable.
The polar bear book — one of the foundational texts in the “IA for UX” discipline — also features structure as a central concept in information architecture. For example, starting with the first edition, discussions of “narrow and deep” versus “broad and shallow” structures have been a key part of the “IA for the WWW” narrative.
As a result of this focus, UX designers have long associated information architecture with structure, to the point where many believe that structuring experiences is the sole remit of IA. But while structure is definitely central to the practice of information architecture, there is more to architecting than just structuring. We’ll see how a bit later, but for now let’s try to nail down what we mean by structure.
It’s been said that the human brain is a pattern recognition machine. Evolutionary forces have honed our senses so that they are highly attuned to rhythms and variations in our surroundings. Environments that are predictable and ordered are more easily understood than those that are chaotic or in constant flux. Structural and ordering principles allow us to use this pattern-recognition feature of the human mind to our advantage when organizing information environments.
Architects have been employing structure and order for centuries to help us make sense of our physical environments. For example, examine the façade of a public building such as this one:
The first thing you’ll notice is that this building is not a homogeneous blob: It is made up of various components such as columns, windows, and slabs which are different from each other. The edges between these elements are clear, and this differentiation allows us to identify patterns in the form of the building. There is also a clear sense of granularity to how these different components are put together: the colored panels are contained in the sun shades which are contained within the wall units which are contained in the facade. The skin of the building has been shaped in such a way that the columns create a sense of rhythm. Where this rhythm is broken, you get a sense that something important is happening, which is appropriate since that is where you enter the building. We call this hierarchy. All of these elements and ordering principles come together in an environment that serves our basic physical needs, and communicates to our senses the affordances and constraints defined by the building’s design.
Now take an information environment like Twitter. It, too, is made up of components that are different from each other and which are nested at different levels of granularity. Individual tweets are contained in a timeline, which is a list of tweets. There are various such lists in the system, and their names hint at the information they contain: the “home” list, the “notifications” list, the “messages” list, and so on. Like the building’s facade, these streams of Tweets have a rhythm, following a very particular form that has evolved over the years (a user avatar, a user name, a user handle, a time stamp, the text of the tweet, any associated media files, etc.) Twitter’s main navigation bar, on the other hand, has a very different structure and rhythm. (It is not an accident that the labels in this navigation element consist of a single word; it would be very strange if one of them was as long as a 140-character tweet, for example.)
The relationship between Twitter’s navigation bar and the tweet stream varies between different platforms. On the Twitter website, the main navigation bar is located at the upper left of the window, above the tweet stream, where most website navigation bars reside. However, in the iOS Twitter app, the navigation bar is below the tweet stream. This is a standard location for navigation bars in iOS apps: within reach of the user’s thumbs. This variation between platforms is an example of opting for coherence over consistency. In the placement of these elements, Twitter’s designers demonstrate a clear understanding of the hierarchical relationship between these components in the information environment in the abstract, and an understanding that different platforms express such hierarchies in different ways.
One of the most interesting and challenging aspects of our work is that increasingly the things we design need to be able to be used through a variety of different means. These structures that we design “in the abstract” need to convey meaning clearly when instantiated in different channels, which have different ways of expressing such meanings. The particular arrangement of these elements — their granularity, hierarchy, and relationships between them — and the labels that we use to describe them, are what make Twitter “Twitter”, independently of whether we’re accessing it in Twitter’s website or in a third-party phone app. These structures set Twitter apart as a unique place where we can go to “live together as a group”. Which brings us to the second sense in which we architect…
Architecting as Placemaking
The second sense in which we architect when we design an information environment is when through it we are creating a context where people go to do particular things. This placemaking role of IA is less commonly acknowledged than its structuring role.
Sir Winston Churchill once said that “We shape our buildings; thereafter they shape us.” He was right; the contexts created by our environments define what we can and can’t do in them. As a result, they set important parameters for our lives. Look around you. Even though you are reading these words on a small screen, that screen — and your body — are currently located in a physical environment. Whether that place is your office, a library, or a subway car as you head home for the evening, it’s probably been carefully designed to allow you to accomplish certain things and keep you from doing certain others: this is where you walk, this is where you sit, this is where you interact with others, etc. We’ve internalized our physical environments’ affordances and constraints to the degree that we don’t think about them much as we go about our day-to-day activities.
We bring this awareness of place to information environments as well. Just as “building” architects work to design physical structures that express and support their functional and cultural purposes, so must we work to ensure that the semantic structures of the information environments we design do the same. For example, today users expect a certain set of features and information from a bank’s website. They have also come to expect that a bank will call these features by certain names, and expect to see labels such as “deposit”, “transfer”, and “accounts”. Seeing these features and labels in a website — even one with no branding at all — would lead a user to conclude that she is in a bank’s website, and this would affect the way she understands information published in that site.
At this point, we must note that we interact with these software-based contexts mainly through semantic elements such as labels, icons, and images, and the relationships between them as they are presented to us in the user interfaces of these apps and websites. In the “real” world, we can easily tell the difference between a bank and a church, and we have a clear idea of when we are in one and not in another. In information environments it’s often not that easy. For example, if you’ve used Slack, you know that it provides three different types of contexts for conversations:
Direct messages, which are between you and one or more other people.
Public channels, which are persistent discussions that everyone who has access to the account can see.
Private channels, which are only visible to the people who have been invited to that channel.
Unfortunately, the structure of all three contexts is identical, and by default the only way to know which one is which is by looking at small icons next to each channel’s name.
Given the potentially disastrous consequences of sharing something private in a public channel, Slack would be a better experience if these different contexts were more explicitly set apart.
Let’s now talk a bit about the importance of precedent in placemaking. It’s no accident that you have no trouble telling the difference between a church and a bank in the real world. For centuries, “building” architects have been creating places that solve this problem. A bank is configured differently than a church, and some places are more bank-like than church-like. The long nave with pews, an altar at the end, and stained glass windows tell us that we are in a church, and we are likely to listen and behave differently there than we would in a bank. The forms and spaces that define these places and make them different from each other have evolved over many centuries, to the point they we have internalized many of them.
There are reasons why hospitals, banks, restaurants, churches, and homes are organized the way they are: They have evolved over time (and in different cultures) into their present forms. For example, the church typology evolved from an earlier Roman building type called the basilica, which was meant to enable gatherings. The basilica form has been evolving through the centuries to the point that now we thoroughly identify it with churches and other religious places of gathering. If you were to design a church today, this would probably be your starting point. (That does not mean that there isn’t room for innovation, but tossing out precedent whole cloth is usually not a good idea.)
Banks, on the other hand, have evolved to meet different needs and uses: They usually have places for people to queue, stations for them to fill out papers, a large vault in the center, etc. A bank’s customers, the people who work there, and the people who will build the bank’s building are used to banks being structured a certain way; creating a new bank building that completely shunned conventions would carry a large cost in both monetary and cognitive terms.
The same is true with information environments. For example, at this point the web has been around long enough for certain structural conventions to have emerged that are by now standard to various website types. Today, most major bank websites have similar features, publish similar information, and refer to these features and information with similar names. In particular, the structural duality of a private “logged in” experience that shows the user his or her accounts, versus a public “logged out” experience that presents the bank’s products and services, is common enough in the bank website typology that it would probably be difficult to launch a new bank website that completely eschewed it.
We can use typologies to our advantage. Studying what has come before can help us create information environments that are familiar and usable, and can allow us to focus on the aspects of the experience that truly differentiate one information environment from another.
To summarize: information environments like Slack and your bank’s website are different contexts, and provide different contexts within them. It’s important that these contextual differences be made clear if these information environments are to fulfill their goals. Which brings us to the third and final sense in which we architect…
Architecting as Embodying a Strategy
The final sense in which we are architecting when we design an information environment is when, through this design, we are explicitly seeking to serve the needs of a chosen strategy. This is a thorny statement, so let me unpack it. A strategy is simply a plan to achieve one or more goals under conditions of uncertainty. Because of this, strategies are formulated at a high level.
Let’s illustrate this with an example. Imagine that you have a goal of climbing to the top of a mountain which is shrouded in mist, so you can’t see where you’re going. A strategy for reaching the top could be “when given a choice, always go towards higher ground”. Contrast this with the sort of super-detailed instructions that come with an Ikea bookshelf. Before you start building the shelf, you know 1) the exact form you want to arrive at, 2) the tools you will be using, and 3) the parts that will go into it. A person assembling Ikea furniture doesn’t face uncertain conditions, so he can be given very detailed and clear instructions. The mountain climber requires a higher-level approach.
Many modern information environments are experienced across various device form factors in different times and contexts. They also seek to solve sets of strategic objectives that are by definition unique to each particular project and are often unclear when the project starts. In other words, design projects are ambiguous challenges, more like mountain climbs than Ikea furniture. Under these uncertain conditions, designers are asked to make decisions that will impact the system’s ability to achieve its strategic objectives. When these choices get baked into the structure of our product, it becomes very difficult to change them. And if we make the wrong choices — especially at the beginning of the project — the product can fail.
Many years ago, I saw a project for a housing subdivision. The subdivision consisted of narrow lots that were perpendicular to the street. An architect had been hired to design the model house that would be built in these lots, and the design he came up with had the roofline of the house set perpendicular to the direction of the lot so that the roof was lower at the front and back of the house and taller at the middle. The architect liked how this looked.
However, these houses were meant to appeal to low-income buyers. This meant that the houses needed to be expandable over time. The only place for the houses to grow was into the back yard, and having the roofline perpendicular to the lot made that much more difficult than if it was parallel to the lot. So the proposed design failed as an embodiment of the desired strategy.
You could say that in this case there were two forces pulling the design in opposite directions: One approach was optimized for mutability, or growth, while the other was optimized for the architect’s aesthetic preferences. In this case, these forces were in conflict. All design projects have forces such as these pulling them in different directions.
The design process consists in defining hypotheses of what the balance between these forces ought to be, and articulating them to two main audiences: stakeholders — the people who are commissioning the product and/or those who will be using it — and its builders. This articulation happens by means of models, which the designer creates to communicate the intended balance to these audiences. These models can take many forms: sketches, comps, prototypes, etc. Feedback from stakeholders and developers helps designers refine these models as the project progresses, and the models evolve from being abstract and ambiguous (rough sketches) to concrete (screen comps, prototypes). (By definition, models always stop short of being of identical fidelity to the final product.)
When designing something as complex as a multi-channel information environment, the main role the designer must play is ensuring that the conceptual integrity of the product vision is preserved as the project goes through this evolutionary process — unless, obviously, new information has emerged during these conversations that calls for a change of tack. Here it’s worth quoting computer scientist Fred Brooks, author of The Mythical Man Month:
Conceptual integrity is central to product quality. Having a system architect is the most important step toward conceptual integrity.
As the designer of an information environment—its “system architect”—you will be called on to help define (and often, defend) its conceptual integrity. Your ability to meet this challenge will often be the difference between a product or service that accomplishes its goals, and one that doesn’t. That said, I must again emphasize: conceptual integrity is valuable to the extent that it enables and supports the product’s strategic vision. The house may look beautiful from the curb, but if it can’t be expanded it won’t sell.
So how do you, as a designer, determine whether the system meets its strategic objectives? There is only one way, and that is for you to understand what those objectives are. This requires that you understand not just what drives your team, but also the goals of the broader organization it sits in, and at a higher level, those of society as a whole. In the end, you want to achieve what architect Christopher Alexander calls “good fit”: A tight relationship between the form, or product you have created, and the context that it was created for.
A Final Observation
So to summarize: you are architecting when you define the structure, create a place, and/or embody a strategy of and through the information environment you are designing. You do all three, whether you’re conscious of it or not. It’s worth noting that these three ways of architecting inform and support each other. We create structures because we want to create places where people can do things, and we create places because that is where people experience and enact our strategic intents.
As you go about your work, think about the repercussions of the structural decisions you are making, and their impact on placemaking, and — by extension — on your organization’s strategic intents. You are doing these things in your design projects already. The results of your architecting will be much better if you undertake it consciously.
Steve Jobs famously said that computers are like bicycles for the mind:
I love this humanist vision of what computers can be: tools to help us learn faster, manage more information, think more tangibly, and communicate more richly. The idea that these devices can help us think farther and faster is central to the personal computer revolution. It is the vision that has driven Apple (and Microsoft, among others) to generate incredible wealth, both financial and cognitive. It’s one of the things I’ve loved about these machines for the past 30 years.
Apple introduced a new type of “personal” computer on Tuesday: the Apple Watch. This is not a new category of device (I’m disappointed at how similar the Apple Watch is—conceptually, if not in execution—to competing devices from Samsung and LG), but now one that Apple has deemed worthy of its extraordinary design, marketing, and production resources. This saddens me because these small screen-on-a-strap computers are not bicycles for the mind, they are unicycles.
Unicycles share a few features with bikes, so you’d be forgiven for thinking they are similar. They are both human-powered and use similar components—wheels, pedals, saddles, etc. However, they serve very different purposes. Bicycles amplify human energy to allow the rider to travel farther and faster. Unicycles, on the other hand, are not transportation. They are entertainment. We stare in bemusement at unicyclists not because of the distance they cover and the speed they sustain, but because they can remain upright in a tottering one-wheeled metal pole with a seat on top. (Sometimes while juggling knifes!)
Incredible energy, capital, and talent is being channeled into this category of devices. This new Apple Watch is an amazing achievement of engineering and design. As is usual with Apple, this seems like the first of these smartwatches that is thought-out from a UX perspective. But to what end? I can’t imagine these devices (in their current incarnation, at least) as viewports to the Web, as better communication channels, or as tools to create and share in rich, new, unprecedented ways. Their primary purposes seem to be:
capturing biometric data from the wearer,
serving ambient notifications (from another device, which must also be charged, networked, and carried with you), and
simplifying payment in physical retail stores.
None of these features solve problems I currently have. (And I dread the prospect of always-on notifications on my wrist.) I don’t understand the point of having yet another screen with sensors, processors, and a battery a mere inches away from a smartphone that already does so much more than this new device. It just doesn’t seem like a tool that would improve my experience of the world in a meaningful way. Quite the opposite: I suspect it’d bring into my life more distractions from my family, another yearly upgrade cycle, and the stress of having to worry about another battery level as the day wanes.
I think there are interesting avenues for exploration in the “wearable” device space. For example, as primitive as Google Glass is today, the idea of augmenting our visual field with a contextual information layer is genuinely valuable, since it would allow us to interact with information and do things that we are currently unable to do in the real world. I don’t get the same sense of possibility from a wrist-worn device. It only seems like another little screen buzzing for my attention, my data plan, my personal information, and another charging cable. A fun, frivolous, expensive trifle.
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.
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.
Some information environments are denser than others. By this I mean that they present a higher number of information nodes in a constrained space/time. The user’s ability to understand and navigate the environment will be greatly affected by the density of the information in the space, and managing this information density — ensuring that it’s just right for the objectives, audience, and content of the space — is a critical function of information architecture.