UX дизайн: Эффект изоляции (эффект Ресторфф). Или как направлять пользователей и запоминать необходимые объекты на сайте

Статья для начинающих UX/UI-дизайнеров, исследователей и аналитиков. В статье рассказывается как сделать так, чтобы пользователи заметили и запомнили необходимые объекты на сайте. А также как направить пользователей необходимым путем по сайту, чтобы сэкономить время и снизить усилия которые тратятся на поиск и принятие оптимальных решений.

В 1933 году немецкий врач, психолог и обладательница докторской степени Хедвиг Фон Ресторфф (HedwigIda Auguste von Restorff) провела серию экспериментов в университете Берлина, в ходе которых выявила закономерность: человек лучше запоминает объект, который выделяется из ряда однородных объектов. Эту особенность человеческой памяти назвали «эффектом изоляции» больше известном как эффект Ресторфф (Von Restorff effect).

Испытуемым показывались 10 небольших карточек поочередно. Каждая карточка показывалась 1,5 секунды (время отсчитывалось метрономом). На каждой карточке был изображен один объект. Список из десяти карточек состоял из девяти схожих объектов и одного отличающегося объекта. Например, 9 слов и 1 цифра или 9 цифр и 1 слог. И так далее с разными объектами: словами, слогами, буквами, знаками препинания, числами, символами, цветами, фотографиями и даже названиями химических соединений. Каждому испытуемому показывали несколько таких списков. Затем испытуемых просили вспомнить объекты из списков и записать их на листке бумаги. Оказалось, что испытуемые смогли вспомнить только 22% из схожих объектов и в три раза больше (70%) из отличающихся объектов. Для лучшего понимания, попробуйте эксперимент на себе. Для этого попытайтесь запомнить список слов ниже за несколько секунд:

• Видеть
• Думать
  
• Делать
  
• Сидеть
  
• Австралийская ехидна
  
• Узнать
  
• Давать
  
• Читать
  
• Играть
  
• Бывать
  

В соответствии с эффектом Ресторфф, вы точно вспомните словосочетание «Австралийская ехидна» и вряд ли вспомните все из остальных слов. Так происходит потому, что словосочетание «Австралийская ехидна» выделяется от остальных слов по ряду параметров:

1. Ехидна – это существительное обозначающее животное, а остальные слова это глаголы обозначающие действие;
2. Словосочетание длиннее, так как состоит из двух слов, а остальные слова из одного;
3. Словосочетание выделено жирным начертанием шрифта, а остальные слова написаны обычным начертанием, что выделяет словосочетание визуально;
4. Словосочетание выделено розовым цветом фона.

Аналогичным образом эффект изоляции применим и в дизайне сайтов. Например, объект можно выделять цветом, размером, расположением, рамкой, тенью и другими приемами визуального выделения. Это позволит сделать объект не только более заметным, но и более запоминаемым. Обратите внимание на то, что в примере ниже, на сайте интернет-провайдера дом.ru ни один из тарифов никак не выделен, а потому ни один из них не запоминается лучше остальных оформленных одинаково. А если учесть, что таких тарифов не 3, а 8, то выбор становится ещё сложнее.

Ниже пример выделения тарифа в таск-менеджере Asana, в котором один из тарифов выделен цветом фона и цветом кнопки. К слову, проект Asana был основан в 2008 году сооснователем Facebook Дастином Московицем и экс-инженером Джастином Розенштейном. До этого Дастин и Джастин работали над увеличением продуктивности сотрудников в компании Facebook. И судя по документальному фильму «Социальная дилемма» (The Social Dilemma, Netflix, 2020) в Фейсбуке очень глубоко изучают психологию пользователей.

Другой пример выделения в дизайне – это применение так называемых мотивационных триггеров или ай-стопперов. Вот как это реализовано на сайте интернет-магазина Детский мир. Здесь один из товаров в каталоге выделен ай-стоппером с указанием скидки 37%, сам кружок в красном заметном цвете и наложен поверх изображения, такое выделение сложно не заметить. Дополнительно выделена красным цветом цена, которая к тому же помещена в желтый контейнер. В результате, пользователи с бОльшей вероятностью заметят и запомнят такой товар в каталоге, в сравнении с другими товарами размещенными рядом.

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

Применяя эффект Ресторфф важно понимать, что объем рабочей памяти человека ограничен и чем больше внимания уделяется одному объекту – тем меньше внимания остается для остальных. По аналогии с экспериментом Ресторфф, в котором испытуемые запоминали 70% от выделяющихся объектов и только 22% от невыделяющихся. Поэтому, желательно применять эффект Ресторфф взвешенно и обдуманно. Если важны несколько объектов в одном месте и в одно время, то возможно не стоит визуально выделять какой-то один из них, чтобы не отнимать внимание у других. Или напротив, выделить все, но одинаково и не слишком заметно. Ниже пример того как в каталоге интернет-магазина ЦУМ под всеми товарами указаны светло-серая отметка «ВЕСНА-ЛЕТО 2021», что не позволяет выделить какой-то из товаров, но при этом подсказывает, что все товары из новой коллекции 2021 года.

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

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

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

#UX