Ошеломленные суетой современного мира и невероятным количеством информации вокруг, люди склонны выбирать простоту, иногда даже не задумываясь об этом выборе.
Чтобы снизить когнитивную нагрузку, пользователи ищут ярлыки, шаблоны и модели, которые делают взаимодействие с цифровым миром и многочисленными каналами коммуникации простым и легким.
Одним из факторов достижения данной цели при разработке UX дизайна является последовательность.
Что такое последовательность, почему это важно и как ее достичь в разрабатываемом приложении или веб-сайте.
Последовательность это одна из 10 фундаментальных эвристик юзабилити, которые являются основными принципами проектирования взаимодействия, определенными Якобом Нильсеном в 1994 году.
Одно из определений, который дает словарь Ожегова термину «последовательный» логически обоснованный, закономерно вытекающий из чего-нибудь. Учитывая тот факт, что сегодня люди перегружены информацией, они склонны выбирать продукты, которые легко понять и с которыми легко взаимодействовать.
С точки зрения пользовательского опыта это означает, что похожие элементы выглядят и функционируют одинаково, что снижает когнитивную нагрузку и делает взаимодействие более плавным и интуитивно понятным.
Более того, последовательность делает пользовательские интерфейсы предсказуемыми и обучаемыми, тем самым создает надежную основу для ощущения гармонии как во внешнем виде продукта, так и в его работе. А гармония всегда желанная часть любого опыта, который у нас есть.
Почему важна последовательность дизайна
Последовательный подход дает следующие преимущества:
- интерфейс становится намного проще для освоения новыми пользователями;
- происходит меньше ошибок, поскольку пользователи меньше запутываются;
- снижается нагрузка на пользователя;
- экономится время и силы на совершение целевого действия.
Таким образом, дизайн сайта объединяет различные элементы пользовательского интерфейса в систему предсказуемых и понятных взаимодействий. Собственно, это то, что мы делаем и в физическом мире, чтобы упростить нашу повседневную жизнь и избежать необходимости снова и снова сосредотачиваться на одних и тех же операциях. Например, все мы храним посуду на наших кухнях, поэтому, даже придя к кому-то в первый раз, вы не будете пытаться искать чашку и ложку в ванной только потому, что это известная закономерность, которой следует большинство людей.
Визуальная и функциональная последовательность
С точки зрения факторов воздействия последовательность может быть визуальной и функциональной.
Визуальная согласованность основана на схожести элементов интерфейса. Очень важно сделать четкие связи между элементами и построить прочную визуальную иерархию из иконок, шрифтов, размеров изображений, кнопок и т.д.
Например, при создании дизайна страницы статьи, все типы текстовых элементов (заголовок, подзаголовки, основная часть текста, цитаты и т. д.) должны использовать одну и ту же систему визуального представления. Пользователь должен воспринимать содержимое страницы как одну целую публикацию, а не как набор случайных сообщений.
Функциональная последовательность означает, что похожие объекты ведут себя одинаково. Например, большинство веб-сайтов используют логотип в верхнем левом углу веб-сайта, кликнув на который, пользователи попадают на главную страницу.
Большинство пользователей привыкли к этому шаблону и ожидают, что он будет работать именно так, даже на веб-сайтах, которые они посещают впервые.
Конечно, это не означает, что необходимо придерживаться только известных шаблонов. Всегда есть место для творческих и нестандартных решений, только нужно учитывать их связи с тем, что пользователи уже знают и используют. Если эта связь слабая, нужно думать, как поддержать пользователей, а не превращать творческий подход в дизайне в раздражение. Необходимо стремиться к единой логике и сходству интерактивных шаблонов.
Эксперименты над компонентами пользовательского интерфейса
Любые эксперименты с элементами пользовательского интерфейса должны быть дважды продуманы ради единообразия. Это особенно верно для основных элементов, используемых в тысячах приложений и веб-сайтов. Пользователи знают их настолько хорошо, что в большинстве случаев им даже не нужно много думать.
Например, с чем бы ни работали пользователи веб-сайта или приложения, когда им нужно что-то найти, они будут искать значок лупы, отмечающий кнопку или поле поиска. Если скрыть функцию поиска за другим изображением или значком, это может испортить впечатление и запутать. Вместо того, чтобы взаимодействовать с контентом, пользователи будут пытаться найти поле для его поиска.
То же самое относится к другим основным и широко распространенным функциям, таким как формы связи, корзина для покупок, чаты и мессенджеры, сохранение элементов в списках желаний, выполнение вызовов и т. д. Перед тем как поэкспериментировать с их внешним видом и размещением, хорошо протестируйте их и убедитесь, что пользователи смогут с ними взаимодействовать.
Как сделать дизайн последовательным
Ниже рассмотрим 4 принципа достижения единообразия в дизайне веб-сайта или мобильного приложения.
Реализация узнаваемых шаблонов
Существует множество моделей поведения и привычек, которые у пользователей уже есть до того, как они увидят ваше приложение или сайт. Этот набор знаний основан на их предыдущем опыте и, в зависимости от подхода дизайнеров, может помочь или испортить пользовательский опыт.
Например, еще до появления популярности цифровых продуктов для статистики и диаграмм большинство пользователей ассоциировали красный цвет с отрицательным балансом или уменьшением, а зеленый с положительным балансом или увеличением. Используя этот шаблон, известный миллионам людей разных возрастов и национальностей, упрощается визуализация данных. Кроме того, окрашивание кнопки приема входящего вызова в зеленый цвет и отклонение вызова в красный снижает когнитивную нагрузку на пользователей, поскольку они привыкли к такой модели и им не нужно думать, какую кнопку нажать.
Типографика ума и цветовое сходство
Среди наиболее важных факторов визуальной согласованности дизайнеры UX часто упоминают цвет и типографику. Не секрет, что они оба могут влиять на визуальный стиль, эмоциональный фон и поведение пользователей. Поскольку оба продукта имеют решающее значение для визуального восприятия, они позволяют пользователям ощущать целостность и целостность продукта при последовательном использовании. Вот почему должна быть хорошо продуманная система дизайна с использованием определенных шрифтов и цветов для текстового контента и элементов макета.
Как уже было сказано выше, цвет также может быть фактором внешней согласованности. В подавляющем большинстве случаев цвет воспринимается человеческим глазом до того, как мозг декодирует значки, изображения или текст, поэтому лучше проанализировать этот фактор и сделать его полезным для создания интуитивно понятной навигации и создания положительного пользовательского опыта.
Помните пример с цветами кнопок приема или отклонения вызова? Если вы хотите испортить этот опыт, просто поменяйте их цвета и сделайте кнопку приема вызова красной, например, оправдывая это тем, что красный очень заметен. Даже, если значок выглядит абсолютно четким, большинство пользователей ошибочно принимают его за кнопку отказа только потому, что они видят и декодируют цвет намного быстрее, чем значок или текст, особенно для такой базовой операции.
Последовательность в размещаемых изображениях
Изображения играют огромную роль не только в добавлении красоты и стиля интерфейсу. Они воспринимаются быстрее и проще, чем текст, поддерживают удобство использования, усиливают сообщение, создают необходимое настроение и атмосферу. Однако это не означает, что дизайнер может просто взять разные понравившиеся изображения и добавить их в интерфейс. Как и типографика, изображения должны представлять систему, а не просто случайный набор. В этом случае они становятся еще одним фактором обеспечения согласованного взаимодействия с пользователем.
Структурирование контента
Помните классическую картинку, объясняющую визуализацию данных с помощью Lego Blocks?
С любыми данными всегда проще работать, если они структурированы. Даже художественные книги представляют собой организованную систему глав. Создание хорошо структурированного контента позволяет пользователю сосредоточиться на информации без предварительной работы по ее упорядочению и пониманию взаимосвязей. И это следует делать не для отдельных экранов или страниц, а для веб-сайта или приложения в целом, чтобы оно было простым и последовательным в любой точке взаимодействия.