Дизайн
Ян Австрейх
8147

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

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

В закладки
Аудио

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

{ "author_name": "Ян Австрейх", "author_type": "self", "tags": ["linkedin","instagram"], "comments": 15, "likes": 38, "favorites": 89, "is_advertisement": false, "subsite_label": "design", "id": 62289, "is_wide": false, "is_ugc": true, "date": "Mon, 25 Mar 2019 13:32:59 +0300", "is_special": false }
0
{ "id": 62289, "author_id": 192524, "diff_limit": 1000, "urls": {"diff":"\/comments\/62289\/get","add":"\/comments\/62289\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/62289"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
15 комментариев
Популярные
По порядку
Написать комментарий...
6

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

Ответить
5

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

Ответить
3

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

Ответить
1

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

Ответить
1

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

Ответить
0

Комментарий удален по просьбе пользователя

Ответить
1

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

Ответить
0

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

Ответить
3

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

Ответить
2

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

Ответить

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

0

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

Наоборот

Ответить
0

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

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }