Когнитивная нагрузка: как облегчить восприятие интерфейса продукта

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

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

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

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

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

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

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

Подбор правильного контента и его подача

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

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

Джон Бернбах

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

Как снизить когнитивную нагрузку

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

Упрощение

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

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

Интерфейс TED до и после редизайна

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

Краткость информации

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

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

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

Использование разных типов контента

Бернбах советует стараться подавать контент по-разному. Графики и изображения помогают сделать информацию более простой для восприятия.

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

Плохой пример: годовой отчет компании GE. Сайт отчетности сделан аналогично ресурсу Phlips с применением вертикальной прокрутки и parallax-эффектов. Однако с когнитивной нагрузкой в данном случае все гораздо хуже, считает Бернбах. По мнению эксперта, после хорошего первого впечатления, пользователь начинает видеть все больше текста, который в конечном итоге, невозможно хорошо воспринять. Эксперт считает, что в том случае, если контент никак нельзя сделать менее сложным, стоит уделить больше внимания его редактуре и форматированию — дополнительные заголовки и вспомогательная навигация могли облегчить пользователю изучение материала.

Контент должен быть интересным

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

Хороший пример: специалисты Apple реализовали на страницах для продуктов MacBook Air, MacBook Pro и iMac идентичные элементы навигации, использовали аналогичную типографику и фото в едином стиле, но каждый продукт все равно представлен по-разному. Это не дает пользователям заскучать и снижает когнитивную нагрузку.

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

Люди любят мультимедиа

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

Хороший пример: Airbnb использует на своей главное странице контент различного типа — фоном для слогана «Добро пожаловать домой» служат видео из различных стран. Видео помогает заинтересовать пользователей, а наличие узнаваемого слогана формирует у них положительное отношение к бренду.

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

Нужно следовать принципам хорошего дизайна

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

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

Хороший пример: сайт журнала Time после редизайна стал очень легким в восприятии. Дизайнеры оставили много белого, ничем не занятого пространства, использовали крупные шрифты Franklin Gothic и Georgia и поработали над пропорциями контента. В результате, даже очень сложный контент воспринимается легко.

Плохой пример:
изданию The New York Post не удалось справиться с задачами, которые успешно решила команда сайта Time. Страница перегружена элементами, почти не имеет свободного пространства, что осложняет навигацию, кроме того использован не очень хорошо читаемый шрифт Founders Grotesk. Посетителю, попадающему ну эту страницу сложно сориентироваться, в результате вероятность того, что он сразу же с неё уйдет, значительно выше, считает Бернбах.

Сайт журнала Time проще в восприятии чем ресурс The New York Post

Заключение

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