10 Things I Learned In Web School

by Luke Wroblewski June 23, 2010

Last year Matthew Frederick, author of the excellent book 101 Things I Learned in Architecture School, asked me to contribute some things I've learned about the Web for a new book in his series.

The book, 101 Things I Learned in Business School, was just released but with only one lesson about the Web within its pages. So here are all the lessons I wrote up for Matthew in raw unedited form!

1. You can influence your audience on the Web, but you can’t control them.

  • In management, you can’t control anyone but yourself. But you can influence everyone.
  • Companies need to give up the idea of controlling a user’s experience on their Web sites & applications
  • The completion is one click away and people are quite comfortable using the back button when needed.
  • Instead of controlling a user experience, focus on influencing people’s behaviors toward value creation and activities that meet their needs and your business goals.

2. Web applications are digital products. Design & think of them as such.

  • The first wave of the Web consisted of digital representations of physical companies & organizations. So the dominant behavior was locomotion: going from place to place.
  • In the second wave of the Web, the shopping cart showed up everywhere and enabled digital manipulation of physical goods online.
  • Now the goods themselves are digital. Web applications are products that companies market and sell.
  • As such, they should be designed with packaging, first time experience, customer lifecycle, and more in mind.
  • More on this topic: Audio: Packaging Design for the Web and Packaging Design for Web-based Products

3. Whoever can frame the problem best, is the most likely to solve it.

  • In today’s digital world, getting clarity into the problems organizations face is sometimes more valuable than coming up with solutions.
  • There are many more people trying to provide solutions than there are trying to clarify problems.
  • Usually when a group of smart people is at an impasse for a long time, it is because the problem is poorly framed, not because their solutions are not good.
  • A well defined-and exciting problem (and its associated constraints) is the catalyst that makes design go.
  • More on this topic: Defining the Problem Summary

4. There are many ways to move pixels around on a screen. Not all of them are designing.

  • There’s more than one way to make software user interface decisions.
  • Designing: decisions are evaluated by how well they contribute to an integrated “human-centric” experience. This is the model most designers crave because it leverages their ability to empathize with their target audience and think holistically. Designing focuses on understanding the fundamental purpose of an application and bringing it to life in a way people can understand and use. An experience that “makes sense” to your audience is your yardstick in this model. This approach is probably most common when developing new products.
  • Optimizing: decisions are made based on explicit testing of isolated variables to drive very specific behaviors. Designers create variations of a control that are evaluated systematically. The elements that perform best likely become part of the user interface. In this model, performance is your yardstick for decisions. Mature products (especially cash cows) frequently employ optimizing models and designers on these teams spend most of their time creating (lots of) iterations for the key elements of the product.
  • Managing: decisions are reached through discussion or debate. In this model, designers represent the collective decisions of groups within the product by laying out what everyone agreed to. Consensus and buy-in are the yardsticks by which people judge success.
  • It’s important to note that the processes that define each model can also be inputs to other models. For example, explicit testing can help inform a holistic design or healthy debate can result in variations to test in order to optimize a product. The thing that distinguishes each model is what is used to make design decisions most of the time: holistic customer experience, optimization, or consensus.
  • More on this topic: Designing, Optimizing, and Managing

5. What defines a user interface?

  • Information architecture defines the structure of information (which can exist in many forms).
  • Interaction design enables people to manipulate and contribute to/create that information.
  • Visual design communicates these possibilities to people and creates affinity to them (desirability).
  • A user interface is the summation of these considerations.
  • Some might argue that the term "information" is a bit limiting in this set of definitions and I kind of agree. So anyone who needs a broader purvey for what they work with could simply substitute "information" with "stuff".

6. Don’t just think about the context of your Web site, think about the context of the Web.

  • In today’s social, distributed, search-driven Web, customers are finding their way to Web content through an increasing number of distinct experiences.
  • Yet when people arrive at most Web pages, the experience they get isn’t optimized for this context.
  • Instead, the vast majority of content pages online remain more concerned with their own context than the context of their users: where did a user arrive from and where are they likely to go next?
  • More on this topic: Content page design best practices

7. Visual design is not just about making things look pretty

  • While few people literally ask a design team to make things look pretty, there is a long-standing assumption that visual design is the icing on the cake.
  • Perhaps this belief stems from the general public’s introduction to design during the industrial age. Back then, products began to be styled in ways that had not been possible before, and industrial designers like Raymond Lowey got immense fanfare for their aesthetic approach to designing previously dull products.
  • While visual design clearly has the capacity to refine a product’s aesthetics, its potential to communicate with people goes beyond good looks.
  • Through the visual organization of elements, designers can communicate core messages to people that answer key questions: What is this; How do I use it; Why should I care?
  • Answering these questions is a crucial component of both utility and usability, especially in interactive products.
  • So when designing Web pages, it’s important to keep the initial functional role of visual design in mind. The visual design of Web pages should: Set initial expectations by communicating what kind of information it provides; Provide a way to quickly scan that information in order to locate something of value.

8. Organization, interaction, and presentation are the top-level considerations for any Web site or application design.

  • Organization is the way you structure the stuff that makes up an application. Interaction is the way an application behaves to people's actions - its how you make use of the stuff in an app. Presentation is how all that is communicated to people.
  • So in this model, it's not hard to see how the presentation layer really needs to become the voice of the interaction design and information architecture of an application. It needs to communicate the possibilities and limitations of software. But visual design also plays another (more visceral) role.
  • A deliberate selection of colors, fonts, images, patterns, and more can elicit an emotional reaction that enforces a specific brand message. In other words, it can help give an application an appropriate personality - fun, safe, caring, or whatever fits best.

9. Be a smart node

  • In the craft economy of the 1800s, regional markets were filled with individual or family-based craftspeople like blacksmiths or potters. These professions required creativity, were small size (no scale), and did not need a lot of collaboration to get products made.
  • In the industrial economy of the 1900s, small craftsmen gave way to large factories and the need for tight command and control grew as scale increased. Lots of coordination was required to develop consistent products within the assembly lines popping up across developed nations. As a result, the need for creativity was limited to fewer people. Most workers had a defined role in the system and needed to be reliable above all else.
  • In the economy of the 2000s, creativity is once again a key driver of value as command and control structures can no longer manage the full set of information and decisions required to operate at a global scale. This creates a need for “smart nodes” across the enterprise that can collaboratively lead aspects of the business. These leadership positions are enabled through access to large amounts of data and technology. Creativity is required to make use of this information and set of tools to advance the goals of the organization.
  • The importance of creative thinking and “smart nodes” within large organizations plays to the strengths of designers who are adept at recognizing patterns, synthesizing information, and communicating it through visual means.
  • More on this topic: Smart Nodes in An Organization

10. Design provides unique value to strategic decision-making

  • These skills define a unique perspective that designers can bring to strategic work
  • Pattern Recognition: allows us to identify relationships within information. (the data).
  • Story Telling: gives us a way to organize data into something meaningful by focusing on a big idea and supporting messages (the synthesis).
  • Visual Hierarchy: gives us a way to tell the story effectively (the means).
  • Empathy: allows us to make the story memorable and impactful (the meaning).
  • More on this topic: Influencing Strategy by Design