Once upon a time, there was a monk who lived in a small stone house at the top of a high mountain. From the top of the mountain, one could see the beautiful sea in the distance. However, neither the monk's house nor the path leading to it offered a view of the sea. Instead, there was a courtyard in front of the house, surrounded by thick stone walls. When someone visited the monk's house, they would pass through the doorway in the stone wall and enter the courtyard, then walk diagonally across to reach the main door of the house. On the far side of the courtyard, there was a narrow crack in the stone wall, angled towards the main door of the house. When someone walked through the courtyard and reached a spot aligned with this crack in the wall, they would suddenly see the sea. But as soon as they entered the house, the view would disappear.
The fleeting beauty of the distant sea would linger in the person's mind, and who could forget such a sight? Its charm would never fade away.
What was the secret to achieving this effect?
If a beautiful view is fully revealed and captivating, it becomes easier for people to become tired of it. Gradually, it becomes just another part of the building, like wallpaper. The people inside the house no longer feel the strong emotional beauty of the view.
Therefore, do not design large windows that reveal the entire view, as it would only spoil the scenery. Instead, place the windows in transitional spaces such as corridors, lobbies, entrances, and stairs. This way, when people approach the windows or pass by them, they can catch a glimpse of the distant view and leave a lasting impression.
The above example is a pattern called "Zen Viewing" proposed by Alexander in "A Pattern Language". If you have paid attention to Chinese gardens, you will find that this pattern is also widely used in garden design (under a different name or description).
The example of Zen Viewing vividly demonstrates a design pattern that we are familiar with. So what exactly is a design pattern?
Design Patterns: Ingenious Insights into Design#
The concept of design patterns originated from the field of architecture, and the renowned architectural theorist Alexander published "A Pattern Language" in 1977. In this book, he defined 253 patterns that describe towns, neighborhoods, residences, gardens, and rooms through a series of precise architectural features. Alexander extracted the essence of architectural designs that bring happiness to residents and referred to these design approaches as "design patterns".
The concept of design patterns gradually gained acceptance over time. Around 1996, Coram, Tidwell, and others introduced the concept of user-centered interface design pattern languages, formally introducing design patterns into the field of human-computer interaction. One well-known example from that time is Tidwell's "Common Ground" design pattern language, which later evolved into the well-known book "Designing Interfaces".
Although design patterns have developed rapidly, there are various interpretations and definitions of the concept, making it a term that can encompass many things. In the academic paper "Pattern Languages in HCI: A Critical Review," Dearden Andy and others provided a comprehensive review of design patterns, extracting various understandings and definitions of design patterns from numerous papers over the years. Here are some key points from their research:
From the above research on the definition of design patterns, it can be seen that different scholars have different understandings of patterns, including aspects such as pattern construction, artifacts (design documents, development tools), communication media (common language), and knowledge carriers (knowledge recording tools).
As experience designers, we don't necessarily need to be concerned about the specific definition of design patterns. However, through the research and discussions mentioned above, we can have a basic understanding of design patterns. Personally, the explanation that resonates with me the most is that design patterns are ingenious insights into design. Whether design patterns are defined as design guidelines, special document forms, or general solutions, they are all describing the characteristics of design patterns. The brilliance of design patterns lies in their profound insights into design.
Why Do We Need Design Patterns?#
Before discussing why we need design patterns, let's talk about the problems that interaction design faces today.
● Issues of design rationality and design quality: In the design process, we often receive requirements from the product side that we have never encountered before and have not seen in competitor designs. How can we design them more professionally? How can we convince product managers that our designs are reasonable?
● How to accumulate design experience: The ideas of componentization and standardization in design thinking are becoming more popular, but many designers still have confusion. For example, they don't know what kind of content can/should be abstracted into components. There are many complex functionalities that may not be suitable for componentization but are needed in many businesses, such as drag-and-drop interaction design. Moreover, there is a lot of design experience that is not suitable for abstraction into components. How can we accumulate and preserve these experiences? If we consider all these design experiences as standards, it will also bring many problems. For example, what kind of experience can be called a standard? The boundaries of design standards will be endless, which is highly unreasonable.
At this point, you will find that design patterns can be a powerful tool to solve the above problems.
Systematic Design Thinking to Improve Design Quality#
Design patterns are the essence of many design experiences. They not only explain how to solve problems but also explain why a particular design is suitable for a specific situation.
Take the "Deep Links" design pattern as an example. "Deep Links" refer to links that contain specific states of a website or application. When users load these links, the program restores the expected application state.
For example, when using a YouTube sharing link, you can select an option to start at a specific time. Once the link is opened, the video will automatically start playing from that time.
Why is "Deep Links" a good pattern? Because deep links provide users with a direct way to open an application's specific state, saving time and effort. It behaves like a "deep link" to a specific content on a regular website or a permalink to a blog post. This pattern makes sharing very convenient. Deep links can be spread through platforms like WeChat, Weibo, and articles. By now, I believe everyone is familiar with Taobao links, Alipay red packet links, etc., which all use the "Deep Links" pattern.
Design patterns provide designers with a rich arsenal of design ammunition. For example, when you need to layout certain page elements, you can choose from five patterns for information blocks. If you need to design a list, you can find a matching pattern from the seven patterns related to lists based on your needs. With such a vast arsenal, we can always have a systematic sense in the design process and achieve higher design quality.
Accumulating Design Experience#
Design patterns are an excellent way to accumulate design experience. Following the standard structure of design patterns, they include the following five parts:
● What: What it is.
● When: When to use it.
● Why: Why the pattern is designed this way.
● How: How to use it.
● Example: Concrete examples.
These five parts provide a clear presentation of clever design solutions in relevant scenarios, which is what design patterns are all about. Regardless of the domain or topic, abstract or concrete design experiences can be recorded in this structure, forming valuable design assets.
"Designing Interfaces" is a collection of design patterns accumulated over decades by Tidwell. In the third edition published last year (2020), Tidwell replaced all the outdated examples with the latest ones, including macOS, Chrome, Slack, Spotify, Pinterest, and more. She also added introductions to design systems (such as Microsoft's Fluent Design) and research on design trends.
The second edition contained design examples from before 2010, which couldn't keep up with the development of interaction design. The third edition replaced all the examples with recent versions, making it highly valuable for reference.
Furthermore, when a book contains a large number of design patterns, it is no longer suitable to be presented in book form. A linear, non-searchable book cannot fully unleash the maximum value of a design pattern library, whether for reading or reference.
A great tree grows from a tiny sprout; a tall tower rises from a mound of earth.