ТЗ для разработки сайта

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

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

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

Для ТЗ всегда работает одно правило — “what you see is what you get” (что видишь, то и получаешь). Сайт должен выглядеть и работать точно так, как он описан в техническом задании и, подписывая договор, обе стороны с этим соглашаются.

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

1. Увидеть, за что платит. Техническое задание на разработку сайта — его подробное описание. В нем написано и даже схематично нарисовано, как будет выглядеть сайт, и работать все его функции. Если есть вопросы — на них ответят. Если что-то не так, как вы себе представляли — просто скажите, и ТЗ откорректируют до начала разработки. Плюс, каждый раздел технического задания, например, дизайн или подключение онлайн-оплаты на сайте, включает цену и время на реализацию. Вы сможете сразу отказаться от ненужных или отложить на будущее разработку сложных функций.
2. Оценить компетентность студии. Дотошность — главный признак хорошего исполнителя. Лучше устать отвечать на вопросы, и получить в результате понятный и структурированный документ, чем поверить на слово людям, которые красиво расскажут, как они все сделают, но не способны даже составить ТЗ. Скорее всего у них и в коде будет такой же бардак, а это — минус стабильность работы, скорость загрузки и, конечно же, прибыльность сайта.
3. Получить гарантии. Исполнитель, подписывая с вами договор, обязуется сделать все точно по ТЗ. Если что-то выглядит или работает не так, он обязан это исправить. В крайнем случае, можно даже обратиться в суд или отдать готовое техническое задание другим разработчикам, которым будет проще понять, что делать, благодаря ТЗ.

Диджитал-агентство получает от ТЗ те же бонусы, что и заказчик, в зеркальном отражении. В частности, техническое задание — единственный способ:

1. Понять заказчика и показать компетентность. Сделать хороший проект — главный приоритет хорошей студии веб-разработки. ТЗ — практически первое, что увидит клиент. Сделать его подробным и структурированным, на основе аналитики и данных анкетирования, значит произвести хорошее впечатление, а главное, точно понять желания заказчика и задачи его бизнеса.
2. Ускорить разработку. Масштабное и структурированное ТЗ нужно не только чтобы ответить на все вопросы заказчика. Менеджеру проекта после утверждения технического задания остается только разделить его между ответственными исполнителями, и они сразу начнут работу.
3. Защититься от неожиданных изменений настроения заказчика. Подписанный договор на основе ТЗ — бумажный щит от любых необоснованных претензий. Если клиенту захотелось что-то поменять в процессе разработки, что далеко не всегда возможно, это обсуждается, и новые функции подключаются за дополнительную плату. При этом, по закону, диджитал-студия может отказаться делать что-либо сверх прописанного в ТЗ.

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

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

Структура ТЗ для сайта будет разной, в зависимости от того, будет ли это интернет-магазин или корпоративный портал, но общие разделы и правила их оформления неизменны.

Базовая информация о проекте

“Введение” в ТЗ состоит из описания компании заказчика, его продукта, ЦА и ее потребностей, а также поставленных задач. Технические особенности — продолжение первого пункта в виде списка утвержденных технологий и функций. Здесь указывают выбранную CMS или фреймворк и хостинг, а также прописывают требования к адаптивности и кроссбраузерности. Все интеграции, например, с сервисами онлайн-оплаты или 1С тоже размещают тут, чтобы получился базовый чек-лист. Подробнее о разных системах управления контентом и сложности подключения функций заказчику расскажут при подготовке ТЗ.

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

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

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

Сквозные элементы описываются каждый отдельно по тому же принципу. Всего их четыре. Шапка сайта или “хедер” — верхняя часть с общим меню, контактной информацией и логотипом компании. Подвал (“футер”) — нижняя, с навигацией по сайту, дублирующая или дополняющая данные из верхней. Для интернет-магазина также используют боковую панель (“сайдбар”) с категориями товаров и фильтрами. Четвертый сквозной элемент — всплывающие окна с формами для подписки, заказа и других действий. Отдельно в техническом задании могут быть страницы для вывода результатов поиска, авторизации и регистрации, а также ошибок.

В современных диджитал-агентствах структуру сайта не просто описывают списком или таблицей, но создают UI/UX макет. Заказчик увидит, где расположены блоки на прототипе и посмотрит, как они работают до того, как утвердить ТЗ. Отдельно на этом этапе прописываются сложные сценарии, например, что должно происходить после того, как посетитель нажмет на кнопку “Заказать”.

Дизайн и контент

Разработка ТЗ для дизайнеров — отдельная часть создания сайта, но иногда их объединяют в одно целое, чтобы показать заказчику все еще нагляднее. Дизайнеры занимаются оформлением утвержденного макета: подбирают цветовую гамму, выбирают шрифты, рисуют иконки и инфографику, обрабатывают фотографии и многое другое, тоже в тесном взаимодействии с будущим владельцем сайта. Все это обычно делается параллельно с front-end разработкой. Хорошо, если у клиента есть брендбук с элементами фирменного стиля, а если нет, то на этапе разработки общего ТЗ определяют базовые особенности — цвета и стиль.

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

Еще 3 совета по составлению технического задания

1. Формулируйте четко. Само название “техническое задание” подразумевает точность и однозначность формулировок. Это значит — никаких качественных прилагательных, например, быстрый или удобный, и абстрактных значений там, где могут быть конкретные. Примеры: вместо “быстрая загрузка страниц” — от 80 баллов по оценке сервиса Google PageSpeed Insights или не больше четырех секунд на отображение каждой. Вместо “удобная функция заказать в 1 клик” — картинка всплывающего окна с полем для текста, местом для ввода телефонного номера и соответствующей кнопкой. Это правило касается даже мелочей — сколько картинок будет в одном блоке, какие статьи на блоге будут показываться сверху, где будет расположена плашка “скидка” и т.д.
2. Описывайте сущности и функции. Чем подробнее ТЗ — тем лучше. Опишите характеристики для каждого вашего товара, статусы, которые будут указываться в истории заказов, в общем все, что может отображаться на страницах сайта. Программисты объединят это в сущности — объекты с определенными атрибутами и методами, которыми просто управлять. Точно так же поступите и с нестандартными функциями. Если нужно подключение кнопок социальных сетей, интеграция с CRM, отправка уведомлений на e-mail или sms — это должно быть прописано в ТЗ.
3. Составьте глоссарий. Клиенты не обязаны знать сложные термины из лексикона разработчиков и дизайнеров, а вот техническое задание должно быть понятно и тем и другим. Конечно, на этапе обсуждения ТЗ, сотрудники диджитал-агентства подробно расскажут, что такое CMS или “футер”, но хорошим тоном считается создать отдельную страницу для заказчика, где он прочтет короткое и понятное описание технологий и функций, использованных в проекте.

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