Usability и landing page, Дмитрий Сатин, лекция в Школе...
Transcript of Usability и landing page, Дмитрий Сатин, лекция в Школе...
![Page 1: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/1.jpg)
Сайт Школы
Канал на YouTube
![Page 2: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/2.jpg)
Usability и landing page
Дмитрий Сатин
![Page 3: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/3.jpg)
Что такое landing page?
![Page 4: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/4.jpg)
Доктор, меня
очень беспокоит
конверсия
Это теперь
лечится
![Page 5: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/5.jpg)
Процент посетителей сайта, совершивших целевое действие (покупка, скачивание файла, просмотр целевой страницы и т.п.)
Показатель конверсии
![Page 6: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/6.jpg)
Кто эти люди, откуда пришли, что ищут,
что ожидают увидеть на сайте. Зависит от
интернет-маркетинга.
Фактор 1: качество трафика
![Page 7: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/7.jpg)
Качество трафика
![Page 8: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/8.jpg)
Найдут ли пользователи то, что им нужно,
и захотят ли продолжить работу с сайтом.
Зависит от работы юзабилити-специалистов
и дизайнеров интерфейса.
Фактор 2: интерфейс
![Page 9: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/9.jpg)
![Page 10: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/10.jpg)
• отвлекающие ссылки на конверсионной
странице;
• непонятные, немотивирующие тексты;
• перегруженные формы.
Типичные проблемы
![Page 11: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/11.jpg)
Два пути: улучшать качество трафика
(маркетинг, SEO) или улучшать интерфейс
(юзабилити)
Как повысить конверсию
![Page 12: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/12.jpg)
ДО и ПОСЛЕ
Примеры
![Page 13: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/13.jpg)
Пр
им
ер 1
. ДО
![Page 14: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/14.jpg)
Пр
им
ер 1
. ПО
СЛ
Е
![Page 15: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/15.jpg)
Пр
им
ер 2
. ДО
![Page 16: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/16.jpg)
Пр
им
ер 2
. ПО
СЛ
Е
![Page 17: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/17.jpg)
Любовь и доверие
Эмоции
![Page 18: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/18.jpg)
Влюбите людей в свой товар!
![Page 19: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/19.jpg)
![Page 20: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/20.jpg)
Наши дни. Воз и ныне там
![Page 21: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/21.jpg)
Взаимное недоверие?
• В отделении банка:
– Почему они всегда привязывают шариковые ручки?
– Если я доверяю вам свои деньги, вы должны доверять мне хотя бы свои ручки!
![Page 22: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/22.jpg)
Заимствуйте доверие!
![Page 23: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/23.jpg)
Не прячьте то, чему доверяют!
![Page 24: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/24.jpg)
Не запугивайте людей!
![Page 25: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/25.jpg)
Сфокусируйтесь, чтобы
сфокусировать!
Концентрация
![Page 26: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/26.jpg)
Не просите две вещи сразу!
![Page 27: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/27.jpg)
Не просите то, что не нужно!
![Page 28: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/28.jpg)
![Page 29: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/29.jpg)
Любая страница как
посадочная
Сайт как landing
![Page 30: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/30.jpg)
Отрицательный пример
Не делайте так! Никогда!
31
![Page 31: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/31.jpg)
![Page 32: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/32.jpg)
![Page 33: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/33.jpg)
![Page 34: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/34.jpg)
![Page 35: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/35.jpg)
![Page 36: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/36.jpg)
![Page 37: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/37.jpg)
![Page 38: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/38.jpg)
![Page 39: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/39.jpg)
![Page 40: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/40.jpg)
![Page 41: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/41.jpg)
Зажигаем звёзды!
Конверсия от 5 до 11%!
![Page 42: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/42.jpg)
Пример возможного решения
Включаем голову и думаем
43
![Page 43: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/43.jpg)
![Page 44: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/44.jpg)
![Page 45: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/45.jpg)
![Page 46: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/46.jpg)
![Page 47: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/47.jpg)
![Page 48: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/48.jpg)
Посещения за три месяца
![Page 49: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/49.jpg)
Рекламный трафик за три месяца
![Page 50: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/50.jpg)
Общая конверсия 5,8% Из рекламного трафика: 11%
Показатели конверсии
![Page 51: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/51.jpg)
![Page 52: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/52.jpg)
Управление взглядом
БОНУС
![Page 53: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/53.jpg)
Исходные представления
То, что было известно до начала работы
![Page 54: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/54.jpg)
Лица людей
•Мы все – «социальные
животные»
•Даже мизантропов
привлекают
человеческие лица
•Выражение лица
позволяет быстро понять,
друг перед нами или враг
![Page 55: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/55.jpg)
Влияние направления взгляда
•Когда модель смотрит
на зрителя, зритель
смотрит на модель
•Когда модель смотрит
на предмет, зритель
смотрит туда же, куда и
модель
![Page 56: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/56.jpg)
Даже ребенок может управлять взглядом
Вариант 1 Вариант 2
![Page 57: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/57.jpg)
Кажется, что все просто
• Достаточно:
– Поместить на сайте лицо
человека, чтобы оно привлекало к
себе первичное внимание
– Направить лицо или взгляд на
ключевой объект
• Лицо поймает взгляд и «отпасует» его
в нужную область экрана
• В итоге не пользователь выбирает
объект, а объект направляет
внимание пользователя
![Page 58: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/58.jpg)
Проверим на практике
Действительно ли всё элементарно?
![Page 59: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/59.jpg)
План действий
• Выбираем «подопытный» сайт,
на главной странице которого
используется лицо человека
• Минимально изменяем дизайн
главной страницы так, чтобы
придать лицу и взгляду чёткую
направленность
• Проводим сравнительное
исследование
• Выясняем, какой вариант
работает лучше
![Page 60: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/60.jpg)
Требования к подопытному сайту
Имеет четкую коммерческую цель
– Мы хотим помогать тем, кто четко
понимает свои цели
Дизайнеры сайта пытаются влиять на внимание
пользователя
– Мы любим ищущих людей
Сайт работает с массовым рынком
– Читатель должен относиться к примеру
пристрастно
Сайт рекламируется на дорогих площадках
– Мы любим людей с серьёзными
намерениями
Дизайн симпатичный и позитивный
– Мы любим красивые и приятные вещи
![Page 61: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/61.jpg)
Подопытный сайт. Берём в работу!
•Позитивно
•Целенаправленно
•Есть лицо
•Массовый сервис
•Сайт рекламируется на
Путешествия@mail.ru
![Page 62: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/62.jpg)
Задача пользователя — отдых в Египте
![Page 63: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/63.jpg)
Задача решена, если…
• Пользователь кликнул в один из указанных
объектов:
– Форма поиска (1),
– Объект «Лучшие предложения дня» (2),
– Ссылку «Поиск тура» в верхнем меню (3).
• Клики в другие области считаем
неэффективными с точки зрения бизнес-задач
сайта.
1 2
3
![Page 64: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/64.jpg)
Немного магии взгляда…
При помощи
Photoshop:
• Скашиваем
девушке глаза в
сторону формы и
слегка наклоняем
голову.
• Все остальное
оставляем без
изменений.
Было Стало
![Page 65: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/65.jpg)
Какой дизайн лучше?
Тест: Пора сравнить результаты!
![Page 66: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/66.jpg)
Пара слов о методологии
• В тестировании каждого дизайна
участвовало 11 человек (каждый
раз новые)
• Мужчины и женщины
• Пользователи находили сайт на
Mail.ru
• Открывали его и должны были
решить, куда кликнуть, чтобы найти
тур в Египет
• Тестирование продолжалось до
первого клика
![Page 67: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/67.jpg)
Результаты тестирования
• Исходный дизайн
– 3 неэффективных клика
– Девушка почти не ловит
взгляд
– Взгляды рассредоточены в
верхней части экрана
• «Косые» глаза
– 3 неэффективных клика
– Пользователи меньше
смотрят на логотип и больше
— на «Лучшие предложения
дня» (1)
![Page 68: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/68.jpg)
Отрицательный результат
• Изменение направления
взглядя «модели» не повлияло
на количество эффективных
кликов
• Должно быть, это из-за
«пузырей», которые отвлекли
на себя драгоценное внимание
пользователей?
• Давайте уберем «пузыри» и
протестируем снова!
![Page 69: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/69.jpg)
Дизайн без «пузырей»
![Page 70: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/70.jpg)
Посмотрим, как это сработает
Убирали «пузыри», заменив их на ссылки
![Page 71: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/71.jpg)
Результаты тестирования без "пузырей"
• «Косые» глаза
– 3 неэффективных клика
• Без «пузырей»
– 4 (!) неэффективных клика
– Пользователи стали кликать
миниатюру внизу (зона 2) и
ссылки в верхнем меню (зона 1)
1
2
![Page 72: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/72.jpg)
Разбор полетов
Что привлекло пользователей
именно в этой миниатюре?
Почему пользователи стали
замечать мелкие элементы?
![Page 73: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/73.jpg)
Таинственная миниатюра
Эта девушка у вас
ассоциируется с отпуском?..
А эта?
![Page 74: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/74.jpg)
Сравним приоритеты
Что бросается в глаза? А здесь?
Когда исчезли «пузыри», их место
на пьедестале заметности заняли
другие элементы
Яркие «пузыри» — бесспорные
победители в борьбе за внимание
пользователей
![Page 75: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/75.jpg)
Тактика победоносной битвы
•Вызываем приятные
ассоциации
– Никакого дресс-кода —
только пляжные костюмы
•Направляем взгляд на
форму
– Понижаем визуальную
привлекательность
второстепенных
элементов
![Page 76: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/76.jpg)
Встречаем: купальник против дресс-кода
![Page 77: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/77.jpg)
Купальник против дресс-кода
Вызываем ассоциации, концентрируем внимание
![Page 78: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/78.jpg)
Приятные ассоциации + концентрация = …
Без пузырей Купальник, без миниатюр
4 неэффективных клика Ни одного неэффективного клика!
Внимание пользователей снова
сконцентрировалось на форме
![Page 79: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/79.jpg)
Взгляд на победителя
•В предыдущем опыте мы
внесли сразу два
изменения
•Выясним, какое из них
оказалось эффективнее
•Вернём миниатюры,
оставив девушку в
купальнике.
![Page 80: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/80.jpg)
Возвращаем миниатюры
Приятные ассоциации или концентрация внимания?
![Page 81: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/81.jpg)
Приятные ассоциации или концентрация?
Купальник, без миниатюр Купальник и миниатюры
Ни одного неэффективного клика 2 неэффективных клика
Пользователи снова стали
обращать внимание на миниатюры
![Page 82: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/82.jpg)
Что еще можно сделать с победителем?
• Все клики были успешными, но два
клика были сделаны не в форму
• Оба клика не в форму были сделаны
женщинами (хотя и они были
эффективными)
• Наше объяснение этому — модель в
купальнике недостаточно влияет на
женщин
• А женщины явно покупают туры не
реже мужчин
• Создадим еще один вариант дизайна,
чтобы повысить влияние на женщин
![Page 83: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/83.jpg)
Влияние на женские взгляды
• Что для женщины отдых?
Море, солнце, знакомство с
приятным мужчиной…
• Возможно, женщин привлечет
фотография романтической
пары на пляже?
![Page 84: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/84.jpg)
Романтика и женское внимание
Купальник, без миниатюр Романтическая пара
Ни одного неэффективного клика 4 неэффективных клика
Похоже, локоть сработал в двух
направлениях…
![Page 85: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/85.jpg)
Все 6 вариантов
3 ошибки 3 ошибки 4 ошибки
Без ошибок! 4 ошибки 2 ошибки
![Page 86: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/86.jpg)
Сравним показатели
Любителям диаграмм
![Page 87: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/87.jpg)
Концентрация кликов
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
1 2 3 4 5 6
Верхнее меню Ссылки вместо баблов
Миниатюры Бабл
Акции Форма
Клики
Варианты дизайна
1 — исходный дизайн
2 — «косые» глаза
3 — без «пузырей»
4 — купальник, без миниатюр
5 — купальник, с миниатюрами
6 — романтическая пара
![Page 88: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/88.jpg)
Время до клика
0
5
10
15
20
25
30
1 2 3 4 5 6
Муж. Жен.
Секунды
Варианты дизайна
1 — исходный дизайн
2 — «косые» глаза
3 — без «пузырей»
4 — купальник, без миниатюр
5 — купальник, с миниатюрами
6 — романтическая пара
![Page 89: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/89.jpg)
Эффективность
Пользователи
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
1 2 3 4 5 6
Неэффект. клик Эффект. клик
Варианты дизайна
1 — исходный дизайн
2 — «косые» глаза
3 — без «пузырей»
4 — купальник, без миниатюр
5 — купальник, с миниатюрами
6 — романтическая пара
![Page 90: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/90.jpg)
+7-903-130-0201 dmitrysatin
dmitry.satin
Дмитрий Сатин, UsabilityLab
Национальный Центр Информатизации
![Page 91: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/91.jpg)
Вопросы
![Page 92: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/92.jpg)
Почему так получается, что все хорошее приходит от не очень
хорошего: Например, термин посадочные страницы (они же
лендинги) в нашей стране начал свое хождение и
использование от "инфо бизнеса", а по идее должен был
стартовать от компаний стоящих в авангарде рынка е-коммерс,
так как они постоянно ищут и пробуют новые инструменты и
модели привлечения трафика и взаимодействия с
пользователем.
![Page 93: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/93.jpg)
Стоит ли менять заголовки или текст кнопок, в зависимости от
информации до этой заявки?
![Page 94: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/94.jpg)
Есть каки-то тонкости в оформлении товарных лэндингов для
разных групп посетителей? В нашем случае ЦА: торгующие
организации, организации занимающиеся лесозаготовкой, ИП
оказывающие услуги, дачники
![Page 95: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/95.jpg)
Обязательно ли всю главную информацию на посадочной
отображать в первом экране и какой % пользователей
спускается во второй экран?
![Page 96: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/96.jpg)
Если мы используем видео на посадочной странице, то можно
ли его сделать потоковым (т.е. чтобы оно сразу проигрывалось
и со звуком)
![Page 97: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/97.jpg)
Столкнулись с такой тенденцией, что чем больше ты даешь
правдивой информации (даже если это супер характеристики,
супер продукта), тем больше сомнений ты пробуждаешь в
пользователе, как итог ты получаешь меньшую конверсию.
(Работаю в инвестиционной кампании, с вашего позволения
бренда называть не буду.)
![Page 98: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/98.jpg)
Какой самый эффективный способ (форма) мотивировать
пользователя оставить свой емэйл и контактный телефон?
![Page 99: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/99.jpg)
+7-903-130-0201 dmitrysatin
dmitry.satin
Дмитрий Сатин, UsabilityLab
Национальный Центр Информатизации
![Page 100: Usability и landing page, Дмитрий Сатин, лекция в Школе вебмастеров Яндекса](https://reader034.fdocument.pub/reader034/viewer/2022050914/58f177891a28ab233c8b4605/html5/thumbnails/100.jpg)
Сайт Школы
Канал на YouTube