Как снизить когнитивную нагрузку на лендинге, чтобы увеличить конверсию? часть 1

Posted on by riasevastopol

Лучший пользовательский опыт — тот, что не подмечают. На первый взгляд он может показаться несложным, но за данной простотой стоят много ответственных UX-ответов. Если вы все сделали верно, пользователь не должен видеть ваших стараний.

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

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

Это и имеется когнитивная перегрузка (cognitive overload), которой необходимо избегать всем обладателям лендингов.

Когнитивная перегрузга является процессомполучения для того чтобы количества информации, с которым оперативная память (working memory) неимеетвозможности совладать, что ведет к фрустрации.

Но это что может значить в действительности? Как как раз трудится память?Как снизить когнитивную нагрузку на лендинге, чтобы увеличить конверсию? часть 1 И какое отношение это имеет к дизайну?

В данной статье даны ответы на все эти вопросы.

Минимизируйте когнитивную нагрузку для оптимизации юзабилити и конверсии

Теория когнитивной нагрузки

Деятельно данный вопрос начал изучаться недавно: в 1980-х австралийский педагог-психолог Джон Свеллер (John Sweller) заложил фундамент концепции когнитивной нагрузки. Доктор наук пробовал распознать наилучшие условия для обучения студентов, дабы они не просто присутствовали на занятиях, а в действительности принимали и запоминали данные.

Результаты его работы «Cognitive Load Theory, Learning Difficulty, and Instructional Design» были размещены в 1988 году и переизданы в первой половине 90-ых годов двадцатого века. В этом изучении много занимательных выводов, но как раз те, каковые касаются ограничений оперативной памяти человека, являются самые интересными для дизайнеров.

Во многом работа Джона Свеллера расширила теорию обработки информации когнитивного психолога Джорджа Миллера (George Miller), что в 1950-х годах контролировал пределы краткосрочной памяти. Его изучения легендарныв сфере цифрового дизайна, в особенности формула «кошелек Миллера», в соответствии с которой стоит сократить пункты меню от пяти до девяти (не смотря на то, что с данной закономерностью спорят кое-какие эксперты).

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

Как трудится память человека?

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

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

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

Заберём для примера эту статью, чтобы выяснить отличия.

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

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

Автор Стив Круг (Steve Krug) стал одним из популяризаторов теории когнитивной нагрузки в веб-дизайне. Его работой «Не заставляйте меня думать» («Don t Make Me Think») вдохновляются многие разработчики. Среди всех полезных советов из данной книги стоит обратить особенное внимание на пара:

  • Любая страница должна быть самодостаточной (растолковывать сама себя). Не забывайте, что пользователи будут попадать на ваш ресурс не только с домашней страницы.
  • Визитёры, в большинстве случаев, выбирают первое попавшееся либо самое простое ответ их неприятности, а не лучшее. Помимо этого, все мы существа привычки, соответственно они будут использоватьто же ответ опять и опять, не переключаясь на поиск нового (либо лучшего) варианта.
  • Юзабилити есть успешным, в то время, когда визитёр способностей и среднего опыта может применять ресурс с целью достижения собственных целей.
  • Большая часть действий пользователей продиктовано жаждой сэкономить время. Они довольно часто берут на вооружение принцип акулы «двигайся либо погибни».
  • Кнопка «Назад» — чаще всего применяемое средство веб-браузеров.
  • Кнопка «К себе» на экране дает пользователям чувство уверенности, даже если они ее не нажимают.

Другими словами любой раз, в то время, когда пользователю приходится вспоминать при просмотре сайта кроме того на мгновение, его оперативная память может буксовать. Помимо этого, вопросы из разряда «Это кликабельный баннер?», «Где кнопка «К себе»? и «Как это сохранить?» смогут сломать чувство пользователя.

Обстоятельства когнитивной перегрузки

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

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

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

Факты и лишь факты: информационная перегрузка

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

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

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

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

Ответ

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

  • Надавить на иконку приложения электронной почты.
  • Разместить курсор в поле ввода адреса получателя.
  • Ввести адрес электронной почты.
  • Щелкнуть в поле ввода «Тема» и т.д.

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

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

Микровзаимодействия: 14 примеров хорошего micro UX

2. Перестимулирование (гипер-стимулирование)

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

Любой из этих отвлекающих факторов загружает оперативную память визитёра.

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

Ответ

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

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

Сайт ТВ и кино IMDb имел возможность бы применять лишь визуальный контент, но он уравновешен равным числом текста.

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

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

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

Ваша задача — сбалансировать все визуальные элементы.

Уменьшить количество элементов на посадочной странице — это лишь полдела на пути к устранению когнитивной перегрузки. Стоит кроме этого не забывать о преимуществах несложных макетов. Хороший пример — ресурс OTHR.

Определили в каком-то из примеров себя и вдохновились на трансформации? Превосходно! Но это лишь начало.

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

Высоких вам конверсий!

По данным: smashingmagazine.com

Случайные статьи:

КАК ПОВЫСИТЬ КОНВЕРСИЮ ЛЕНДИНГА ǀ ПРОДВИЖЕНИЕ ЛЕНДИНГА [Разбор лендинг пейдж #8] #ЕГОРЩЕРБИНА


Подборка похожих статей:

riasevastopol

More Posts