{"id":13474,"url":"\/distributions\/13474\/click?bit=1&hash=89dcb97d365dcd062aa67a23ebd7d587ac1ef67c2c12b41ed4fdb46a523d850d","title":"\u0420\u0411\u041a \u0437\u0430\u0434\u0443\u0434\u043e\u0441\u0438\u043b\u0438. \u0427\u0442\u043e \u0434\u0435\u043b\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0437\u0430\u0434\u0443\u0434\u043e\u0441\u0438\u043b\u0438 \u0432\u0430\u0441","buttonText":"","imageUuid":"","isPaidAndBannersEnabled":false}
Дизайн
Ян Австрейх

Микроанимации в Instagram и LinkedIn побуждают пользователей чаще комментировать Статьи редакции

Перевод заметки дизайнера продукта Вивиан Чжан.

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

Примеры микроанимаций, побуждающих пользователя к действию. Справа: «Добавить комментарий». Слева: «Будьте первым, кто прокомментировал это»

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

Вот пример из Instagram.

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

«Скользящая» анимация подталкивает к действию — комментированию. Многие пользователи забывают о комментариях, поэтому микроподталкивание напоминает о них.

Вот ещё один пример из Instagram. Здесь тот же принцип: когда пользователь задержался на публикации с товаром, появляются маркеры. После нажатия на фото всплывают окна с описанием и стоимостью товара.

LinkedIn использует подобную анимацию на своём сайте, там всплывает текст: «Будьте первым, кто прокомментировал это». Но я считаю, что сервису не удалось реализовать идею так же хорошо, как в приведённых примерах из Instagram.

Главное отличие — анимация отображается для всех публикаций, которые ещё не прокомментированы.

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

Анимация побуждает:

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

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

Моё внимание также привлекли размер и непримечательность анимаций Linkedln. Даже если пользователь заинтересован в материале, он может не заметить анимацию с напоминанием.

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

Мне кажется, LinkedIn стоит поучиться у Instagram и использовать анимации более избирательно.

  • Отображать анимацию, только когда пользователь заинтересован. Это подтолкнёт его к выполнению «маленькой» задачи.
  • Сделать анимацию более примечательной, чтобы пользователь её не пропустил.

Микроподталкивания эффективны, если:

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

Примечание к LinkedIn

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

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

0
15 комментариев
Написать комментарий...
Егор Сергеев

Так вот оно что. Просто некоторые сайты слеплены исключительно из микроанимаций. А вы — лагает, лагает...

Ответить
Развернуть ветку
Velemir Hasidov

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

Ответить
Развернуть ветку
Pavel Zamyatin

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

Ответить
Развернуть ветку
Игорь Соколов

но пока работает, почему не использовать?

Ответить
Развернуть ветку
Альберт Штерн

Уже сегодня запулю апдейт с этой уловкой)
Посмотрим повлияет ли

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

Комментарий недоступен

Ответить
Развернуть ветку
Альберт Штерн

Заметного роста не увидел в своем проекте, но глаз радует.

Ответить
Развернуть ветку
Алексей Бабенков

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

Ответить
Развернуть ветку
Antony Divnich

Лучшее подталкивание к комментарию это спорный комментарий, который вызывает желание на него ответить. Например, боты на ютубе в русскоязычном сегменте любят написать что-нибудь про Россию или Украину. Более мирный и точный вариант это обращение к некой группе, например к программистам или дизайнерам: «Сидят в своем офисе в носу ковыряют пока я тут работаю». Если бы у меня был свой ресурс с редакторами, то я бы просил каждого создать по еще одному «постоянному» пользователю ресурса, который бы к каждой новой статье писал комментарии провоцирующие обсуждение темы.

Ответить
Развернуть ветку
Dmitriy Voropaev

Неправильное написание слова "немного" тоже микроподталкивание к комментариям ;)

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

Комментарий удален модератором

Развернуть ветку
Alexander Brain

Меня как бы уже микроподтолкнуло написать предыдущее микроподталкивание, то есть это как бы уже наноподталкивание.

Ответить
Развернуть ветку
Альберт Штерн

Потом и это не будет работать

Ответить
Развернуть ветку
Виктор Арапов

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

Ответить
Развернуть ветку
Данила Баранов

Справа: «Добавить комментарий». Слева: «Будьте первым, кто прокомментировал это»

Наоборот

Ответить
Развернуть ветку
Алексей Сеовектор

микродвижения руки побуждают открыть ****hub

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