Я это написал специально для Дизайнерского дайджеста. Возможно, вы уже читали. Вообще страшно подумать, сколько всего возможно.

* * *

Дизайн ситуаций

Вчера оказалось, что я дизайнер точек контакта. Не знал, что это так называется. Но раз я дизайнер этих точек, то должен уметь их объяснить.

Нам всегда надо задизайнить ситуацию. Вот человек смотрит сюда — и что? Берёт в руки — и что? Читает — и что? «Что» — предмет дизайна. Что с человеком произойдёт, в какое состояние он переключится. В кого он превратится и что поймёт.

Не надо смотреть на прямоугольник бумаги и пытаться его задизайнить. Или на вещь смотреть и её пытаться. А надо быть режиссёром контакта. И другого дизайна вообще не существует.

— А если человек упадёт на кактус, ему будет больно?

Эти дети телепортировались из прошлого. Ночью сели в поезд под Пензой, а утром проснулись и давай говорить обо всём. Они умные и добрые, но вообще на другой скорости. Думаю, как долго мои сыновья обсуждали бы преимущества и недостатки верхней полки. На сколько хватило бы их внимания в споре о превосходстве яблок над бананами?

Вчера крутые ребята рассказывали о том, как они продают пиццу в Китае. Было смешно и познавательно. Не потому что Китай или пицца, а потому что ребята хорошие и рассказывали хорошо. Нам всем пора в Шанхай, только я не поеду.

И да, если человек упадёт на кактус, ему будет больно, и ты знаешь об этом, маленький любопытный мерзавец, поэтому и спрашиваешь. Тебе просто нравится представлять человека и кактус. Это заставляет твоё сердце биться чаще.

Дизайн незаметного

Нет, пожалуй, я соврал — кроме дизайна ситуаций есть ещё дизайн удобства. Это когда человек занят своим делом — например, читает книгу, а дизайн не мешает ему читать. Ты задизайнил буквы, которые не мешают ему читать, или сшил одежду, которая не мешает ему читать, или сделал стул, удобный.

Это тонкая наука. Я думаю, что контакт может задизайнить и новичок, а для незаметного нужен опыт.

Потому что

Я увлёкся этим направлением. Оно в том, что выбираешь визуальное решение произвольно и пристрастно.

Вы знаете дизайнеров, которые показывают клиенту разный другой дизайн, чтобы он выбрал, какой нравится. Или дизайнеров, которые вычисляют дизайн, загружая в мозговую производственную систему максимум вводных на старте. Я всегда так делал — загружал, вычислял, а несовершенства вычислений сходили за авторский почерк.

Если долго вычислять, начинаешь делать это хорошо. Вот вам два слова, фотка и чекбокс. Эмоции не хватает? Окей, вот другие два слова, фотка, чекбокс и эмодзя. Да отвали уже, я сделал как надо — вот правильные слова, вот эмодзя, чекбокс нужен, кнопка нужна, а больше ничего не нужно. Оно будет работать, или не будет, как и всё остальное, которое будет или не будет. Но вот так оно скорее заработает, чем нет.

А потом пришёл потому-что-дизайн. Это такой дизайн, о котором если спросить — «почему он такой?» — правильный ответ будет ну ты понял. Пусть критики скажут. Пусть напишут статью, пусть расследуют, что чувствовал автор. Мы хотим играть. Мы просто хотим играть, но мы не хотим жить и играть. Мы хотим всегда только играть, поэтому нам надо жить в процессе игры. Почему — потому что.

И мы не расскажем, по каким правилам играем. Потому что это дочки-матери, песочек, башенки и палец-не-палец. Это интимно.

— Знаешь, кому повезло?
— Кому?
— Пилоту. Самолёт быстро летит, да к тому же денег много платят. Я буду пилотом.
— А я не знаю, кем буду.
— Не знаешь?
— Не знаю.
— Ты будешь машинистом.
— Ты за меня не можешь решать.
— А что если я попытаюсь отгадать?
— Ну давай.
— Ты будешь рокером.
— Нет.
— Музыкантом.
— Нет.
— А что ты любишь делать?
— Я буду создателем кошмарных аниматроников.
— А я врежусь на самолёте в твоих аниматроников.
— А они не-про-би-ва-е-мы-е.
— А я пробиватель создал.
— Саш, я не играю. Всё равно этого нету!

Форма важнее смысла

Вы думаете, что наоборот. Что содержание важнее, что главное смысл, а эстетика приложится. А фиг.

Потому что ну смотри. Вот был у тебя двадцать лет назад знакомый, который топил за Intel, а ты был за AMD. И вместо того, чтобы вести спор как подобает джентльменам — чинно, внимательно и уважительно, — вы переходили на личности и говорили нехорошие слова. А потом новый AMD сгорел из-за криво установленного кулера, и ты обиделся на знакомого окончательно, и не разговариваешь с ним до сих пор. Тебе казалось тогда, что содержание важнее формы, что так ему и надо, раз он не понимает главного. А теперь так не кажется. Теперь ты думаешь, что лучше бы вы держались за форму.

Или смотришь на офигенный дизайн, который сделали полвека назад в Швейцарии. Ты что, понимаешь слова? Тебе это важно, что ли? Ты слушаешь песню, и у тебя офигенное ощущение, что это самая офигенная песня на свете. А о чём в ней поётся? Что я не забуду тебя никогда и пронесу тебя через года?

Нет такой формы, которая не была бы смыслом. Есть сколько угодно форм, более осмысленных и содержательных, чем то, что обычно называют «содержимым». Это нельзя взвешивать, ставить по разные стороны неравенства. Форма — это часть смысла, часто самая важная и достаточная для его понимания.

Кажется, что раз форма — это часть смысла, то смысл «больше». Но вам это знание ничего нового не даст, поэтому: форма важнее всего.

— Это что за город?
— Бобров
— Ну значит разбуди меня, когда бобров увидишь.

Дедлайны

Дедлайн — это внешняя мотивация. Там страх (получить наказание), стыд (оказаться плохим), вина (подвести клиента и товарищей), конкуренция (сделать круто и стать лучше других). Эта дисциплина закаляет и делает из людей крепких бойцов и спортсменов. Но я не считаю её единственным ответом. Я думаю, что можно и без этого.

Нужно искать внутреннюю мотивацию. Например, интерес. Или радость от близости и возможности делать что-то вместе.

Да, я не пошутил сейчас, скептик ты мой дорогой. Я понимаю, твой опыт ограничивается иерархическими отношениями, и ты уверен, будто ничего другого нет и быть не может.
— Так, кому тут надо дать в морду, чтобы получилось добро? Где у вас рейтинг скромных? Покажите инструменты для измерения глубинных потребностей личности — как их там — бирюзометры?

Можно обойтись только внутренней мотивацией. Говорю это вам как человек с экстремально низкой чувствительностью к внешней. Можно забить на все кнуты и пряники (включая твёрдый, которым бьют). Можно ехать на чистой космической энергии счастья. Не могу доказать, пока просто поверьте.

— Вы же мне клиентов распугаете. Я-то всё понимаю, я всё-всё понимаю. Но вот клиенты. Клиенты не поймут. Тупые они, прости меня, грешного, за такие слова, но что делать — говорю как есть. Никакого понимания. Так что вы это. Дедлайн когда? Ну, храни вас Господь, пшли вон отсюда.

Это вроде электромобилей. Сначала в них играются ради прикола. Как и в корпоративное добро. А потом находится чувак, который делает индустрию, и все такие — «ой, мы с вами».

Разделение на фигуру и фон

Два цветовых пятна. Области, однородно окрашенные в разные цвета:

Вы воспринимаете их как фигуру и фон. Они не выглядят равнозначными: фигура это скорее субъект, активное начало, а фон пассивен. Фигура воспринимается лежащей поверх фона, ближе к нам, как будто фон позади неё тоже есть.

Вообще-то вы видите пиксели, и строго говоря, существует сколько угодно способов разделить их на две группы. Можно сказать «всё, что левее середины — это одно, а всё, что правее — другое». Можно так: «чётные ряды пикселей — одна группа, нечётные — другая». Можно сказать, что первый пиксель это одна группа, а все остальные — другая.

Эти способы группировки доступны нам в виде умозаключений. А для непосредственного восприятия — нет. Непосредственному восприятию доступно только разделение на фигуру в центре и фон вокруг неё.

В этом нет какого-то закона дизайна, который вы могли бы использовать. Мы это проговорили, чтобы обозначить систему координат.

Когда мозг получает изображение, он разбивает его на подструктуры. Формально способов такого деления может быть сколько угодно, но для восприятия обычно доступен только один. Реже — два или три, тогда они конкурируют между собой, вашему мозгу это не нравится, он пытается выбрать что-то одно.

Близость

Вот шесть объектов:

Каждый из них воспринимается как отдельная штука, и все вместе они воспринимаются как группа, потому что похожи и стоят рядом.

Если поменять расстояния, получатся три пары:

Обратите внимание, что и на первой картинке объекты можно было представлять как три пары. Но для этого понадобились бы специальные мысленные усилия, и эффект был бы нестабильным. Да и вторую картинку можно мысленно разделить как угодно — и на две группы по три объекта, и на любые произвольные комбинации. Но развидеть три пары объектов невозможно.

А ещё сложнее разбить мысленно на три пары объекты, расположенные как-нибудь так:

На практике принцип близости хорошо работает с однородными объектами. Иконки, строчки и колонки текста — всё это прекрасно подходит.

Но как только у вас что-то большое рядом с чем-то маленьким, или целый зоопарк из больших букв, маленьких букв, больших картинок, маленьких картинок — не пытайтесь буквально применять принцип близости. Когда намечается целая система отступов внутри модулей и между модулями, которые соответствуют всем тонкостям иерархических отношений — это вы куда-то не туда забрели, остановитесь.

Синхронность

Здесь по-разному сгруппированные объекты из предыдущего примера, только некоторые синхронно движутся:

И совместное движение побеждает, собирая объекты в новую, очень устойчивую группу.

Самое простое, где это можно увидеть: если что-то на сайте скроллится, а что-то зафиксировано относительно окна браузера. Это однозначно воспринимается как две группы объектов, два смысловых слоя. Даже если они раскиданы по разным углам. Даже если лежат в разных пространственных слоях, когда что-то неподвижное иногда перекрывается движущимся, и наоборот.

Перемещаются вместе — значит связаны.

Подобие

Тут просто. Можно не менять расстояния между объектами, а например, раскрасить их, и это создаст группировку:

Достаточно оттенков:

Сработает и размер:

И наклон:

И пропорции:

Если всё вместе — эффект усилится:

Если поддержать расстояниями — ещё понятнее:

А вот если признаки конкурируют — одни топят за концепцию трёх пар, а другие предлагают альтернативную группировку — вашему мозгу приходится как-то с этим разбираться:

Практическое применение — видеть такие конфликты, избегать их или создавать осознанно.

Непрерывность

Вот фигура, составленная из элементов, образующих три линии (а справа — просто эти линии), сходящиеся в точке Х:

Согласно принципу близости, отрезок ХB должен был бы восприниматься связанным с отрезком XС. Но АХВ — это одна плавная линия. Непрерывность сильнее близости, поэтому AXB воспринимается цельным объектом, а XC — неким придатком.

Подобие сильнее непрерывности — может усилить эффект, как в примере слева, а может переключить восприятие, сделав более целостной группу BXC, как в примере справа:

Завершённость

Если к той же фигуре добавить новые элементы, всё изменится. Теперь мы видим в первую очередь две половинки — DXA и CXB:

На восприятие повлияла завершённость формы. Эффект настолько сильный, что в новой, более замкнутой форме полностью растворилась предыдущая фигура — она есть, но увидеть сложно.

И снова с помощью подобия можно переключать восприятие, делая цельными произвольные части фигуры:

Непрерывные и завершённые формы — в том числе цепочки объектов, даже не сильно плотные, но отчётливо ритмичные — являются для восприятия более весомым фактором и мысленно собираются в цельную структуру.

Что делать с этим знанием? Не бояться нарушить принцип близости и влезть в пространство такой группы. Она это выдержит.

Избегать случайных эффектов. 

Камуфляж

Это о том же, но чуть под другим углом. Объект можно замаскировать с помощью искусственно добавленных фигур, разрушающих его форму.

Первый пример: слева фигура из линий сама по себе, справа она же в окружении других линий. Эти линии её не скрывают, потому что не вмешиваются в контур:

А вот эта же фигура, но дорисованные линии, используя непрерывность, «подключаясь» к узловым точкам формы, формируют другую завершённость, более «сильную»:

Здесь исходную фигуру уже не разглядеть. Только если выделить цветом — потому что подобие сильнее непрерывности. Когда цвет уходит, довольно быстро пропадает и фигура.

Где употребить знания о камуфляже, я не знаю. Придумайте что-нибудь.

Хороший гештальт

Здесь мы видим две линии: прямую и волнистую.

Это противоречит принципу близости (на втором рисунке цветом выделены фрагменты, наиболее близкие друг к другу), и частично игнорирует принцип непрерывности (согласно которому, вполне логично было бы представить разделение, показанное на третьем рисунке).

Мы уверенно разбиваем рисунок на прямую и волнистую линии, потому что это «хороший гештальт». Или, иными словами, что-то понятное, упорядоченное, целостное. Ваш мозг очень любит такие штуки.

Ещё пример:

Здесь принцип непрерывности явно указывает на две странные линии — как они раскрашены на втором рисунке. Но на первом рисунке мы видим зубчатое колесо и квадратную змейку, как на третьем. Потому что в этом есть смысл.

Ещё раз, на всякий случай. Весь разговор не о том, что мы можем понять, глядя на рисунок. Разговор о том, что мы в нём видим.

Сюда же: перейдолия.

Опыт

Чтобы вы вдруг не подумали, будто всё так просто — существует ещё один принцип, способный победить все перечисленные. Это опыт восприятия.

Вот, прочитайте, пожалуйста:

Как блин это вообще возможно? Да так, что вы многократно делали это раньше. И больше никак. Вы умеете читать. 

Если я попробую вам помешать, ложно сгруппировав объекты подобием, вы справитесь:

Если я расставлю капканы из ложной близости, вы справитесь всё равно:

Да, это было на грани. Но здесь специально подобранное слово, с другими полегче.

Когда в игру вступает опыт восприятия — частью которого во многом является узнавание хорошего гештальта — другие принципы могут и покурить в сторонке.

Вот почему плохой по всем показателям дизайн может так прекрасно работать в жизни. Он воспроизводит образы, которые все много раз уже воспринимали. Через это он становится понятнее и эффективнее любого вашего хорошего дизайна.

На этом всё, удачи!