A depth analysis of the thinking that each designer should read

Objective

Wellso:13 at the end of the year, Intercom's product VP Paul Adams published a blog post in intercom Gumbo. This article describes a common phenomenon in the network design community, the idea is that "many of the works that designers share in the community are often designed to dazzle, and the logic of the product is often not amenable to scrutiny, and the really good design should start at a higher level than just do the superficial work".

After the article was released, it was echoed by Twitter, HN and blog comments. Although some of the content in the eyes of some designers look more aggressive (that is, commonly known as "open Spray"), and even some map cannon, but the article on the "design of the four levels" and "when." I want to. Then I can ... "and other design ideas and methodologies are very worthy of our aftertaste and apply to the work.

The article was recommended to me by Sam in February, then went to Twitter to obtain the author's authorization, here also should be required by the author, affixed to the intercom official Bo connection: http://blog.intercom.io/.

At the beginning of the translation, Daniel Dribbble must read calmly. =d

Design Chasing Wave Wind

Of these weather apps, only one tries to solve the user's actual problem.

Now there are some strange things happening in the product design and interactive design world. On the one hand there are people like Ryan Singer and Julie Zhuo who can write very good articles to push our design level forward. On the other hand, more and more people are posting and exchanging their works on the dribbble, but the end result is that these things are reversing our level. I write this article is not talking about the good or bad of chasing waves, but to explore what is the real value of chasing waves. I will be "product design" throughout, especially when it comes to user experience and interactive design.

"The Cock's blown!" Dribbble is this form to encourage everyone to dazzle

I saw a lot of design work for Facebook and intercom last year, and then I found a worrying phenomenon. Too many designers are designing to attract the attention of their peers, rather than spending their minds on solving actual job problems. This has always been a problem in the creative field of advertising (it seems more important to get a bonus for cool work than to prioritize customer needs), and it is becoming more and more prominent in the area of product design and interactive design.

Many of the job seekers I've seen recently are focusing on the top of the surface, focusing only on whether what they're doing is enough to "catch the wave." So they make the design, good-looking but useless. "Perfect flat design", "pixel-level refinement", sounds sharp, but often these works do not achieve the real purpose of the product. Neither solves the problem that the user actually encounters every day, nor does the complete business system take into account. Chasing the wave of designers like to delve into the outline of the interface and gorgeous color and other details, so as to make friends, Mutual point Zane share. After reading someone else's work, he followed up excitedly. The result is that a lot of the designs are similar on the chasing waves. No matter what you do is social software, financial software, electrical Web sites or weather applications, the same style can be set up to make. You think, if you add a layer of glass to your eyes and look at these interfaces, can you tell what the difference is?

Design the most important step, often does not go to the pursuit of the appearance of beauty

In contrast, good job seekers usually attach their thinking process. Freehand sketches, illustrations, pros and cons, obstacles, trade-offs, solutions, and a prototype that clarifies interaction and action. In the consideration of real parameters, describes how the product's modules are moved and changed, and how their dynamic effects are presented.

And the bad job seekers will only send their cool flat PNG or the awesome wireframe PDF over. There is no key point to solve the problem, no commercial and technical constraints, no description of the use of scenarios and contextual links. These perfect retinal pixel-level PNG may look great on the chase, but in fact, these things are not even basic design value.

That's why many of the "redesign" works of chasing waves are stupid. Because many people do design, it is not clear the origin of the product, the user's real needs, technology constraints, and the depth of the organizational structure.

If the product design is to solve the problem for the user in a specific constraint, the person who claims to be a product/user experience Designer is actually a graphic artist. A designer should be an artist, a stylist, and creating beautiful Things is a great project, rather than doodling like this.

Product design is always closely related to mission, vision and architecture

From a wide range of ideas to pixel-level detail, designers should always think about the company's mission, vision and product architecture. Everything they do in design needs to go through this process.

Design begins at the top of the company's mission, followed by the company's vision. In a team that has no clear and executable mission and vision, it is difficult to design. Don't underestimate the importance of this problem, and if your company lacks a clear mission, it will create it as part of your job.

After the mission and vision, it is the product architecture. It's not about the technical level, it's about the relationship between the parts of the product, it's a whole system. The first morning I went to work at Facebook, Chris Cox made a wonderful speech (you can start to feel it). The following audience came from various departments of the company, Chris talked about it, and then focused on the architecture of the product and how it relates to the company's goals.

For Facebook, the architecture has contacts, friends, points of interest, up to the world famous brand to the street store, and a schematic showing all these things. This is a very clear and concise product, direct hit the target demand point. In my experience, it's hard to make a great design out of this assorted thing without a clear frame of mind. In many cases, as with this project, as a designer, you should solve the problem and improve the architecture. For example, when it comes to Facebook jumping to other apps, I usually draw a concept map like this on the whiteboard:

The product's schema is not a stack of information, it's not a page attached to that module and space, or a bunch of stiff demos that tell you what this is all about, an interactive prototype usually handles the information well. A deeper form of expression, which is the product's architectural diagram. It can show the position of each module in the whole system and their connection. And in intercom we do this in the form of architectural design:

I don't even have the impression that I have seen an architectural diagram of this kind of expression design idea on the wave. It is rare to see a designer tell how his work matches a demand target, how to drive the vision of a product forward, or what role it plays in the entire architecture, and so on, to present the importance of these designs. This should be a basic design, not a special case.

Once you've identified the product's clear mission, vision, and architecture, you can start thinking about other details. As long as the user achieves the goal, they will be happy, satisfied, and get a sense of achievement. The service of your product has provided the user what convenience, but also has what flaw.

These rough sketches are far more important than the catch on the wave of PNG. From the beginning of product creation to the introduction of finished products, in this set of procedures, PSD files and PNG pictures are the most I think the least attractive and the most useless material. More important is the design of how to balance the process of thinking and discussion, such as the product's pros and cons, how to design a match to the company's vision, or to solve the product architecture problems. All of these whiteboard sketches, hand-painted drafts, and even a solution to the picture on the back of the napkin are the designers should be posting on the chase, and I'd rather see that. Even the product narrative document is more important than a pale PNG or PDF document.

Think about the four dimensions of design

Design is a multidimensional process. In my experience, it is in the best order to think through these layers in turn. The simplest one is to recall these four levels:

I see one designer after another to focus on the fourth level and completely ignore other factors, so the bottom-up approach to design is certainly not as good as the first. If the other three levels of the problem has not been resolved, then such as grid, font, color, beauty and other aspects of depth are useless work. Many designers say they have thought about it and not put it into action because it is sometimes more fun to just paint some nice pictures and bury themselves in pixels than to deal with complex business decisions and relationships. It's harmless to focus on the fourth level, but it's just painting, not design. In this case, you are a digital artist, but not a designer.

Design systems are more and more important because the web is everywhere

The invention of the network will bring the biggest social change since the Industrial revolution. The web permeates every corner, it's in our home, in our office, when we're asleep at the bedside, where we go in our pockets. The internet is with us anytime, anywhere. And gradually came into our cars, clothes, and everything we had, and was used to test our health. Until 2020, or earlier, all businesses would be based on the network. As Charles Eames once said, "eventually everything will be connected to each other":

Static web design is a career on the verge of dying. With the phenomenal development of mobile technology, the emergence of different APIs, SDKs, and open partnerships between platforms and products, all this paints a clear future in which we all participate in a systematic design. As the delivery of a PDF full of wireframes is about to die, Photoshop is already a fading design tool. Designers who drive our level of progress tend to immerse themselves in hand-drawn, whiteboard and prototyping tools (Quartz composer,after effects,keynote,css/html).

This is one of the reasons why a designer should learn code. Whether you agree or not, designers do need to explore the links between components in the system to define problems and find solutions, rather than to pull pixels to do this. It is possible to implement interactive prototypes that can be adjusted in detail when the actual operation inevitably feeds out the neglected problems of design and does not anticipate the situation. Feeling in real interaction can often give you a better understanding of the product you are designing.

We do design with the method system

In intercom, we use the Clay Christensen (Harvard Business School professor) method to design products. We place each design problem in a methodology that focuses on events or scenarios, motivations and expectations that cause problems, as well as desired goals:

When _____, I intend to _____, so that I may _____.

Take a chestnut: When important users sign up, we need to be told so that I can start a conversation with them.

This gives us a clear idea. We can use this method in the design task to consider the priority level. This ensures that we can always think about the four dimensions of design. We can see which components in the system are part of this work, understand the interrelationships between the different modules within the product and the necessary interaction to facilitate these relationships. Before we reach visual design, we can design from top to bottom from Target, architecture, to the order of interaction.

While using this method, we are building a model library to help us achieve the system of design work. We will do more design by using the code of the Model library rather than using Photoshop. Although the process is not perfect, we will improve it over and over again.

I'd like to know what resonates with you about how to work after reading this, please comment below.

Update

To respond to comments here and Twitter, I wrote a new article on how to screen a designer.

Some friends on Twitter and hn think I'm confusing visual design with experience design, and I don't agree. I don't think you can do a visual design of a product without considering the interaction and the system. We're not drawing, we're not just designing posters or labels.