Увлечение моих последних лет — когнитивный дизайн. То есть мелочи, позволяющие нашему мозгу экономить кучу времени и сил при работе с интерфейсом. Дизайн, который их учитывает, здорово напоминает магию: он срабатывает даже раньше, чем человек начинает думать. Когнитивный дизайн относится к иконкам с опаской.
Зачем нужны пиктограммы? Чтобы на глазок отделять одну вещь от другой. Файл от папки, туалеты от зала прилета, один инструмент от другого.
Почему набранный заглавными буквами текст сложно читать? Потому что слово в капсе напоминает прямоугольник. Издали оно ничем не отличается от другого слова такой же длины. А вот строчные буквы друг на друга не похожи, и нам не обязательно читать слово целиком, чтобы его понять. Все знают этот текст: «По рзеузльаттам илссоевадний одонго анлигсйокго унвиертисета...». Он остается читаемым благодаря настройке сканера в нашей голове — общая форма для нас важнее содержимого.
Текстовые блоки, с другой стороны, на глаз не различить. Чтобы узнать, о чем они, придется их прочитать. Вот почему когда надо реагировать быстро — скажем, в аэропорту — на помощь приходят иконки. Они призваны:
Помочь нам быстро отличить один блок от другого. В идеале, моментально, чтобы напрягаться вообще не пришлось. В глобальном смысле — метафорически показать, о чем вообще идет речь.
Визуально отделить один блок от другого, чтобы они не слипались. Так же, как это делают буллиты или цифры в списке.
Окей, а что в интерфейсах творится в реальности? Иконки стараются сделать похожими друг на друга. То есть добиться того, чтобы их главная задача — отличаться — не выполнялась. Еще семь лет назад на сайтах можно было встретить вот такой набор:
Да, с точки зрения программы, гораздо проще сначала придумать иерархию, а потом расставить все по полочкам. Чтобы путь по сайту был вот таким: главная → раздел → внутренняя → блок → абзац → кнопка «купить». А искомая функция стала призом для самых выносливых. Когда интерфейсы делали программисты, все было в порядке. Но со временем обнаружилось, что одни функции важнее других! А самые важные инструменты хочется видеть сразу на главной — как спидометр и датчик бензина на приборной панели.
Сегодня вместо того, чтобы заставлять пользователя искать 1 нужную кнопку из 10 похожих, ее одну и оставляют. Или, по крайней мере, делают важнее остальных:
А в идеале — вообще избавляют от необходимости куда-то щелкать (оба примера с сайта goodui.org):
Просветление дня: элементы интерфейса неравнозначны. Коммунистические интерфейсы не работают. Вся инфографика построена на поиске баланса между сходством и различием. И каждый хороший интерфейсщик должен стремиться к тому, чтобы когнитивный дизайн отодвинул иерархический в сторонку.
Между собой мы называем принцип неравнозначности мезальянсом.
В тех местах, где плохой дизайнер рисует иконку, хороший проектирует виджет.
Виджеты — это «окна» в приборной панели, которые ведут вглубь интерфейса. Главная особенность виджета в том, что он делится с нами нужной информацией еще до того, как мы что-то сделали. Пример типичного виджета — новостная лента из обрывков новостей вместо ссылки «новости». Другой пример — кнопка с заголовком «На счету 23000 руб» вместо «Статистика». И форма Яндекса для перевода, выпадающая после щелчка по «Отправить заявку на воркшоп».
Виджеты редко выглядят одинаково, ведь они устроены по-разному — так, чтобы выполнять свои функции как можно лучше. Это возвращает нас к началу разговора: раз функции неравнозначны, с какой стати их иконки должны быть похожими?
Одинаковые элементы должны работать одинаково. Похожие элементы должны работать похожим образом. А непохожие — по-разному.
То есть стандартизация отпадает. А значит, иконки в интерфейсах нужны только чтобы быстро что-нибудь узнать. Где митинг-поинт, если ты потерялся в аэропорту? Далеко ли заправка в навигаторе? Куда ткнуть, чтобы фото запостилось в Инстаграм?
Если на поиск иконки хватает доли секунды, пользоваться ей допустимо. Если нужно больше — стоит подумать, как переделать сценарий использования.
Мы редко рисуем иконки в дизайне, но когда рисуем — все это учитываем. Например, иконки ключевых особенностей «базового» выглядят так:
Диалог из фейсбука:
— А че все разные такие?
— С моей точки зрения, пока еще недостаточно разные. Но с этим позже разберемся.
Чтобы моя мысль стала понятнее, нужно вспомнить систему дорожных знаков. Она несовершенна, но использует максимум доступных возможностей. Если сгруппировать знаки по смыслу, идея окажется простой: треугольные предупреждают, круглые с красным краем запрещают и так далее.
Изображение с сайта «Еврофорвард»
«Когнитивность» — это узнавание. Человек узнает объект примерно в таком порядке:
По месту. Люди острее реагируют на перемещение кнопок, чем на их изменение. В этом месте пользователь обращается к опыту работы с этим конкретным интерфейсом.
По форме. Она позволяет с места отнести иконку к одной из известных категорий. В этом месте становится понятно, что с ней в целом надо будет сделать.
По цвету. Здесь работает не только конкретный опыт, но и воспитанное восприятие цветов. Зеленый — хорошо, красный — плохо, фиолетовый — самая дорогая карточка в «Монополии» и так далее.
По деталям: стилю, толщине, кривизне линий. По хвостикам и завитушкам. По картинке, в конце концов.
После каждого этапа идет проверка: нужная это иконка или нет. Чем раньше проверка проходится, тем удобней и быстрее работать. Остается добавить, что чем чаще мы видим картинку, тем быстрее это все происходит.
С нашими иконками все обстоит так же, впрочем, в своей эволюции до пика они пока не дошли. Вот эти отвечают за технические задания, обратную связь и вопрос-ответы. Они круглые:
Медийные иконки раньше тоже были круглыми, но в новой редакции избавлены от рамки:
→ 
Социальные сети (их нет нужды перерисовывать) квадратные и синие:
Кофе-коучинг — это деловая встреча в кафе за чашкой кофе. В противовес ей онлайн-коучинг обозначен большой домашней чашкой чая, стоящей на столе рядом с десктопом. Обе в форме ромба:
Остаются иконки, которые к одной категории не отнесешь: например, партнерские логотипы или иконки, которые пока слишком молоды и своей формы не заслужили. Но мы и не стремимся вершить насилие. В данном контексте они работают буллитами — отделяют один текст от другого. И заодно заявляют: «Смотрите, сколько в этом воркшопе крутых фишек!».
Ну а разница в их внешнем виде еще понадобится для других контекстов. Но о них — в другой раз.
Вадим Паясу — дизайн-тренер, практик, студийный консультант.
Принес в русскоязычное дизайн-сообщество идею объединения дизайна, онлайна и обучения. Продолжительно и успешно обучает одну из самых сложных для обучения аудиторий — дизайнеров, в чем показал рекордную скорость доведения студентов до результата, в том числе, дистанционно. Предпочитает практические решения сугубо теоретическим знаниям.
KeyVisual basic — интенсивный онлайн-воркшоп о создании рекламной графики без умения рисовать. После прохождения воркшопа дизайнеры способны выдавать качественную графику для 99% заказов на сайты и баннеры, уличную рекламу и полиграфию.