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

1. Сайт, который нравится
пользователям и поисковым
системам
Пантелеев Александр
Жохеев Вячеслав
Студия интернет-маркетинга Fresh IT

2. Одни и те же ошибки

3. Причины проблем
1. Плохо продуманная структура
2. Неудачно продуманный дизайн

4. Плохо продуманная структура
• Все не плохо структурированно или плохо
структурированно
• Слишком профессиональная логика структуры
• Товары/услуги, не относятся к данным разделам
сайта

5. Неудачно продуманный дизайн
• Неудобный шрифт
• Много отвлекающей информации
– Баннеры
– Анимация
– Музыка 0_o
• Пользователю неочевидно где он находится
• Боязнь свободного места
• Калейдоскоп из различных шрифтов,
изображении, цветов
• Отсутствие call-to-action

6. Неудачно продуманный дизайн

7. Неудачно продуманный дизайн

8. Неудачно продуманный дизайн

9. Неудачно продуманный дизайн

10. Почему возникают эти
проблемы/ошибки?

11. Почему возникают эти
проблемы/ошибки
• Проблемы эти возникают из-за неопытности
специалистов, которые разрабатывают сайт
• Из-за забыл «подумать» у специалиста
• Из-за неопытности самого заказчика, который не
понимает, что от него хотят
• Заказчик не воспринимает свой сайт как источник
дохода, говорит - “И так сойдет”

12. Что может произойти если не
обращать своего внимание?

13. Что может произойти если не
обращать свое внимание?
Потеря лояльности клиентов
Вы потеряете свои вложения
Недополучите прибыль

14. Как избежать проблем и сделать
сайт, который продает
?

15. Структурируем информацию

16. Формируем структуру сайта
- Анализируем запросы
- Определяем приоритеты
- Анализируем конкурентов

17. Подбор запросов
- Статистика ключевых слов от Яндекс
wordstat.yandex.ru
- инструмент подсказки ключевых слов Google
adwords.google.com/keywordtool

18. Подбор запросов
- Запросы для главной
страницы:
обувь
магазин обуви
обувь купить
…
- Дополнительные группы
запросов:
детская обувь
женская обувь
мужская обувь
------------------------------------
обувь весна 2013

19. Планируем структуру исходя из
начального списка запросов

20. Выбираем подразделы исходя из
ассортимента

21. Анализируем запросы для разделов
и подразделов
Выявляем
дополнительные
характеристики:
- резиновые сапоги
- кожаные сапоги
- замшевые сапоги

22. Дополняем структуру

23. Выбор названия для раздела
колясочки для деточек
(частотность 0)
детские коляски
(частотность 66500)

24. Плохая структура

25. Плохая структура
- плохое ранжирование сайта в поисковых
системах
- мало целевого трафика
- высокий показатель отказов
- проблемы в ведении контекстной рекламы
(структура аккаунта повторяет структуру
сайта)

26. Что дальше?
- Формирование заголовков (теги title)
- Формирование описаний страниц (метатеги
description)
- Написание текстов

27. Заголовки страниц

28. Заголовки страниц

29. Плохие заголовки
- Одинаковы на нескольких страницах сайта
- Содержат перечисления ключевых слов
- Содержат информацию, не относящуюся к
странице

30. Хорошие заголовки страниц
- Уникальны в пределах сайта
- Описывают содержимое страниц
- Лаконичные и точные

31. Описания страниц

32. Описания страниц

33. Плохие описания
- Одинаковы на нескольких или всех
страницах сайта
- Содержат перечисления ключевых слов
- Неинформативные и пресные
- Содержат информацию, не относящуюся к
странице

34. Хорошие описания
- Уникальны в пределах сайта
- Описывают в 2-3 предложениях
содержимое страниц
- Информативны и интересны
- Побуждают пользователя перейти по
ссылке из выдачи поисковой системы

35. Плохие тексты
- Неуникальные в пределах интернет
- Дублируются на нескольких или всех
страницах сайта
- SEO-тексты
- Не несут пользы посетителю
- Частично или полностью скрыты от
пользователя (открыты только поисковым
роботам)

36. Хорошие тексты
- Уникальны в пределах сайта и сети
интернет
- Помогают пользователю и понятны ЦА
- Лаконичны
- Оптимизированы
- Структурированы и оформлены (разбиты на
абзацы, с подзаголовками)
- Продают

37. Как повысить конверсию?
Работайте над:
• Юзабилити сайта
• Юзабилити сайта для поисковой системы
• Адаптивный дизайн
• Социальное одобрение
• Онлайн менеджер
• Веб-аналитика

38. Юзабилити сайта
Качество сайта во многом зависит от его удобства в
использовании

39. Почему пользователи покидают
сайт?
• Непонятно чему посвящена тематика сайта
• Возможность совершить конверсионное действие
только после регистрации
• Нужно совершить много шагов для совершения
действия.
• Оставить много личной инфомрации
• Много лишней и отвлекающей информации
– Баннеры
– Анимация
– Музыка 0_o
• Не актуальные телефоны

40. Параметры сайта на которые
следует обращать внимание
Логичная структура и понятная система навигации

41. Параметры сайта на которые
следует обращать внимание
Высокая скорость загрузки

42. Параметры сайта на которые
следует обращать внимание
Небольшой вес

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

44. Параметры сайта на которые
следует обращать внимание
Основное место отвести той информации, ради которой
сайт создавался

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

46. Параметры сайта на которые
следует обращать внимание
• Общее количество ссылок, как в пределах сайта,
так и в пределах глобальной сети;
• Общее количество слов на странице;
• Общее количество изображений (не рекламы)
• Размер страницы (в Кб)
• Площадь страницы (общая в пикселах)
• Длина страницы (или высота. Кому как
нравится)
• Общее количество таблиц (сюда входит также и
дизайн описанный таблицами)
• Количество столбцов (в таблице)
• Количество строк (в таблице)
• Общие строки
• Общие столбцы
• Общие ячейки
• Общее количество размеров шрифта
используемое для ссылок
• Общее количество размеров шрифта
используемое для заголовков
• Общее количество размеров шрифта
используемое для основного текста
• Общее количество размеров шрифта
• Присутствие "крошечного" текста
• Общее количество цветов (исключая
рекламу)
• Выравнивание элементов страницы
• Средняя яркость страницы
• Вес страницы (время загрузки)
• Общее количество рекламы
• Общая площадь рекламы (которая всех нас
так раздражает)
• Наибольшая площадь рекламы
• Число рекламных ссылок
• Место ссылок на странице и тд.

47. Инструменты…
http://gtmetrix.com/ - инструмент проверки скорости сайта
http://goo.gl/OCFRF - инструмент проверки скорости сайта от
google

48. Советы по уменьшению веса
страницы
• Минимизация CSS и JS файлов
• Оптимизация изображений
• Перенос JS файлов в подвал сайта
• Постараться сделать валидную верстку
• Настроить G-zip сжатие

49. Что это такое адаптивный дизайн?
Дизайн страниц сайта, обеспечивающий отличное
восприятие на различных устройствах

50. Когда и в каких случаях нужно
применять адаптивный дизайн?
• Узнайте какое количество пользователей
просматривает ваш сайт при помощи смартфонов,
планшетов
• Узнайте что это за устройства и их разрешения
экранов

51. Когда и в каких случаях нужно
применять адаптивный дизайн?
А с помощью чего это можно сделать?

52. Когда и в каких случаях нужно
применять адаптивный дизайн?
1. В Google Analytics Вам нужно перейти в нужный сайт
2. Далее Аудитория > Обзор > Мобильные устройства

53. Далее перейти во вкладку «Обзор» и увидеть кол-во
пользователей

54. Далее перейти во вкладку «Устройства», чтобы Вы могли
увидеть список использовавшихся устройств

55. Далее нажать на кнопку «Другое» и выберите «Разрешение»,
чтобы посмотреть на разрешения экранов

56. Разрешения экранов пользователей

57. Что Вы теряете и что получаете?
Что теряете Что получаете
• Время на рисование макета
• Время на верстку макета
• Деньги
• Сайт более дружелюбен с
поисковой системой
• Один сайт для всех устройств
• Благодарного пользователя
• Больше денег

58. Несколько примеров адаптивного
дизайна от студии Fresh IT

65. Инструмент помогающий увеличить
конверсии

66. Онлайн консультант
http://redhelper.ru/
http://www.jivosite.ru/
http://siteheart.com/

67. Онлайн консультант

68. Онлайн консультант

69. Социальное одобрение
Плагины соц. сетей

70. Отзывы на сайте компании
Плагины соц. сетей

71. Отзывы на сайте компании
Плагины соц. сетей

72. Отзывы на сторонних ресурсах
http://price.ua

73. Отзывы на сторонних ресурсах
http://hotline.ua/

74. Как собрать отзывы
• Звонок клиенту через 3-4 дня
• Уточнить, все ли понравилось, какие были
проблемы и т.д.
• Просьба оставить отзыв
– Отзыв на странице товара
– Отзыв на price.ua или hotline.ua

75. Веб-аналитика на примере
Яндекс.Метрика
Цель:
• Оптимизация главной страницы сайта
Пути реализации
• Изучение сайтов конкурентов
• Определение и формирование приоритетных
разделов сайта, с учетом бизнес целей заказчика
• Разработка прототипов главной страницы
• Разработка дизайна главной страницы

76. Определяем и формируем
приоритетные разделы сайта
Что было…

77. Определяем и формируем
приоритетные разделы сайта

78. Определяем и формируем
приоритетные разделы сайта

79. Определяем и формируем
приоритетные разделы сайта

80. Разделы сайта по популярности у
пользователей

81. Разработка прототипов главной

82. Разработка прототипов главной

83. Разработка дизайна главной

84. Оптимизируем продажи

85. Оптимизация воронки продаж
• Настройка воронки продаж
• Анализ воронки
• Анализ поведения пользователей
• Выводы
• Внедряем улучшения

86. Настройка воронки
Определение последовательности шагов до
совершения покупки:
/корзина.php  /адрес-доставки.php 
/подтверждение-заказа.php/спасибо-за-
заказ.php

87. Настройка воронки

88. Настройка воронки

89. Настройка воронки

90. Настройка воронки

91. Анализ воронки

92. Начальные выводы (пример)
• 56% пользователей теряется на процессе
заполнения информации о доставке
• 98% покупателей уходят на странице
заполнения личной информации

93. Построение гипотез
• Информация о доставке путает покупателей
• Покупатели не хотят или не могут заполнить
обязательное поле кличкой кота

94. Проверка гипотез
• Яндекс.Вебвизор
• тепловая карта кликов (Яндекс Метрика)

95. Включаем Яндекс.Вебвизор

96. Яндекс.Вебвизор

97. Карта кликов

98. Карта кликов

99. Подтверждаем гипотезы
• Гипотеза 1 подтверждена
• Гипотеза 2 подтверждена
Дополнительно:
• Посетители путают поля «домашний
телефон» и «мобильный телефон»

100. Улучшаем сайт

101. Оцениваем результат
• На 50% снизилось количество уходов со
страницы доставки
• Только 10% покупателей стали уходить со
страницы заполнения личной информации

102. Всё еще нет продаж?

103. Приём-приём!

104. А кто на самом деле берет трубку?

105. Выводы
• Структурируйте информацию на сайте
• Оптимизируйте заголовки и тексты сайта
• Принимайте активное участие в разработке
• Задавайте и отвечайте на вопросы
• Анализируйте посетителей вашего сайта и их
взаимодействие с ним
• Ищите ошибки и устраняйте их
• Постоянно работайте над улучшением проекта
• Получайте больше довольных клиентов!

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

107. Сайты для обсуждения
www.itdelight.com
www.polus.ua
www.autopozitiv.com.ua
exclusive.kharkov.ua
nastyshop.com.ua
aladdin-print.ua

108. Спасибо за внимание!
Вячеслав Жохеев
Руководитель отдела поисковой оптимизации
Александр Пантелеев
Руководитель отдела разработки
студия интернет-маркетинга Fresh IT
Украина, г. Харьков, ул. Космическая, 21
+38 (057) 701-43-81; +38 (057) 761-30-08
FreshIT.net