Женя Арутюнов

Живу в Ростове-на-Дону, работаю арт-директором, рассказываю истории, знаю клёвых ребят.

Ctrl + ↑ Позднее

Восприятие

Все дизайнеры знают принцип близости. С ним дизайн получается очень понятным. Но скучным. Да что уж там — часто выходит вообще фигня.

Чтобы делать кайф, нужен опыт, практика, книги читать, учиться там где-нибудь — это да. Но может, дело ещё и в том, чтобы знать больше разных принципов. Больше, чем один :—)

Я хотел было опубликовать для вас перевод статьи «Принципы гештальта» (автор — профессор Деян Тодорович, Лаборатория экспериментальной психологии, факультет психологии Белградского университета, Белград, Сербия, 2008).

Но вместо этого осмелился пересказать их своими словами и дополнить собственными комментариями о возможном применении этих принципов.

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

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

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

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

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

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

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

Близость

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

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

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

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

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

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

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

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

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


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

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

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

Подобие

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

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

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

И наклон:

И пропорции:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Камуфляж

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

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

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


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

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

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

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

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

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

Ещё пример:

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

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

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

Опыт

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

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

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

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

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

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

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

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

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

Человек, которому лень встать

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

Если ты нормальный человек, то не поленишься сделать себе удобно. А если ты человек, которому лень встать, то не надо потом удивляться, как у других всё получается, а у тебя нет.

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

P. S. Пояснение для самых маленьких. Здесь вы могли бы вспомнить собственные жизненные ситуации — не про чай, кресло и ноутбук, а что-то другое, когда вам было неудобно, но лень исправлять. И в следующий раз постараться так не делать.

Цвет и буква

Вы меня не поймёте, потому что не пользуетесь гугловским Инбоксом — это такой почтовый клиент, состоящий из матириал-дизайна. Им никто, наверное, не пользуется, кроме меня. И всё в нём хорошо (по правде говоря, нет), но есть одна особенная странность.

Если у адресата нет фотки, то отображается цветной кружок с первой буквой имени. И там придумали, что каждой букве должен соответствовать цвет. Не рандомайзером же их раскрашивать. Пусть будет система строгого соответствия. Решено.

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

Ведь фоточка нужна для чего? Чтобы быстрее распознать собеседника. И ровно поэтому буква в круге — лучше, чем ничего. И ровно поэтому нельзя двух разных адресатов с буквой «Л» красить в одинаковый зелёный цвет. Это даёт противоположный эффект. Особенно если один пишет часто, и я уже привык узнавать его как зелёную «Л», а другой пишет впервые, и я целую секунду вообще не врубаюсь.

Не делайте так, прошу.

Как быть, если тебя достали

Силы добра у микрофона.

Ну бесит вас что-нибудь. Какая-нибудь тенденция. Кто-то неправ и вообще дурак. И эти снова, и этот опять туда же. Так бывает. Мне тоже не нравится. Но это не страшно.

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

Вот такой ответ одноклассникам писать незачем:

Что вместо этого можно сделать? Да съехать по-тихому, и через пять лет тоже, и так каждые пять лет. Потому что это экономит силы и никого не травмирует. К тому же, через двадцать пять лет вы можете передумать. Вы же станете совсем другим человеком, ну? Вот радости-то будет! Лол.

И такое писать незачем, хотя всё правда:

А что делать? Принимать меры, конечно. Только локальные, экономные, минимально достаточные. Сейчас научу вас — как раз на примере чёртовых голосовых сообщений.

Вот получили вы его. Бесит? Бесит. Но надо послушать.
 

  1. Если там что-то неважное, сделайте вид, будто никакого сообщения не было. И так каждый раз. Возможно, ваш собеседник заподозрит неладное и проблема решится сама. Просто игнорируйте. Если потом спросит — скажите «неудобно было включать, отвлёкся».
  2. Если там что-то важное, но не критичное — например, коллеги попросили захватить по дороге кофе — игнорируйте. Потом, когда удивятся, где же кофе — извинитесь. Видели сообщение, но не смогли его послушать. Было неудобно. Всё, не надо втирать коллегам, как сильно они неправы. Объясните: «было неудобно, как-то больше к тексту привык».
  3. Если там что-то критичное — например, компаньон опаздывает на поезд, вы ждёте на перроне, а он голосом присылает, что уже взял такси, чтобы догнать и подсесть на следующей станции — во-первых, садитесь скорее в поезд. Хорошо, что вы всё-таки прослушали сообщение, а не сразу яростно удалили. Всё, ничего больше не надо делать, успеете подловить его в другой раз.
     

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

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

Тысячная миллиметра

Не думал, что когда-нибудь напишу эти строки. Потому что я не из этих ребят, а из тех. И я долгое время отрицал системное существование этих.

Те ребята позиционируют объекты с предельной точностью. С максимальной, какую только обеспечивает инструмент. Например, понимает Иллюстратор тысячные доли миллиметра — вот хорошо, будет с точностью до тысячных.

У тех ребят издалека и вблизи выглядит так:

А у этих издалека и вблизи — как-то так:

И эти искренне не понимают, в чём вообще проблема.

Те ребята не тратят на точность дополнительное время или внимание. Они знают, как она делается, по-другому им и в голову не придёт. Они понимают, что точность ведёт к качеству, а погрешности умножаются.

А с этими прямо беда какая-то.

Понять, кто твой клиент

Тимофей:

— К одному менеджеру пришёл клиент. Менеджер позвал меня делать сайт клиенту. Мне не нравится логотип, но его в плане не было. Я предложил менеджеру предложить клиенту переделать логотип. Менеджер не захотел, так как задач и по сайту дофига, а мы не успеваем. Сайт мы почти сделали, менеджер сейчас контролирует разработку, дизайн готов. И логотип я нарисовал на днях, классный. Почти уверен, кто клиенту он понравится. А вот менеджеру — не уверен. Как его показать клиенту, минуя менеджера, чтобы менеджер не обиделся? И стоит ли? Он же тут главный, привёл меня в проект и так далее. 

Тимофей,

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

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

Думаю, дальше ты знаешь.

Кто здесь главный

18+

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

Вы научились говорить безжалостно, прямо и обидно. А особое требование к членам команды — не обижаться. Обижаются только мудаки, нормальные ребята благодарят за критику — критика это комплимент! — и просят ещё.

Так вот, это полная хуйня, дорогие мои.

:—)

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

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

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

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

Вот ваш словарик:
«Вёрстка хуёвая». Это значит «вёрстка неаккуратная; и не забывай, что я здесь главный».
«Шрифты сосут». Это «шрифты не сочетаются; и не забывай, что я здесь главный».
«Текст говно». Значит «текст не годится; и не забывай, что я здесь главный».

Думаю, вы заметили проблему.

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

Итоги года

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

2016   жизнь
Ctrl + ↓ Ранее