Как составить ТЗ на разработку сайта

Помните закон Мерфи? “Если что-то может пойти не так, оно пойдет не так”. Как ни странно, он стабильно работает и в веб-разработке. Изначально клиент хотел второй “ВКонтакте”, а получил форум начинающих аквариумистов. Даже кофейная гуща и пресловутая интуиция не помогли разработчику угадать хотелки заказчика. А если было бы четкое и понятное ТЗ деньги, силы и время не были бы потрачены впустую. Рассказываем, что и как писать в техзадании на разработку сайта, а от чего лучше отказаться, чтобы результат не превратился в катастрофу. 

Что такое техническое задание? 

Например. “Сходи в магазин и купи молоко” – это не ТЗ, а просто поручение. Техническое задание на покупку молока будет выглядеть следующим образом: “Мне нужен 1 литр молока. Купи его в магазине у дома, сегодня до 15.00. Оно должно иметь жирность 15%”. 

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

Зачем нужно ТЗ при создании сайта? 

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

Что дает техзадание заказчику? 

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

2. Контроль хода разработки, корректной реализации всех задач и функций, прописанных в ТЗ.

3. Определение реального бюджета и сроков, снижение риска непредвиденных задержек и расходов;

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

5. Отличные перспективы для дальнейшего изменения или улучшения сайта. После завершения проекта ТЗ становится полезным руководством для доработок. 

Что дает техзадание исполнителю? 

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

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

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

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

5. Открывает новые горизонты для заработка и демонстрации собственной компетенции. Некоторые студии предлагают составление ТЗ, как дополнительную услугу. 

Кто должен составлять техническое задание? 

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

2. ТЗ делает исполнитель. 

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

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

3. Совместная работа над ТЗ. 

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

Техническое задание на сайт: структура и примеры

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

1. Описание будущего продукта

Общий раздел, в котором клиент рассказывает о том, что именно он планирует получить. Обычно достаточно 2-3 предложений, чтобы кратко и четко рассказать о типе и назначении сайта. 

Что писать: 

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

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

• Второстепенные задачи, которые должен выполнять сайт.

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

Ключевая цель: генерация лидов через запись на замеры или консультацию. 

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

2. Целевая аудитория 

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

Что писать:

• Примерный возраст, пол, место жительства, интересы и увлечения. 

• Привычки и поведения: в какие часы и дни недели наиболее активны покупатели продукта, как предпочитают искать информацию, совершать покупки. 

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

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

• Проблемы целевой аудитории, которые может решить сайт. 

Например: Для лендинга об электросамокатах: 

Активные молодые люди (женщины и мужчины) в возрасте от 20 до 30 лет. 

Интересы: современные технологии, спорт, прогулки на свежем воздухе, экология. 

Место жительства: Минск и другие крупные города РБ. 

Где ищут информацию: через поиск (Гугл, Яндекс), социальные сети (ВК), мессенджеры (Телеграмм). 

Устройства: 80% пользователей используют для доступа в интернет мобильные гаджеты, 20% – ноутбуки и стационарные компьютеры. 

Часы активности: в будни наибольшая активность отмечается с 18.00 до 21.00, в выходные с 12.00 до 23.00. 

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

Покупательские способности: имеют стабильный доход на уровне средней и выше средней зарплаты по рынку.

3. Технические требования

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

Что писать:

• Платформа и CMS: Tilda, Wix, WordPress, 1С-Битрикс;

• Поддержка разных браузеров и их версий;

• Базы данных: MySQL, SQLite, PostgreSQL;

• Интеграции с внешними сервисами и системами: CRM, платежными системами, сервисами аналитики;

• Время загрузки страниц сайта;

• Кэширование и производительность;

• Безопасность: использование HTTPS, защита от взлома и пр.

Например:

Платформа и CMS: сайт разрабатывается на WordPress с возможностью редактирования контента пользователем через административную панель. 

Браузеры: сайт должен корректно отображаться и работать в Яндекс.Браузере, Google Chrome, Mozilla и Microsoft Edge.

База данных: MySQL.

Интеграция с сервисом онлайн-записи, платежной системой ЮКасса. 

Время загрузки страниц: не >3 сек и далее по списку. 

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

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

Что писать: 

• Перечень разделов меню, страниц с указанием их иерархии и уровней вложенности. 

• Список блоков и элементов, которые должны присутствовать на тех или иных страницах. 

Например: 

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

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

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

И далее по аналогии для остальных страниц сайта. 

5. Схемы интерфейсов системы

Этот раздел содержит схемы страниц сайта с минимальным уровнем детализации (вайрфреймы). Они необходимы, чтобы предварительно визуализировать структуру, интерфейс и функционал ресурса. Как правило, варфреймы выполняют в формате цифровых макетов в Figma, Sketch или других программах.

Что писать:

• Схемы основных страниц.

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

• Выбор кликабельных элементов: ссылок, онлайн-форм, кнопок.  

6. Стиль и дизайн

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

Что писать: 

• Цвета – основные и дополнительные цвета для фона, текстового контента, заголовков, кнопок, форм. 

• Изображения – стиль, размеры, фото, иконки. 

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

Например: Для сайта медицинского центра. 

Цвета: основными цветами сайта будут белый и голубой, для акцентов бирюзовый.

Шрифт: для заголовков – Helvetica, для текстового контента – Arial. Размер кегеля: для заголовков 21, для текста – 14. 

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

Возможно использование всплывающих (анимированных) окон для онлайн-записи. 

7. Функционал будущего сайта

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

Что писать: 

• Основные функции: поиск, фильтры, оформление онлайн-заказов, сбор отзывов. 

• Формы: формы-онлайн записи, формы для заказа обратного звонка. Обязательно следует указать, куда направляется пользовательская информация из формы. 

• Панель администратора: какие блоки и разделы должны быть доступны для редактирования: добавление товаров и текстового контента, обработка поступивших заявок;

• Функционал Личного кабинета: возможность для регистрации на сайте пользователей, опции, которые будут доступны после авторизации. 

Например: для интернет-магазина по продаже автозапчастей

Основные функции: поиск товаров в каталоге, оформление покупки через Корзину, оплата товара на сайте, оставление отзывов. 

Формы: форма регистрации, форма оформления заказа с выбором способа оплаты и доставки. Вся информация из форм передается в CRM магазина. 

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

8. Сроки и бюджет 

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

Что писать:

• Общие и промежуточные сроки. 

• Бюджет: общие и на отдельные работы. 

Например: 

Сроки: сайт интернет-магазина должен запущен в течение 90 дней с момента начала работ. При этом концепция и дизайн должны быть подготовлены за 30 дней, верстка и программирование закончены за 30 дней, на тестирование и исправление ошибок также выделено 30 дней. 

Бюджет: стоимость всех работ по проекту оценивается в 1500 рублей, включая подготовку ТЗ и техническую поддержку в течение 3-х месяцев после запуска интернет-магазина.

Типичные ошибки при составлении ТЗ

Какие проблемы встречаются чаще всего?

1. Размытые формулировки, которые можно трактовать по-разному. 

Например, клиент просит, чтобы “сайт был удобным”. Логичный вопрос, удобный для кого? Без конкретики исполнитель будет додумывать сам и далеко не всегда, его субъективное суждение понравится заказчику. 

• Нет: Удобная форма онлайн-записи на замеры. 

• Да: Форма онлайн-записи на замеры включает два поля: Фамилия и Имя, номер телефона. Кнопка отправки заявки большая, синего цвета с крупной надписью “СОХРАНИТЬ И ОТПРАВИТЬ”. 

Чем точнее описаны отдельные моменты, тем меньше риск, что ожидания и реальность не совпадут. Положения ТЗ – это не примерные пожелания, а четкие требования, с которыми можно сверяться в процессе работы.

2. Неучтенные интеграции. 

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

3. Игнорирование технических ограничений. 

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

4. Не уделяется должное внимание техническим требованиям. 

Сайт должен стабильно работать во всех популярных браузерах и их актуальных версиях. Для защиты данных следует использовать шифрование, бэкапы, технологии защиты от DDoS-атак. Чтобы оптимизировать скорость загрузки возможно применение Google PageSpeed или Core Web Vitals. То есть все эти моменты должны быть учтены и зафиксированы в ТЗ. 

5. Отсутствия контроля качества. 

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

Подводим итоги 

Для разных сайтов структура и содержание ТЗ будут различаться. Глупо делать одинаковые технические задания для форума автомобилистов и лендингов по продаже подгузников из Кореи. Заказчики и исполнители должны помнить, что любые “серые” зоны и неясные формулировки можно истолковать по-разному. То, что может быть очевидным для предпринимателя, кажется “темным лесом” программисту и наоборот. Если вы планируйте получить хороший сайт за свои деньги подойдите к составлению ТЗ со всей ответственностью.