f1pravo.ru

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

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

Во второй части:

• Время на обработку контента

• Запоминание данных

В первой части было:

• Фильтрация информации

• Смысл и значимость элементов

Как время влияет на значимость информации

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

Иллюзия затраченных сил

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

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

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

Отображение процесса поиска на сервисе бронирований «Островок»

Выбор по умолчанию

Пользователи не склонны менять настройки по умолчанию.

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

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

Выбор варианта размещения на Авито

Инвестиционные петли

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

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

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

Настройка любимых групп в Яндекс.Музыке

Неприятие потерь

Пользователи предпочитают избегать потерь больше, чем получать прибыль.

Люди ненавидят терять или отказываться от того, что у них есть. Даже если отказавшись, они получат больше. По теории перспектив потеря приносит больше негатива, чем прибыль в том же объеме: если кто-то потеряет 1000 долларов, он расстроится сильнее, чем если найдет такую же сумму.

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

Система очков в Duolingo

Неприятие потерь также может привести к заблуждению о невозвратных затратах.

Эффект невозвратных затрат

Пользователи не хотят отказываться от того, во что вложились.

Часто люди не могут перестать делать что-то, потому что им жалко терять вложенные в это дело ресурсы — деньги, время, усилия. Это используют сайты и приложения для мотивации и укрепления привязанности. Duolingo не дает выйти из середины урока, иначе весь процесс урока будет потерян:

Выход из приложения во время урока

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

Обязательства и последовательность

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

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

Это одна из причин, почему формы для заполнения, разбитые на несколько ступеней, работают лучше, чем формы со всеми вопросами в одном окне. Growth.Design провели A/B тест форм подписки на рассылку из одного и двух шагов, и оказалось, что форма из двух дает на 11% подписок больше.

Форма подписки из двух шагов

Как особенности памяти влияют на работу на сайте

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

Точки выхода

Предложите пользователям покинуть ваше приложение в нужный момент.

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

Завершение дня в Duolingo

Правило пика и конца

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

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

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

Окно после оплаты тарифа

Сенсорная привлекательность

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

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

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

Сравнение текста и текста с визуалом

Эффект Зейгарник

Люди запоминают незавершенные задачи лучше, чем выполненные.

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

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

Duolingo показывает неполную шкалу прогресса, побуждая скорее завершить урок, чтобы закрыть кольцо:

Прогресс изучения темы

Эффект собственного вклада

Люди больше ценят что-то, если считают, что оно им принадлежит.

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

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

Персонализированная доска с закладками расширения start.me

Группировка

Пользователи лучше запоминают сгруппированную информацию.

Логически сгруппированные слова запоминаются в среднем на 40% лучше, чем представленные произвольно. За счет ассоциаций люди сводят значение нескольких слов к одному — так мозгу проще вспомнить детали и запомнить больше.

Этот принцип можно использовать в самообразовании и работе, группируя задачи и важные заметки по темам, а также для помощи пользователям, к примеру, объединяя связанные вопросы в FAQ.

Группировка обновлений по подтемам

Книги про когнитивные искажения

Авторы советуют почитать по теме

• работу Бастера Бенсона по категоризации когнитивных предубеждений;
• книгу Габриэля Вайнберга и Лорен МакКенн «Супермышление. Большая книга ментальных моделей»;
• книгу автора Нир Эяль «На крючке. Как создавать продукты, формирующие привычки».

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

Расскажите в комментариях, какие эффекты стоит использовать на сайте, и поделитесь, быть может, какие-то вы наблюдали за собой 🙂

Источник

Для того, чтобы сделать работу магазинов максимально стабильной и удобной для покупателей, специалисты Маркета разработали автоматическую систему мониторинга страниц. Раз в день она проверяет цены и товарные карточки на Турбо-страницах на соответствие данным с сайта. При возникновении ошибки, система пришлет вам уведомление на почту или в интерфейс Вебмастера, в раздел «Настройки»—«Контроль качества».

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

Яндекс уже проверил все магазины с помощью новой технологии, и 80% из них прошли проверку успешно. Все магазины, которые успешно прошли проверку, будут отмечены зеленым бейджем. По данным Маркета, в таких магазинах средний чек увеличивается на 14%.

Для магазинов со сторонними корзинами работает только автоматическая проверка корзины.

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

Напоминаем, что накануне новые значки качества в своей выдаче начал тестировать Google.

Источник

Главное требование для размещения товарного виджета в статье или видео — релевантность контента. У Яндекс.Дзена есть подробный список правил к публикуемому материалу. Вкратце, материалы с виджетом должны соответствовать правилам публикаций Дзена, а работа с виджетами должна проходить максимально корректно: товары должны соответствовать тем, о которых рассказывается в публикации, категории должны соответствовать заголовкам и так далее.

Для видео есть особые требования:

• Демонстрация товара должна быть не менее 30 секунд.

• Рассказ о товаре должен составить не менее 20% от всего видео.

• Товар должен быть хорошо различим в кадре.

Разработчики рекомендуют использовать для размещения виджетов следующие форматы:

• обзор товара;

• анбоксинг — распаковка;

• решение проблемы с помощью товара;

• демонстрация товара в стороннем видео. Например, готовка с помощью размещаемой техники.

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

• Кто будет пользоваться товаром? Знайте свою целевую аудиторию.

• Где им будут пользоваться? От этого зависит локация съемки.

• В каких обстоятельствах этим товаром будут пользоваться?

• Почему этот товар необходим?

• Как им пользоваться правильно?

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

Источник

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

На сайт можно вставить карту Google, Яндекс или 2ГИС с нужной меткой, чтобы пользователи могли сразу понять, куда им предстоит ехать. И дольше оставались на сайте, рассматривая карту и увеличивая время визита, что важно для поведенческих факторов и SEO. 😉

В статье:

1. Как создать карту для сайта:
   1. Карта Яндекс
   2. Карта Google
   3. Карта 2ГИС
2. Как настроить отложенную загрузку карты

Выбрать можно любую карту, какая вам больше нравится.

Как вставить Яндекс карту на сайт

Первый вариант: встроить Карту с уже существующей меткой

Откройте Яндекс.Карты, найдите компанию и скопируйте код для вставки:

Карта с меткой и информацией из Яндекс.Карт будет выглядеть так:

Организация на карте Яндекса

Пошагово:

1. Найдите нужный адрес.

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

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

Второй вариант: создать свою метку

Создайте карту в Конструкторе:

Карта, которую мы сделали, выглядит так: у нее есть маркер с иконкой, которую мы выбрали, и отображается линия с пояснением для удобства.

Карта, созданная в конструкторе Яндекса

Создание карты пошагово:

1. Найдите адрес, выберите цвет и вид маркера.

2. Сохраните метку и добавьте еще адреса, если вы хотите отметить несколько филиалов.

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

4. Сохраните карту. В следующем окне выберите ее вид: интерактивная или статическая.

   1. Интерактивная полезнее, ее можно двигать и масштабировать. Для вставки на сайт советуем ее.

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

5. Задайте размер карты: можно ввести пиксели в окошке размера или растянуть карту вручную.

6. Если выбрать «Растянуть по ширине», у карты появится параметр width = 100%, то есть потом при вставке карты на сайт она займет всю ширину блока.

7. Скопируйте код для вставки на сайт: можно выбрать JavaScript или iframe.

   1. У кода iframe есть ограничения: пользователь не сможет переключать виды карты, то есть доступен только вид Схема, и она будет отображаться только на крупных масштабах.

   2. Код JavaScript можно модифицировать с помощью API: добавить панораму, маршруты, поиск. Чтобы они появились, нужно получить API-ключ в Кабинете разработчика для продукта «JavaScript API и HTTP Геокодер» и добавить его в код.

8. Если вам нужно поменять язык топонимов, измените параметр lang в скопированном коде. Сейчас там lang=ru_RU, но можно поставить другой язык с помощью кода языка в формате ISO 639-1 и кода региона в формате ISO 3166-1: uk_UA — украинский для Украины, tr_TR — турецкий для Турции. Для пользователей из России и Украины регион и язык подстроится под настройки паспорта пользователя.

9. Вставьте код с картой Яндекса на сайт через редактор страницы.

Как вставить Google карту на сайт

Первый вариант: вставить карту из Google Maps с существующей меткой

Откройте Google Maps, найдите компанию и скопируйте код для вставки:

Карта будет выглядеть так:

Карта с меткой организации из Google Maps

1. Найдите компанию на картах, нажмите на «Поделиться».

2. Нажмите «Встраивание карт» и выберите размер из предложенных или выберите «Другой размер» и укажите свои параметры.

3. Скопируйте получившийся HTML-код и вставьте его в код своего сайта в то место, где вы хотите разместить карту.

Второй вариант: создать свою метку в Google Maps

Создайте метку в Google Картах:

Так выглядит созданная нами метка в режиме предпросмотра: на ней есть описание, которое мы ввели, фотография и информация из Google Maps.

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

Пошаговое создание метки на Google картах:

1. Введите адрес или название компании.

2. Укажите название, добавьте описание организации, фотографии, выберите цвет и стиль значка.

3. Созданную карту вы можете посмотреть в Предпросмотре. Нажмите кнопку с тремя вертикальными точками и выберите «Добавить на сайт».

4. Скопируйте полученный код и вставьте его в код страницы, куда вы хотите добавить карту.

Как вставить карту 2ГИС на сайт

Встроить карту через API

Установить интерактивную карту 2ГИС можно через JS API — это версия API для простых задач.

Карта 2ГИС

Пошаговый процесс:

1. Перейдите на страницу и выберите город.

2. Найдите компанию по названию.

3. Установите нужный размер карты в правом нижнем углу.

4. Нажмите «Далее», прочитайте Лицензионное соглашение и примите условия.

5. Нажмите «Получить код» и скопируйте его для вставки на сайт.

Это простая карта с готовой меткой, но можно сделать свою через Кjнструктор. Выручит, если вашей компании нет в 2ГИС.

Создать в Конструкторе карту со своими метками

В 2ГИС есть бесплатный Конструктор карт, с его помощью можно создать карту со своей разметкой — добавить метки, описания, отобразить маршруты, графически выделить области.

Пошагово как сделать карту в Конструкторе 2ГИС:

1. Введите адрес и найдите нужное здание.

2. Настройте цвет метки, введите название.

3. Добавьте описание, можно вставить картинку с помощью разметки HTML или Markdown.

4. С помощью линий и выделения областей помогите клиентам сориентироваться по маршруту.

5. Выберите нужный размер карты.

6. Скопируйте код для вставки на сайт или в мобильное приложение.

Как настроить отложенную загрузку карты на сайте

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

Проверить скорость загрузки конкретной страницы можно в этом инструменте. Он бесплатно измеряет скорость загрузки в соответствии с показателем Google Core Web Vitals, оценивает разные этапы загрузки и дает рекомендации:

Фрагмент проверки

Минимизировать влияние карты на скорость загрузки страницы поможет отложенная или Lazy-load загрузка.

Загрузка карты по доскроллу до нее

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

Пользователь Хабра iefedorov для этого советует изменить код карты, который Google предлагает вставить на сайт.

Пример исходного кода:

<iframe src=»https://www.google.com/maps/embed?pb=!1m14…» width=»600″ height=»450″ frameborder=»0″ style=»border:0;» allowfullscreen=»» aria-hidden=»false» tabindex=»0″></iframe>

Его нужно изменить вот так:

<iframe data-aload data-original=»https://www.google.com/maps/embed?pb=!1m14…» width=»600″ height=»450″ frameborder=»0″ style=»border:0;» allowfullscreen=»»></iframe>

Браузер будет получать src = «», когда читателю понадобится карта.

Пошаговая настройка lazy-loading карты от Максима Васяновича (MaxGraph):

Загрузка карты после наведения курсора

Другой пользователь Хабра Dionisvl предлагает такой способ оптимизировать карту Яндекса, чтобы она подгружалась только при наведении на нее курсора мыши.

При создании карты в конструкторе Яндекса с использованием API-ключа получился примерно такой код:

<script type=»text/javascript» charset=»utf-8″ async=»» src=»https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1ad4887964fc2e0a6f07c6246ffe638b138f8baacc8983f9a6a0f401a02e833a&width=1280&height=400&lang=ru_RU&scroll=true»></script>

На сайте нужно написать контейнер для блока с картой:

<div id=»map_container» class=»map container-fluid»>
<script id=»ymap_lazy» async=»» data-src=»https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A1ad4887964fc2e0a6f07c6246ffe638b138f8baacc8983f9a6a0f401a02e833a&width=1280&height=400&lang=ru_RU&scroll=true»></script>
</div>

Также нужны стили для статичной картинки, подойдет скриншот.

<style>
.map.container-fluid {
height: 340px;
padding: 0;
background-image: url(/uploads/common/ymap0.png);
background-position: center center;
}
</style>

Нужен JavaScript-код, который будет отслеживать события — наведение курсора мыши на карту или тап по карте на экране смартфона — и подменять статичное изображение на интерактивную карту:

<script>
let map_container = document.getElementById(‘map_container’);
let options_map = {
once: true,//запуск один раз, и удаление наблюдателя сразу
passive: true,
capture: true
};
map_container.addEventListener(‘click’, start_lazy_map, options_map);
map_container.addEventListener(‘mouseover’, start_lazy_map, options_map);
map_container.addEventListener(‘touchstart’, start_lazy_map, options_map);
map_container.addEventListener(‘touchmove’, start_lazy_map, options_map);

let map_loaded = false;
function start_lazy_map() {
if (!map_loaded) {
let map_block = document.getElementById(‘ymap_lazy’);
map_loaded = true;
map_block.setAttribute(‘src’, map_block.getAttribute(‘data-src’));
map_block.removeAttribute(‘data_src’);
console.log(‘YMAP LOADED’);
}
}
</script>

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

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

Фрагмент проверки сайта

Проверить сайт в Анализе

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

Источник