Привет!

Необходимость UX-дизайна: Сокращение информационной нагрузки [digital note #26]

Валерия СластенниковаВалерия Сластенникова

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

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

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

“Если ты стоишь на пути у грузового поезда, который мчится на высокой скорости, то маловероятно, что это хорошо закончится. Для того, чтобы изменить направление чего-то динамического, нужны большие усилия. Вместо того, чтобы заставлять пользователя отвлекаться от чего-то, переместитесь туда, где он находится” - Люк Вроблевски, Директор по продукту в Google.

Рассмотрите альтернативы. Сложный и запутанный интерфейс будет вынуждать пользователя решать далеко не первостепенные задачи. Если интерфейс, функционал, навигация слишком запутанны, пользователю нужно будет много думать. А для того, чтобы вернуть человека к реальности и дать ему вспомнить, что он сидит у монитора своего компьютера, достаточно секундной заминки. Чрезмерное мышление называется когнитивной перегрузкой или информационной перегрузкой и в этой статье мы расскажем, как этого избежать.

Для начала стоит выяснить, что конкретно подвергается риску в нашем мозгу при перегрузке.

Научное обоснование когнитивной перегрузки

Когнитивная нагрузка - это общее количество информации, которую может обработать рабочая память человека. Перегруженность появляется когда рабочая память получает больше информации, чем может обработать. Это приводит к растерянности и неспособности принять решение.

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

Джон Свеллер и теория когнитивной загрузки

Исследования познания начались несколько столетий назад. Но именно Джон Свеллер, австралийский педагог-психолог, в 1980-х годах применил теорию в учебном проектировании. Он стремился создать наилучшие условия для запоминания информации учениками. Другими словами, какой лучший способ заставить урок застрять в памяти?

Кульминацией работы Свеллера стала публикация его работы в 1988 году “Теория когнитивной нагрузки, трудности обучения и учебное проектирование”, которая позже в 1994 году была переработана и переиздана. Полученные им выводы относительно ограниченности рабочей памяти будут крайне полезны дизайнерам.

Во многом публикация Свеллера основана на наработках Миллера. Результаты исследований последнего прочно укоренились в цифровом дизайне, особенно в технике чанкинга, о котором пойдет речь дальше в статье. Он также побудил многих дизайнеров ограничить количество пунктов меню в пределах от 5 до 9. Хотя в цифровом дизайне этот подход был раскритикован.

Хотя изначально эти теории предназначались для сферы образования, к UX-дизайну они относятся не меньше. Те же приемы, которые повышают запоминаемость, снижают неудобство работы пользователя.

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

Представьте, что каждый раз, когда вы открываете холодильник, нужно отгадать загадку “Что ходит на 4 ногах утром, 2 днем и 3 вечером?”. Также чувствует себя посетитель сайта с дизайном, у которого плохой пользовательский опыт - растерянно и разочарованно.

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

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

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

Применение в дизайне

Лучшие советы из книги Стива Крага, который сделал популярным применение теории когнитивной нагрузки в дизайне:

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

О роли когнитивной нагрузки в дизайне говорили многие другие авторы.

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

Наиболее частые причины когнитивной перегрузки

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

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

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

1. Лишние действия

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

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

Решения

Отличный способ найти ненужные элементы: Перечислите каждый шаг, который должен осуществить пользователь для достижения цели. Например, отправка e-mail может выглядеть так:

  1. Нажать на иконку почты.
  2. Нажать в поле “Отправить”.
  3. Ввести адрес почты.
  4. Нажать в поле “Тема”.
  5. И так далее.

Перечитайте список и найдите лишнее. Появились мысли?

Убрать шаг 2 можно совсем, если курсор в поле “Отправить” будет появляться автоматически. Это избавит пользователя от проблем, но незначительно. Но каждый лишний шаг, который вы убрали, уже победа.

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

2. Гипермотивация

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

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

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

Решения

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

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

После оптимизирования страницы в таком ключе, нужно организовать оставшиеся элементы таким образом, чтобы они мгновенно были понятны пользователям.

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

Вот как Groupon ставит меню (текстовый каталог справа) в противовес специальному предложению (текстовый блок справа). Применение цветных блоков и изображений создает структурированную форму песочных часов, незначительно сжатую в середине.

Симметрия - это не просто поставить одинаковые блоки в противоположных частях экрана. Она заключается в балансе визуальной нагрузки и визуального направления. Таким образом, асимметричные экраны тоже могут быть организованными, как на примере ниже.

3. Слишком много функций

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

Закон Хика говорит о следующем феномене: чем больше возможностей у пользователя, тем больше времени ему нужно для принятия решения. Представьте, что каждая опция - это вспышка света. Слишком много вспышек будут перевозбуждать пользователя, как показано ниже.

Решения

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

Однако скрытая навигация делает ее менее понятной, поэтому дизайнеры, работая с e-commerce проектами и новостными сайтами должны быть предельно осторожны. Ссылки на другие продукты минимизируют недостатки скрытого меню. Его можно также не использовать, а сделать обобщающие категории в заголовке, так чтоб они помещались в одном меню навигации.

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

4. Слишком много контента

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

Проблема этой компании не в том, что она предлагает слишком много товаров, а в том, что она предлагает их одновременно.

Решения

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

Хотите разместить большое количество изображений на главной странице интернет-магазина? Вместо перечисления их строках и столбцах, сгруппируйте их по типу.

Как вариант, сгруппировать в чанки по производителю.

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

5. Неоднозначный интерфейс

Главная ошибка при когнитивной перегрузке - запутанный интерфейс. Пользователь не должен долго выяснять, как выполнить желаемое действие и тратить силы и внимание на расшифровку иконки.

Решения

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

А что, если нужно описать новую функцию? Сделайте так, чтобы она говорила сама за себя и не требовала объяснений. Избегайте неопределенных символов, особенно если они могут ошибочно быть приняты за что-то иное.

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

6. Страницы и функции, которые трудно найти

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

Решения

Расставьте приоритеты согласно предпочтениям пользователей. Ваша целевая аудитория думает не так как вы. Поэтому учитесь у них.

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

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

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

7. Внутреннее противоречие

Например, на главное странице сайта для обозначения активной ссылки используют подчеркнутый текст синего цвета. А на другой странице - просто текст синего цвета без подчеркивания. Даже если на первую ссылку пользователь не кликал, он замешкается, увидев вторую.

Опечатки и грамматические ошибки имеют такой же эффект. Запомните, хороший дизайн незаметен, а вот ошибки в основном видны.

Решения

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

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

Выводы

Стив Круг как-то сказал: “Не заставляйте меня думать”. Аналогично думают и пользователи, взаимодействуя с сайтом.

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

Статья была слишком большая? Вот несколько тезисов, чтобы вы не были информационно перегружены:

  • Когнитивная нагрузка - любая информация, которая заставляет напрягаться рабочую память. Когнитивная перегрузка происходит, когда слишком большой объем информации мешает принятию решения.
  • Используйте различные типы контента и структурирование страниц, чтобы избежать визуальный беспорядок.
  • Скрытое меню помогает пользователям управлять большим количеством опций, которые доступны в одно время.
  • Чанкинг и пошаговые формы предотвращают когнитивную перегрузку.
  • Узнаваемые элементы позволяют пользователям быстро ориентироваться.
  • Стройте интерфейс, основываясь на том, как думает целевая аудитория.
  • Несоответствие в образах и пользователях, также как и ошибки и опечатки, отвлекают от главных задач.
  • Удалите лишнее, где возможно.

Reducing Cognitive Overload For A Better User Experience