26 сентября 2017

Как снизить когнитивную нагрузку на пользователя: 7 принципов дизайна

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

Принципы

  1. Откажитесь от элементов, в которых нет явной необходимости
  2. Используйте популярные дизайн-паттерны
  3. Избавьтесь от лишних задач
  4. Сведите к минимуму число опций, предлагаемых пользователю на выбор
  5. Показывайте все опции в одном блоке
  6. Позаботьтесь об удобочитаемости текста
  7. Будьте осторожны с иконками

1. Откажитесь от элементов, в которых нет явной необходимости

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

2. Используйте популярные дизайн-паттерны

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

3. Избавьтесь от лишних задач

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

4. Сведите к минимуму число опций, предлагаемых пользователю на выбор

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

5. Показывайте все опции в одном блоке

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

6. Позаботьтесь об удобочитаемости текста

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

7. Будьте осторожны с иконками

Исследование показало, что иконки могут плохо запоминаться, и, вопреки ожиданиям, могут увеличивать когнитивную нагрузку, требуя дополнительной умственной работы по извлечению смысла и  распознаванию знаков. И хотя универсальные значки (такие как «распечатать», «закрыть», «включить/поставить на паузу», «повторить», «твитнуть», «поделиться на Facebook») воспринимаются хорошо, считывание всех остальных иконок будет строиться на основе прошлого опыта пользователя, на который не распространяются никакие стандарты. Используйте силу графики, но сопроводите знаки подписями, чтобы избежать двусмысленности в толковании знака и донести точный смысл.

Дальше — большe

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы.

21 июля 2016

Что ждёт цифровой банкинг в 2016—2017

14 сентября 2016

Дуплекс в веб-дизайне: обзор цветового тренда, который захватывает мир

15 ноября 2016

Основные тренды дизайна 2016

20 сентября 2016

Эволюция сайтов российских компаний: от зари рунета до наших дней

11 октября 2017

Лучшие практики: микро- взаимодействия

16 июня 2016

Микромоменты: руководство по успешному мобильному маркетингу