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

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

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

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

• Цели и задачи сайта

• Структура сайта

• ТЗ (техническое задание)

• ХЗ (художественное задание)

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

• Прототипирование

• ЕДРС (единый документ разработки сайта)

• Аналитическая модель оценки эффективности сайта на основе KPI

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

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

• Даже до дизайна ,

• до структуры сайта,

• до ТЗ.


Надо ответить на вопросы: • Кто ваши целевые клиенты? (Пол, возраст,

отрасль, регион и т.д.) • Какие проблемы решает ваш

продукт(ы)\услуга(и) для каждого сегмента целевой аудитории?

• Хочет или это необходимо? • Какие возражения существуют у клиентов

при покупке данного продукта? • Какие стереотипы необходимо

преодолеть, чтобы совершить продажу? • Почему ваш продукт лучше, чем продукт

конкурентов? • Какие уникальные особенности получит

клиент при сотрудничестве с вами\при покупке вашего продукта или услуги?


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

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

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

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


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

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

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

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


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

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

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

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

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

Ключевые показатели эффективности • Ищут востребованный материал для разбавления товарного

ассортимента.

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

• При знакомстве с сайтом не до конца понимают ценовую политику и торговое предложение.

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






Сегмент ЦА Ожидания Возражения Возможное УТП под сегмент Ожидаемые целевые действия

Физические лица

- Эконом сегментации Ищут дешевый сайдинг.

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

«Товар 1»

Объяснить, что стоимость

оптимальна и дальнейшее

снижение возможно только за

счет потери качества.

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

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

Выбрать дилера

Звонок в дилерскую сеть

- Средний сегмент Оптимальное соотношение цена \ качество.

Достойный внешний вид

Надежность и долговечность

-есть другие марки. Например,

«немецкая» Docke

«Товар 1»,

«Товар 2»

объяснить выгодность

предложения.

Сыграть на том, что хорошие

хозяева выбирают Компания 1 и

не переплачивают.

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

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



- Сегмент «выше среднего» Качественные дорогие виды сайдинга, цокольный

сайдинг

Выбирают между натуральными

материалами и дорогим

качественным сайдингом.

Аргументировать, чем

качественный сайдинг лучше

других материалов для

облицовки фасада и цоколя.

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

проекта.



Юридические лица Ожидания Возражения Возможное УТП под сегмент Ожидаемые целевые действия

- Прорабы, отделы снабжения Мотивация закупщика

Минимальная цена на выбранный вариант

Отсутствие проблем с качеством

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

материалами.

Наличие исследований о качестве

товара и сравнении его с аналогами

Большой запас продукции,

эффективная логистика, обширная

сеть дилеров

Заполнить заявку на получение сравнения

продукции с конкурентами и обоснованием

выгодности закупки.

- Архитекторы, дизайнеры Широкий выбор ярких цветов.

Известный производитель.

Разумная цена.

Качественный материал.

Отсутствие проблем при реализации нарисованного

проекта.

нет Первозданность экстерьера здания в

течении 30 лет.

Популярные цвета.

Простое объяснение клиенту выбора

именно этой марки сайдинга.

Посмотреть готовые проекты.

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

Поэкспериментировать с «модулятором».

Звонок в дилерскую сеть.

- Строительные компании и

бригады (для частного

строительства)

Попадание в бюджет клиента

Отсутствие проблем с качеством.

Оперативные сроки поставки материалов и своевременная

доставка на объект.

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

(противоударная упаковка)

Скидки строительным компаниям

Убедить попробовать более

качественный материал, чем обычно.

Все приведенные ожидания.

Почитать отзывы руководителей других

строительных компаний.

Скачать буклет.


Дилеры - условия сотрудничества

- маркетинговая поддержка (оформление торговых мест,

реклама, продвижение продукции, рекламные материалы)

- поставка клиентов от производителя

- логистика (предсказуемые и оперативные сроки поставок)

- надежность как производителя и как партнера

Ищут подтверждение того, что марке

можно доверять

Сравнивают стоимость с аналогами

Российский сайдинг недорогой и

качественный - за счет объемов на

нем можно заработать

все приведенные ожидания

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

сайдинга

Скачивание буклета

Звонок в дилерский отдел.

Переделка существующего

сайта. Особенности.

1. Экспресс-аудит юзабилити сайта и анализ данных из веб-аналитики. Это позволит выявить эффективные поведенческие модели, которые присутствуют на существующем сайте.

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

3. Структурный аудит и поисковый,

для того чтобы понять распределение ключевых

запросов по текущей структуре сайта

и сохранить её в следующей версии,

а так же понять какие существуют

ошибки с точки зрения оптимизации

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


































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





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





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

10. Наличие других сайтов принадлежащих владельцу/компании 11. Наличие немодерируемых форумов, досок объявлений, 12. Наличие внешних ссылок ссылок 13. Наличие страниц с результатами поиска, доступными для индексации. Дополнительные проверки Отсутствие санкций со стороны поисковых систем Бан сайта АГС Проверка региональной привязки сайта Страницы с дублирующим содержимым Правильность настройки файла robots.txt Представление сайта в поисковой выдаче Проблемы индексации сайта Наличие ЧПУ


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

Это позволит понять: • Позиционирование

конкурентов • Стратегии продвижения • Бюджеты на интернет-

маркетинг • «Подсмотреть»

эффективные инструменты привлечения, вовлечения, конвертации и удержания.

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

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

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


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

Программа Key Collector


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


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



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

• На этом этапе необходимо:

• Подобрать CMS или Framework, наиболее подходящие под требования к безопасности, нагрузке по посещаемости и прочим параметрам.

• Определиться с хостингом под выбранную платформу.

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







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

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


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


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


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


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


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










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


• На этом этапе необходимо свести воедино требования к продвижению сайта, его текстам, контенту и описать каждый раздел сайта в формате:

• Название страницы.

• URL адрес (в соответствии со старой структурой, если есть).

• Сегмент целевой аудитории, к которой обращена эта страница.

• Список целевых действий, которые необходимо совершить на этой странице

• Какие маркетинговые задачи решает эта страница (показ преимуществ, сравнение с конкурентами и т.д.).

• Перечень ключевых слов и словосочетаний.

• Рекомендации к написанию текстов и размещению графики.

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











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

Офлайн Онлайн Ручкой и ручками

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

В нём должно быть описано по каким правилам:

• Использовать брендбук компании (логотип и фирменные цвета и т.д.)

• Оформлять каждый информационный блок

• Верстать контент на сайте

• и т.д.
























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

дизайна

1. Использование графических элементов не несущих никакой смысловой нагрузки

2. Нерациональное использование «первого экрана»

3. Использование flash, там где он не нужен

4. «Тяжелая» графика

5. Непродумывание прототипов

6. Дизайн разрабатывается с точки зрения красоты, а не с точки зрения продаж

7. Неподготовленность дизайна, для дальнейшего продвижения сайта

8. Ставить во главу угла свои интересы и вкус, а не потребности целевой аудитории

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

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

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

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

Что потом?

• Отдать сайт группе тестеров, для поиска ошибок и недочётов

• Проверить работу сайта под нагрузкой

• Настроить систему веб-аналитики, согласно KPI

• Обучить специалистов компании правильно работать с сайтом: необходимо, чтобы сайт наполнялся именно таким образом, как это было предусмотрено в контентной политике

Что потом?

Проверка сайта под нагрузкой

http://loadimpact.com

За счёт чего можно «ускориться»?

https://developers.google.com/speed/pagespeed

http://loadimpact.com/

https://developers.google.com/speed/pagespeed

Аналитика

Аналитика

Аналитика

Аналитика

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

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

Аналитика

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

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

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

Справа пример, как сейчас делать модно, но не надо

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

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

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

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

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

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

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

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

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

optimization-tips/

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


Было


Стало







1. Несоответствие заявляемого предложения в рекламном канале, посадочной странице.

2. Неконкретный заголовок, путающий посетителя

3. Пропуск элементов вовлечения

4. Сложность заказа

5. Отсутствие элементов доверия – сертификатов, отзывов и т.д.

6. Возможность перехода к другому предложению

7. Отсутствие мотивационных призывов

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

Ошибки при создании

посадочных страниц

Юзабилити – это субъективная психология фокус группы или даже отдельного эксперта. “Может ли посетитель выполнить предопределённое для него целевое действие?”

UX (User eXperience) отвечает на вопрос “Получил ли посетитель максимальное удовольствие от выполнения целевого действия?”

Веб-аналитика – это фактические данные. Одно без другого не может работать эффективно

Аналитика

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

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

Отчет после проведения рекламных кампаний исследуется и на его основе принимаются решения

Планирование (проектирование) – Реализация (работа) - Контроль (Анализ) – Корректировка (регулировка)

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

Documents

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