Как спроектировать сайт

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

Проектирование сайта: первичный этап создания ресурса

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

Возможность оценить соответствие будущего сайт вашим ожиданиям

Внести изменения пока еще не поздно

Экономит ваши средства и наше время на разработку

Гарантию достижения ожидаемых результатов

Стоимость проектирования сайта

В студии KOLORO вы можете заказать проектирование сайта или заказать сайт под ключ, тогда стоимость проектирования сходить в стоимость разработки сайта. Для уточнения цены свяжитесь с нашим менеджером +38 044 223 51 20, hi@koloro.ua.

Зачем вам проектирование пользовательского интерфейса

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

Преимущества проектирования и разработки сайта в KOLORO

Разработка под ключ

В KOLORO вы можете заказать создание сайта под ключ – мы реализуем ваши идеи с учетом современных тенденций UX дизайна.

Маркетинговый анализ

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

Open-minded team

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

Что дает сайту процесс проектирования?

1. Повышает вероятность достижения желаемого вида ресурса. Четкая постановка задач, определение ЦА и моделирование пользовательских путей может получить желаемый от разработки результат.
2. Сохраняет время и финансы. Устранение неточностей во время создания прототипа сайта – несложный процесс, достаточно поменять несколько текстовых или графических фрагментов. Проделать такие действия на этапе вёрстки будет намного дольше и дороже. А для программиста такие исправления будут еще более трудозатратными.
3. Логично разделяет работу. Прототип сайта – это самостоятельный документ, на основе которого заказчик уже может создать сайт, самостоятельно или силами другой команды разработчиков.

4 этапа проектирования сайта

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

1. Создание концепции сайта

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

Суммарно концепция должна отвечать на такие запросы:

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

2. Проектирование структуры сайта

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

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

3. UI дизайн интерфейсов: проектирование дизайна сайта

Креативное проектирование дизайна веб сайтов обеспечивает приятный и простой опыт человеко-машинного взаимодействия. UI дизайнер основывается на рекомендациях UX дизайнера, пытаясь максимально передать легкость построения работы с сайтом. На данном этапе эмоциональный отклик играет главную роль в принятии решения в пользу того или иного дизайна. При этом мы основываемся не на своих субъективных ощущениях, а на анализе целевой аудитории сайта.

4. Готово: техническое задание на разработку сайта

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

В ТЗ логично вложить:

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

По сути, ТЗ отвечает на все вопросы разработчика сайта. Это довольно объемный документ, описывающий будущее функционирование и внешний вид системы. ТЗ должно утверждаться заказчиком и до финала разработки оно остается неизменным.

Особенности проектирования веб-сайта

1. Во время разработки прототипа сайта важно придерживаться единой стилистики оформления элементов.
2. Для того чтобы сделать прототип сайта необходимо разработать его структуру, где четко обозначить иерархию блоков, разделов и субразделов.
3. Не рекомендуется создавать похожие страницы, если возможно разместить одинаковою информацию на одной. Приведем пример: контакты размещаются или в разделе про фирму или в футере страницы, поэтому выделять для них страницу просто не имеет смысла.
4. Если функционал одного блока дублирует функционал другого лучше удалить его, поскольку повторы запутывают пользователей ресурса.
5. При создании прототипа сайта важно обозначить путь пользователя к самым важным разделам сайта.
6. Создание прототипа сайта предусматривает создание схемы основных страниц с их приоритетностью. Например, если фирма не планирует часто выкладывать новости, то нет смысла верстать для них отдельную страницу

С услугой проектирования и разработка сайта заказывают:

Постфактум: прототипирование сайта

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

Продвижение: маркетинг для вашего сайта

В зависимости от ваших ожиданий, мы выстраиваем маркетинговую стратегию (SMM, e-mail-рассылка, наполнение контентом).

Брендинг сайта

Разработка уникального фирменного стиля для компании – залог узнаваемости бренда в сети.

Наполнение сайта

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

Доработка сайта

Означает внесение незначительных или глобальных правок в ресурс по запросу фирмы-заказчика.

Адаптивный дизайн

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

Разработка фирменного стиля

Представляет собой создание логотипа, брендбука, визитки, буклета, фирменных материалов и даже шаблона e-mail рассылки.

Что вы получаете, заказав проектирование сайта?

1. Постоянный эффект от разового проведения. Ресурс после качественного проектирования может требовать только минимальной доработки.
2. Предварительное прототипирование станет гарантией достижения задач сайта.
3. Проектирование значительно сэкономит временные и денежные ресурсы на разработку сайта, что позволит вложить эти средства в продвижение и оптимизацию интернет бизнеса.

Главный результатом проектирования является работающий и готовый к продвижению сайт. Команда KOLORO знает, как сделать ваш проект успешными!

Как спроектировать современный сайт

Проектирование интернет-сайтов на базе сеток — бесценный инструмент для организации веб-страниц и создания привлекательных веб-интерфейсов, помогающий разрабатывать по-настоящему современные, сложные и вместе с тем изящные интернет-проекты. Эта книга позволит вам в совершенстве овладеть искусством проектирования сайтов с помощью сетки. Здесь изложены основы теории сеток и главные принципы работы, также вы найдете множество упражнений, посвященных практической реализации этих идей.
Книга ориентирована на опытного читателя, уже обладающего навыками использования технологий HTML, CSS и JavaScript для создания веб-страниц. Если вы профессионально занимаетесь веб-дизайном, руководите разработкой интернет-проектов и интересуетесь вопросами юзабилити и дизайна веб-интерфейсов, эта книга — для вас.

Оглавление Как спроектировать современный сайт

Глава 1. Введение 8
Глава 2. Концепция 16
Глава 3. Процесс 42
Глава 4. Начинаем творить 53
Создание сетки 69
Создание шаблона страницы 90
ПРОЕКТ 1. Страница статьи 106
ПРОЕКТ 2. Информационная страница 126
ПРОЕКТ 3. Страница профиля 139
ПРОЕКТ 4. Домашняя страница 158
Дополнительные страницы 178
«Резиновая» верстка 182
Глава 5. Заключение 186
Приложение 189

Как создать сайт, готовый к SEO-продвижению

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

В этой статье обсудим этапы, которые нужно выполнить, чтобы сразу подготовить сайт к SEO-продвижению в Яндекс и Google.

Анализ конкурентов

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

Как понять кто ваши конкуренты? Достаточно ввести в поисковик один из основных запросов, по которым вы хотите продвигаться, и просмотреть хотя бы 10 площадок с первой страницы выдачи. Например, такими запросами могут быть: “заказать пластиковые окна в москве”, “музыкальный магазин”, “как избавиться от тараканов” и т.д.

На что стоит обратить внимание во время анализа конкурентов при создании сайтов под SEO?

• Структура. Какие есть разделы, какая в них информация, что вынесено в основное меню, сколько вообще страниц на ресурсе.
• Функционал. Оцените, какие функции есть на площадке. Может быть вы даже не задумывались, что в вашей сфере нужен калькулятор стоимости, а у конкурентов он пользуется популярностью.
• Юзабилити. Это удобство использования сайта. Попробуйте сами совершить действие, которое часто делают обычные пользователи, и посмотрите, насколько удобно всё устроено. Например, можно попробовать заказать обратный звонок или сложить товары в корзину и дойти до оформления заказа.
• Дизайн. Шрифты и их размер, цвета и их сочетание, соответствие дизайна сфере деятельности — это всё сюда.

Создание семантического ядра

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

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

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

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

Разработка структуры

Теперь когда мы примерно понимаем, что должно быть на сайте, можно переходить к продумыванию его структуры. Она не должна быть слишком сложной и глубокой: так людям будет трудно ориентироваться на сайте. Золотой стандарт — это правило трёх кликов, которое гласит, что любая страница должна находиться не дальше, чем в трёх кликах от главной.

Например, часто структура выглядит так:

Если структура довольно объёмная или вы просто хотите представить её более наглядно, можно использовать сервисы вроде Xmind или Miro. Вот как это может выглядеть:

Если структура небольшая, можно просто описать её в Excel-таблице:

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

Чтобы у специалистов, которые будут заниматься разработкой, было понимание, как должен выглядеть ресурс и что на нём должно быть, самое лучшее, что можно сделать — это прототипы страниц. Самый простой вариант — текстовый прототип, где основные разделы и примерный порядок блоков просто прописываются словами. Его можно сделать в любом текстовом редакторе вроде Word. Например, прототип может выглядеть так:

Если кроме этого вы хотите наметить примерное расположение блоков, изображений и кнопок, можно использовать сервисы вроде Miro или Figma.

Подготовка к разработке сайта под SEO-продвижение

Здесь можно выделить три составляющих:

1. Выбор доменного имени. Можно сказать, что это название вашего сайта, поэтому к его выбору нужно подойти серьёзно. Если доменное имя содержит ключевые слова, это немного, но упростит продвижение в поиске. Скорее всего, очевидные варианты вроде okna-msk.ru или guitar.ru будут уже заняты. Поэтому нужно будет поискать незанятый и подходящий вариант, а потом зарегистрировать домен.
2. Выбор хостинга. Хостинг — это по сути хранилище вашего сайта. Существует много компаний, которые предоставляют такие услуги, но первую попавшуюся всё-таки выбирать не стоит. Ведь именно хостинг будет отвечать за безопасность данных и стабильность работы сайта. Также лучше выбирать компании, чьи сервера расположены в России. По законодательству не все данные могут храниться за пределами страны, поэтому лучше заранее себя обезопасить.
3. Выбор CMS. Любой ресурс можно разрабатывать с нуля или используя CMS — систему управления сайтом. Во многих случаях разработка с нуля — это деньги и время, потраченные впустую. Да, в редких случаях возможности CMS не могут предоставить нужные функции, но в основном это касается крупного бизнеса и сложных проектов. А обычные ресурсы с услугами и интернет-магазины вполне можно делать на движке CMS. Удобство здесь не только в простоте разработки, но и в том, что редактировать контент потом можно будет через админ-панель, а для этого не нужны никакие знания кода. Самые распространённые CMS — Битрикс, WordPress и Joomla. Что касается конструкторов вроде Tilda, сайты, созданные с их помощью, не очень подходят для SEO-продвижения. В коде таких ресурсов много лишней информации, которая мешает ему эффективно продвигаться. А удалить её нельзя, потому что непосредственного доступа к коду разработчик не имеет.

Составление технического задания

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

Вот что стоит добавить к ТЗ:

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

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

Итого

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

Как разработать функционал сайта

Функционал сайта — это все его опции и инструменты, которые помогают пользователям решать определенные задачи. Разные составляющие функционала сайта в конечном итоге приводят пользователей к целевому действию — покупке товара, заказу услуги и так далее.

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

Содержание:

• Почему важно продумать функционал сайта до разработки дизайна
• Этапы разработки функционала сайта
• Что нужно сделать перед разработкой функционала сайта
• Какие задачи будет решать сайт
• Анализ посетителей сайта
• Какие проблемы вашего бизнеса решит сайт
• Что заставит пользователей посещать ваш сайт
• Анализ функционала сайта конкурентов
• Разработка функционала сайта
• Продумайте структуру
• Подберите компоненты для каждой страницы
• Пример хорошо продуманного функционала сайта
• Что стоит запомнить

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

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

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

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

Разработав сразу функционал сайта, вы и ваша команда не потратите время на работу, которая окажется не нужной. Например, вы «задизайнили» кабинет пользователя, но потом решили использовать просто кнопку «Купить в один клик».

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

Этапы разработки функционала сайта

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

UX, то есть user experience, с английского переводится как «опыт пользователя» или «опыт взаимодействия». UX объединяет все, что можно реализовать с помощью функциональности и дизайна, чтобы привести пользователя к желаемой цели. UX — это про то, чтобы пользователю было удобно и приятно взаимодействовать с вашим сайтом. Чтобы посетитель сайта легко дошел до логической точки и совершил полезное действие, за которым он к вам обратился: получил необходимую информацию, узнал расписание работы компании, цену товара или оформил подписку. В свою очередь это полезное действие будет подводить пользователя к целевому действию для вас — покупке.

Джесс Гарретт предлагает разделить работу над функциональным наполнением сайта на пять уровней:

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

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

Что нужно сделать перед разработкой функционала сайта

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

Какие задачи будет решать сайт

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

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

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

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

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

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

Анализ посетителей сайта

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

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

Понять и отсегментировать целевую аудиторию перед разработкой функционала сайта помогает метод 5W. Его придумал и детально описал в своей книге «Добавленная ценность: алхимия роста с помощью бренда» Марк Шеррингтон. Для сегментации целевой аудитории он предлагает ответить на пять вопросов:

• Что (What) вы предлагаете на сайте? Это ваши товары или услуги.
• Кто (Who) покупает товар или услугу? Важен пол, возраст, геоположение, доход, интересы.
• Почему (Why) эти люди совершат покупку, что ими движет? Их потребности, ожидания и задачи, которые они хотят решить с вашей помощью.
• Когда (When) и при каких обстоятельствах эти люди совершают покупку? Реальные ситуации и условия, при которых они решают воспользоваться вашими услугами.
• Где (Where) и в какой точке взаимодействия с сайтом люди принимают окончательное решение о покупке или другом целевом действии?

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

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

Посмотрим на пример описания нескольких портретов целевой аудитории для сайта косметического салона:

Что можно использовать для сбора информации, которая поможет составить портреты ЦА:

• Сервисы «Яндекс.Метрика» и Google Analytics. Они помогают собирать сведения о посетителях сайта: что они ищут, какой их возраст, пол, местоположение и так далее.
• Опросы в социальных сетях. Помогают понять, какие товары более интересны вашим потенциальным клиентам, как они отреагируют на нововведения.
• Email рассылки. В письме вы можете обратиться к тем, кто уже заказывал, и попросить их рассказать о своем опыте. Также в рассылку можно добавить приглашение пройти опрос, который поможет понять особенности ЦА: ее сферу занятости, предпочтения по способу оформления или доставки заказов.
• Отзывы на сайте конкурентов. За этими отзывами стоят люди, которые уже купили товар или собирались, но по каким-то причине не сделали это: с ними не связались вовремя, товара не было в наличии, не понравился стиль общения менеджеров. Анализируя эти отзывы, особенно негативные, вы можете лучше понимать потребности и ожидания вашей ЦА, а также не совершать ошибки конкурентов.

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

• Что клиент ищет на сайте? Возможно, он хочет посмотреть на товар со всех сторон, для этого пригодилась бы функция 360°.
• На что обращает внимание, выбирая между вами и конкурентами? Допустим, у конкурента нет формы обратной связи, а из-за перегруженных линий невозможно дозвониться менеджеру. Тогда наличие функции call back будет дополнительным аргументом в вашу пользу. Другими аргументами могут стать детальные описания товаров в интернет-магазине, видеодемонстрация гаджета или детальная карта проезда.
• В какой последовательности посетитель выполняет действия? Многое зависит от того, как потенциальный клиент оказался на сайте и с какой страницы начал знакомство с вашей компанией. Если он увидел рекламу в поисковой выдаче и пришел на целевую страницу, вначале он изучит предложение, а затем захочет убедиться в том, что вы порядочный и ответственный продавец. Если посетитель уже знает вас с положительной стороны из других источников, его будут больше интересовать детали — он заглянет на страницу доставки узнать, подходят ли ему ваши варианты, и только затем приступит к заказу товара или услуги. А на всем этом пути может стоять множество функций сайта, которые будут помогать или наоборот препятствовать целевому действию.

Какие проблемы вашего бизнеса решит сайт

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

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

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

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

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

Что заставит пользователей посещать ваш сайт

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

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

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

Анализ функционала сайта конкурентов

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

Но сначала конкурентов нужно найти:

• опросите ваших сотрудников, особенно менеджеров по продажам;
• изучите каталоги и рейтинги по вашей теме;
• найдите через поиск в Google и «Яндекс»;
• проанализируйте с помощью SEО сервисов;
• воспользуйтесь специализированными онлайн-сервисами для поиска конкурентов: Serpstat, SimilarWeb, Google Alerts.

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

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

Выберите среди конкурентов самых сильных и интересных — тех, чьими услугами вы бы воспользовались сами. После этого приступайте к анализу основного функционала их сайтов:

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

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

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

Чтобы не потеряться в чужих фишках и ошибках, заносите их в таблицу или используйте mind map. Это поможет структурировать информацию.

Разработка функционала сайта

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

Продумайте структуру

Представьте структуру сайта в виде дерева. Основные страницы — крупные ветки, дополнительные — ответвления от них. «Главная» будет стволом дерева, а крупными ветками — разделы «О компании», «Услуги», «Контакты», «Блог». Разделы внутри основных страниц изображаются ответвлениями.

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

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

Если делаете структуру интернет-магазина, проработайте каталог:

• Двигайтесь от общего к частному. Например, основная ветка — «Сад и огород», ответвления — «Садовая техника», «Системы полива», «Декор для сада».
• Делайте каталог на перспективу, чтобы его можно было масштабировать, добавляя категории товаров. Если планируете продавать семена, у вас должна быть возможность добавить соответствующую страницу в раздел «Сад и огород».
• Называйте категории с учетом пользовательских интересов и статистики поисковых систем. Если пользователи чаще ищут «Декор для сада», а не «Садовый декор», оставляйте первый вариант.

«М.Видео» объединила в одну категорию всю теле- и аудиотехнику. Телевизоры разбиты на несколько категорий, отдельно выделены новинки. Основные фильтры — по диагонали и бренду, ведь это главные критерии, на которые обращают внимание покупатели.

Чтобы все смогли разобраться в структуре сайта, используйте «хлебные крошки» и HTML карту сайта для людей, а XML карту — для поисковых роботов.

«Хлебные крошки» — дополнительное навигационное меню, которое показывает весь путь от главной страницы сайта до той, на которой сейчас находится пользователь.

HTML карта — каталог основных разделов сайта, размещенных по иерархии, то есть это оглавления сайта. HTML карта помогает пользователю найти нужную страницу, раздел, категорию товара.

XML карта содержит информацию для поисковых систем. Это перечень всех страниц сайта, которые необходимо проиндексировать поисковым роботам. Одни CMS по умолчанию генерируют, а затем автоматически обновляют XML карту без участия человека, другие делают это только после установки специального плагина. Также вы можете воспользоваться сторонними сервисами. Например, Screaming Frog просканирует страницы сайта и сгенерирует XML карту бесплатно, если на сайте менее 300 страниц.

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

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

Подберите компоненты для каждой страницы

Зайдите на все основные ветки воображаемого дерева и продумайте их наполнение. То же самое сделайте для каждой группы страниц. Начните с «Главной»: вынесите на страницу все самое важное и интересное потенциальным клиентам. Дальше двигайтесь к меньшим «веткам».

На сайте компании, которая доставляет питьевую воду, часто есть страница «Кулеры для воды». Все страницы, которые принадлежат этой ветке — «Кулеры настольные», «Кулеры напольные» и «Держатели для стаканов», — оформляют в едином стиле. Например, можно сделать так: перечислить представленные в продаже модели, добавить кнопку сортировки, в текстовом блоке описать особенности выбора или преимущества товаров этой категории.

Далее подготовьте эскиз с функциональными блоками целевых страниц сайта. Используйте сервисы для разработки интерфейсов и прототипирования, например, Axure или Figma. В интернет-магазине на странице раздела-категории могут располагаться такие элементы:

• Верхняя часть страницы: блок авторизации, заказ обратного звонка, выбор города, доступ к «Корзине».
• Левая колонка: фильтр по бренду, типу товара, цене, другим характеристикам.
• Основная область: блок с новинками, блок с товарами с возможностью сортировки, рекомендуемые товары в этой же категории, последние отзывы о товарах, описание особенностей и преимуществ продукции.
• Нижняя часть страницы: форма подписки на рассылку о новинках и акционных товарах, контакты, ссылки на страницы в социальных сетях.

Чем важнее информация, тем выше ее размещают. В основном пользователи любят скроллить ниже пары окон.

Думайте о владельцах смартфонов и планшетов: им тоже должно быть удобно и они сразу должны увидеть то, за чем пришли пришли на сайт. По подсчетам Blue Corona, 40 % пользователей закроют сайт, если он не адаптирован под их мобильное устройство.

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

Показатель отказов в «Яндекс.Метрика» демонстрирует, сколько процентов пользователей провели на сайте менее 15 секунд. Хотя у этой метрики нет универсального порогового значения, большое количество отказов говорит о том, что ваш сайт не соответствует ожиданиям посетителей. Причиной может быть неудобная навигация, отсутствие нужной информации или тех функций, ради которых пользователь зашел на сайт. Эксперты по цифровому маркетингу из агентства Blue Corona утверждают, что у вас есть всего 10 секунд, чтобы задержать внимание посетителя и показать, что вы решите его проблему.

Пример хорошо продуманного функционала сайта

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

Ключевым элементом на главной странице стало поле для поиска работы — то, зачем пользователи приходят на HH. Если они настроены искать работу, собирая отклики на резюме, то могут воспользоваться кнопкой «Создать резюме».

А те, кому удобнее посещать сайт с мобильного устройства, могут сразу скачать приложение на свои смартфоны под iOS и Android. Разработчики не перегружали интерфейс лишними деталями, а использовали лишь те элементы, которые действительно полезны соискателям.

Форма входа в личный кабинет позволяет авторизоваться новым пользователям с помощью любой из семи популярных в России социальных сетей.

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

Если пользователю удобнее работать с сайтом на мобильном устройстве, можно запросить ссылку на скачивание приложения из Google Play и App Store. Владельцы сайта попутно решают еще одну задачу — получают соглашение на отправку SMS оповещений. Соответствующий блок можно увидеть, прокрутив главную страницу на несколько окон вниз.

Задать вопрос сотруднику проекта можно в онлайн-форме, которая вызывается кнопкой «Помощь», размещенной вверху страницы. Дополнительно представляться или вводить контактные данные не нужно, таким образом, пользователь может сразу обратиться за помощью, не совершая лишних действий.

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

Что стоит запомнить

• Принимайтесь за разработку функционала до того, как начнете составлять техническое задание специалисту и продумывать дизайн. Это сэкономит время и убережет от ошибок.
• Следуйте стратегии, когда будете продумывать функциональные блоки.
• Определитесь с бизнес-задачами, которые будет решать сайт. От этого зависит его структура и наполнение.
• Опишите портрет вашей целевой аудитории. Используйте метод 5W, предложенный Марком Шеррингтоном, чтобы узнать, кто ваши потенциальные клиенты, сколько им лет, где живут, чем интересуются, сколько зарабатывают. В этом помогут сервисы «Яндекс.Метрика» и Google Analytics, опросы в соцсетях, email рассылки.
• Постоянно держите в поле зрения проблемы, которые вы и ваши потенциальные клиенты будете решать с помощью сайта.
• «Подсмотрите» сайты у конкурентов. Возьмите самое лучшее и постарайтесь не повторить их ошибки.
• Представьте структуру будущего сайта в виде дерева. Продумайте размещение целевых страниц так, чтобы не нарушить логику «от общего к частному». Опишите, какие функциональные элементы будут на каждой странице.

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