Проектирование сайтов - Андрей Гавриков

Проектирование сайтов

Андрей Гавриков

Как разработать эффективный сайт
для вашего бизнеса. Методика
разработки сайта.
•
•
•
•
•
•
•
•

Цели и задачи сайта
Структура сайта
ТЗ (техническое задание)
ХЗ (художественное задание)
Контентная политика
Прототипирование
ЕДРС (единый документ
разработки сайта)
Аналитическая модель оценки
эффективности сайта на основе
KPI

Ключевые
показатели
эффективности

•

Ключевые Показатели Эффективности
необходимо продумывать заранее!

•
•
•

Даже до дизайна ,
до структуры сайта,
до ТЗ.

Ключевые

Надо ответить на вопросы:
•
•
•
•

•
•
•

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

Ключевые

Частные заказчики

Дизайнеры и дизайн-студии

Строители и строительно-отделочные бригады.

Торговые компании и дилеры

Ключевые

Частные заказчики

•

Хотят купить материал для отделки стен или услугу отделки стен, решая
какую то свою конкретную задачу и называя покрытие разными
терминами: обои, краска, штукатурка, и пр. (т.е. имея сформированный
спрос)

•

Ожидают от продукта ряд характеристик, в зависимости от решаемой
задачи - (экономичность, легкость в нанесении, уходе, экологичность,
эстетичность, цена/качество)

•

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

Ключевые

Дизайнеры и архитекторы

•

Хотят купить материал для отделки стен или услугу отделки стен, решая
какую то свою конкретную задачу и называя покрытие разными
терминами: обои, краска, штукатурка, и пр. (т.е. имея сформированный
спрос)

•

Ожидают от продукта эстетичности, хорошего соотношения цена/качество

•

Хотят работать с проверенной фирмой для гарантии получения результата
и нужного эффекта, выплаты дизайнерского процента

•

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

Ключевые

Торговые компании и дилеры

• Ищут востребованный материал для разбавления товарного
ассортимента.

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

Ключевые

Сегмент ЦА

Ожидания

Возражения

Возможное УТП под сегмент

Ожидаемые целевые действия

Ищут дешевый сайдинг.

- дорого, я найду дешевле

«Товар 1»

Прочитать статью о выборе сайдинга.

Объяснить, что стоимость
оптимальна и дальнейшее
снижение возможно только за
счет потери качества.

Поработать с модулятором

Физические лица
- Эконом сегментации

Выбрать дилера
Звонок в дилерскую сеть

- Средний сегмент

Оптимальное соотношение цена качество.

-есть другие марки. Например,
«немецкая» Docke

«Товар 1»,
«Товар 2»

Достойный внешний вид
Надежность и долговечность

Прочитать статью о выборе сайдинга.
Поработать с модулятором

объяснить выгодность
предложения.


Сыграть на том, что хорошие
хозяева выбирают Компания 1 и
не переплачивают.

- Сегмент «выше среднего»

Качественные дорогие виды сайдинга, цокольный
сайдинг

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

Рассчитать примерную стоимость
проекта.

Юридические лица

Ожидания

Возражения

Возможное УТП под сегмент

Ожидаемые целевые действия

- Прорабы, отделы снабжения

Мотивация закупщика
Минимальная цена на выбранный вариант
Отсутствие проблем с качеством

Привыкли работать с привычными
материалами.

Наличие исследований о качестве
товара и сравнении его с аналогами
Большой запас продукции,
эффективная логистика, обширная
сеть дилеров

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

- Архитекторы, дизайнеры

Широкий выбор ярких цветов.
Известный производитель.
Разумная цена.
Качественный материал.
Отсутствие проблем при реализации нарисованного
проекта.

нет

Первозданность экстерьера здания в
течении 30 лет.
Популярные цвета.
Простое объяснение клиенту выбора
именно этой марки сайдинга.

Посмотреть готовые проекты.
Рассчитать стоимость проекта.
Поэкспериментировать с «модулятором».
Звонок в дилерскую сеть.

- Строительные компании и
бригады (для частного
строительства)

Попадание в бюджет клиента
Убедить попробовать более
Все приведенные ожидания.
Отсутствие проблем с качеством.
качественный материал, чем обычно.
Оперативные сроки поставки материалов и своевременная
доставка на объект.
Сохранность материала при транспортировке
(противоударная упаковка)
Скидки строительным компаниям

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

Дилеры

- условия сотрудничества
Ищут подтверждение того, что марке
- маркетинговая поддержка (оформление торговых мест,
можно доверять
реклама, продвижение продукции, рекламные материалы) Сравнивают стоимость с аналогами
- поставка клиентов от производителя
- логистика (предсказуемые и оперативные сроки поставок)
- надежность как производителя и как партнера

Заявка на получения статуса дистрибутора
сайдинга

Российский сайдинг недорогой и
качественный - за счет объемов на
нем можно заработать
все приведенные ожидания

Скачивание буклета
Звонок в дилерский отдел.

Переделка
существующего
сайта.
Особенности.

1. Экспресс-аудит юзабилити сайта и анализ
данных из веб-аналитики. Это позволит выявить
эффективные поведенческие модели, которые
присутствуют на существующем сайте.
2. Текстово-графический аудит
3. Структурный аудит и поисковый,
для того чтобы понять распределение ключевых
запросов по текущей структуре сайта
и сохранить её в следующей версии,
а так же понять какие существуют
ошибки с точки зрения оптимизации

Экспресс-юзабилити
аудит

Текстово-графический
аудит

Поисковый и
структурный аудит

Поисковый и
структурный аудит

Внутренние факторы
10. Наличие других сайтов принадлежащих
Ссылочная структура сайта
владельцу/компании
Отсутствие бесконечных зацикленных ссылок
11. Наличие немодерируемых форумов,
Правильное распределение веса
досок объявлений,
Разумный уровень вложенности страниц
12. Наличие внешних ссылок ссылок
Наличие карты сайта
13. Наличие страниц с результатами поиска,
Кеширующие заголовки
доступными для индексации.
Ссылки на неиндексируемое содержимое
Дополнительные проверки
Контент страниц сайта
Отсутствие санкций со стороны поисковых систем
Корректное использование HTML для представления контента Бан сайта
1. Заголовки страниц
АГС
2. Заголовки текстов
Проверка региональной привязки сайта
3. Метатег описания
Страницы с дублирующим содержимым
4. Теги логического выделения
Правильность настройки файла robots.txt
Использование тегов <noindex></noindex>
Представление сайта в поисковой выдаче
Отсутствие нарушений
Проблемы индексации сайта
1. Наличие скопированной или переписанной информации
Наличие ЧПУ
2. Перенаправление пользователя на другой ресурс,
3. Наличие автоматически сгенерированного (бессмысленного) текста.
4. Наличие каталогов (статей, программ, предприятий и т.п.)
5. Наличие страниц с невидимым или слабовидимым текстом или
ссылками.
6. Использование «клоакинга»
7. Использование обманных техник
8. Наличие агрессивно демонстрируемых рекламных материалов
9. Содержание в контенте страниц списков поисковых запросов

Исследование
конкурентов

Это позволит понять:
• Позиционирование
конкурентов
• Стратегии продвижения
• Бюджеты на интернетмаркетинг
• «Подсмотреть»
эффективные
инструменты привлечения,
вовлечения,
конвертации и удержания.

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

Разработка семантического ядра и структуры - непростая задача.
Структура сайта – одно из самых важных изысканий, которые вы
должны провести при разработке сайта. Структура – отражение
вашего бизнеса. Сформированный спрос в поисковых системах (при
разработке семантического ядра) также участвует в
проектировании.

Структура сайта.
Поисковые запросы

Необходимо учитывать два фактора - товарную номенклатуру
вашего бизнеса - с одной стороны, а с другой - запросы, которые
задают люди поисковым системам. Объединение этих двух
множеств (за вычетом неэффективных запросов) даёт полное
семантическое ядро, описывающее ваш бизнес.
Обычно ядро состоит из нескольких сотен и тысяч (или десятков
тысяч запросов).
Семантическеое ядро не только должно быть вписано в структуру
сайта, но оно также участвует в поисковом маркетинге (и
контекстной рекламе, разумеется).

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


Программа Key Collector


Учесть несформированный спрос!

Далее необходимо эти запросы разбить на
кластеры под каждый сегмент. И уже далее
рассортировать эти кластеры по конкретным
разделам и страницам сайта.


•
•

•
•

Техническое задание

На этом этапе необходимо:
Подобрать CMS или Framework, наиболее подходящие под требования к
безопасности, нагрузке по посещаемости и прочим параметрам.
Определиться с хостингом под выбранную платформу.
Описать функциональные элементы, которые будут использоваться на
сайте, и описание макетов страниц

Техническое задание

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

Навигация на сайте

1) навигация понятна
Сколько времени может уйти на обучение «вождению» по сайту, использующему
новые подходы в навигации? Для каждого человека этот временной промежуток
уникален, но то, что обучение необходимо – это очевидно. В сети огромное
количество сайтов, но почему посетитель должен обучаться на каждом из них?
Посетитель ищет полезную информацию, а ему предлагают выучить “правила
движения”, устройство и характеристики незнакомых панелей управления. Идеальная
навигация понятна для пользователя с первого взгляда.


Чтобы сделать идеальное навигационное меню, нужно использовать элементы к
которым люди привыкли.
Например:
Главная
Каталог
О компании
Контакты
и т.д.

2) единообразна


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

3) навигацию легко найти


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

4) удобна в использовании


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

5) ссылок не очень много


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

•


•
•
•
•

•
•
•

На этом этапе необходимо свести воедино требования к продвижению
сайта, его текстам, контенту и описать каждый раздел сайта в формате:
Название страницы.
URL адрес (в соответствии со старой структурой, если есть).
Сегмент целевой аудитории, к которой обращена эта страница.
Список целевых действий, которые необходимо совершить на этой
странице
Какие маркетинговые задачи решает эта страница (показ преимуществ,
сравнение с конкурентами и т.д.).
Перечень ключевых слов и словосочетаний.
Рекомендации к написанию текстов и размещению графики.

Задание на тексты
и прототипы

Офлайн

Чем рисовать
прототипы?

Онлайн

Ручкой и ручками

Художественное
задание

В нём должно быть описано по каким правилам:
• Использовать брендбук компании (логотип и фирменные цвета и т.д.)
• Оформлять каждый информационный блок
• Верстать контент на сайте
• и т.д.

Художественное
задание

1.

Типичные ошибки
при разработке
дизайна

2.
3.
4.
5.
6.

7.
8.

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

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

Контентная политика

В итоге получаем

•
•
•
•

Что потом?

Отдать сайт группе тестеров, для поиска ошибок и недочётов
Проверить работу сайта под нагрузкой
Настроить систему веб-аналитики, согласно KPI
Обучить специалистов компании правильно работать с сайтом:
необходимо, чтобы сайт наполнялся именно таким образом, как это было
предусмотрено в контентной политике

Проверка сайта под нагрузкой
http://loadimpact.com

Что потом?
За счёт чего можно «ускориться»?
https://developers.google.com/speed/pagespeed

Многоканальная аналитика значит, что мы понимаем, что минимум 30% наших
клиентов (по нашей практике) приходят из двух и более каналов. Понимая этот
факт, мы можем считать действительную эффективность канала, а также
правомочность его использования.

Аналитика

Аналитика

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

Продающая страница

Посадочная страница

Хорошая
посадочная
страница – это не
обязательно
большая форма
обратной связи с
телефоном.
Справа пример, как
сейчас делать
модно, но не надо

1.

2.

Краткие заголовки, не более 3-4 слов

3.
Правила
оформления
посадочных страниц

Соответствие информации в рекламном канале и посадочной странице.

Наличие элементов доверия – сертификаты, отзывы, выполненные работы
т.д.

4.

Предложение «одного окна» – нет скроллингу!

5.

Простые формы заявки

6.

Мотивационные призывы – заметные кнопки

Все советы по оптимизации посадочных страниц нужно проверять:
бизнес-моделью, здравым смыслом, MVT (многовариантными
тестированиями), рентабельностью, актуальностью для России/региона

Правила
оформления
посадочных страниц

Русский перевод:
http://www.cmsmagazine.ru/library/items/internet-marketing/101-landing-pageoptimization-tips/

Было

Посадочная
страница

Стало

страница

страница

1.

Ошибки при
создании
посадочных
страниц

2.
3.
4.
5.
6.
7.

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

8. ОТСУТСТВИЕ ТЕСТИРОВАНИЯ И АНАЛИТИКИ

Юзабилити – это субъективная
психология фокус группы или
даже отдельного эксперта.
“Может ли посетитель
выполнить предопределённое
для него целевое действие?”
UX (User eXperience) отвечает
на вопрос “Получил ли
посетитель максимальное
удовольствие от выполнения
целевого действия?”
Веб-аналитика – это
фактические данные. Одно без
другого не может работать
эффективно

• А/B, А/А, MVT – тестирования
• Постоянное тестирование (и модернизация)
разделов сайта на реальных посетителях для
достижения максимальной эффективности

Аналитика

Отчет после проведения рекламных кампаний исследуется и на его основе
принимаются решения
Планирование (проектирование) – Реализация (работа) - Контроль (Анализ) –
Корректировка (регулировка)

А дальше-то что?

av@completo.ru – пишите

www.facebook.com/gavrikov.andrey - давайте дружить
@GavrikovAndrey - фолловьте
www.youtube.com/completoru - смотрите видео
www.slideshare.net/Completo_ru - изучайте презентации

Проектирование сайтов - Андрей Гавриков

More Related Content

What's hot

Viewers also liked

Similar to Проектирование сайтов - Андрей Гавриков

Проектирование сайтов - Андрей Гавриков