26 сентября 2017

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

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

Принципы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

29 сентября 2017

Дизайн-мышление: карты эмпатии

28 сентября 2016

Сергей Попков. Почему вам стоит перестать быть контрол-фриком

29 ноября 2016

Почему Facebook голубой?

20 октября 2016

Карточки — сильнейший тренд веб-дизайна в 2016 году

27 ноября 2017

Подборка Discover Weekly от Spotify: как машинное обучение находит для нас новую музыку

aic

29 ноября 2016

Оптимизация воронок при помощи User Journey