Почему последовательность в дизайне — не всегда хорошо

В одном из своих недавних постов на LinkedIn консультант по дизайн-системам Брэд Фрост упомянул о печально известном редизайне иконок приложений Google, который был проведен в 2020 году, отметив: «Спустя столько времени я все еще считаю это решение большой ошибкой». Эрика Холл, соучредитель Mule Design, оставила комментарий: «Глупая последовательность. Ненавижу ее».

Я согласен с мнением коллег. Проблема в том, что обновленные иконки Google стали слишком однородными: теперь их невозможно быстро отличить друг от друга.

На своих занятиях по UX я часто (с некоторой долей иронии) говорю о «тирании последовательности». Мой вывод таков:

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

Иногда чрезмерное стремление к единообразию негативно сказывается на юзабилити. Мы должны научиться замечать такие моменты.

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

«Последовательность — это инструмент, а не правило». Джон Маски, старший контент-стратег Microsoft

Я говорю про «тиранию последовательности» уже несколько лет. В 2013 году я даже выступил на SXSW (ежегодное мероприятие, включающее в себя ряд музыкальных, кино- и медиафестивалей и конференций) с докладом на эту тему. Поэтому я испытал огромное облегчение, когда в конце концов обнаружил, что со мной согласны гораздо более маститые представители индустрии, чем я сам.

Например, Стив Круг в своей замечательной книге «Не заставляйте меня думать» приходит к простому выводу: «Ясность важнее последовательности».

Он объясняет этот принцип довольно подробно:

Последовательность часто преподносится как абсолютное благо. Люди выигрывают множество споров о дизайне, просто говоря: «Мы не можем этого сделать. Это будет непоследовательно».

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

Такое случалось и в моей практике. Некоторые люди привыкли использовать последовательность как решающий аргумент — они будто объявляют вам: «Шах и мат!» ♟️. Однако, как заключает Круг: «Если дизайн может стать гораздо понятнее, но для этого вам придется немного поступиться последовательностью, делайте выбор в пользу ясности».

В 2018 году американский исследователь и юзабилити-эксперт Джаред Спул написал целую статью на эту тему «Последовательность в дизайне — неправильный подход». Он сформулировал свою точку зрения так:

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

В качестве примера Джаред приводит кейс Avis. Компания выделила звездочками необязательные поля формы вместо обязательных, поскольку их было всего 10% от общего количества. Да, этот способ маркировки являлся «непоследовательным» с точки зрения общепринятых паттернов, но имел смысл (и был последовательным) в контексте сайта Avis.

***

Перейдем к практике.

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

Раньше мы пытались сделать выпадающие меню невероятно последовательными: они должны были быть одинаковой ширины, возможно, даже одинаковой длины, содержать одни и те же шрифты и цвета. Это имело смысл на ранних этапах развития Интернета, когда низкие скорости не позволяли нам реализовать более сложные взаимодействия и стили навигации.

Подобные решения нередко встречаются в вебе и сейчас. Вот, например, достаточно стандартный «олдскульный» пример с сайта Nielsen Norman Group. Просто и эффективно.

Однако несколько лет назад в интерфейсах начали появляться так называемые «мега-меню». Они содержат гораздо больше полезной информации и иногда даже позволяют посетителям сравнивать товары прямо внутри панели навигации. Теперь выпадающие списки не обязательно должны иметь одинаковый лейаут и размеры. Да, желательно, чтобы шрифты и цвета оставались последовательными, но ценность, которую предоставляют пользователям разные паттерны, может варьироваться.

Взгляните на эти выпадающие списки с сайта Mercedes-Benz USA. Первый (Vehicles) позволяет сравнивать модели по внешнему виду и стартовой цене, не покидая страницу, на которой вы находитесь.

Во втором выпадающем меню (Shopping) представлены сведения и инструменты, которые могут пригодиться потенциальным покупателям, а также раздел со специальными предложениями и ссылка на тест, который позволяет подобрать идеальный автомобиль.

Третий выпадающий список (My Account) содержит кнопку входа в аккаунт и приглашение посетить ресурс Mercedes me. Он отличается от двух предыдущих своими размерами, лейаутом и цветом фона.

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

Помните: инструмент, а не правило!