{"id":13466,"url":"\/distributions\/13466\/click?bit=1&hash=891d339b00b86120568ea8e4296ded112a42876a976e2fd335004400f35cbd30","title":"\u0427\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u044f\u0442, \u0447\u0438\u0442\u0430\u044e\u0442 \u0438 \u043a\u0443\u0434\u0430 \u0445\u043e\u0434\u044f\u0442 \u0432\u0430\u0448\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"24bb823c-c595-5fc8-be0f-fba9e89237c2","isPaidAndBannersEnabled":false}

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

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

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

Слева: Хедвиг Фон Ресторфф. Справа: эксперимент Ресторфф. researchgate.net

Эксперимент Ресторфф

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

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

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

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

Применение эффекта Ресторфф в дизайне

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

Тарифы на сайте интернет-провадера не выделены domru.ru

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

Один из тарифов таск-менеджера Asana выделен цветом фона и кнопки asana.com

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

Один из товаров (справа) в каталоге интернет-магазина Детский мир выделены ай-стопперами detmir.ru

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

Яркие и большие ай-стопперы и мотивационные триггеры у каждого товара в каталоге. svyaznoy.ru

Оборотная сторона медали

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

Под каждым товаром в каталоге указан одинаковая отметка "ВЕСНА-ЛЕТО 2021". tsum.ru

Вывод:

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

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

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

#UX

0
10 комментариев
Написать комментарий...
Евгений Кирюхин

Спасибо за ваши статьи! 

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Вам спасибо, за прочтение и обратную связь, это мотивирует писать больше :)

Ответить
Развернуть ветку
Rostislav Pavolo

Согласен, что статья действительная полезная!

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

👍🏼

Ответить
Развернуть ветку
Олег Бабаев

Полезный материал, thanks!

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

u are welcome 🙌🏼

Ответить
Развернуть ветку
Yury S

"Чтобы быть заметным нужно выделяться"

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Согласен, это естественно и логично. Но в данном случае интересно ещё и то, что выделенные объекты помимо лучшей заметности - запоминаются в памяти лучше в 3 раза.

Ответить
Развернуть ветку
Yury S

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

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

Ответить
Развернуть ветку
Эдуард Файзуллин
Автор

Здесь я с вами всё же не соглашусь, объясню почему:

1) Не все знают, что выделение объектов не только делает их заметнее, но и позволяет их лучше запомнить (в 3 раза лучше). И несколько десятков лайков и комментариев с благодарностью под статьей это подтверждают.

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

Поэтому смысл в таких статьях есть. Ну а для опытных специалистов в начале статьи я написал «статья для новичков», чтобы не тратить на на неё своё время с самого начала.

Ответить
Развернуть ветку
Читать все 10 комментариев
null