Функционал сайта что это
Функционал сайта что это
От автора : Как написать техническое задание на разработку сайта? Тема достаточно обширная, и в рамках одной статьи ее сложно разобрать на все 100% (если вообще это возможно). Но общие положения, то, что нужно учесть, на что следует обратить внимание при составлении ТЗ, я постараюсь достаточно подробно изложить в данной статье.
Итак, ТЗ
Техническое задание составляется для разработчика сайта. На ТЗ нужно ссылаться при составлении договора между заказчиком и исполнителем. Должна быть оговорена ответственность за невыполнение или некорректное выполнение пунктов и сроков ТЗ с обеих сторон. Но самое главное (на мой взгляд), для чего создается ТЗ, так это для ускорения процесса разработки сайта.
Давайте проанализируем такой пример:
Предположим, что Вам на сайте, где-нибудь с боку нужен календарь. Казалось мелочь. Но чем подробнее вы опишите функционал этого календаря, тем быстрее получите результат.
Тут немного поясню. Календарь календарю рознь. Есть календарь, который просто показывает числа по дням недели текущего месяца. Есть календарь с возможностью перелистывать месяцы. Есть календарь с возможностью перелистывать месяцы и года.
Предположим, вам нужен последний вариант календаря (с возможностью перелистывать месяцы и годы) с подсветкой текущей даты. Вы в ТЗ указали: «в боковой панели нужен календарь». Заказчик вам делает первый вариант календаря (просто показывает числа по дням недели текущего месяца).
Что мы имеем. Исполнитель пункт ТЗ выполнил, а вы хотели совсем другой календарь. Вроде все в соответствии с ТЗ, никто не виноват, до конфликта не дошло, но самое главное потеряны время и деньги.
Это пример всего-то банального календаря.
А если придется переделывать что-то серьезнее, на переработку чего времени требуется не полдня, как в случае с календарем? И у вас сайта нет, и заказчик возится с вами, хотя мог бы завершить ваш проект и начать новый.
Поэтому, чем подробнее вы опишите функционал каждого модуля сайта, тем быстрее получите результат. В этом должны быть заинтересованы обе стороны.
Из каких пунктов обычно состоит ТЗ?
Давайте представим, что вы владелец некоторой компании или фирмы. Ваша компания занимается выпуском какой-либо продукции, и ее реализацией. У Вас есть покупатели. Вы сотрудничаете с продавцами (магазинами и интернет магазинами), сервисными центрами, потребителями продукции. Или же Вы делаете сайт для такой компании и Вам нужно написать ТЗ.
Независимо от того в какой роли Вы выступаете, первое, чем нужно заняться – это изучить структуру организации, то чем она занимается, номенклатуру, характеристики и вообще все, что связно с продукцией и с компанией. От того, насколько глубоко заказчик вникнет в суть происходящего на предприятии, зависит и то, что будет происходить на сайте. Поэтому тут задача обоюдная: заказчик должен как можно подробнее рассказать о предприятии, а исполнитель хорошенько вникнуть в суть происходящего.
Даже если вы сами пишете ТЗ для фирмы, которая будет делать сайт, неплохо это все прикинуть на листе бумаги.
Поехали по пунктам.
Описание сайта
Здесь можно в пару предложений написать о предприятии, чем занимается. Что – то типа вступление сделать.
Далее тут указываем:
для кого – целевую аудиторию сайта:
Для чего нужен сайт:
Тип сайта:
Языковые версии:
Сайт должен решать какие-то задачи. Соответственно далее двигаемся по целям и задачам сайта.
Цели и задачи сайта
В этом разделе ТЗ мы проходимся по всей целевой аудитории и описываем круг задач, которые должен для них решать сайт.
Потенциальные покупатели продукции.
Цель: привлечь больше покупателей и убедить сделать первую покупку, помочь сделать выбор.
Необходимо решить задачи:
Таким образом, проходимся по всей целевой аудитории. Если следовать нашему сайту, то описываем цели и задачи для продавцов продукции (магазины, интернет-магазины), сервисных центров, партнерам (фирмы), потребителям продукции. То есть то, что должен выполнять сайт конкретно для каждого из них.
Теперь перечисляем модули сайта.
Функционал сайта
Для того чтобы перечислить функционал сайта, нужно решить что ему необходимо:
После того, как все это описали, мы подбираемся к самому главному и интересному. Конечно, вся проделанная выше работа очень важна, но теперь становиться еще «жарче».
Описание функционала сайта
На данный момент мы знаем для кого сайт, какие цели и задачи он должен выполнять, его дополнительные функциональные возможности.
Настало то время, когда нужно всю собранную информацию привести в систему и красиво уложить в сайт. Чтобы облегчить задачу и не изобретать велосипед, можно посмотреть сайты схожей тематики. Что-то перенять у них, посмотреть и опробовать их функционал и то, что показалось неудобным, попытаться улучшить на своем сайте. В принципе, посмотреть сайты схожей тематики можно (а если нет опыта, то даже и нужно) в самом начале составления ТЗ.
Предлагаю начать с пунктов меню. В нем нужно отобразить основные страницы сайта и позаботиться о том, чтобы каждый из посетителей быстро нашел информацию для себя. А посетители – это наша целевая аудитория. Меню будет включать много пунктов, поэтому будет в виде выпадающего списка.
Для начала нужно рассказать о компании. Тут могут быть страницы о компании, история компании, контакты, отзывы.
Далее может идти вкладка «новости». Подпункты могут быть «события», «акции», «новое на сайте».
Естественно должен быть пункт меню «продукция», с подпунктами «каталог продукции», «релизы», «отзывы о продукции».
В общем как расписывать надеюсь понятно. Представлю конечный вариант возможного меню для нашего сайта:
О компании
Новости
Продукция
Сервис
Потребителю
Магазинам и интернет магазинам
Сервисным центрам
Партнерам
С меню вроде разобрались. Теперь нужно расписать, что будет на каждой странице и как это все в целом работает. Плюс предоставить приблизительный макет сайта. Его можно нарисовать на листке бумаги карандашом, отсканировать и прикрепить к ТЗ. Единственное, что скажу – не ограничивайте фантазию дизайнера, набросайте в самом общем виде.
Эта часть меняется в зависимости от того, как вы хотите видеть вашу страницу. Может вверху не нужно столько баннеров, возможно вверху нужно указать контакты (адрес, телефон, факс), может в виде иконок «карта сайта», «главная», «контакты». Может, новости Вам слева не нужны, а «акции и релизы» показывать слева.
Главное теперь описать логику работы.
Логика работы
Я описывать буду исходя из рисунка выше.
Верхняя часть сайта остается неизменной на каждой странице сайта. Новостная лента видна только на главной странице. На второстепенных страницах слева показываем подпункты меню того пункта, в котором в данный момент находимся (например если мы на странице «служба сервиса», то показываем ссылки на «гарантийное обслуживание», «послегарантийное обслуживание»). Соответственно и переходы по этим ссылкам ведут на соответствующие страницы. Здесь же, под подпунктами слева отображаем данные для связи с он-лайн консультантами (Skype, ICQ). Блок акции и релизы остаются на каждой странице. Подвал сайта отображается один и тот же на каждой странице.
Примерно так описывается общая логика работы.
Теперь подробно описываем каждый блок. Например «Новостная лента».
«Новостная лента» из 10-ти последних новостей. Каждая новость должна состоять из заголовка новости, даты публикации, краткого начала новости (4-5 строк) и ссылки «читать полностью». При нажатии на ссылку «читать полностью» попадаем на страницу новостей. Новость, на которую попали, отображается на месте основного содержимого. Включает также заголовок новости, дату публикации. Слева так же отображается новостная лента. Новости за прошлые месяцы и года попадают в архив. То есть под новостями за текущий месяц отображаем «архив за (такой-то месяц или год)». При нажатии на ссылку «архив за (такой-то месяц или год)» вниз выпадает список новостей за соответствующий месяц/год.
Примерно так описываем работу каждого блока. Не забываем про случай с календарем. И самое главное нужно расписать работу каталога товара. Здесь я даю вам задание: попробуйте продумать и описать, как будет работать каталог. Свои варианты присылайте на e-mail. Лучший мы опубликуем.
Что еще должно быть? Неплохо было бы указать совместимость.
Совместимость
В этом пункте указываем, на каких операционных системах и в каких браузерах сайт должен одинаково хорошо смотреться. На какой версии, какого языка должен быть написан. Какая CMS используется. Это стоит указать, если Вы действительно понимаете, о чем говорите.
Если не владеете этими вопросами, то просто укажите браузеры, в которых сайт должен правильно отображаться. В остальном рассчитывайте на совесть исполнителя.
Заключение
В данной статье я не стремился показать, что именно так составляется ТЗ и никак иначе. Делайте так и проблем не будет. Составить качественное ТЗ – это скорее вопрос опыта. На первых парах составить грамотное ТЗ получиться далеко не у всех.
В этой статье я хотел показать принципы, по которым строится техническое задание, основные моменты на которые стоит обратить внимание. На сколько, мне это удалось, надеюсь узнать из ваших комментариев.
И не забывайте про задание!
Андрей Бернацкий,
Один из авторов проекта «Основы Самостоятельного Сайтостроения». Данный проект представляет собой подборку качественных материалов: обучающих статей, книг, курсов, видеоуроков — как зарубежных, так и отечественных специалистов в области сайтостроения.
Бернацкий Андрей свободно владеет такими техниками как: HTML, CSS, JavaScript, jQuery, AJAX, PHP&MySQL.
«Киберсант-вебмастер» – самый полный курс по сайтостроению в рунете!
Функционал сайта
Опубликовано: 26.07.2020 в категории: Сайтострой
Функционал сайта — это набор различных опций, которые решают определенные задачи пользователей для удобной работы с веб-ресурсом. Сегодня мы поговорим о том, на что стоит обратить внимание при разработке функционала сайта и на ряд важных моментов, которые могут негативно повлиять на состояние вашего ресурса.
Функционал сайта и его виды
Базовый функционал как правило определен разработчиком CMS. Он содержит все базовые возможности, которые должны присутствовать на каждом проекте.
Для обычных посетителей это:
Для администраторов:
Расширенный функционал сайта
Расширенный функционал основан на различных дополнениях, которые расширяют базовые возможности сайта и CMS. Как правило, расширяют за счет отдельных скриптов, плагинов или аддонов.
Для посетителей ресурса:
Для администраторов и залогиненных пользователей:
Как определить, какие функции необходимы сайту?
Многие могут ломать голову, а какие же функции сайта мне необходимо задействовать. Все зависит от того, какого вида у вас проект. И каковы его основные функции.
Если это одностраничник, то форма поиска тут явно будет лишней.
Для интернет-магазина, форума или инфо-сайта однозначно стоит использовать практически весь базовый функционал. Без него люди просто не смогут нормально работать.
Далее уже выписываете дополнительные задачи, которые должен решать сайт.
Для начала, подумайте, какие расширенные функции важны для данного проекта. Обязательно поищите в интернете похожие проекты. Посмотрите, какие опции реализованы на этих сайтах.
Важное условие!
Функционал сайта должен быть не просто полезным. Он должен быть необходимым для ваших посетителей, они обязательно должны им пользоваться!
Если в аналитике вы видите, что посетители какой-то функционал используют очень редко, то возможно, его стоит вообще убрать, чтобы не перезагружать сайт ненужными функциями..
Разработка функционала сайта
Когда вы точно определились с поставленными задачами, то начинаем проводить разработку функционала сайта. Если вы используете CMS (системой управления сайтом) вам будет легче решить этот вопрос.
Расширить функции сайта можно с помощью уже готовых плагинов и модулей. Для различных CMS существует различное множество как платных, так и бесплатных вариантов. Для движка WordPress например имеется более 40 000 бесплатных плагинов способных решать практически любые задачи.
Если же у вас самописная CMS, то тут будет намного сложнее!
Во-первых, вам однозначно нужно платить деньги за разработку новой функции. Во-вторых, придется обращаться именно к тем, кто эту CMS разрабатывал.
Дело в том, что не каждый специалист сможет толково расширить чужой самописный движок. Поэтому, если вы не владелец Роснефти или Газпрома, лучше использовать только готовые варианты. Например, WordPress, Joomla, Битрикс, OpenCart.
Для определенных видов сайтов существуют специализированные CMS. Функционал у них может быть разный. Какие-то заточены под интернет-магазин, другие под доску объявлений, третьи под сайт знакомств и т.д..
Существуют и универсальные CMS. Например, WordPress с плагином WooCommerce вполне подойдет для создания полноценного интернет-магазина.
Если вы хотите прикрутить доску объявлений, интернет-магазин или форум к уже существующему ресурсу, можно сделать это отдельным проектом. Например, установить специализированную CMS на отдельный поддомен. Это хорошо для безопасности. Даже простые форумы или интернет-магазины имеют большое количество функций, А это дополнительная уязвимость для взлома. Поэтому такие проекты лучше размещать изолированно.
Поэтому всем своим клиентам рекомендую использовать недорогой и надежный хостинг SpaceWeb, где уже предусмотрены соответствующие меры безопасности!
Функционал интернет-магазина
При разработке функционала интернет-магазина существует ряд важных моментов пренебрегать которыми крайне нежелательно. Это может привести к самым серьезным последствиям.
И так, что необходимо учитывать при разработке функционал интернет-магазина.
Несовместимость функций
Нельзя забывать, что любые полезные функции для сайта могут работать с ошибками. Нередко бывают ситуации, когда в одной части сайта что-то доработали и улучшили, а в другом месте перестало работать.
Вы даже можете не сразу это заметить и понять! Поэтому после внедрения нового функционала всегда проводите анализ юзабилити сайта. Посмотрите, все ли нормально работает.
К примеру, вы поставили или обновили модуль для анти-спама. Но после этого действия посетители теперь не могут оставить комментарий на сайте потому что имеется конфликт скриптов.
Или после обновления отдельных модулей или плагинов, проект на десктопах работает хорошо, а в мобильной версии появляются серьезные ошибки.
Проблемы с поиском на сайте.
Бывают не очевидные ошибки, которые могут возникать в нестандартных ситуациях. Вам очень важно отслеживать, каким функционалом пользуются посетители. Необходимо понимать, есть ли разница в конверсии среди тех, кто этим функционалом пользовался или нет. К примеру, те, кто пользовался поиском на сайте, у них конверсия была в 2 раза ниже чем у тех, кто не использовал поиск.
Одна из распространенных проблем, это ситуация, когда посетитель заходит на сайт, на котором есть интересующий его товар. Он начинает набирать его в поиске, но не находит. В таком случае он просто уйдет с сайта!
Отслеживание ошибок в веб-аналитике
Если у вас на сайте выводятся какие-то сообщения об ошибках (что-то человек неправильно ввел, начал вводить номер телефона, но ввел не в том формате, какое-то поле не заполнил и так далее), то обязательно все это отслеживайте в веб-аналитике.
Распространенные ошибки в форме заявки на сайте. Сообщение о неправильном вводе формата данных в форме заявки. К сожалению, редко кто смотрит, какой процент посетителей сталкивается с этими сообщениями об ошибке. Если настроите аналитику для отслеживания, то вы все поймете.
И если человек совершает какое-то ошибочное действие, вы сможете информировать его, какие действия необходимо произвести, чтобы избежать ошибки.
Сейчас системы аналитики позволяют фиксировать любые события (всплыло какое-то окно или посетитель не туда нажал) прописать отдельной целью. Ваша задача — видеть все эти проблемы.
Вывод
Используйте только тот функционал сайта, который действительно необходим!
Старайтесь отбирать только хорошие продукты. Какую-нибудь функцию можно реализовать различными плагинами и скриптами. Но проблема в том, что эти дополнения могут работать по-разному (конфликтовать с другими функциями или нагружать сайт). Поэтому всегда всесторонне тестируйте устанавливаемый функционал.
Функционал и функциональность: в чём разница? Часть первая
(«Южный парк», сезон 2, серия 1)
В общем, да, это ещё одна публикация на тему «функционала» и «функциональности». Чтобы максимально полно её раскрыть, я залезаю в английский и сталкиваю functional с functionality, рассматриваю слова в разных контекстах, ищу неправых среди и прочее, и прочее.
Не то чтобы в Лайв Тайпинг в этом смысле все были праведниками. И мы грешим ошибками: в письменной речи, в устной речи, в кейсах, в статьях, в общении с клиентами — что ни мобильное приложение или сайт, то с программным функционалом. Но стоило гендиру Лайв Тайпинг обратить на это наше внимание, как мы получили ту же проблему, что и с : одни говорят по привычке или без всякой задней мысли, другие поправляют и шикают. Однажды в качестве компромисса было предложено слово «функцион». Об этом никто не подумал всерьёз, разумеется, но процесс пошёл.
Исследование начинается с банального: с помощью ещё большего числа аргументов я провожу черту между «функциональностью» и «функционалом» и объясняю, почему их нельзя путать.
Определения
Что такое функциональность программы или сайта? В общем смысле функциональность — это:
В первом и втором случае определение функциональности обозначает количественное понятие: у человека, предмета или приложения есть одна или более возможностей, и их совокупность называется функциональностью. В третьем и четвёртом случае о функциональности говорится с качественной точки зрения: человек, предмет или приложение способны решать определённую задачу, и чем лучше они это делают, тем они функциональнее.
Смартфон унаследовал от классического телефона только одну функцию: обеспечивать телефонную связь между абонентами. Кроме этого он умеет выходить в интернет, будить, быть записной книжкой, снимать фото и видео, проигрывать музыку, оплачивать покупки в магазине и много чего ещё. Всё это складывается в функциональность телефона в количественном смысле слова.
Unité d’habitation («Жилая единица», или «Марсельский блок») Ле Корбюзье — пример функциональной архитектуры, возникшей в первой половине XX века в Европе и США. Этот стиль был призван решить задачу создания практически полезных и удобных построек для работы и жизни. Архитектурный функционализм отразился на советских «хрущёвках», ставших результатом проведения в жизнь постановления ЦК КПСС «Об устранении излишеств в планировании и строительстве». Поскольку к функциональной архитектуре вообще и к Unité d’habitation в частности предъявляется одно ясно сформулированное требование, это позволяет говорить об их функциональности как о качественном понятии.
Слово «функционал» значений имеет несколько. Функционал — это:
Простое сопоставление определений «функционал» и «функциональность» показывает, что синонимами они не являются. Кроме того, словосочетания «функционал сайта» или «функционал приложения» — это примеры некорректного использования данного понятия. Спорить с этим тем более сложно, если читаешь самые гневные публикации на эту тему. В 2015 году в одном из популярнейших постов в своём блоге об этом ругался Павел Фёдоров. Ровно о том же за шесть лет до Фёдорова желчно, а потому очень остроумно, ругался автор украинского журнала «Компьютерное обозрение» Андрей Зубинский. Цитату последнего мы, ввиду её остроумности, возьмём за правило (орфография сохранена):
«Пожалуйста, никогда не употребляйте слово «функционал», если вы не математик! И особенно пожалуйста, — никогда не употребляйте его во всяких чудовищных сравнительных степенях! Не потому, что это коробит слух. А потому что бессмысленно употребляющий непонятные ему слова выставляет свою глупость напоказ. И когда тысячи их выставляют свою глупость напоказ, у сотен тысяч разрушается вера в светлое будущее человечества.»
Итак, семантически функционал и функциональность — это разные вещи.
Трудности перевода
Как вообще слово «функционал» стало описывать набор возможностей? Виталий Филатов полагает, что под видом функционала в русском языке освоилось английское слово functional. Его перевели как «функциональный», простодушно сократили до «функционала» и столь же простодушно стали использовать как и где захочется — например, в качестве синонима функциональности.
Только переводчики или исполняющие их обязанности не учли, что в словообразовании английского языка есть такой приём, как конверсия. Это способность слова быть и существительным, и прилагательным, и глаголом, не меняя при этом внешнего вида.
love — любовь, to love — любить
hate — ненависть, to hate — ненавидеть
face — лицо, to face — столкнуться лицом к лицу
water — вода, to water — полить водой
brave — смелый, the brave — смельчак
functional — функциональный, functional — функционал
В английском языке слово functional может быть и прилагательным, и существительным, но в последнем случае — только как математический или it термин.
если вы не математик и не говорите о личной жизни гомосексуала — не употребляйте слово «функционал».
В следующих публикациях я покажу, как разделены качественная и количественная функциональность в английском языке, подумаю, можно ли подобрать для функциональности достойный синоним, чтобы не попадать в эту ловушку, определюсь, как себя вести в формальной письменной, неформальной письменной и устной речи и загляну в блоги коллег по отрасли.
Как разработать функционал сайта
15 минут на чтение
Функционал сайта — это все его опции и инструменты, которые помогают пользователям решать определенные задачи. Разные составляющие функционала сайта в конечном итоге приводят пользователей к целевому действию — покупке товара, заказу услуги и так далее.
В этой статье расскажем, почему важно продумать весь функционал сайта до разработки дизайна и начала верстки, как узнать, что именно за инструменты нужны вам на сайте. А также, как построить работу над функционалом так, чтобы не терять время на переделки.
Почему важно продумать функционал сайта до разработки дизайна
Если решили создать сайт и уже представляете, какой стильный и необычный дизайн на нем будет, советуем приостановиться. Да, разработка функционала может показаться не самой интересной вещью, но нужно начинать именно с нее.
Если проработаете функционал сайта до того, как приступите к выбору цветовой схемы, шрифтов, изображений, сможете избежать многих ошибок и сэкономите время на переделках.
Например, дизайнер разработал прототип страницы, утвердили его, а потом пришлось все переделать, потому что нужно добавить некоторые функции.
Разработав сразу функционал сайта, вы и ваша команда не потратите время на работу, которая окажется не нужной. Например, вы «задизайнили» кабинет пользователя, но потом решили использовать просто кнопку «Купить в один клик».
Если разрабатывать дизайн сайта до его функционала, дизайнер все время будет искать компромиссы. Ведь он помнит о том, что в любой момент функционал сайта может измениться и придется пожертвовать интересной фишкой.
Этапы разработки функционала сайта
В создании функционала сайта советуем опираться на принцип разработки сайта, предложенный UX экспертом Джессом Гарреттом.
UX, то есть user experience, с английского переводится как «опыт пользователя» или «опыт взаимодействия». UX объединяет все, что можно реализовать с помощью функциональности и дизайна, чтобы привести пользователя к желаемой цели. UX — это про то, чтобы пользователю было удобно и приятно взаимодействовать с вашим сайтом. Чтобы посетитель сайта легко дошел до логической точки и совершил полезное действие, за которым он к вам обратился: получил необходимую информацию, узнал расписание работы компании, цену товара или оформил подписку. В свою очередь это полезное действие будет подводить пользователя к целевому действию для вас — покупке.
Джесс Гарретт предлагает разделить работу над функциональным наполнением сайта на пять уровней:
Такой метод мы и предлагаем использовать при разработке функционала сайта. Только, чтобы было удобней ориентироваться, мы скомпоновали эти уровни в несколько этапов: подготовка, проектирование функционала сайта и реализация.
Что нужно сделать перед разработкой функционала сайта
Начнем с подготовительного этапа. Он включает в себя постановку задач для сайта, анализ целевой аудитории, функционала сайта конкурентов и так далее.
Какие задачи будет решать сайт
Как и в любом бизнесе, вы, скорее всего, планируете получать с помощью сайта прибыль. Поэтому посмотрите на сайт как на бизнес-инструмент и подумайте, как основной функционал сайта должен приводить пользователей к нужному вам действию.
Понятно, что сайт должен продавать товары и услугу или формировать нужное впечатление о компании и так далее. Это его конечная задача. Но нужно подумать о том, как ее добиться — какие небольшие задачи, которые помогут выполнить основную цель, должен решать ваш сайт. Например, чтобы посетитель сайта купил товар, он должен его захотеть. Для этого нужно показать то, что вы продаете, во всей красе. Например, продемонстрировать возможности товара и его пользу для клиента с помощью видео. Дальше посетитель, возможно, захочет узнать какую-нибудь дополнительную информацию, значит, на сайте должен быть онлайн-консультант или форма заказа обратного звонка. И наконец, чтобы посетитель сайта оформил заказ, вы должны добавить на сайт корзину и механизм оплаты.
В зависимости от решения необходимых вам задач выбирайте и формат сайта. Если хотите оставить в интернете минимум информации и контактные данные — обратите внимание на сайт-визитку. Он подойдет небольшим компаниям, которые только вышли на рынок, индивидуальным предпринимателям, юристам, врачам, психологам. Творческому человеку, который хочет показать результаты своей работы — картины, вышивку, изделия из кожи, —понадобится сайт-витрина, который выполнит функцию портфолио.
Если собираетесь дать в интернете максимум информации о компании, ее услугах и товарах, достижениях, актуальных предложениях и новостях, поможет многостраничный корпоративный сайт. Он справится с задачей привлечения клиентов и партнеров. А если нужно продавать несколько групп товаров и оформлять заказ на сайте, делайте интернет-магазины.
Лендинг лучше всего справится с продажей одного товара, узкой группы товаров, одной услуги или информационного продукта. По такому же принципу можно двигаться дальше: кому-то подойдет для продвижения товара яркий промосайт с обилием анимации, а кому-то — сайт, ориентированный только на текстовый контент. Это может быть блог, новостной портал или контент-проект. Ведь для их монетизации не используют прямые продажи.
Но помните: вашим посетителям должно быть удобно взаимодействовать с сайтом, чтобы поставленные задачи выполнялись. Например, владелец отелей заказывает сайт, чтобы привлечь больше гостей и охватить тех, кто привык бронировать номера через интернет. И чтобы это осуществить, сайт должен упрощать для гостя выбор номеров и процесс бронирования, помогать регулировать финансовые вопросы: оплату, отмену бронирования, заказ дополнительных услуг.
Анализ посетителей сайта
Мы уже пришли к выводу, что разработка функционала сайта — это в первую очередь о том, как сделать опыт взаимодействия с сайтом максимально комфортным. Поэтому чем больше вы будете знать о тех, кому интересен ваш товар, тем выше шансы превратить их в клиентов.
Выясните, кто ваша целевая аудитория — люди, которые придут на сайт и совершат целевое действие: купят товар, закажут услугу, подпишутся на обновления. Не зная свою ЦА, вы рискуете: или функционал окажется провальным и вы ничего не заработаете, или спустите бюджет на ненужные опции и постоянную доработку.
Понять и отсегментировать целевую аудиторию перед разработкой функционала сайта помогает метод 5W. Его придумал и детально описал в своей книге «Добавленная ценность: алхимия роста с помощью бренда» Марк Шеррингтон. Для сегментации целевой аудитории он предлагает ответить на пять вопросов:
Также вы можете обратиться к статье «Как составить портрет клиента и где брать данные», где подробно рассказано о портретах целевой аудитории и методике сбора данных о них.
Нормально, если во время анализа вдруг поймете, что у вас несколько категорий пользователей, и они даже не похожи друг на друга. Например, кейтеринговая компания может с помощью сайта заинтересовать минимум две категории пользователей: организаторов выездных мероприятий и мам, которые хотят накормить гостей на дне рождения ребенка.
Посмотрим на пример описания нескольких портретов целевой аудитории для сайта косметического салона:
Пример описание портретов целевой аудитории
Что можно использовать для сбора информации, которая поможет составить портреты ЦА:
Когда вы точно узнаете, как выглядит и что ищет ваш потенциальный клиент, поставьте себя на его место и спросите несколько вопросов:
Какие проблемы вашего бизнеса решит сайт
Когда вы продумали основные задачи сайта и поняли, как помочь посетителям выполнить целевое действие, время подумать о том, как функционал сайта может решить проблемы в бизнес-процессах. Например, у вас перегружен колл-центр. Чтобы снизить количество звонком, можно добавить на сайт форму обратной связи.
На сайте официального дилера KIA можно заказать обратный звонок и заранее выбрать тему обращения
А ответы на самые частые вопросы разместить в блоке FAQ.
В сервисе SmartAvia подготовили ответы на вопросы, которые интересуют потенциальных клиентов
Компания-застройщик сократит штат колл-центра, если подробно расскажет на сайте об объектах на этапе строительства, создаст страницу с ответами на типичные вопросы, выложит прайс с реальными условиями покупки, сделает форму обратного звонка. А если на сайте есть трехмерная модель здания, посетитель сможет «прогуляться» по будущей квартире и оценить месторасположение дома: как далеко от него остановки общественного транспорта, школа, поликлиника, парк, торговый центр. Весь этот функционал сайта влияет на то, каким в итоге будет решение клиента.
Панорама ЖК «Крылья» помогает оценить расположение дома, не выезжая на объект
Может быть и такая проблема: у вас молодой бренд и к нему еще не сформировалось доверие. Чтобы это исправить, записывайте видеообзоры, которые будут доказывать качество вашего продукта, и просите покупателей в отзывах делать то же самое. Чтобы подтолнуть клиентов делать это, можно, например, дарить бонусы за видеораспаковку товара.
На главной странице производителя кухонной бытовой техники Ariete есть детальные видеообзоры новинок
Какие еще проблемы поможет решить функционал сайта: наладить контакт с целевой аудиторией в социальных сетях, сгенерировать больше лидов и так далее. Например, последнее автосалон может реализовать так: вначале предложить «поиграть» с комплектацией автомобиля в конфигураторе, а затем оформить заявку на тест-драйв понравившейся модели.
Что заставит пользователей посещать ваш сайт
Клиент может уже знать вас и придти на сайт, чтобы что-то уточнить или перепроверить. Подумайте, какие могут быть причины и проработайте их с точки зрения функционала сайта.
Причинами, которые вынуждают ЦА искать сайт, а не идти к вам напрямую, даже если вы находитесь на соседней улице, могут быть банальный страх, неуверенность или желание сэкономить время.
На сайте стоматологии можно за пару кликов узнать, сколько стоит поставить брекеты. Это проще и быстрее, чем прийти в стоматологию и услышать от администратора сумму, которую клиент не планировал потратить на эту услугу. Еще на сайте можно увидеть, какое оборудование использует клиника, как обустроен зал ожидания, какие специалисты работают в штате — все это поможет сформировать правильные впечатления и сделать окончательный выбор.
«Галерея улыбок» на сайте St. Paul Dental Center наглядно показывает результаты работы стоматологов
Анализ функционала сайта конкурентов
Скорее всего, ваш бизнес не уникален. Вы можете открывать десятую в городе студию кухонь или пятидесятый по счету маникюрный салон и столкнетесь с теми же проблемами, что и другие. Посмотрите на сайты конкурентов: как они реализовали те или иные задачи, в каком порядке выстроили функциональные блоки на странице, на чем акцентировали внимание и где допустили ошибки.
Но сначала конкурентов нужно найти:
Ищите конкурентов в своей сфере, но не ставьте слишком строгие рамки. Если у вас студия свадебных причесок, обратите внимание на сайты салонов красоты и студий ногтевого дизайна. Стоматология — загляните на сайты других узкопрофильных медицинских клиник.
Хоть услуги и разные, ваши клиенты и клиенты конкурентов из смежных ниш будут искать на сайте похожие функциональные элементы. Это может быть актуальный прайс, контакты и схема проезда, раздел с отзывами, презентация каждого специалиста, функционал записи на конкретное время.
Выберите среди конкурентов самых сильных и интересных — тех, чьими услугами вы бы воспользовались сами. После этого приступайте к анализу основного функционала их сайтов:
При разработке функционала сайта часто допускают такие ошибки: сложно найти контактные данные, меню сайта перегружено лишней информацией, нет кнопки отключения музыки. В интернет-магазине «Корзину» покупатель может не удивить, если вы расположите ее в непривычном месте, или часть нужных для заказа элементов скроет панель навигации при скроллинге.
На главной и некоторых других целевых страницах магазина «Мистер Дом» используется не привычная кнопка «Купить», а кнопка «Подробнее». В результате посетитель вынужден выполнять лишнее действие. Вначале ему нужно перейти на страницу товара по кнопке «Подробнее», и только потом он может добавить его в «Корзину».
Пример неудачной реализации функционала покупки
Чтобы не потеряться в чужих фишках и ошибках, заносите их в таблицу или используйте mind map. Это поможет структурировать информацию.
Разработка функционала сайта
Приступаем к разработке функционала сайта на основе информации, которую собрали на предыдущем этапе. У вас уже есть цели и задачи сайта, портреты ЦА, то, что вы узнали о функционале конкурентных сайтов и так далее.
Продумайте структуру
Представьте структуру сайта в виде дерева. Основные страницы — крупные ветки, дополнительные — ответвления от них. «Главная» будет стволом дерева, а крупными ветками — разделы «О компании», «Услуги», «Контакты», «Блог». Разделы внутри основных страниц изображаются ответвлениями.
Если какая-то из страниц повторяется несколько раз, то она будет шаблоном. Например, страницы услуг или товаров, где строение идентично, а отличается только наполнение, изображают на дереве в виде двойного прямоугольника.
Пример древовидной структуры сайта
Сделаете структуру сайта логичной и понятной, и люди будут с удовольствием на него заходить. Помните, что интернет-пользователи с каждым годом становятся более капризными и не хотят разбираться в запутанном меню, искать кнопки оформления заказа. Второго шанса сделать клиентом посетителя сайта может не быть, потому разработать удобный функционал сайта — ваша основная задача.
Если делаете структуру интернет-магазина, проработайте каталог:
«М.Видео» объединила в одну категорию всю теле- и аудиотехнику. Телевизоры разбиты на несколько категорий, отдельно выделены новинки. Основные фильтры — по диагонали и бренду, ведь это главные критерии, на которые обращают внимание покупатели.
Фрагмент каталога из интернет-магазина «М.Видео»
Чтобы все смогли разобраться в структуре сайта, используйте «хлебные крошки» и HTML карту сайта для людей, а XML карту — для поисковых роботов.
«Хлебные крошки» — дополнительное навигационное меню, которое показывает весь путь от главной страницы сайта до той, на которой сейчас находится пользователь.
«Деятельность» > «Госзакупки»” src=”/blog/wp-content/uploads/2020/05/rostehnadzor-breadcrumbs.png” alt=”Хлебные крошки на сайте «Ростехнадзора»: «Главная» > «Деятельность» > «Госзакупки»” width=”1080″ height=”483″/> Хлебные крошки на сайте «Ростехнадзора»: «Главная» > «Деятельность» > «Госзакупки»
HTML карта — каталог основных разделов сайта, размещенных по иерархии, то есть это оглавления сайта. HTML карта помогает пользователю найти нужную страницу, раздел, категорию товара.
Фрагмент карты сайта на торговой площадке ebay.com
XML карта содержит информацию для поисковых систем. Это перечень всех страниц сайта, которые необходимо проиндексировать поисковым роботам. Одни CMS по умолчанию генерируют, а затем автоматически обновляют XML карту без участия человека, другие делают это только после установки специального плагина. Также вы можете воспользоваться сторонними сервисами. Например, Screaming Frog просканирует страницы сайта и сгенерирует XML карту бесплатно, если на сайте менее 300 страниц.
Не злоупотребляйте уровнями вложенности страниц — это количество кликов, которое отделяет любую вложенную страницу от главной. Если в интернет-магазине сложную иерархию можно с натяжкой оправдать каталогом, то с другими типами сайтов вы рискуете потерять пользователя. Он запутается, потратит больше времени, чем ожидал, и уйдет.
Поисковые роботы будут дольше индексировать сайт и дадут страницам с большим уровнем вложенности низкий приоритет. А это повлияет на выдачу. Три — оптимальное количество уровней вложенности.
Пример интернет-магазина с четырьмя уровнями вложенности
Подберите компоненты для каждой страницы
Зайдите на все основные ветки воображаемого дерева и продумайте их наполнение. То же самое сделайте для каждой группы страниц. Начните с «Главной»: вынесите на страницу все самое важное и интересное потенциальным клиентам. Дальше двигайтесь к меньшим «веткам».
На сайте компании, которая доставляет питьевую воду, часто есть страница «Кулеры для воды». Все страницы, которые принадлежат этой ветке — «Кулеры настольные», «Кулеры напольные» и «Держатели для стаканов», — оформляют в едином стиле. Например, можно сделать так: перечислить представленные в продаже модели, добавить кнопку сортировки, в текстовом блоке описать особенности выбора или преимущества товаров этой категории.
Далее подготовьте эскиз с функциональными блоками целевых страниц сайта. Используйте сервисы для разработки интерфейсов и прототипирования, например, Axure или Figma. В интернет-магазине на странице раздела-категории могут располагаться такие элементы:
Чем важнее информация, тем выше ее размещают. В основном пользователи любят скроллить ниже пары окон.
Думайте о владельцах смартфонов и планшетов: им тоже должно быть удобно и они сразу должны увидеть то, за чем пришли пришли на сайт. По подсчетам Blue Corona, 40 % пользователей закроют сайт, если он не адаптирован под их мобильное устройство.
Не забывайте и о персонажах, которых вы создали на этапе анализа целевой аудитории. «Примерьте» на каждого содержание типовых страниц и попробуйте понять, найдут ли они на странице все, что нужно.
Показатель отказов в «Яндекс.Метрика» демонстрирует, сколько процентов пользователей провели на сайте менее 15 секунд. Хотя у этой метрики нет универсального порогового значения, большое количество отказов говорит о том, что ваш сайт не соответствует ожиданиям посетителей. Причиной может быть неудобная навигация, отсутствие нужной информации или тех функций, ради которых пользователь зашел на сайт. Эксперты по цифровому маркетингу из агентства Blue Corona утверждают, что у вас есть всего 10 секунд, чтобы задержать внимание посетителя и показать, что вы решите его проблему.
Пример хорошо продуманного функционала сайта
HeadHunter (HH) — крупнейший в России сайт для размещения вакансий и поиска работы. Сюда приходят, чтобы найти подходящие вакансии, разместить резюме или предложения о работе. Посмотрим, реализован функционал этого сайта.
Ключевым элементом на главной странице стало поле для поиска работы — то, зачем пользователи приходят на HH. Если они настроены искать работу, собирая отклики на резюме, то могут воспользоваться кнопкой «Создать резюме».
А те, кому удобнее посещать сайт с мобильного устройства, могут сразу скачать приложение на свои смартфоны под iOS и Android. Разработчики не перегружали интерфейс лишними деталями, а использовали лишь те элементы, которые действительно полезны соискателям.
Главная страница HH
Форма входа в личный кабинет позволяет авторизоваться новым пользователям с помощью любой из семи популярных в России социальных сетей.
Вход в личный кабинет на сайте HH
Соискателю при регистрации нужно заполнить минимум полей. Дополнительно соглашаться с условиями второй стороны, как это часто реализовано на других сайтах, не нужно. Для этого достаточно нажать кнопку «Зарегистрироваться».
Форма регистрации нового соискателя на сайте HH
Если пользователю удобнее работать с сайтом на мобильном устройстве, можно запросить ссылку на скачивание приложения из Google Play и App Store. Владельцы сайта попутно решают еще одну задачу — получают соглашение на отправку SMS оповещений. Соответствующий блок можно увидеть, прокрутив главную страницу на несколько окон вниз.
Форма отправки ссылки на мобильное приложение для HH
Задать вопрос сотруднику проекта можно в онлайн-форме, которая вызывается кнопкой «Помощь», размещенной вверху страницы. Дополнительно представляться или вводить контактные данные не нужно, таким образом, пользователь может сразу обратиться за помощью, не совершая лишних действий.
Форма связи с онлайн-консультантом на сайте HH
Чтобы каждый раз не сортировать вакансии от более новых к старым, для постоянных посетителей сайта на главную страницу вынесен блок с лучшими предложениями дня.
Блок с новейшими вакансиями на сайте HH
Для тех, кто хочет делегировать составление резюме специалистам, есть платная услуга — «Готовое резюме», ссылка на которую доступна в нижней части главной страницы HH. Здесь пользователю предлагают три варианта взаимодействия, которые отличаются перечнем услуг и стоимостью. Можно увидеть, что входит в тарифный план, и сразу оформить заказ.
Форма заказа резюме от экспертов на сайте HH
Что стоит запомнить
Подробная разработка функционала сайта — не самоцель. Воспринимайте рекомендации выше не как строгое руководство к действию, а как помощь. Описывая портрет целевой аудитории, анализируя конкурентов, выбирая приоритетные для себя и пользователей задачи, всегда ориентируйтесь на конечный результат.