Как создать продающий сайт с нуля

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

У каждого способа есть свои преимущества. Например, телефон позволяет вести диалог со своим клиентом и на месте выяснять все нюансы, как со стороны клиента, так и со стороны поставщика услуг.

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

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

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

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

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

Создаем макеты страниц

Существует такая наука – Interaction Design (проектирование взаимодействия), которая позволяет проектировать интерфейс исходя из опыта взаимодействия пользователя с системой. Здесь мы коснемся только самых основ. Но этого будет вполне достаточно, чтобы спроектировать грамотный интерфейс.

Примечание. Конечно, вы можете эту работу отдать на аутсорсинг веб-дизайнерам и художникам, и тогда получите очень красочные картинки, но, скорее всего, неудобные в плане пользования. На мой взгляд, никто не выполнит проектирование интерфейса лучше того человека, который очень хорошо знает своих клиентов, т.е. вас. Это важно сделать своими руками еще по той причине, что вы еще раз окажетесь в “шкуре” своего клиента и у вас будет еще один шанс взглянуть на свой бизнес с другой стороны.

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

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

Еще важный момент, называйте своих персонажей по имени. Считайте что это полноценные персонажи вашего проекта. Это важно. Пусть у нас будут персонажи Олег и Семен.

Задание. Создайте свои персонажи и максимально подробно опишите их.

Теперь представьте, что вы являетесь одним из своих персонажей, например, в моем случае Олегом. Напишите, какие у вас есть цели в связи с посещением рассматриваемого сайта. Что вы хотите от него получить? Это может быть что угодно: получение ценной информации, оформление заказа, получение информации о сезонных скидках и так далее. В случае с Олегом (будем считать, что Олег женится и ищет на свадьбу презентабельное авто) это может быть поиск контактного телефона и информации о ценах.

Переходим к следующему пункту: как вы можете достичь этого? Представьте на секунду, что у вас есть “волшебная палочка” и вы можете достичь любой цели так, как захотите. Например, я как Олег захожу на сайт и сразу вижу крупно телефон, причем не картинкой, а лучше текстом, чтобы можно было скопировать себе в файл. А еще лучше, справа была бы ссылка заказать обратный звонок, чтобы сэкономить деньги на звонке. Таким образом, мы позволяем себе избежать очень опасной ловушки, в которую вы обязательно попадетесь, если макет будет проектировать дизайнер или программист.

В случае с программистом все будет очень просто – если макет делает программист, он принимает решения не на основании целей посетителя, а на основании своих приоритетов: простота разработки, логичность интерфейса (мы же сделали функцию добавления, давайте сделаем и редактирование), применение модной тенденции (например, функции через ajax – этим я и сам грешу).

Не намного легче и с дизайнером. Его главная задача – гармония в дизайне. Чтобы глазу было приятно. Например, крупный телефон – это не эстетично. А давайте-ка сделаем его рукописным шрифтом, чтобы клиент не смог прочитать его с первого раза. В дизайне, как и в рекламе, очень часто наблюдается парадокс: выставки выигрывают очень красивые дизайны и рекламы, но не эффективные. На мой взгляд, главная задача дизайна – вести пользователя системы за руку к его целям. Все остальное – не имеет значения. Посмотрите дизайн сервисов Яндекса, Google, Вконтакте или Озон. Там нет ничего лишнего. Кто-то может подумать, что там полное отсутствие дизайна, но именно это и есть настоящий дизайн.

На данном этапе мы определили, как достигать цели клиента. Где и на чем он должен щелкнуть мышкой, чтобы получить результат. В проектировании взаимодействия это называется определением сценариев взаимодействия.

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

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

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

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

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

Какие-то механизмы, возможно, будут совмещены на одном макете. Это решение надо также принимать на основании мнений персонажа. Здесь на все время забудьте о своем Я и полностью погрузитесь в мир своих персонажей подобно писателю романов или новелл.

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

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

Желаете удобный сайт для вашего бизнеса?

Используйте проектирование взаимодействия.

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

Допустим, вы показываете свои макеты человеку из своего окружения. Это могут быть ваши друзья, коллеги или родственники. Он говорит, что “тут все и так понятно” или, наоборот, ему ничего непонятно. Не принимайте близко к сердцу – он не из вашей целевой аудитории.

Что делать, если этот человек принадлежит целевой аудитории? Необходимо вернуться в своим персонажам и пересмотреть их. Возможно, их следует детализировать или даже видоизменить.

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

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

Также хорошей идеей будет определить макеты административной панели. Здесь вам уже не потребуются персонажи, поскольку главным персонажем в данном случае являетесь вы. Обычно принято для разработки административной панели выделять ресурсов меньше, чем для реализации лицевой части сайта (front-end). На мой взгляд, подобное распределение не является обоснованным по той причине, что вам самим в дальнейшем работать именно с этой частью сайта. И если она будет неудобная, это скажется на вашей производительности и эффективности.

Теперь вы знаете основы проектирования взаимодействия и умеете их применять для создания макетов интерфейса сайта.

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

Специфичные требования

Браузеры. В первую очередь, надо помнить, что сайт – это приложение, которое работает в браузерах. А браузеров – великое множество. Раньше, в 90-е года прошлого века и в начале 2000-х годов с этим вопросом была очень большая проблема, т.к., по сути, производители браузеров очень плохо выполняли стандарты разметки HTML. Особенно в этом плане отличился браузер Microsoft Internet Explorer. Перечислить все отличия этого браузера не представляется возможным, но это скорее проблемы разработчика, а не заказчика. В данный момент имеет смысл поддерживать браузеры Internet Explorer 8 и 9 версии.

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

Как мне понять, какие браузеры надо поддерживать, а какие нет? Очень просто. Существует интернет-статистика использования браузеров. Здесь я не буду приводить ссылку, т.к. статистика постоянно меняется. Просто наберите в Яндексе “Статистика использования браузеров 2013 год”. В этой статистике вы можете увидеть процент использования по каждому браузеру. Желательно знать статистику и по версиям браузеров, чтобы вы могли указать браузеры и их версии. К примеру, браузер Internet Explorer имеет версии 6,7,8,9. Версии 6,7 практически уже никто не использует. А вот версия 8 пока пользуется достаточно большой популярностью, чтобы списывать ее со счетов.

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

Скорость и размер. Эти два параметра взаимозависимы. Чем меньше размер загружаемых страниц, тем быстрее работает сайт. Никому не нравится очень долго ждать, когда сайт подолгу загружает свои файлы. Эти требования хорошо бы прописать, чтобы подстраховаться от совсем долгой загрузки. Наверное, нет смысла формулировать “для всех страниц – время такое-то”. Гораздо лучше использовать следующую формулировку “для главной страницы – не более Х секунд, для 70% – не более Y секунд”. Скорость сайта – это критическая составляющая успеха сайта. Чем “легче” сайт, тем комфортнее чувствует себя посетитель. В качестве хорошего примера быстрого сайта рекомендую посмотреть сайт Википедии – очень много данных, но несмотря на это сайт “летает”.

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

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

Самое главное, если вы готовитесь к массированному привлечению клиентов на свой сайт, вы должны включить требования в техническое задание по нагрузке на сайт, например, “сайт должен корректно функционировать при одновременной работе 1000 посетителей”. Это обяжет разработчиков более бережно относиться к серверным ресурсам. Это в первую очередь процессорное время, память, подключения к базе данных, пул http-соединений.

Мобильный интернет. Ни для кого не секрет, что мобильные телефоны набирают популярность как средство для выхода в интернет. На данный момент настольный интернет все-таки преобладает, но никто не знает, что будет в будущем. Если посетители вашего сайта будут использовать телефон для выхода в интернет, об этом также стоит упомянуть. Раньше для мобильников создавался отдельный сайт с урезанным функционалом. Сейчас, когда стандарты набирают силу, есть возможность делать сайты и для настольных браузеров и для мобильников. Здесь есть один момент – сайт под мобильные устройства может быть адаптируемым, т.е. контент сайта не требует горизонтальной прокрутки. Это так называемый Responsive Design в котором ширина меняется динамически в зависимости от параметров и возможностей браузера. Второй вариант – это более распространенный дизайн с фиксированной шириной макета. Это приводит к тому, что в мобильном браузере появляется горизонтальная прокрутка. Это менее удобно, чем первый вариант, но гораздо проще в реализации и сопровождении.

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

Вы можете, например, сделать требование “сайт должен быть разработан на ASP.NET Web Forms”. Тем самым вы отсекаете все остальные платформы, но при этом получаете некоторую уверенность, что сайт не будет разработан на какой-то редкой, никому не известной технологии, которую сможет поддерживать только создатель проекта.

Также считаю важным предупредить вас об использовании flash-сайтов: они очень плохо индексируются поисковыми роботами, что затрудняет продвижение вашего сайта в поисковых системах, например Google и Яндекс. Помните об этом.

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

Поисковая оптимизация. Обязательно включите требования по продвижению в поисковых системах. Во-первых, у вас должна быть в административной панели сайта возможность менять заголовки, теги title и метатеги description и keywords. Это важно для оптимизации страниц под ключевые запросы.

Во-вторых, у вас должна быть возможность менять файлы sitemap.xml и robots.txt. Эти файлы необходимы для правильной индексации вашего сайта поисковыми системами.

В-третьих, это правила перенаправления с кодом 301. Для поисковых систем очень критичен вопрос дублирования контента. Дублирование контента – это по сути ситуация, когда контент доступен по двум разным URL-адресам. Проблема в том, что одна и та же страница

может быть вызвана под разными адресами. Например, страницы site1.ru, www.site1.ru, site1.ru/default.aspx, site1.ru/Default.aspx

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

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

Метрики

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

Какие метрики могут быть у сайта?

Во-первых, это количество уникальных посетителей и визитов.

Это важнейшая метрика, которая показывает, что мы имеем на входе в воронку продаж.

Вторая важнейшая метрика – это выполнение целевого действия. Целевое действие – это действие посетителя, которое приводит к достижению вашей цели. Пример целевого действия – это заполнение какой-либо формы на сайте.

Для отслеживания метрик сайта идеально подходят такие бесплатные инструменты, как Google Analytics и Яндекс.Метрика. Они собирают множество данных по работе вашего сайта и вы можете настроить их под свои нужны. Однако эти системы не так просты и требуют некоторого усердия в изучении, но это стоит того, поскольку метрики – это основа прогресса сайта.

Задание 15. Определите целевые действия ваших пользователей и запишите соответствующие метрики.

В заключении этой главы мне хотелось бы поговорить о контенте. Есть такое выражение: Content is king. Контент решает очень многое. Качественный своевременный контент привлекает аудиторию, делает ее лояльной. Плохой контент только ухудшает ситуацию, нервирует клиента и создает плохое впечатление о вас. От качества контента очень многое зависит.

Метрики позволяют вам понять, где вы сейчас

находитесь на пути к результату

Контент надо планировать. Вы должны четко понимать, что должно выступать в качестве контента на вашем сайте. Что интересно вашему посетителю? Что может его побудить купить прямо сейчас?

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

На этом этап подготовки заканчивается, и в следующей главе мы начинаем искать поставщиков услуг и взаимодействовать с ним.

Глава 4. Выбор поставщиков услуг

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

Веб-дизайнер. Это специалист, который нарисует для вас дизайн сайта. Результат его работы – это обычно PSD файл, в котором по страницам представлен весь дизайн сайта. Стоимость дизайна сайта бывает очень разной: от 2000 рублей до 30 000 рублей. В основном, стоимость зависит от прорисовки дизайна. Если дизайн подразумевает отрисовки конкретных элементов, а не использование готовых изображений из клипарта, то это, конечно, стоит гораздо дороже.

Веб-разработчик. Это программист одного из серверных языков, например, PHP или ASP.NET, который создает движок вашего сайта. Существуют готовые CMS, такие как WordPress или Drupal, которые позволяют в какой-то мере обойтись без программистов, но это сильно снижает гибкость ваших решений. Сейчас все больше наблюдается перенос функциональности с серверной стороны на клиентскую, т.е. браузер, поэтому современному разработчику обязательно надо знать язык программирования на клиенте JavaScript. Это позволяет создавать по-настоящему гибкие и удобные для конечного пользователя приложения.

Верстальщик. Основная задача верстальщика – это создание качественной разметки HTML и прописывание стилей сайта с помощью каскадных таблиц стилей – CSS. Очень часто функции разработчика и верстальщика совмещены в одном лице. Главная сложность в работе верстальщика – это корректное отображение сайта в различных браузерах, особенно с учетом появления мобильных устройств. Немного упрощает задачу тот факт, что в данный момент производители большинства браузеров, как настольных, так и мобильных, стараются создавать свои продукты по стандартам W3C консорциума. Если верстальщик следует этим стандартам, то это дает некоторую уверенность, что сайт будет корректно отображаться в большинстве браузеров.

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

Специалисты по SEO. Эти специалисты выполняют комплекс работ по продвижению сайта в поисковых системах. Различают два направления в работе по SEO: внутренняя оптимизация и внешняя.

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

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

Другие специалисты. Это могут быть флеш-программисты, фотографы, иллюстраторы, юзабилити-специалисты. Я выделил их в отдельную группу, потому что они вам, вероятнее всего, не понадобятся.

Итак, мы определились с перечнем, кто нам нужен для создания сайта. Конечно, есть вариант заказа “сайт под ключ”, когда вы не вникаете, кто и что делает, но при этом, на мой взгляд, ваш бюджет не будет оптимизирован. Это можно сравнить с покупкой компьютера в магазине с витрины, когда не знаете, что там внутри. Обычно можно за ту ж цену купить компьютер гораздо мощнее, если выбирать и заказывать комплектацию компьютера по прайс-листу. В сайтах действует тот же принцип. Мы исходим из того, что мы постоянно должны держать “руку на пульсе”. Мы должны четко знать, на что расходуется наш бюджет, что будет результатом работы, и когда мы получим этот результат.