Как менеджеру научиться различать качество дизайна — базовые принципы. Часть 2
Привет, друзья! Я Иван Ребиков, основатель и управляющий партнер Landau Interactive. В первой части статьи мы разобрали, как природа повлияла на представление человечества о дизайне, и почему веб-дизайн — история в первую очередь про инженера, а не про творца.
Сегодня поговорим о законе близости, правиле внутреннего и внешнего, сформулируем принципы группировки текста и выясним, почему так трудно читать Википедию.
Закон близости, или как разложить все камушки по кучкам
Закон пришел из гештальтпсихологии и помогает правильно выстраивать визуальную коммуникацию.
Закон близости
Расположенные близко друг
к другу объекты мозг
воспринимает как группы.
Иными словами, разделение объектов на группы с помощью пустых мест или с помощью разделителей является нашим основным средством упорядочивания мира. За кажущейся простотой закона скрывается гигантская философская глубина.
Рассмотрим пример, где мы последовательно видим сначала три группы объектов, затем две, а потом пять групп.
Группы визуально разделены, и в интересующей нас степени дискретизации, мы можем управлять упорядочиванием уже сгруппированных объектов.
Правило внутреннего и внешнего, или как не потерять смысл
С законом близости тесно связано правило внутреннего и внешнего. Усвоив его, можно уже завтра бросать работу и устраиваться джуниор дизайнером в любую компанию мира: вас примут с распростертыми объятиями просто потому, что мало кто из джунов его знает.
Правило внутреннего и внешнего: внутренний отступ всегда явно меньше внешнего.
Иными словами, эффект группировки получается за счет уменьшения внутреннего отступа. Рассмотрим довольно понятный пример.
В надписи нарушено правило внутреннего и внешнего, поэтому мозг разбивает части слова «выезд» в разные группы. Это вызывает когнитивный диссонанс, нам становится некомфортно, ситуация комична и глупа.
Теперь взглянем на сайт, оформление которого не помогает, а мешает пользователю:
Здесь внешний отступ текстового блока такой же, как и отступ внутри блока, и такой же, как отступ до следующего блока. Что к чему относится, непонятно, в целом текст кажется «простыней», на которую жаль тратить время. Система заголовков тоже вводит в заблуждение.
Таких примеров на самом деле масса не только в отдельных текстах, но и внутри сервисов, сайтов и приложений.
Например, такая кнопка выглядит непривлекательно и отталкивает нас, потому что внутренний отступ больше, чем отступ от слова до краев кнопки. Даже в самой минимальной дискретизации закон тоже работает.
А здесь отступ между буквами больше, чем отступ между строками. Такая надпись также воспринимается некомфортно.
Кажется, что закон близости и правило внутреннего и внешнего довольно очевидны и просты. Но если мы посмотрим на мир вокруг, на приложения и сайты мы заметим гигантское количество несоответствий и ошибок, подобных тем, что мы сейчас разобрали. Чаще всего наблюдать такие вещи просто неприятно на подсознательном уровне, а в худшем случае ошибки мешают понять смысл сообщения.
Еще два примера: найдите хороший
Вот еще пара примеров применения законов дизайна, которые мы обсудили. Попробуйте сначала сами оценить картинки с точки зрения соблюдения или нарушения законов близости и внешнего и внутреннего.
Конечно, мы все равно «цепляемся» за заголовки и картинки, как утопающий за спасательный круг, но читать такой текст неудобно и некомфортно, потому что он не разбит на явные, сразу воспринимаемые группы.
Безусловно, неправильные отступы и нарушение группировки не превращают страницу в сайт-катастрофу, но делают его неудобным для нашего восприятия. Все то, что мы называем плохим дизайном при верстке блоков, от чего испытываем дискомфорт, объясняется незнанием дизайнером простейших законов и правил.
Вот пример хорошего текста на Дзене, где соблюдается и закон близости, и правило внутреннего и внешнего.
Как правильно сгруппировать текст: секреты блоков и отступов
Разберем на конкретном примере, как правильно организовать отступы внутри текста и за пару минут получить +100 к читабельности.
Поехали:
- Разделяем блоки: выделяем заголовок, подпись к заголовку и блок основной статьи.
- Выделяем сущности заголовков второго и третьего уровней и определяем отступ между ними.
- Определяем отступ между заголовками и текстом.
- Повторяем процесс на следующих блоках.
Готово! На базе рассмотренных нами законов мы быстро собрали текстовый блок, основываясь на размере отступов.
Теперь сравним наш блок, например, с Википедией, и поймем, почему ее так неудобно читать и почему, начав изучение статьи о крестовых походах, мы быстро отвлекаемся и через полчаса обнаруживаем себя совершенно в другом месте. Если бы создатели энциклопедии задумались о принципах группировки, скорость изучения статей была бы гораздо выше.
На этом завершим сегодняшний разговор.
В следующей статье разберем, что и почему вызывает отвращение в дизайне, как играть со шрифтами и плести модульные сети. Не переключайтесь!
Подписывайтесь на наш Телеграм, чтобы не пропустить анонс третьей части.