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

1. Повышение конверсии
сайта через оптимизацию
юзабилити
www.hiresolution.su

2. Андрей
Погорельский
Эксперт в сфере
дизайна (опыт c 1998)
и digital-рекламы
(c 2006)
СЕРТИФИКАТЫ
КЕЙСЫ Продажа 200 платьев в день
В 6 раз больше пациентов
ДИЗАЙН
hiresolutionwww.hiresolution.su

3. Надежда
Дроздова
Юзабилист-
фрилансер
Специалист по юзабилити
номер 1 на самом крупном сайте
фрилансеров FL.ru
Опыт работы юзабилистом
более 3 лет
Более 100 проектов в год
Сотрудничество с десятками веб-
студий России, Украины и Европы
hiresolutionwww.hiresolution.su

4. Посадочная страница
• Дескриптор
• Призыв
• Кнопка заказа
• Акция с
дедлайном
• Изображение
• Триггеры
доверия
• Этапы работы

5. Повышение конверсии сайта
• Аудит сайта: юзабилити и др.
• Перепроектирование
и редизайн сайта
• Виджет опросов Hotjar.com
• Виджеты Callbackhunter и
автоприглашения онлайн-
консультантов

6. Виджет опросов Hotjar.com

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

8. rugator.net

9. rugator.net
• Сайт, где всякий желающий может «поругать» юзабилити
вашего сайта. Среди пользователей есть и профессиональные
юзабилисты. Интересен, прежде всего, тем, что полностью
бесплатен. Поэтому при желании можно и послушать, что о
вашем сайте скажут обычные посетители.
• + бесплатный
• +отзывы можно получить довольно быстро
• -отзывов будет немного
• -результат непредсказуем
• -попасть в ЦА вашего сайта невозможно
• Делать какие-либо выводы по ответам на данном сайте я не
рекомендую.

10. rugator.net

11. askusers.ru

12. askusers.ru
• Здесь опрос поставлен на полупрофессиональные рельсы. Вы выбираете
тариф, количество опрашиваемых. Им будут заданы одинаковые вопросы
о вашем сайте, они ответят, независимо друг от друга. В итоге вы получите
анкеты с ответами всех опрашиваемых и файл со сводными данными по
ответам.
• +удобный для использования файл на выходе
• +можно выбрать и заказать ответы своей ЦА
• -дорого
• -обработка заказа не меньше недели
• Здесь, конечно, можно сделать частичные выводы, но только в том случае,
если все отвечающие в каких-либо ответах едины, что вряд ли возможно.
Людей в опросе участвует слишком мало, в пределах статистической
погрешности. Основываясь на мнении двух-трех человек, можно сделать
сайт совершенно неудобным для большинства. Не рекомендую использовать
для правок сайта по рекомендациям данного сервиса.

13. askusers.ru

14. uxcrowd.ru

15. uxcrowd.ru
• Появился сервис совсем недавно и сейчас на этапе становления. Суть сервиса
в предоставлении заказчику видео, на котором посетитель изучает сайт и
проговаривает все свои мысли.
• +быстрый результат (обещают за 1 час)
• +наличие сводного файла
• -для изучения необходимо много времени
• -выводы придется делать самостоятельно
• -дорого
• Здесь, как и в предыдущих вариантах, вам предлагают сделать выводы о
вашем сайте основываясь на частном мнении 1-5 людей, что совершенно
нелогично. Ко всем остальным минусам других сервисов добавляется
большое количество времени и сил на самостоятельную расшифровку
«потока сознания» посетителя. Не рекомендую этот сервис для выводов, хотя
знать, что о вас думают, конечно, может быть интересно.

16. uxcrowd.ru

17. sitepolice.ru

18. sitepolice.ru
• Старый сайт, уникальный в своем роде. Когда-то именно
здесь я начинала свою деятельность юзабилиста, как
и многие нынешние фрилансеры-юзабилисты. Это
настоящая школа юзабилистов. Здесь вы, как в веб-студии,
можете заказать аудит своего сайта у профессионального
юзабилиста, только обойдется вам это гораздо дешевле. По
сути, авторы аудитов на этом сайте являются фрилансерами,
но, во-первых, сайт берет на себя общение с аудиторами и
дает гарантии по качественному выполнению работ. А, во-
вторых, благодаря продуманной системе рейтинга, аудиторы
работают здесь за гораздо меньшие деньги, чем при прямом
заказе.

19. sitepolice.ru
• +высокое качество аудитов
• +возможность заказать независимые аудиты от нескольких
юзабилистов
• +возможность отдельно заказать seo аудит
• +низкие цены
• -несоблюдение сроков
• -заказ может остаться необработанным
• На сегодняшний день сайт заброшен и поступающие изредка
заказы обрабатываются очень долго. Поэтому при всех
плюсах рекомендовать этот сервис я пока не могу.

20. sitepolice.ru

21. Как работать с Вебвизором
и Яндекс Метрикой в целом

22. Вебвизор Отчеты Метрики
• Любительский подход
к юзабилити.
• Это частное мнение,
основанное на личных
предпочтениях, вкусовщина,
по которому нельзя делать
выводы о сайте. А во втором
– это статистика, холодный,
без эмоциональный подход,
описывающий глобальные
проблемы
• Профессионально.
• Это статистика, холодный,
без эмоциональный подход,
описывающий глобальные
проблемы.

23. Так зачем же нужен Вебвизор?
• Для начинающего сайта
• Для сайтов с очень маленькой посещаемостью
• Для просмотра отдельных визитов узкого круга посетителей,
отвечающих определенным условиям. Например, фильтр
визитов: достигли ретаргетинговой цели, но не достигли
конверсионной.
• Работа с формами. Например, если посетитель положил
товар в корзину, начал оформлять заказ, но не закончил.
Карта аналитики форм покажет вам статистику по таким
посетителям, которые взаимодействовали с формой, но не
отправили ее и сразу предложит посмотреть эти визиты в
вебвизоре. Только так вы увидите на каком этапе и почему
посетитель прервался.

24. Виды аудитов сайта и как
выбрать подходящий

25. Зачем вам аудит?
• Типовая ситуация: У нас низкая конверсия и мы
хотим ее поднять
• Надо убедиться, что конверсия действительно
низкая и какая по мнению заказчика низкая в
процентах
• Чтобы поднять конверсию надо понять причины,
почему она низкая – этим займется аудитор

26. Исходные данные для анализа
• Корректно подключена статистика на все страницы
сайта
• Включен Вебвизор (с его помощью создаются карты
кликов, ссылок, скроллинга и аналитика форм)
• Метрика подключена к Директу
• Настроены цели

27. Мини или экспресс аудит 5 тыс. знаков
• Просто узнать мнение со стороны относительно
удобства своего сайта
• Для сайта, у которого с юзабилити все в порядке и
нужны лишь мелкие правки.
• Констатация «существует вот такая ошибка»

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

29. Дополнительные блоки анализа сайта
• Технический анализ
• Анализ статистики
• Маркетинговый анализ
• Сравнение конкурентов

30. МИНИ-АУДИТ
ЮЗАБИЛИТИ САЙТА
gim.internet-akademia.ru
• Отчет содержит в себе аудит юзабилити лэндинга,
вывод об удобстве целевого действия,
а также идеи для развития ресурса.

31. 1.1. Первый экран и шапка сайта отвечают
за идентификацию сайта
• Идентификация, в свою очередь, влияет на процент отказов.
• Обязательными элементами идентификации сайта является
логотип, описание сайта, название компании.
• На данном сайте очень небольшого размера логотип и такого
же, слабочитаемого, размера название компании. Это сразу
снижает не только скорость и легкость идентификации, но и
уровень доверия к сайту.
• Отсутствие в шапке сайта контактов

32. 1.1. Первый экран и шапка сайта отвечают
за идентификацию сайта

33. 1.2. Главное меню
• Заглавные буквы читаются хуже строчных с одной заглавной.
• Полупрозрачные серые буквы поверх серой плашки плохо
читаются, особенно при скроллинге.
• Черный логотип на серой плашке тоже не контрастен фону.
1.3. Фото человека - мощный инструмент
• Взгляд в глаза пользователя отвлекает от важной
информации, притягивая внимание
• Выгоднее использовать фото со взглядом, обращенным на
заголовок

34. 1.4. Мотивирующий блок «call to action»
• Чтобы взять личные данные, нужно замотивировать выгодой
• На данном этапе просмотра сайта посетитель еще ничего
не знает ни об услуге, ни о своей выгоде при ее заказе и,
естественно, не готов делиться своим номером телефона
• Какое именно предложение станет наиболее эффективным
покажут исследования и тестирование, например это мог бы
быть бесплатный выбор ниши или скидка.

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

36. 1.5.2 Сильные стороны формы
• Плюс - микро-анимация элементов формы.
• Заметное изменение кнопки заказать при наведении мыши.

37. 1.6. В блоке «наши работы» сайты очень
похожи, сразу заметно, что сайты делаются
по шаблону.
• Хуже того, что похожие сайты размещены подряд: сайт люстр
и сайт кинетического песка имеют практически идентичные
меню каталога и главное меню, фильтры, сортировщики, и
отображение товаров. Конечно, индивидуальный дизайн
довольно затратен, да и не всегда нужен, но вот такой вот
шаблонный подход к сайту может оттолкнуть посетителя.
• Я рекомендую «замаскировать» эту похожесть сайтов при
помощи размещения различных страниц сайта и различных
частей этих страниц, а также не размещать сайты с
похожими элементами подряд в ленте.

38. 1.6. В блоке «наши работы» сайты очень
похожи, сразу заметно, что сайты делаются
по шаблону.

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

41. • Но основная проблема в невозможности скачать КП без
введения и адреса электронной почты, и номера телефона.
• Форма при этом сообщает, что КП будет отправлено на
почту, так зачем вам номер телефона? Такое «насилие» вряд
ли найдет понимание у ваших посетителей. Требования
предоставить свои контакты в данном случае не оправданы,
ни технической необходимостью, ни выгодой для посетителя.
• И мы снова возвращаемся к тому, что необходимо что-
то предложить посетителю за этот номер телефона или
не требовать его и предоставить полную информацию о
предложении. Возможно, оно покажется потенциальному
клиенту столь выгодным, что он сам с удовольствием
отправит вам все свои контакты. А пока эта информация ему
неизвестна, то нет и причин для предоставления доступа к
контактам.

42. 1.8. Добавить контакты в шапку страницы
• В блоке «контакты» присутствует номер телефона для связи.
• Именно его я рекомендую разместить в шапке, не забыв
при этом снабдить его информацией о времени приема
звонков, которую необходимо добавить и в этот нижний блок
контактов.

43. 2. Вывод
• Довольно интересное предложение с точки зрения
комплексности услуг.
• Проблем у сайта с юзабилити немного, одна из основных –
схожий дизайн различных элементов.
• Остальные ошибки можно отнести к ошибкам доверия
и маркетинговой стратегии. Очень трудно решиться на
сотрудничество с компанией, которая не дает гарантий
вовсе и даже полной информации о своем предложении без
указания контактов посетителя.
• Отрицательно сказывается и отсутствие цены на услуги,
а также информации о возможности заказать эти услуги
не в комплексе, ведь кому-то, например, нужна только
консультация по выбору ниши, а кто-то готов сайт сделать
сам и т.п.

44. Тренды веб-дизайна 2016
Где искать вдохновение
www.hiresolution.su
Студия дизайна и digital Hiresolution

45. Источники вдохновения: веб-дизайн
Поиск по ключевым
словам:
• Awwwards.com
• Siteinspire.com
• Behance.net
• Dribbble.com
• Thefwa.com
• Themeforest.net
Code inspiration:
• Codepen.io

46. Лайфхак для быстрого поиска
вдохновения/референсов
Операторы поиска Google и Google Images
(clothes | fashion )
( ecommerce | shop| e-commerce )
( site:Awwwards.com | site:Siteinspire.com
| site:Themeforest.net )

47. Тренды веб-дизайна
2016: те же, что и
2015, 2014
• Адаптивный дизайн
• Распространение UI шаблонов
• гамбургер-меню
• регистрация аккаунта: кнопка
регистрации или через
социальные сети
• бесконечный скроллинг - связь с
трендом сторителлинга
• карточный дизайн (Card Layouts)
• большие фоновые изображения
(hero image)

48. • Богатая анимация
• Микровзаимодействия
(transition)

49. • Material дизайн от Google
Android: обогащенная
альтернатива плоскому
дизайну
• Использует глубину и тень, что
делает его более интересным и
богатым.
• Отзывчивый дизайн
• https://www.google.com/design/spec/material-design/introduction.html

50. • Плоский дизайн никуда
не уходит
• Длинные тени
• Яркие цветовые схемы
• Простая типографика
• Призрачные (контурные) кнопки
• Минимализм

51. • Кейс: магазин
керамического
гранита и мозаики

76. Кто автор, кроме дизайнера?
• Юзабилист
• Дизайнер
• Frontend-разработчик (верстальщик)
• Менеджер заказчика
• Внешний консультант

77. Как выбрать
профессионального
юзабилиста

78. Виды юзабилити-специалистов
• Профессионалы
• UX/UI Дизайнеры
• Совместители
• Веб-аналитики

79. Как выбрать профессионального
юзабилиста
• Основная специализация – «юзабилити»
или «юзабилити-анализ»
• Наличие портфолио, открыто выложенного в
интернете
• Прозрачные цены на типовые услуги
• Ответы на вопросы

80. Вопрос 1. Нравятся ли вам цвета нашего
сайта или, как вариант, кнопок, шрифтов и
т.п. – все, что относится к дизайну.
• Ответ любителя: розовый/красный/черный/зеленый цвет
фона/кнопок/шрифта не соответствует вашей тематике/ЦА, я
рекомендую его сменить на …
• Ответ профессионала: я не комментирую дизайн, т.к. я
не являюсь вашей ЦА, а все вопросы по дизайну сайта и
элементов требуют тестирования.

81. Вопрос 2. Ваш аудит поднимет мне
конверсию? Есть ли у вас гарантии, что
после аудита конверсия сайта вырастет?
• Ответ любителя: конечно, вырастет, ведь вы исправите все
ошибки, мешающие заказу.
• Ответ профессионала: конверсия – вещь сложносоставная,
хорошее юзабилити влияет на нее так же, как и работа
менеджеров и курьеров, не говоря уже об источниках и
качестве трафика.

82. Вопрос 3. Мне сказали, что нужно
переставить пункты в меню. Как вы
считаете, стоит ли это делать и каким
образом?
• Ответ любителя: отзывы необходимо перенести влево,
а каталог вправо (названия страниц в данном примере
значения не имеют).
• Ответ профессионала: я не могу ответить на этот вопрос пока
не посмотрю вашу статистику и не определю точно, какая из
страниц более популярна.

83. Итак, хороший юзабилист:
• Не обязательно сто́ит дорого
• Имеет основную специализацию юзабилити
• Имеет работы в портфолио, которые можно
просмотреть (часто фрилансеры размещают только
нечитаемые скрины работ)
• Может назвать цену, не глядя на сайт
• Корректно отвечает на вопросы

84. Андрей Погорельский
• Консультации
• Обучение
• Стажировки
hiresolution.su
Спасибо за внимание!
vk.com /reklamarabotaet
fb.com /reklamarabotaet
sales@hiresolution.su
8 (905) 208-05-25