Hello, Habr.

Over the past 3 months, about 40% of my working time is communicating with designers. Thanks, but no regrets. Just kidding. Necessary. Designers.

They have already shown me that design is not about drawing, but about designing. And about why this is so, I found an accessible explanation from Kostya Gorsky , former Yandex art director. Video is available here .

Illustration by Tanya Zadorozhnyaya .

Some presentation slides are adapted / recreated to improve image quality.

Design for managers

Hello everyone. My name is Kostya, I’m doing a bit of design and will tell you something about design. I will not have one lecture, I will tell 7 stories. They are not related to each other.

You can’t make a presentation about design without Steve Jobs, so I had to put such a slide:

I used to start any presentation by telling why I should think about it at all, that design is very important, be sure to do design and all that. It seems that it is time to stop proving it, we believe that everyone believes in design as we do, so we can go straight to the point.

Many of my friends think that design is like in the picture. Something like " WOW " , BRIGHT , EXTRAORDINARY , some kind of talent, creativity.

All my stories will be about the fact that this is not so. This activity is quite simple, understandable, absolutely accessible to any of you.

Just as any myths and legends go about design itself, so many people think that designers are some kind of especially creative people, that one has to be born talented, that one cannot learn this, or vice versa, that one needs to learn for years and preferably somewhere in London.

Of course not. In fact, any person can become a designer, and it seems to me that anyone should be, to one degree or another.

Here are the stories we are going to talk about:

The first two are long, the rest are shorter. They are not connected with each other, they are in random order, they have random headers.

1. Does the design have a process

It all starts with a white sheet of paper. Suppose you have a task, for example, to make the interface of a new mail of the future or to make a browser of the future. I've been working on a browser recently, so most of the examples about me will be about me. How to deal with such a task? We arrive at work by 9 a.m., put a white sheet in front of us on the table, sit down and start drawing the browser of the future ...

But if you do so, then of course you need talent and everything that was on the first slides and in the end nothing will work.

In fact, if you start with a white sheet, then you are already doing something wrong. Design is a very simple process that consists of several steps.

Their exact number is drawn differently everywhere, there are 4-3 steps or 5-6, it doesn’t matter. It all comes down to 5 basic steps, and they have different names. This is not important. I chose averages.

It always starts with research. Its meaning is simply to find out the maximum information about an object that already exists. Whatever we do, someone before us has already done something similar. Mankind always somehow communicated, if we make a new service about communication, or about mail, then we can study how people communicated before, how they communicate now and what people managed to come up with about it.

Next, we interpret what we have raked. That is, we are simply trying to get some interesting things out of all this mass of data, to cling to something and to set ourselves the task precisely.

Then we generate ideas. This is a whole separate process during which we come up with a lot of things.

Next, we develop some ideas that we like in more detail,
collect prototypes, test some, select them, and improve in the course of an infinite number of iterations. So this process leads to the solution of the problem.

1. Research

There are many different ones, as I said, the meaning of this is to understand what humanity has managed to come up with.

In Russia, for some reason, this stage is customarily skipped. It is believed that this is boring or not necessary and "... in general, we’ll come up with something right now, we already know everything."

In the West, they approach this quite formally, and a person is simply not allowed to the task, if he has not previously brought a large stack of reports on how much he has looked through. In fact, when you look around, after you have done the research, usually thoughts really appear in your head, some ideas, how to solve the problem further.

Let me show you a couple of examples of research on the browser. You now know something about browsers. Let's see what happens if we briefly go over the history of browsers. How will your understanding of this subject change, and will you immediately want to come up with something about the browser of the future.

For example, mass browsers began in 1993 with the Mosaic browser.

It, as you see, is already similar to what it is now: it already has back / forward buttons, it has a page address and an address bar, and a large field to display the page. 20 years have passed, browsers are the same to this day, except for the details.

Then Opera in 1994.

This is the company that came up with the most innovations in browsers. True, often these innovations either died out, or appeared in the products of competitors, and then they became mainstream.

In 1994, they came up with the idea that it was possible to display several pages in one window at once, similar to how it was in the development environment for programmers.

This idea did not take root, but in the future it led to tabs. There are still funny buttons to build these windows in different ways.

Then in 1995 there was Netscape Navigator 2, it is already an almost modern browser.

It has a whole toolbar with buttons. The funny thing here is the icon on the right. Animation was spinning here. I don’t know whether you remember it or not, but it used to be that the page was loading for a long time, you had to somehow entertain the person while it was loading.
Some short animation was shown in this window , always the same, naturally.

Then Internet Explorer 3, in which CSS appeared.

His visuals have changed a bit, for example, the buttons in Netscape were convex, but here they turned into a flat toolbar, in which the texture was already drawn against the background - it was fashionable at that moment. Here, too, there is an icon on the right, which spun animatedly while the page is loading.

Next, Internet Explorer 5, which differs little in appearance from the previous one. There are technological changes, it is now not so important for us (XMLHttpRequest → AJAX).

And bang, Opera 5 in 2000, in which 3 mega-innovations take place right away.

Firstly, a banner. They put it directly into the browser, of course, this thing did not take root. Almost no one saw him in our country, because everyone immediately downloaded the pirated version with the banner cut out. But honest western users, if they downloaded Opera for free, they watched a banner that always showed ads, and if you paid money, the banner disappeared.

Tabs also appeared here. They are downstairs. The guys from Opera just looked that in Windows there is a panel at the bottom, which shows the open windows at the moment - the task bar. They took all the windows related to Opera, showed inside their windows, simply grouped them that way.

This simple thing turned out to be very convenient, the buttons for switching between the windows were slightly redrawn, put on top, and so there were tabs, without which it is now difficult to imagine the browser.

Another mega thing - here for the first time a search field appeared to search by Google without accessing the google page, and immediately from the browser.

In 2007, Opera 9.2 already had a feature called speed dial when screenshots of the pages that I go to most often appear on the new tab page.

In their case, it was possible to manually configure myself for several of these pages, which I want to see here, so that you can go to the page in a couple of clicks without entering its address.

And Chrome in 2008 made the last powerful revolution to date.

If before that the number of toolbars was spreading in browsers, there was a Yandex bar, some other bar, a bar with bookmarks, many different bars, in general, the browser became thick.
Chrome sweeps away everything with an iron broom, makes a very thin minimalistic interface, combines the address and search bar into one, and puts it in the center.

What will be the next interesting revolution we will soon find out. Here is such a
simple study.

After we looked at the pictures of what was, we better understand why browsers are what they are and where all this can go.

Ethnographic research

We take a person, sit next to him and just peep at how he works. We did it very cheaply. Inside the company, I wrote a letter to the mailing list on non-working issues, there was a text like "if you are not a programmer, you have 5 minutes of free time and you do not mind that we peep at you, then write."

Some people responded, we sat down to them and watched how they use browsers. Programmers cannot be considered normal users. They have completely different habits, settings, they can have a bunch of plug-ins there, they use hot keys and all sorts of other things that are not characteristic of an ordinary person. Therefore, this is not a relevant audience for us.

At this stage, spying on a person, we try to understand some interesting things that a person does not notice to himself. No one can say what he needs, but we can peep.

For example, a person logs into facebook every five minutes, and each time he carries out a complex chain of actions: click the plus sign, click the favorites link, open the social networks folder, click the facebook link there and then facebook is loaded. It would be possible for him to put this link somewhere immediately on top. This is a far-fetched example, but the bottom line is that while peeping at people, you can see some difficult paths that they walk, and think up how you can straighten them later.

And more about the study of competitors. When we came up with the icons, we made a matrix, put all the icons from the toolbars of the browsers and began to draw our own.

Here are a few of our attempts from above and below hanging. The final is the highest. There are funny details that we studied when we thought about how to draw icons ourselves.

Here's an example of a magnifying glass. Everyone understands that a magnifying glass is a circle and a wand. But, by the way, it is interesting that some new generation of children who have never seen physical loops will think that this is a search symbol - a circle with a wand, and they will hardly imagine that behind this, there is some kind of object from real world.

But we are still imagining how to draw a magnifying glass correctly. Everyone has a circle on top, but for some the handle is turned left, for some to the right. How do we draw? Yes, on the right you hold with your right hand.

About the option, when the wand is on the left, there is another interesting consideration: in the world of design, it is believed that the upper right corner is the most positive direction. And the magnifying glass that looks to the upper right corner, it’s such a positive one, is much nicer than the magnifying glass that is turned to the left. But we still chose the magnifier that you hold with your right hand.

With the "refresh page" icons it was easier, firstly, it can be seen that for everyone this icon is an open ring with an arrow, except for IE, which has something different there.

The question is, in which direction should the arrow look? At first, we liked the option when she looked up to the most positive angle, but this option was quickly rejected, because if you imagine this icon cast in metal and put on the table, having such a center of gravity, it will not be able to roll over of this situation, she is already well, she may even fall back on the contrary.

Therefore, we did not do this, but chose one that looks in a positive direction, to the right, it may not be so much in progress, but it is easy for her to turn over. Just push her a little, she will immediately scroll.

2. Interpretation

When the research is done, we begin to interpret the results and set goals

Retelling of stories
Ordering
Analysis
Conclusions and Conclusions
Formulation of the problem
Frame designation

This will be a separate story, so now I will not stop there.

3. Formation of an idea

But the formation of an idea is an interesting thing.

Brainstorming
Creative techniques
Improvement

Let's try an exercise. Now you need to take a piece of paper and make it look like this:

Do you know how a designer boy differs from a designer girl? If you give a slightly different task, not just draw circles, but ask just finely, finely, finely to shade the entire A4 sheet, then the girls can do this, and the boys can not. According to studies, the average woman tolerates monotonous work better than the average man.

Now I will detect 1 minute, and during this time you need to try to turn as many circles as possible into different objects, painting something simple on them.

For example, if we draw two eyes and a mouth, then we get a smiley face, if we draw a branch and a leaf, then we get an apple, if we draw rays, then we get the sun. You can use more than one circle for an item, i.e. make one thing from two circles, but the task is to get as many different objects as possible. A couple of strokes are enough, but so that without your help I could understand what was drawn.

A minute is given and she went:

Please put aside the pens. Almost everyone was able to draw 5 ideas and more, but more than 9 options drew only 3 people from the class. Wow.

It could turn out something like this, it certainly was drawn in more than a minute.

How's the overall feeling? What did you feel right now? Stress? Deadline? It is interesting that each of us knows tens of thousands of round objects, where do they all go at the moment when you need to draw them? We have a lot of mental blocks and complexes in the mind that prevent these ideas from getting out when they are needed.

Firstly, the situation is getting on my nerves, time is running out, the feeling that I do not have time now.

Secondly, people are often just shy. When given this task to young children, they come up with much more ideas. Despite the fact that an experienced art director must have time to draw 15-20 ideas, for a designer 10 is a good result, a genius person can manage to fill in all the circles, I think such people exist.

But children, especially if you take small children, about the age of a day nursery, almost all children fill all the circles. Of course, they may be stuck with the fact that they draw something for a long time, but if the task is slightly modified, for example, you do not need to draw, but simply list ideas, then they get a very large number of ideas. With age, this ability is lost, the older the child, the more difficult it is for him to quickly come up with these ideas.

Due to the large number of different complexes that we have, for example, people are embarrassed: “Damn, well, I don’t seem to know how to draw, well, it seems like a dog could be drawn there, but it’s not quite round, and I’m not very I can draw dogs, probably it’s not worth it, it would be possible to have a snowman, but he should have mugs of different sizes, I’m alone here, well, then they won’t understand me ... ”All sorts of stupid thoughts begin that block the flow of ideas and prevent many ideas from being laid out.

In principle, mankind has come up with several ways to remove such blocks, for example, the use of certain substances. But, of course, this method cannot be applied industrially. You can shove yourself in once and come up with something, and it may turn out some kind of stupidity, not the fact that the thought will go where it should. All the people who tried to play with this somehow seriously seriously regularly ended badly.

Most of the methods for generating ideas and creative techniques are based on removing blocks that interfere. For example, the simplest thing is to exclude criticism.

All brainstorming sessions are based on the principle that we do not have the right to discuss and criticize ideas. Exactly so that no one was embarrassed, no one was afraid, and any of the stupidest ideas could be added to the general list, and then it would lead someone to another thought, the idea began to cling to one another and a large number appeared. And then you can sit down and discuss everything separately.

You can do this even inside yourself, when you alone consciously decide that now you simply offer even any nonsense, and then separately you sit down to figure out what is nonsense and what is not nonsense. I will not dwell on this for a long time, there are a large number of different books, articles on the topic of creative methods and, for sure, many of you know, I just wanted to show the general principle.

4. Experiment

After we generated many, many different ideas and chose sound ones from them, those with which we can go further, the phase of experiments and prototyping begins.

Prototyping
Prototyping
Rating
Usability tests

All prototyping is graphically shown here. The meaning of this picture: we came up with something, drew and threw it away. All prototyping comes down to this.

We created a prototyping group in a browser from several programmers who made fast prototypes. I told them what their work would be, and I must say that not all people agreed to this. I said that everything you do will be thrown away, 100% of your work will go to the basket. Not all people are ready to accept this.

On the one hand, it seems bad, on the other hand, it’s clear that this is prototyping. Just as when designing a building, at first the architect glues its layout from cardboard, this is exactly such a cardboard layout. Or when a car is created, they make a model on a scale of one to one of plasticine, blow it in a wind tunnel, and then the plasticine model does not go into production. Here is about the same story.

But people are on the front crest of the wave, in terms of novelty, and can try crazy things. 90% of these things will not lead to anything at all, because we will try it and say: bullshit / doesn’t work / don’t like it, but 10% can see through some real projects.

It is imperative that this all be done very quickly. Prototyping is pointless if creating a layout takes a lot of time. You need to do as cheaply and in the simplest way possible. Because it will be thrown out, it makes no sense to put a lot of effort, energy and attention.

Example. Prototypes are different. You can just make a paper prototype. When we made the browser, at some point we decided on its appearance. A picture was drawn in Photoshop, it shows roughly how the browser looks, and we then determined, among other things, the shape of the tabs, carefully studied the nuances, such as how the shadows lay there. Here it is drawn that the tab that is higher casts a shadow on the one that is lower, but how will it all be life? What will happen when you switch? How will their shadows be cast? We decided to try to make a minimal prototype in order to somehow feel it.

I drew a second picture in Photoshop, in which the neighboring tab was opened, and a third picture, in which the third tab was opened. Just three pictures, if you put them together in a presentation, you can click between them, we already roughly see what happens when switching tabs, how it looks for a person. Some sense of life already appears.

But the most interesting thing happened next. In any program for working with a presentation, you can put links. You can put a transparent rectangle on the tab and put a link to the next slide on it, and then I can move the mouse to the picture and switch the tab.

This is a simple thing, it makes a completely magical effect. It would seem that this is not much further than just three pictures, but the effect is 10,000,000 times greater. I just approached the programmers, put a laptop on the table with this presentation, showed how it switches, and they asked: “Wow, is it programmed on firefox or on chrome?” It never occurred to them that this was just a picture.

In general, the meaning of the prototype is to create sensations in some kind of fraudulent, often cheap and simple, very fast way, and try to interact with them. Further, in an evolutionary manner, the prototype is completed. Naturally, at first it is very rough and rough, gradually we see that we don’t like what we like. What we like is pumped out, what we don't like is polished, and he comes to the real product.

Whatever problem we solve, we have a simple process that allows us to come to a good solution. And as you can see, this process is quite formal, you can follow it without any inspiration, you do not need to wait for a creative impulse, you just sit down, do it and it turns out well, everything is very simple.

2. When the design ends

It is closely connected with the first story, and some process is also drawn in it. There was some kind of designer work process.

We all did what will happen next with the ideas and pictures that we drew? It is interesting that further enemies appear.

Suddenly, a project manager arises, who says: “This, of course, is cool, but actually, no, we won’t do that.” Or programmers come and say: "It's great, but it will take us 10 years to program this, so let's get a little simpler." A large number of enemies attack the designer.

Yes, it’s still interesting that the designers are enemies to each other. This is a separate thing that I want to explore, but if you take any picture, show the designer and offer to redesign, he first scolds everything that was painted, then draws something new, and if we then take the next designer, he scolds too what the previous ones painted will draw in a new way, and this is always the case. It even seems to me that if the designer did not scold the previous one, then something is wrong with him and it is better not to mess with him.

What to do in this situation? An experienced designer learns to enter the outside world. I really like how this antique picture illustrates this idea:

There was such a cool cozy world where it was warm, good, you could draw, invent, no one bothered, and then you broke into this strange world with other people who do not want to do anything like this, but you can also agree with them, we all in one company, we do not compete with each other, we want to make one product, and therefore we need to agree. It turns out that it’s not so scary, and everything turns out.

Now the designer is already looking at the life cycle of the entire product. I was always wondering where the place of design is, at what point the design should begin, at what should end.

At first it seemed like the design was about design. All freelancers work on this model. The manager drew up the statement of work, gave it to the designer, he drew the layouts, handed them over, and then the developers took up these layouts, the product went. In principle, it is possible to exist this way, but nothing good usually happens.

If you connect the designer earlier, then the situation is better. Now, from the very beginning, he takes part in inventing, then in conducting research, in writing that very TK. It turns out much better, the person is already there, he understands all the details, is involved, invents something.

Further, if after the picture is drawn, the designer is not excluded from the project, but continues to work, it turns out even better, because when the developers start to realize the pictures, it turns out that a lot of everything was forgotten and not taken into account, and otherwise, the developers we have to figure out how the page should behave, what should happen, and these are design decisions.

It turns out that the process is spread throughout a thin layer. This is not to say that design is a stage, design is just a state, it is a role that is in a team that is present from the very beginning of the project to the very end.

Further users, more precisely people. We forbade ourselves to use the word "user" because it is a little derogatory or something. If a person uses the word juzvere, then he should not be allowed to design interfaces.

Real living people begin to use the product, it turns out that everything that you came up with is not quite the way we intended, that people do not see this, they do not like we wanted, and in general everything is wrong.

Here again comes the moment when you need to break out of your cozy closed world there, into the outside world, and start talking with these people, find out from them, read what they write in support, communicate in blogs and forums, watch what people write about the product .

There are two such moments when the designer breaks out the next big one from one small world. I wanted to think, but what if some other world? Even more in which you can break through after it turned out to be in this.

I guess, yes. You can see how this product generally affects society, the history of technology development, other products, and everything around.

I wonder what's next? Is there any other more external world? I don’t know how to think about it. And this is what happens if designers simply draw an icon, then you need to understand that this icon, not just some kind of icon in a vacuum, is part of the interface, but this interface is part of the product, real people use the product to solve some of their real tasks, and all this happens in real life and somehow affects it.

That's when the designer thought about this to everyone, you can go back and draw an icon then everything will turn out fine

3. Fear, content and form

I got this story from John Maeda's lecture on TED and I strongly advise you to look at this lecture, it is mega cool . In general, there are several lectures, you can see everything.

I will show one short story that fits very well into what we are talking about.

Take the word “fear,” for example, and see how its perception changes depending on the form in which we put on this content.

The word fear is written in subtle helvetics. Fearfully? It seems not very scary, such a small word.

You can take an ultra-thin font and now it's not scary at all. Something like some kind of mosquito, it can be a little unpleasant, but definitely not scary.

And if so? Well, definitely worse than the previous ones. at least here you are expecting something.

But like this?

This is not scary, rather ridiculous, it’s some kind of pirates, maybe a circus, but not fear in the direct sense. This is a “funny” fear, or theatrical performance.

And so this is a night club:

Maybe let's go hang out in fear? Fashionable place.

And here it looks like a magazine:

It can be seen that the letters are very crowded, we directly feel physically how they are squeezing them, how they want to deal with them, crawl away, but they are squeezed, and this makes us a little scared.

And it can be a very expensive restaurant, where you need to book a table in two weeks to get:

The meaning is completely changed, despite the fact that the word is the same. Just depending on what form it takes and how we show it, the meaning is completely different.

Let's change the letters a little bit, we get another word, now this word is free - freedom. And again, the meaning of the message that the slide conveys changes completely, depending on which font to use.

For example, here it is this powerful fat statement “Hurray, freedom”, the release of all or some associates it with “Free! Freebie! Come on! Mega-action, everything is on sale. ”

Here is just a different style of the same font, and here is a completely different effect. This is free space, some air is easy to breathe:

You can enhance this effect by spreading the letters:

Now, in general, everything is filled with air, the letters practically take off, it seems to us that this is such a mega-mega free piece.

Depending on how we change the form, our perception changes, and the design always consists of content about which there were previous stories, but there is still a form, and this is also an integral part of the design.

We usually work on the content as a whole team, together, everyone comes up with what the product does, then form is already the domain of the designer.

Designers know different secrets, and a good designer knows how to use the means of expressiveness that he has to convey the right message, convey the right color, to the content that we have.

4. Is it beautiful

All talk about beautifully ugly, in the end, comes down to the concept of "taste." This is a definition from the great Soviet encyclopedia:

Aesthetic taste - a person’s ability to distinguish, understand and appreciate the beautiful and the ugly in the phenomena of reality and works of art.

Designers can say about a person that he has a taste or that he doesn’t, or that he has a bad taste or a good one. But few can say what to do if the taste is bad? For example, how to educate him? Where does good taste come from? Where does the bad come from?

There is a general answer that taste has been gained in a very long time, if you look at a lot of good. The more a person watches the work, which is considered a universally recognized model of good taste, the more his own taste is formed in him, over time he learns to better distinguish the beautiful from the ugly. If this ability is not enough or there is no time, then people resort to different rules and laws. I can’t say that it’s good, I’ll tell you more about the rules.

Taste is often associated with tact and the desire to say a lot or a little. In the pictures below, two notebooks from two different operating systems.

The picture above shows that the notepad designers tried very hard, there are glare, gradients, neon blue backlighting, neatly highlighted under the window title so that it can be clearly seen. A lot of work has been done.

At the same kind of hack. Just just a white square. Where is the design?

When you look at a notebook simply as a presentation slide - this is one story, when you start working with an interface all the time, then a lot of glare is rather tiring. It may be interesting to look at them once, but when you come across them every day, for 8 hours a day, at some point you are inclined to believe that a simple notepad might fulfill its function better. This is partly due to the fact that on the mac the menu is “nailed” to the top of the window. A tricky moment that makes life easier for mac app designers.

More about beauty. I have a question for you now. Here is a rectangle, do you think it is beautiful?

To most people, this rectangle seems beautiful because it has proportions. In this case, it doesn’t even matter which ones, it could be the golden ratio, Pi number, Fibonacci numbers or just a ratio of integers.

It is important that when we just look at the picture, we don’t notice it, but subconsciously our brain feels that there is something not just there, that it is not a random rectangle:

You can even test, draw 100 different rectangles and interview thousands of people, but we don’t have to bother with this now, it's just one of the examples that designers use to make something more beautiful from the point of view of people.

The next trick. Take this rectangle and multiply it along the plane of the sheet. We get a grid.

The grid can be used to arrange objects on a plane. We combine a number of cells and fill them with content.

For example, we can put the top row of cells in the header, fill the text in 9 cells, put a photo in four cells:

Each of these blocks now inherits the proportion that the original module had, that is, the photograph now also has the proportions that the original rectangle had.

The grid is a secret element, it is no longer in the final layout, and the composition turns out to be harmonious and beautiful, people applaud the designer and wonder how it happened so easily.

On the same grid, we arrange the objects differently, again we simply place the content in the cells, we hide the grid, we get a beautiful composition:

Designers know different such rules. Beginning designers fight for these rules, argue, comply with them, expose colleagues who do not follow the rules.

Experienced designers famously break the rules and they get even better results than observing the rules, because they understand well where these rules come from and in which case a violation can lead to some benefit.

I will not go into this right now, but I am telling you so that you understand that there are things that are best left to the designer, for which the designer is responsible and he can do it well.

5. How to set a task for a designer

I will show how to set the task using the example of the authorization page. Such was the authorization page in Yandex mail some time ago, now it is not like that. We noticed that 80% of the people who come to her, apparently have no mail, and they leave this page without doing anything. It was amazing and strange, why did they go there incomprehensibly, and who are these people?

But once they were there, it would be cool to lure them so that they would get mail from us. Now there’s just a little blue link for this, and we decided to do something to get more mail.

How to set a task for the designer in this case? How would you set the task? Make the link painfully attractive?

Here are the questions you need to answer when setting the task:

Why do we need this project
How do we understand that the goal is achieved
,

First of all, you need to answer the question "why are we doing this?" Not only should we understand this, it is important to broadcast to the designer. The designer, as a full member of the team, must fully understand all the initial premises.

Therefore, the option to “make a green button” as a task for the designer is not cool, because the button is already a solution. What is the task? To increase the number of registrations in the mail.

====================================
Why do we need this project?

We found that on this page 80% of visitors do not have mail on Yandex, but for some reason they came to it. We do not meet these people in any way. Therefore, we want to make it possible to make mail more visible.

The login page is now a bit old. It has not changed since the beginning of 2000.

====================================
How do we understand that the goal is achieved?

Let's measure the number of registrations. We expect that changing the authorization page will lead to an increase in the number of registrations of new users. We will consider this quantity.

We will like the new page.
Let's put an experiment.
Guys know.

====================================
What remains to be done?

We will redraw the current page from scratch. We need a new design and a new layout.

Put a big green button.
Redo everything.
=====================================

Regarding the page re-page. If you somehow stick out this element, nothing good will come of it, because the element completes the registration form in the mail. If you put a noticeable button here, then people will kill the login password by clicking on it. Nothing good will happen.

Perhaps it is not necessary for the designer to say that everything needs to be redone. We can say that we want to increase the number of registrations, and invite him to decide whether we will change the current page or draw something completely new.

I don’t know why I got so attached to the new page. You can simply hint that the task will not be limited to alteration of one element, because this can break the current behavior. Therefore, one must either radically rethink this element, or generally rethink everything.

The important question is “Will we break current behavior?” It must also be taken into account, and the current behavior is that many people use this form to enter the mail, as was originally intended. This part must be carefully preserved, it is impossible to remove this form in a click or make it small, it should be noticeable, but at the same time there should be an element that attracts attention, which would encourage people to start mail.

"Why do this?" Because a large number of people come to the page and go nowhere. These questions are especially relevant for managers at Yandex.

Almost always, if some improvement comes to your mind, it may turn out that the service team has already thought about it. It was a discovery for me, but it is true.

If you have any idea, for example, about Yandex mail, then with a probability of 99%, the guys from the mail are already aware, even if they were not told anything about it. Just because they think about it continuously, they monitor a large number of different sources, and perhaps your idea is in their work. Or maybe they can reasonably explain why this is not cool, maybe they already tried to do this, and it turned out that something was wrong. And maybe they did not have time, they could not or forgot, then it needs to be raised and done.

We will skip clarifying questions from the list now.

When the designer received such a detailed task, he decided to make a big green button, but in some other place on the page. Here's what he did:

We were ready to make it up. The designer said wait, there is not enough design, let's better do this:

We thought that on the one hand everything is the same, in the same places the green button is large, on the other hand, it’s somehow getting mail.ru, and not at all in Yandex. In Yandex - this is a black font on a white background.

The designer says you are tired, I can’t draw white pages with black letters all my life, I want beauty. We argued, argued, decided that we should try to run both options.
Okay, if you can’t find the truth in a dispute, let's test both options. For a person who visits the page, during the two weeks of the experiment, a white or blue page is randomly shown with a 50% probability. Pages hung with counters. We carefully look at what will happen in the conversion of all the people who get on the pages.

Which page do you think won? About 40% for white, about 40% for blue, the rest believe that there is no difference.

In fact, indeed, there is no difference. Both pages worked the same, accurate to within accuracy. It looks like the big green button outweighed the rest.

To this day, both pages live, there is a small light bulb which, in the corner, if you click on it, the page switches, such a secret hack.

6. What to do with deadline

A very short story. Everything is fine, but we need to have time to do the design by a certain time, not always we can afford to work endlessly. A clock like a Damocles sword always hangs above us, and it’s not clear how to be.

My general answer is this: in fact, the deadline does not exist. More precisely, the whole process of work can be pushed into the amount of time that is. In fact, the problem is solved immediately when we have just a general idea for a solution. Depending on how much time we have, we just increase the detail.

For example, if we have a month, then we can spend the first week on research, next week in two days to make an exact statement of the problem, spend another three days, say, on brainstorming and other techniques in order to generate many, many different solutions. We will still have two weeks
to make some prototypes, test them, and choose something good.

If we don’t have a month, we have only one week at all, then on Monday we carry out all kinds of studies that can be done on Monday, on Tuesday we formulate the task, in the afternoon we conduct a series of brainstorming sessions, on Wednesday we do a prototype, on Thursday we test, remake on Friday and still we have a solution ready for the week.

Just the more time, the better the result, but you can come to some result when there is almost no time.

YouTube example:
The most important key design decision that ensured the success of the service, you know? The related videos block, in which you can watch other videos related to this one. This block that provides stickiness.

(this is a very old version)

You watch some video, then watch the next, then the next, then it’s already dawning outside the window. Youtube sucked you.

In fact, the whole design of youtube comes down to the fact that we need to show videos related to what we are watching, everything else is secondary.

They made a redesign. As we see, the main things occupy an even more important place here. The video has become even larger, the block with tips has been raised even higher, but they are the essence of the solution.

In principle, if we came up with this and drew it simply on paper or on a blackboard, and there is absolutely no time, you can immediately give it to the developer, the output will be some kind of working option. If you have time, you can draw beautiful buttons.

7. Open

I believe that design is an open process. The designer must show the results of his work at every stage, even some early drafts, to as many people as possible, and involve a large number of people in the process.

Returning to this cycle here, at each stage it is useful for different people to participate.

When we did the research, we often invited managers and developers to join. If we are going to study the history of the browser, then who cares - fly in, download old builds, put, try, dig out screenshots. People are interested in talking, everyone remembers their stories about old browsers.

Brainstorming is generally the most favorable soil. in order to call as many different participants in the process as possible, not only designers, not only managers, but generally everyone who can throw their ideas into the common piggy bank.

You can show the whole company what it turns out. This is an interesting effect: people really look. We often post some early layouts in internal blogs on Yandex. People watch, people start asking questions, discussing.

There are several positive points. Firstly, everyone is about to understand what is being done. This is very important for the service team, because when you describe in words, you imagine everything a little differently, when you see mock-ups or even drafts, everyone suddenly begins to understand what is being worked on. It is equally important for adjacent teams or just for onlookers and outside observers.

Of course, this is a great stream of criticism, the developers notice that something cannot be done, someone clings to some things, people find meanings that we could not think of, and this is the first test.

Since the designer organized this entire process of communication, he, at his discretion, can ignore some comments and take some to work.

There are still a large number of people with the psychology “they didn’t ask me”, they pop up at this stage, which is very good, because if you do not ask these people right away, they will come closer to launching the service and will interfere. And so they will have time to speak out, we will have time to argue with them, we can ignore what they asked to do, but then, they already feel like some participants in the process and calm down. It is important.

Of course, in order for the designer to organize such a communication process, one needs to have some moral stamina, since people on the Internet, having often seen enough of how to discuss design, start to discuss it the way they saw it.

This, by the way, is a real quote. I spent a lot of time to find a quote that could be inserted into a presentation that would be real.

An experienced designer understands that there is not much sense behind any such phrase. You can ask a person, find out what exactly he does not like. Often this is not what he says at the very beginning.

If you need to convey to the designer that something is wrong with the design, then I will try to explain with the example of this layout.

Let's say the designer says: I think the mail should be like this.

You may have hair loss from horror / what is painted there, but you need to restrain yourself and tell him in the following vein. First list the facts that you are observing. You can describe it as if you were saying this to a person from another room who does not see the picture.

For example, there is a pink background, letters are poorly read. Then you can, if you want, add the feelings that you have when listing these facts, for example, I find it hard to believe that many will like the pink background. And then to begin to discuss these facts.

You can’t say to the designer “well, you’re a sucker” or any other little constructive “complete crap / nobody likes it” and other meaningless expressions.

We looked at seven short stories about design-related things that seem important to me.

A quote that concludes this presentation:

Simplicity is a necessary condition for the beautiful. L.N. Tolstoy

Do not decide for the designer the task of the designer