Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов
Рис. 15. Пример автоворонки на сайте
Ошибка 5. Нет триггеров доверия
Триггер (спусковой крючок) – это всевозможные фишки и приемы, которые приковывают внимание посетителей и мотивируют их совершить полезное для владельца сайта действие, а триггеры доверия – повышают градус лояльности посетителей.
К триггерам доверия относятся:
отзывы посетителей (скриншоты из соцсетей),
герои кейсов,
схема работы,
преимущества фирмы в виде иконок.
Большая ошибка пренебрегать этими элементами в дизайне сайта!
Нельзя ставить на сайт чужие или нереальные отзывы. Некоторые посетители сайта не поленятся проверить и связаться в соцсетях с теми, кто рекомендует товар или оставил положительный отзыв.
Вопрос в том, как быть на этапе стартапа, в начале бизнеса, пока ещё нет реальных отзывов? Владельцу сайта надо обратитесь к друзьям, постоянным клиентам и подарить им товар взамен на положительные отзывы. Обязательно на первой странице продающего сайта надо поставить в дизайн реальные отзывы клиентов фирмы.
К триггерам доверия так же относится и модуль «Герои кейсов»: удачные примеры учеников, достигших наилучших результатов. Тоже надо ставить реальных людей, чтобы не подорвать доверия.
Рис. 16. Пример схемы работы на сайте
Ошибка 6. Нет интриги на сайте
Когда на сайте на первой странице всё сразу раскрыто и расписано, то получается, что нет ничего интригующего. А ведь люди любят секреты. Если секрета нет, то зачем регистрироваться и оставлять контакты?! И тут мы опять получаем не «тёплых», заинтересованных посетителей, с которыми можно работать дальше, а «холодных», которые дают всего 1-2% конверсии.
Ошибка: не оставить на сайте интриги, раскрыть всю информацию.
Как исправить?
Убрать часть информации, заманить посетителя секретом, пообещать дать эту информацию только ему лично (естественно за регистрацию на сайте). Многие люди ведутся на важность и гордятся тем, что им очень повезло обладать уникальной информацией. Именно такое чувство и должно возникать у посетителя сайта после получения подарка (в виде полезной информации) или ссылки к ограниченным ресурсам.
Создайте у посетителя ощущение, что только ему повезло стать обладателем этой информации. Пример секретного подарка см. рис. 17.
Рис.17. Секретный подарок на сайте
Ошибка 8. Сайт не автоматизирован
Автоматизация сайта – разработка таких решений, с помощью которых у владельца появляется возможность выполнять самостоятельное управление ресурсом и автоматизировать большое количество задач.
Итак, вы правильно сделали сайт, создали страницу захвата контактов, предложили бонусы, направили на эту страницу трафик. Что дальше? Некоторые на этом этапе успокаиваются и думают, что дальше дело пойдет само собой. В конце месяца они просматривают почту и находят там заявки, которые давно устарели.
Ошибка – бросать «теплые» контакты, не использовать схему «догоняющей рекламы».
Как исправить?
Нужен персонал, хотя бы один человек, который будет заниматься отслеживанием контактов, поступивших со страницы захвата. С этими контактами надо работать дальше – делать постоянные рассылки или звонки. В этом процессе сильно помогает наличие автоматизации на сайте, особенно рассылка писем. Если на сайте нет своей рассылки, можно внедрить готовые варианты с сайтов-сервисов, например justclick.ru.
Кроме автоматизации продаж, на сайте можно автоматизировать многие процессы, например, составление отчетов для пользователей сайта, выписывание счетов и актов, калькулятор затрат, автовыгрузка прайс-листа, автоматический расчёт цен на продукцию, автоматическая отправка писем клиенту, подписка на новости и т.д.
Ошибка 9. Некачественный дизайн
Иногда владелец сайта считает, что нет смысла переплачивать дизайнерам, когда его сосед (племянник, однокурсник и т.д.) – программист может сам сделать «простенький» дизайн практически бесплатно.
Ошибка считать, что посетители сайта – не дизайнеры и всё равно не поймут, кто делал дизайн.
На самом деле многие люди имеют внутреннее чувство гармонии, им не нужно обучаться дизайну, чтобы распознать «самодельный» дизайн. Неаккуратный, негармоничный дизайн портит всё ощущение от сайта. Посетитель видит, что в сайт вложено мало денег, что фирма не разорилась на приличный дизайн, и теряется доверие к сайту в целом и конкретно к товару, продающемуся на сайте.
Как исправить?
Найти аккуратного, грамотного, но недорогого дизайнера с чувством стиля и сделать дизайн простой, но понятный, приятный и стильный.
Рис. 18. Некачественный дизайн
Ошибка 10. Технические ошибки
Иногда посетитель заходит на сайт с желанием что-то купить, но оказывается, что кнопка «Заказать» – не рабочая или ссылки не открываются. Получив негатив, клиент покидает сайт и уходит к конкуренту. Технические ошибки могут сильно уменьшить конверсию сайта или вообще свести её к нулю.
Как исправить?
Перед сдачей сайта надо внимательно проверять и тестировать сайт. Не должно быть неработающих ссылок, некорректной формы обратной связи или непонятных посетителю действий, сложной капчи и т.д. Так же надо проверить сайт на наличие орфографических ошибок и опечаток.
В общем, надо довести сайт до безупречности, сделать все действия на сайте простыми и понятными. Не надо изобретать велосипед и пытаться отличаться от конкурентов изощренным дизайном, он только запутает посетителя.
Секрет – в простоте и отсутствии ошибок.
Рис. 19. Пример простого дизайна
Ошибка 11. Отсутствие аналитики
Одна из распространённых ошибок (по опыту наших клиентов) – не ставить на сайт счётчики посещений и не отслеживать количество посещений. Некоторым бизнесменам кажется, что если на счетчике мало посетителей, то это отпугнет клиентов сайта.
На самом деле отсутствие счетчиков и элементарной аналитики сайта наносит намного больше вреда, чем один или два «испуганных» посетителя.
Как исправить?
Анализировать посещаемость сайта, даже если бизнес идет практически на автомате. Следить за посещаемостью, считать конверсию и держать всю информацию в своих руках. Если владелец сайта уедет отдыхать на полгода, полагаясь на автоворонку и своих сотрудников, по приезду может обнаружить, что все клиенты ушли к конкуренту.
Сервисы аналитики: Яндекс Метрикой и Google Analytics.
Рис. 20. Сервисы аналитики
Ошибка 12. Неправильно настроен трафик
Иногда на сайте нет посетителей по очень простой причине: владелец бизнеса не направляет трафик на сайт … вообще. Он ждет, что его чудо-сайт сам «запрыгнет» в ТОП выдачи поисковых систем или он такой оригинальный и красивый, что клиенты выстроятся в очередь, чтобы заказать товары на нём.
Ошибка рекламы: нет трафика или он неправильно настроен.
Как исправить?
Проанализировать запросы посетителей, грамотно подобрать ключевые слова, убрать лишние ключевые слова, отъедающие бюджет. Грамотно настроить рекламу в Яндекс.Директе самому или обратиться к хорошему специалисту. Когда вы доверяете настройку и оплату рекламы специалистам, не вызывающим доверия, – большая часть денег идёт им в карман.
Кроме рекламы на поисковых системах есть ещё и другие каналы рекламы, такие как: соцсети, тизерная реклама, реклама у блогеров и т.д. Есть даже совершенно бесплатные способы раскрутки сайта. Надо протестировать все каналы и выбрать самые доходные.
Ошибка 13. Несоответствие рекламы и контента сайта
И последняя, но не менее важная ошибка, которую совершают рекламщики при запуске сайта – это несоответствие рекламы и содержания сайта.
Нельзя что-то обещать в рекламном баннере, а потом на сайте этого не давать. Например, реклама обещает три бесплатных урока на сайте, но когда сайт открывается, – бесплатных уроков либо нет, либо они так далеко спрятаны, что их не найдешь. Или реклама обещает скидку, а на сайте её нет, потому что акция уже прошла. У посетителя сайта возникает негатив, и он уходит с сайта.
Потерять доверие, – значит, потерять потенциального клиента.
Как исправить?
Внимательно следить за рекламными объявлениями и проверять их текст. Обещанное должно быть на сайте.
Выводы:
Нужно сделать сайт по продающей схеме, которая включает в себя следующее:
1. Обязательная страница захвата контактов на сайте.
2. Грамотно настроенный трафик.
3. Догоняющая реклама, превращение «холодных» контактов в потенциальных покупателей.
4. Направление клиентов на сайт, продающий товар.
5. Обработка звонков, исполнение заказов.
6. Анализ работы сайта и всех механизмов продаж.
Только грамотное проектирование, хороший дизайн и соблюдение этих правил поможет конверсии увеличиться с 1-2 % до 50-70%!
3. Чек лист на продающий сайт
После того, как создан прототип или дизайн сайта, необходимо проверить его на наличие продающих элементов и модулей по данному чек-листу. Распечатайте его и ставьте галочки напротив каждого пункта. Если чего-то не хватает, – добавляйте.
Чек лист для проверки лэндинга:
1. Нет лишних элементов на сайте: чужих баннеров, ссылок, ненужных элементов дизайна или лишнего текста. Используется минималистический «плоский» дизайн.
2. Есть понятное меню и простая навигация по сайту.
3. Необходимые контакты легко найти.
4. В шапке сайта есть логотип и дескриптор (краткое описание деятельности фирмы).
5. На баннере или слайдере есть оффер (заголовок с акцией и дедлайном).
6. На первом экране присутствуют активные кнопки: «Заказать», «Купить», «Узнать подробнее», «Перейти в каталог» и т.д.
7. На сайте есть форма заявки, обратного звонка, он-лайн консультант.
8. Для лэндинга: весь сайт продает одну услугу или товар.
9. На сайте присутствуют качественные фото товара с подробным описанием и характеристиками.
10. Товар легко купить или заказать.
11. Есть экраны, «закрывающие» возражение клиента.
12. Есть экраны социальных доказательств (отзывы, сертификаты и т.д.).
13. Есть гарантии.
14. Есть модуль демонстрирующий результаты после применения товара или услуги, или модуль «До/После».
15. На сайте присутствует призыв к активным действиям.
16. На сайте есть автоворонка с бонусом.
17. Есть модуль «Тарифы» или прайс.
18. Контакты и карта проезда есть внизу сайта.
19. Подвал с реквизитами юрлица.
Для других типов сайтов продающие элементы могут немного отличаться, например, для проверки сайта интернет-магазина используйте этот чек лист:
Чек лист для интернет-магазина:
Используется минималистический дизайн, желательно белый фон. Присутствуют следующие элементы:
1. Акция в баннере на первом экране.
2. Товарная галерея (топ товаров, новинки, популярные товары и т.д.)
3. Качественные фото товаров с ценами и скидками.
4. Каталог структурирован: товары разбиты на категории.
5. На сайте присутствуют фильтры каталога и поиск товаров.
6. Есть модуль «Автоматический подбор похожих товаров».
7. После каталога есть модуль «Доставка и оплата».
8. Прописаны гарантии качества.
9. Простая корзина, понятная страница оформления заказа.
10. Сохраняется история заказов.
11. Детально расписаны сроки сбора заказа и доставки.
12. На сайте есть сертификаты товаров.
13. В конце сайта присутствуют контакты, адреса и фото магазинов (если они есть).
14. Сайт имеет разметку для SEO оптимизация: ключевые слова, заголовки, метатеги.
Чек лист для корпоративного сайта:
1. Присутствует оригинальный дизайн сайта в фирменных цветах и с использованием логотипа, фирменного шрифта.
2. Есть качественные фотографии производства, помещений, фото сотрудников, с указанием должностей.
3. Сертификаты, дипломы, разрешения, лицензии, благодарственные письма, отзывы.
4. Разветвленный модуль «О компании»: История компании, Рассказ о компании: миссия, философия, продукт, Сотрудники, Схема работы, Регионы работы.
5. Новости, блог.
6. Модуль «Наши работы» или «Портфолио».
7. Модуль «Контакты» и карта проезда. Фото офиса снаружи. Виртуальный гид по офису или производству.
Распечатайте эти чек-листы и проверьте по ним созданный вами дизайн-сайта, добавьте недостающие элементы.
Глава 3. Типы сайтов
Звонит клиент (девушка-офис менеджер) в веб-студию:
– Здравствуйте, нам директор сказал, что нам нужен сайт, вы же этим занимаетесь?
– Да, конечно…
– Хорошо, только вот у нас бюджет маленький, поэтому нам не нужен дорогой сайт, можно даже чёрно-белый…
Анекдот из сети Интернет
В этой главе:
1. Контент и функционал сайта
2. Классификация сайтов по технологии создания
3. Классификация сайтов по назначению
1. Контент и функционал сайта
В предыдущей главе в разделе «Чек-лист на продающий сайт», вы, наверное, заметили, что чек-листы отличаются для разных типов сайтов. И действительно, в зависимости от целей и задач, которые решает сайт, все Интернет-ресурсы делятся на несколько видов или типов. В зависимости от типа сайта применяются разные модули на первой странице, и допускается разные типы дизайна. Функционал и контент сайта так же отличаются в зависимости от типа сайта.
Веб-дизайнер должен хорошо разбираться в типах сайтов, чтобы сразу спроектировать функциональную структуру сайта. В этой главе будут описаны разные типы сайтов с их краткой характеристикой и даны советы по дизайну каждого типа.
Веб-дизайнер, приступая к разработке дизайна сайта, должен чётко понимать: что такое функционал и контент сайта, чтобы отобразить их на веб-дизайне.
Функционал сайта – это набор различных опций, которые решают определенные задачи пользователей для удобной работы с веб-ресурсом. Базовый функционал определяется разработчиком CMS (движка сайта). Он содержит все базовые возможности, которые должны присутствовать на каждом проекте.
Для посетителей сайта это:
– Меню.
– Сайдбары.
– Постраничная навигация.
– Формы обратной связи.
– Подписка на RSS-ленту.
– Кнопка заказа звонка.
– Поиск по сайту и прочие элементы.
Для администратора сайта:
– Возможность регистрации и входа в административную панель.
– Удобный текстовый редактор со стандартным функционалом (выделение текста, вставка символов, цитат, подзаголовков, ссылок и так далее).
– Обычные настройки профиля (логин, пароль, аватарка).
– Предоставление стандартных типов записей (рубрики, метки, страницы, посты).
– Настройка урлов (URL).
– Возможность обновления и добавления модулей, плагинов и тем.
– Работа с медиафайлами (фото, видео).
– Базовая статистика по сайту (количество опубликованных постов, комментариев) и так далее.
Расширенный функционал сайта
Расширенный функционал основан на различных дополнениях, которые расширяют базовые возможности сайта и CMS. Как правило, расширяют за счет отдельных скриптов, плагинов.
Для посетителей сайта это:
– Галерея, слайдеры, аккордеоны, вкладки.
– Расширенные возможности меню и сайдбаров.
– Содержание постов.
– Возможность поделиться или подписаться в социальных сетях.
– Расширенная система комментирования (можно добавлять фото, видео, подписка на уведомления и так далее).
– Система рейтинга записей и комментаторов.
– Форумы, интернет-магазины.
– Онлайн чат, калькулятор, счетчик, календарь.
– Карта сайта.
– Опросы, квизы.
– Онлайн-консультант.
Для администраторов сайта:
– Расширенная статистика сайта (количество входящего трафика, его источники, ключевые слова, нагрузка на сайт и так далее).
– Расширенный редактор (добавление шорткодов, таблиц и так далее).
– Улучшение коммуникации среди пользователей (календарь событий или работ по сайту, распределение ролей, подписка на уведомления и так далее).
– Защита сайта (файервол, ограничение роли пользователя, создание бэкапов и так далее).
– Удобное редактирование метаданных записей (прямо в административной части сайта можно прописать title, description, данные для микроразметки).
– Добавление пользовательских типов записей и так далее.
Контент сайта – это любая информация, размещенная на нём. Чаще всего под контентом понимают текстовое наполнение, реже – видео- и аудиоматериалы.
Без качественного и регулярно обновляемого контента практически невозможно повысить эффективность онлайн-бизнеса и вывести сайт в ТОП поисковых рейтингов. Любая информация, которую сайт предлагает пользователю, – должна быть полезной!
В разработке дизайна сайта в первую очередь продумывается функционал сайта, располагаются на первой странице все ключевые элементы (ссылки, меню, кнопки, формы обратной связи, калькуляторы, корзина товаров, счетчики посетителей и т.д.) и во вторую очередь идёт работа над дизайном контента (тексты, фотографии, видео и т.д.).
2. Классификация сайтов по технологии создания
Если вы интересовались разработкой сайтов или веб-дизайном, то наверняка слышали, что сайты создаются разными способами (при помощи разных технологий). Старые технологии отступают и дают место новым. На данный момент лидирующими технологиями считаются системы управления сайтами, например, такие, как: WordPress, 1C-Битрик, NetCat, Drupal. Сайты в этих системах «написаны» на языке программирования PHP. Также обороты набирают популярные сейчас конструкторы сайтов и технологии, позволяющие создать сайт простому пользователю ПК, без дизайнеров и программистов.
Классификация веб-сайтов по технологии создания:
1. Технология CMS.
Язык: PHP (язык программирования сайтов).
Определение:
CMS – информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления содержимым сайта (контентом и дизайном).
CMS обычно состоит из двух основных компонентов:
а) приложения для управления контентом в качестве внешнего пользовательского интерфейса, позволяющего пользователю сайта добавлять, изменять и удалять контент с веб-сайта без вмешательства веб-мастера (административная часть сайта),
б) приложение доставки контента, которое компилирует контент и обновляет веб-сайт.
(Определение из Википедии)
Иными словами, CMS (Content Management System) – это система управления контентом. По-простому – «движок» сайта, который позволяет управлять содержимым сайта.
Пять наиболее популярных CMS:
WordPress (сайт wordpress.com)
На данный момент считается самой популярной CMS, подходит для создания блогов, корпоративных сайтов, портфолио. С помощью дополнительных инструментов (плагинов) этот движок используется для разработки интернет-магазинов.
Стоимость: бесплатно. Есть дополнительные платные модули (плагины), например, для интернет-магазина в ВордПрессе используется модуль e-Commerce или WooCommerce.
Язык интерфейса: 19 языков, включая русский, английский, испанский и др.
Интеграции: более 50 тысяч. Самые популярные: Google Analytics, Unisender, все социальные сети, Мой Склад, СДЭК, ИнвойсБокс, Roistat, Битрикс24, Carrot quest и т.д.
Рис. 21. Редактирование страницы в WordPress в административной части сайта
Плюсы WordPress
1. Удобно сделан под блоги, но можно адаптировать под любой сайт.
2. Удобный и интуитивно понятный интерфейс для пользователя сайта.
3. Легкая и быстрая установка «движка» для программиста. На некоторых сайтах хостинга эта система уже предустановлена.
4. Открытый код. Возможность легкого обслуживания разными программистами.
5. Наличие большого количества плагинов в дополнение.
6. Надежность и удобство обслуживания.
7. Наличие бесплатных и платных шаблонов дизайна под этот «движок».
8. Задача оптимизации под поисковые системы решается с помощью установки плагинов. Они помогут формировать ЧПУ (человекопонятный URL), заполнять метатеги, формировать микроразметку, создавать карту сайта и многое другое.
Joomla (сайт joomla.org).
Широкий функционал Joomla реализует простой сайт-визитку, блог или интернет-магазин. Систему выбирают новички-программисты за возможность легко запустить сайт.
Стоимость: бесплатно, есть возможность докупить необходимые модули и скрипты.
Язык интерфейса: по умолчанию английский с возможностью установить другие языки.
Интеграции: RetailCRM, Битрикс24, amoCRM, Мой Cклад, 1С, Robokassa, Carrot quest.
Плюсы:
1. Имеет встроенную систему отладки ошибок: система пришлет отчёт о некорректной работе.
2. Есть встроенная почтовая система для приватных диалогов с пользователями.
3. Ускоренная загрузка страниц за счёт кеширования контента.
4. Доступны решения для управления SEO-параметрами. Есть бесплатные и платные модули для расширенных настроек: ключевых фраз, метаданных, переадресации страниц.
Большим минусом является устаревший интерфейс этого «движка» и порой недостаточная функциональность.
OpenCart (сайт: opencart-russia.ru)
Готовая и бесплатная CMS для интернет-магазинов. Имеет множество дополнительных расширений и плагинов: от приёма электронных платежей до интеграции с курьерскими службами.
Стоимость: бесплатно.
Язык интерфейса: мультиязычный, поддержка русского, английского и других языков.
Интеграции: Google Analytics, Carrot quest, Топвизор, Roistat, Планфикс, amoCRM, Битрикс24, Telegram, Робокасса, Яндекс. Доставка, Ю-Money.
Плюсы:
1. Есть встроенные модули работы с товарами: упаковка, налоговая ставка, сопутствующие и недавно просмотренные товары, применение вариантов скидок и способов доставки, модерация, работа с отзывами.
2. Содержит более тысячи шаблонов для быстрого запуска интернет-магазина.
3. Есть встроенный редактор и SEO-модуль для ведения блога: добавление Title и Description, ключевых фраз, формирование ЧПУ.
4. Быстро работает с каталогом до 30 000 товаров.
Минусом является открытый код (а значит уязвимость к хакерам), как и у предыдущих бесплатных движков и некоторые платные плагины, а также сложность установки дополнительных плагинов.
1С-Битрикс (сайт: 1c-bitrix.ru)
CMS от разработчиков самой популярной CRM в России. Возможности движка меняются в зависимости от тарифного плана, эта система подойдет и малому бизнесу и крупному интернет-магазину. 1С-Битрикс отличается высокой безопасностью и сложным интерфейсом.
Стоимость: платная лицензия от 6 200 рублей в месяц.
Язык интерфейса: более 10 языков, включая английский, русский, украинский.
Интеграции: платежные системы, службы доставки, соцсети и другие сервисы, среди которых Roistat, Carrot quest, Битрикс24, Мегаплан, Планфикс, Мой склад, amoCRM, Zadarma, 1C, Робокасса, Ю-Касса, Sipuni, Tilda. Roistat, Carrot quest, Битрикс24, Мегаплан, Планфикс, Мой склад, amoCRM, Zadarma, 1C, Робокасса, Ю-Касса, Sipuni, Tilda.
Из плюсов:
1. Интеграция с продуктами 1С.
2. Русскоязычная система.
3. Есть много готовых шаблонов дизайна.