Паттерны в UX: как предугадать поведение пользователей в ecom

Привет! На связи KISLOROD

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

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

Дизайн, который учитывает паттерны, позволяет:

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

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

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

Якоб Нильсен — эксперт по дизайну и соучредитель Nielsen Norman Group — компании, которая занимается исследованиями и консалтингом в сфере UX. Он сформулировал следующий постулат.

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

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

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

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

При этом фиксировали время набора номера и количество кликов на кнопку «Назад». В результате набор номера при нестандартной раскладке занял на 46% больше времени. Также выросло количество кликов на кнопку «Назад», а 22% испытуемых набрали номер неправильно.

Таким образом, изменение паттернов поведения привело к увеличению времени выполнения задания почти вдвое.

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

Эффект края, Serial position effect — явление, которое показывает, что лучше всего запоминается информация, которая была в начале и в конце.

Исследование человеческой памяти начал Герман Эббингауз в конце XIX века, чтобы понять законы «чистой» памяти. Одним из выводов стало, что при запоминании длинного ряда лучше всего запоминается материал, который был на концах. Это явления Эббингауз назвал «Краевым эффектом».

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

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

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

В 1966 Гланцер и Кунитц провели еще один эксперимент, где выяснили, что если при изучении списка участника отвлечь новым заданием, то часть слов не запоминается. Таким образом выяснили, что кратковременная память человека ограничена. Явление назвали эффектом новизны.

Принципы человеческой памяти:

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

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

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

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

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

Любопытный факт — народы, в культуре которых читают справа налево, используют отзеркаленный F-паттерн.

Для быстрого сканирования страницы используется Z-паттерн — так пользователи просто пробегают по содержимому страницы

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

Используя «Диаграмму Гутенберга» легко можно понять, где стоит размещать важные элементы и единицы коммуникации с пользователем.

Последствия этого паттерна таковы:

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

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

Nielsen Norman Group провела исследование о просмотрах более чем 45 000 страниц и выяснила, что в среднем люди читают только 20% текста на странице. А полностью весь текст прочитывают лишь 16% пользователей.

Поэтому при создании текста:

• Размещайте важную информацию в первых двух абзацах.
• Используйте заголовки и подзаголовки.
• Выделяйте жирным важные моменты в тексте.
• Структурируйте текст — 1 абзац = 1 мысль.
• Используйте маркеры и списки, а также таблицы.

Как учитывать паттерн в визуальном дизайне?

Размещайте коммерческие элементы и триггеры в зонах повышенного внимания.

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

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

Звучит так:

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

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

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

Но интересно то, что до какого-то момента даже незначительное увеличение размера значительно сокращает время попадания, но затем влияние эффекта снижается почти до нуля.

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

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

Как использовать:

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

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

Хороший пример использования «зоны большого пальца» — таб-бар в мобильных версиях сайта. Это одно из базовых решений, которое значительно влияет на удобство использования, поэтому навигационные элементы располагаются именно там.

Любопытный факт — всеми привычный свайп на мобильных устройствах впервые появился в Tinder в 2012 году, и с тех пор стал обязательным во всех интерфейсах мобильных устройств.

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

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

Пример

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

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

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

Закон Хика–Хаймана Назван в честь британских и американских психологов Уильяма Эдмунда Хика и Рэя Хаймана и описывает время, которое необходимо человеку для принятия решения в результате предоставленного выбора.

Закон звучит так:

Увеличение числа вариантов логарифмически увеличивает время принятия решения.

Если говорить проще, то чем больше вариантов выбора, тем больше требуется времени, потому что приходится анализировать и сравнивать.

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

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

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

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

Как использовать закон:

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

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

Эффект был подтвержден в эксперименте Шины Айенгер. Покупателям супермаркетов было предложено попробовать множество образцов джема. В первый день для дегустации было доступно 6 различных джемов, во второй день для дегустации было доступно 24 различных джема.

В итоге исследователи получили такие результаты:

• 24 вида джема — 6% попробовали, но купили только 3%.
• 6 видов джема — 40% попробовали, но купили 30%.

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

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

Пример из практики

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

В результате внедрения большее количество пользователей стало использовать форму подбора матрасов, что привело к росту количества конверсий.

Чтобы снизить паралич выбора у покупателей:

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

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

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

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

Эффект Овсянкиной — это стремление возобновлять прерванное действие, когда его результат не достигнут.

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

Как использовать:

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

Пример из практики

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

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

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

Психолог Хедвиг фон Ресторфф провела серию экспериментов, в которых испытуемым по очереди показывали карточки с изображением разных объектов.

Один из объектов резко выделялся из серии, остальные были похожими. Например, в серии могли быть все цифры и одно слово. Затем испытуемые должны были вспомнить объекты. В результате из схожих объектов запоминали 22%, а из выделяющихся — 70%.

Так Ресторфф сформулировала эффект изоляции:

Объект, выделяющийся из ряда однородных объектов, запоминается лучше.

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

Как использовать:

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

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

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

О том, что такое триггеры и как они работают, мы писали в статье: «Триггеры в UX: обман пользователей или миф для джунов в дизайне?»

А вы учитываете психологические паттерны при разработке UX-дизайна? Расскажите о своем опыте или поделитесь мнением в комментариях.

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

Расскажите нам о своих задачах.

Чтобы узнать больше про продуктовый подход в e-com проектах — присоединяйтесь к нашему каналу в Telegram и подписывайтесь на блог на VC.RU.