Когнитивная нагрузка и дизайн.

Недавно мне пришлось немного разобраться в UI/UX и я немедленно пришла в восторг. Ух ты, научный подход к дизайну! Исследования! Ссылки на Даниэля Канемана и Дена Ариэли! Дайте два.

Поэтому я теперь читаю все, до чего дотягиваюсь, вот например блог Джоэла Марша, и ссылки из него. Так я прочла текст Йона Яблонски о когнитивной нагрузке и немедленно захотела его перевести.
И даже начала, но, во-первых, переводчик из меня сомнительный, во-вторых, мне захотелось сделать к этому тексту такое количество примечаний и дополнений. Поэтому получился пересказ с дополнениями.

Для начала немного о работе памяти вообще:

Рабочая память

Если очень-очень сильно упростить, то можно сказать, что у нас есть два типа памяти: долговременная и рабочая.

Долговременная память, как ясно из названия, отвечает за длительное хранение информации. Информация попадает туда не сразу, и не прямо, а из рабочей памяти.

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

Барбара Окли в Learning how to learn приводит такие метафоры: долговременная память — как склад, в ней все хранится долго и надежно. 
А вот рабочая память — это что-то вроде меловой доски, к тому же, маленькой и не очень хорошей. На нее помещается очень мало записей, и они не четкие.

Сколько очень мало? Примерно четыре вещи одновременно.
(Раньше считалось, что семь на основании предположения Джорджа Миллера, но впоследствии Алан Бэддли эскпериментально пришел к числу четыре).

Понятие “вещи” (“chunk”) довольно размытое — так, например, для ребенка, который только учиться читать, каждая буква — это отдельная “вещь”, которую нужно распознать, запомнить в рабочую память, и потом сложить из букв в рабочей памяти слог. Взрослый же при чтении может удержать в рабочей памяти несколько предложений сразу, а то и несколько абзацев, потому что внешний вид букв, слогов и даже многих слов уже лежит в его долговременной памяти. 
Новая информация занимает много рабочей памяти, знакомая — мало. Это важно.

Что еще важно? Когда наша рабочая память уже заполнена, и мы сталкиваемся с чем-то еще, то новая информация либо вытесняет из рабочей памяти какую-то предыдущую информацию, либо мы вовсе “зависаем”.
Суммарные усилия, которые нужны, чтобы удерживать в рабочей памяти информацию, называются когнитивной нагрузкой.
(Cognitive load на английском, не нашла общепринятого русскоязычного термина, перевела как в голову пришло)

Когнитивная нагрузка и дизайн сайтов.

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

Что в этом плохого?

То, что если рабочая память окажется перегружена, пользователь может вообще забыть, что он забыл на нашем сайте.
Или почувствовать себя нехорошо, и решить, что сегодня не тот день.
Или просто подумать “слишком сложно” и закрыть страницу.
Mission failed.

Яблонски называет три основных фактора, которые увеличивают когнитивную нагрузку:

  • слишком много вариантов выбора
  • нужно слишком много думать
  • неясность

Не могу сказать, что я не согласна с этим списком, но два последних пункта кажутся мне мягко говоря, неочевидными.
Как можно измерить ясность?

Косвенно о таких вещах говорят штуки вроде статистики посещений и карт внимания. Но с ними есть одна загвоздка — они указывают только на проблему (и то не всегда точно), но не на ее решение.

Я думаю, что измерить среднюю когнитивную нагрузку среднего пользователя — задача малореальная, и что в этом вопросе вряд ли можно придумать какие-то универсальные правила.
Но разбирая примеры явлений, которые уменьшают или увеличивают когнитивную нагрузку, можно лучше почувствовать это явление и научиться с ним работать. Понимание — ключевая вещь.
Нам нужно понять, как работают наши сознание, внимание и память и научиться ими управлять до определенной степени. 
Итак, к примерам.

Что уменьшает и что увеличивает когнитивную нагрузку?

Список ниже представляет собой пересказ списка из статьи Йона Яблонски, дополненный примерами и моими собственными соображениями.

Обилие элементов
Анимация, звук, яркие цвета, декоративные элементы, неочевидная композиция — все это загружает рабочую память и увеличивает когнитивную нагрузку. 
Соответственно, прибегая к этим вещам, нужно быть готовым пожертвовать вниманием в каком-то другом месте. Несколько очень ярких цветов могут быть оправданы, если вы используете цветовое кодирование, как сайт the museum of the world, например.

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

Узнаваемые дизайн-паттерны.
Когда мы используем паттерн, который уже знаком пользователю, например, скрываем меню за иконкой гамбургера, мы снижаем когнитивную нагрузку, потому что пользователь уже понимает, с чем имеет дело, и ему не нужно прикладывать усилия чтобы понять, как работает незнакомый элемент. 
(Йон Яблонски здесь дает ссылки на сайты с готовыми решениями: Design Patterns on CodePen и Blueprint Archives on Codrops).

Опции по умолчанию 
Необходимость выбирать, а так же думать что вписать в какое-то поле увеличивает когнитивную нагрузку. Формы, заполненные по умолчанию (с возможностью редактирования) ее снижают.
Еще сильнее можно уменьшить когнитивную нагрузку, сделав значение по умолчанию персонализированным.
Например, сортировка товаров на Амазоне учитывает предыдущие покупки. А музыкальный сервис Pandora полностью построен на идее избавить пользователя от мук выбора — алгоритм, учитывающий такие вещи, как тональность, высота голоса исполнителя, стиль и т.д. подбирает новую музыку с учетом введенных предпочтений (и делает это очень хорошо). 
Это работает и в обратную сторону — там, где к выбору нужно привлечь внимание, не стоит ставить значение по умолчанию. Например в графе “я прочитал пользовательское соглашение и согласен с ним” не стоит ставить галочку по умолчанию — соглашение все равно мало кто прочтет, но по крайней мере пользователь заметит, что это соглашение существует, и что он с ним согласился.

Меньше выбора
Когда мы сталкиваемся со слишком большим количеством опций, то наша когнитивная нагрузка увеличивается, и нам труднее сделать выбор. Это явление называется “паралич анализа” (так же “паралич выбора”, подробности). 
Поэтому не нужно предлагать пользователю меню на двадцать пунктов. Лучше сделать меню двухуровневым, сгруппировав пункты в четыре группы. Например.

Мы не знаем о том, чего не видим
У проблемы выбора есть обратная сторона — мы не замечаем то, что спрятано, а кроме того, не всегда помним, что находится в какой группе. Вот взять, например, фейсбук — попробуйте вспомнить, как там настроить группы друзей? А как там настроить, кто может комментировать ваши посты, а кто нет?
Сюрприз! Это делается в двух разных местах, причем в обоих случаях неочевидных. Когда пользователю приходится прилагать усилия чтобы вспомнить или додуматься, где находится та или иная опция меню, когнитивная нагрузка увеличивается. 
Поэтому стоит группировать схожие опции, чтобы ответ на вопрос “куда мне ткнуть чтобы получить икс” был очевидным.
Все настройки — в настройках, и так далее.

Иконки не всегда очевидны
Общепринятые иконки, такие как, например, “закрыть”, “сохранить”, “распечатать”, “плей/пауза” распознаются хорошо.
Новые для пользователя иконки без расшифровки часто непонятны, и, соответственно, увеличивают когнитивную нагрузку. Поэтому лучше всегда сопровождать иконки текстовыми подписями. 
Хорошая статья Томаса Битбайера на эту тему:
The best icon is a text label

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

Что еще почитать на тему?

  • Просто. Быстро. Минималистично — один из уроков Джоэла Марша о пользовательской психологии, объясняющий чем отличаются эти три понятия и как сделать взаимодействие с сайтом более простым для пользователя.
  • Психофизиология графических интерфейсов — длиннющая статья Ярослава Шуваева. В ней есть неточности, и она с моей точки зрения очень неудобочитаемая, но в качестве обзорного материала обо всем понемногу она неплоха. Охватывает не только проблемы когнитивной нагрузки, но и вообще психологию восприятия.
  • Книга Сьюзен Уэйншенк “100 главных принципов дизайна”, главы 19–49.