Usability и landing page, Дмитрий Сатин, лекция в Школе...

Сайт Школы

Канал на YouTube

Usability и landing page

Дмитрий Сатин

Что такое landing page?

Доктор, меня

очень беспокоит

конверсия

Это теперь

лечится

Процент посетителей сайта, совершивших целевое действие (покупка, скачивание файла, просмотр целевой страницы и т.п.)

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

Кто эти люди, откуда пришли, что ищут,

что ожидают увидеть на сайте. Зависит от

интернет-маркетинга.

Фактор 1: качество трафика

Качество трафика

Найдут ли пользователи то, что им нужно,

и захотят ли продолжить работу с сайтом.

Зависит от работы юзабилити-специалистов

и дизайнеров интерфейса.

Фактор 2: интерфейс

• отвлекающие ссылки на конверсионной

странице;

• непонятные, немотивирующие тексты;

• перегруженные формы.

Типичные проблемы

Два пути: улучшать качество трафика

(маркетинг, SEO) или улучшать интерфейс

(юзабилити)

Как повысить конверсию

ДО и ПОСЛЕ

Примеры

Пр

им

ер 1

. ДО

Пр

им

ер 1

. ПО

СЛ

Е

Пр

им

ер 2

. ДО

Пр

им

ер 2

. ПО

СЛ

Е

Любовь и доверие

Эмоции

Влюбите людей в свой товар!

Наши дни. Воз и ныне там

Взаимное недоверие?

• В отделении банка:

– Почему они всегда привязывают шариковые ручки?

– Если я доверяю вам свои деньги, вы должны доверять мне хотя бы свои ручки!

Заимствуйте доверие!

Не прячьте то, чему доверяют!

Не запугивайте людей!

Сфокусируйтесь, чтобы

сфокусировать!

Концентрация

Не просите две вещи сразу!

Не просите то, что не нужно!

Любая страница как

посадочная

Сайт как landing

Отрицательный пример

Не делайте так! Никогда!

31

Зажигаем звёзды!

Конверсия от 5 до 11%!

Пример возможного решения

Включаем голову и думаем

43

Посещения за три месяца

Рекламный трафик за три месяца

Общая конверсия 5,8% Из рекламного трафика: 11%

Показатели конверсии

Управление взглядом

БОНУС

Исходные представления

То, что было известно до начала работы

Лица людей

•Мы все – «социальные

животные»

•Даже мизантропов

привлекают

человеческие лица

•Выражение лица

позволяет быстро понять,

друг перед нами или враг

Влияние направления взгляда

•Когда модель смотрит

на зрителя, зритель

смотрит на модель

•Когда модель смотрит

на предмет, зритель

смотрит туда же, куда и

модель

Даже ребенок может управлять взглядом

Вариант 1 Вариант 2

Кажется, что все просто

• Достаточно:

– Поместить на сайте лицо

человека, чтобы оно привлекало к

себе первичное внимание

– Направить лицо или взгляд на

ключевой объект

• Лицо поймает взгляд и «отпасует» его

в нужную область экрана

• В итоге не пользователь выбирает

объект, а объект направляет

внимание пользователя

Проверим на практике

Действительно ли всё элементарно?

План действий

• Выбираем «подопытный» сайт,

на главной странице которого

используется лицо человека

• Минимально изменяем дизайн

главной страницы так, чтобы

придать лицу и взгляду чёткую

направленность

• Проводим сравнительное

исследование

• Выясняем, какой вариант

работает лучше

Требования к подопытному сайту

Имеет четкую коммерческую цель

– Мы хотим помогать тем, кто четко

понимает свои цели

Дизайнеры сайта пытаются влиять на внимание

пользователя

– Мы любим ищущих людей

Сайт работает с массовым рынком

– Читатель должен относиться к примеру

пристрастно

Сайт рекламируется на дорогих площадках

– Мы любим людей с серьёзными

намерениями

Дизайн симпатичный и позитивный

– Мы любим красивые и приятные вещи

Подопытный сайт. Берём в работу!

•Позитивно

•Целенаправленно

•Есть лицо

•Массовый сервис

•Сайт рекламируется на

Путешествия@mail.ru

Задача пользователя — отдых в Египте

Задача решена, если…

• Пользователь кликнул в один из указанных

объектов:

– Форма поиска (1),

– Объект «Лучшие предложения дня» (2),

– Ссылку «Поиск тура» в верхнем меню (3).

• Клики в другие области считаем

неэффективными с точки зрения бизнес-задач

сайта.

1 2

3

Немного магии взгляда…

При помощи

Photoshop:

• Скашиваем

девушке глаза в

сторону формы и

слегка наклоняем

голову.

• Все остальное

оставляем без

изменений.

Было Стало

Какой дизайн лучше?

Тест: Пора сравнить результаты!

Пара слов о методологии

• В тестировании каждого дизайна

участвовало 11 человек (каждый

раз новые)

• Мужчины и женщины

• Пользователи находили сайт на

Mail.ru

• Открывали его и должны были

решить, куда кликнуть, чтобы найти

тур в Египет

• Тестирование продолжалось до

первого клика

Результаты тестирования

• Исходный дизайн

– 3 неэффективных клика

– Девушка почти не ловит

взгляд

– Взгляды рассредоточены в

верхней части экрана

• «Косые» глаза

– 3 неэффективных клика

– Пользователи меньше

смотрят на логотип и больше

— на «Лучшие предложения

дня» (1)

Отрицательный результат

• Изменение направления

взглядя «модели» не повлияло

на количество эффективных

кликов

• Должно быть, это из-за

«пузырей», которые отвлекли

на себя драгоценное внимание

пользователей?

• Давайте уберем «пузыри» и

протестируем снова!

Дизайн без «пузырей»

Посмотрим, как это сработает

Убирали «пузыри», заменив их на ссылки

Результаты тестирования без "пузырей"

• «Косые» глаза

– 3 неэффективных клика

• Без «пузырей»

– 4 (!) неэффективных клика

– Пользователи стали кликать

миниатюру внизу (зона 2) и

ссылки в верхнем меню (зона 1)

1

2

Разбор полетов

Что привлекло пользователей

именно в этой миниатюре?

Почему пользователи стали

замечать мелкие элементы?

Таинственная миниатюра

Эта девушка у вас

ассоциируется с отпуском?..

А эта?

Сравним приоритеты

Что бросается в глаза? А здесь?

Когда исчезли «пузыри», их место

на пьедестале заметности заняли

другие элементы

Яркие «пузыри» — бесспорные

победители в борьбе за внимание

пользователей

Тактика победоносной битвы

•Вызываем приятные

ассоциации

– Никакого дресс-кода —

только пляжные костюмы

•Направляем взгляд на

форму

– Понижаем визуальную

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

второстепенных

элементов

Встречаем: купальник против дресс-кода

Купальник против дресс-кода

Вызываем ассоциации, концентрируем внимание

Приятные ассоциации + концентрация = …

Без пузырей Купальник, без миниатюр

4 неэффективных клика Ни одного неэффективного клика!

Внимание пользователей снова

сконцентрировалось на форме

Взгляд на победителя

•В предыдущем опыте мы

внесли сразу два

изменения

•Выясним, какое из них

оказалось эффективнее

•Вернём миниатюры,

оставив девушку в

купальнике.

Возвращаем миниатюры

Приятные ассоциации или концентрация внимания?

Приятные ассоциации или концентрация?

Купальник, без миниатюр Купальник и миниатюры

Ни одного неэффективного клика 2 неэффективных клика

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

обращать внимание на миниатюры

Что еще можно сделать с победителем?

• Все клики были успешными, но два

клика были сделаны не в форму

• Оба клика не в форму были сделаны

женщинами (хотя и они были

эффективными)

• Наше объяснение этому — модель в

купальнике недостаточно влияет на

женщин

• А женщины явно покупают туры не

реже мужчин

• Создадим еще один вариант дизайна,

чтобы повысить влияние на женщин

Влияние на женские взгляды

• Что для женщины отдых?

Море, солнце, знакомство с

приятным мужчиной…

• Возможно, женщин привлечет

фотография романтической

пары на пляже?

Романтика и женское внимание

Купальник, без миниатюр Романтическая пара

Ни одного неэффективного клика 4 неэффективных клика

Похоже, локоть сработал в двух

направлениях…

Все 6 вариантов

3 ошибки 3 ошибки 4 ошибки

Без ошибок! 4 ошибки 2 ошибки

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

Любителям диаграмм

Концентрация кликов

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

1 2 3 4 5 6

Верхнее меню Ссылки вместо баблов

Миниатюры Бабл

Акции Форма

Клики

Варианты дизайна

1 — исходный дизайн

2 — «косые» глаза

3 — без «пузырей»

4 — купальник, без миниатюр

5 — купальник, с миниатюрами

6 — романтическая пара

Время до клика

0

5

10

15

20

25

30

1 2 3 4 5 6

Муж. Жен.

Секунды

Варианты дизайна

1 — исходный дизайн

2 — «косые» глаза

3 — без «пузырей»

4 — купальник, без миниатюр

5 — купальник, с миниатюрами

6 — романтическая пара

Эффективность

Пользователи

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

1 2 3 4 5 6

Неэффект. клик Эффект. клик

Варианты дизайна

1 — исходный дизайн

2 — «косые» глаза

3 — без «пузырей»

4 — купальник, без миниатюр

5 — купальник, с миниатюрами

6 — романтическая пара

dmitrysatin@yandex.ru

+7-903-130-0201 dmitrysatin

dmitry.satin

Дмитрий Сатин, UsabilityLab

Национальный Центр Информатизации

Вопросы

Почему так получается, что все хорошее приходит от не очень

хорошего: Например, термин посадочные страницы (они же

лендинги) в нашей стране начал свое хождение и

использование от "инфо бизнеса", а по идее должен был

стартовать от компаний стоящих в авангарде рынка е-коммерс,

так как они постоянно ищут и пробуют новые инструменты и

модели привлечения трафика и взаимодействия с

пользователем.

Стоит ли менять заголовки или текст кнопок, в зависимости от

информации до этой заявки?

Есть каки-то тонкости в оформлении товарных лэндингов для

разных групп посетителей? В нашем случае ЦА: торгующие

организации, организации занимающиеся лесозаготовкой, ИП

оказывающие услуги, дачники

Обязательно ли всю главную информацию на посадочной

отображать в первом экране и какой % пользователей

спускается во второй экран?

Если мы используем видео на посадочной странице, то можно

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

и со звуком)

Столкнулись с такой тенденцией, что чем больше ты даешь

правдивой информации (даже если это супер характеристики,

супер продукта), тем больше сомнений ты пробуждаешь в

пользователе, как итог ты получаешь меньшую конверсию.

(Работаю в инвестиционной кампании, с вашего позволения

бренда называть не буду.)

Какой самый эффективный способ (форма) мотивировать

пользователя оставить свой емэйл и контактный телефон?

dmitrysatin@yandex.ru

+7-903-130-0201 dmitrysatin

dmitry.satin

Дмитрий Сатин, UsabilityLab

Национальный Центр Информатизации

Сайт Школы

Канал на YouTube