Главная / Блог / Разработка сайтов / Как составить техническое задание на сайт

Как составить техническое задание на сайт

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

Зачем нужно ТЗ, если есть бриф

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

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

При этом ТЗ не обязано быть толстым документом на сто страниц с ссылками на устаревшие стандарты. Для корпоративного сайта или лендинга достаточно 8–15 страниц, написанных простым языком. Главное, чтобы любой разработчик, дизайнер и тестировщик, открыв документ, понимал одно и то же. Общий процесс работы над сайтом мы описывали в статье про этапы разработки сайта, а здесь сосредоточимся именно на документе.

Что входит в ТЗ: рабочая структура

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

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

Рассмотрим подробнее те разделы, где чаще всего возникают проблемы.

Цели и критерии успеха

Фраза «сайт должен привлекать клиентов» ничего не значит. Цель должна быть проверяемой: «получать не менее 30 заявок в месяц из органического трафика» или «снизить долю звонков с типовыми вопросами за счёт раздела с ответами». Даже если вы не уверены в цифрах, лучше записать гипотезу и пересмотреть её после запуска, чем оставить пустое место.

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

Аудитория и сценарии

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

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

Структура и функции: где прячутся скрытые затраты

Карта сайта в ТЗ должна быть списком страниц с указанием вложенности и типа. Недостаточно написать «раздел Услуги». Нужно перечислить, сколько в нём страниц, повторяется ли шаблон, есть ли фильтры и поиск. От этого зависит объём вёрстки: десять страниц на одном шаблоне и десять уникальных страниц отличаются по трудоёмкости в несколько раз.

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

посетитель заполняет имя, email и сообщение, при желании прикладывает файл до 10 МБ;
система проверяет поля и показывает понятные сообщения об ошибках рядом с полем;
заявка уходит на корпоративную почту и сохраняется в базе;
посетитель видит подтверждение и не может случайно отправить форму дважды.

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

Что чаще всего забывают

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

Любой пункт из этого списка может превратиться в доплату, если о нём не договорились заранее.

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

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

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

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

Практическое правило: если материалы от заказчика не поступили к началу вёрстки, срок запуска сдвигается на то же количество дней. Лучше записать это в ТЗ, чем выяснять в разгар проекта.

Технические требования и приёмка

Технический раздел должен быть измеримым. Вместо «сайт должен быстро работать» напишите, какие показатели вы проверяете и каким инструментом. Вместо «поддержка всех браузеров» перечислите версии: два последних выпуска основных браузеров и мобильные Chrome и Safari. Старые версии, которые используют 1–2 процента аудитории, чаще всего не стоят затрат на поддержку.

Примерный набор технических требований выглядит так:

Параметр	Требование
Загрузка главной страницы	не более 3 секунд на мобильном соединении среднего качества
Браузеры	два последних выпуска Chrome, Safari, Firefox, Edge
Безопасность	HTTPS, защита форм от спама, регулярные обновления
Хостинг	указать, чьими силами и на чьей площадке размещается сайт
Доступность	читаемый контраст, управление с клавиатуры для основных элементов

Подробно о том, что влияет на показатель в первой строке, написано в статье про скорость загрузки сайта. Если заказчик планирует продвижение в поиске, в ТЗ должен быть раздел о закладке основ SEO: чистая структура адресов, заголовки, мета-теги, карта сайта.

Как описать приёмку

Приёмка — самый недооценённый раздел. Он отвечает на вопрос, когда работа считается выполненной. Рабочая схема:

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

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

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

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

Слишком общие формулировки. «Удобная навигация», «интуитивный интерфейс» нельзя проверить. Заменяйте их конкретными условиями: «до любой услуги не более двух кликов с главной».
Копирование ТЗ с чужого проекта. В документе остаются лишние разделы про личный кабинет и корзину, которых на вашем сайте не будет, а нужные вещи пропущены.
Отсутствие приоритетов. Если всё важно, то непонятно, что убрать при нехватке времени. Помечайте функции как обязательные, желательные и отложенные на вторую очередь.
Игнорирование поддержки. Что будет после запуска: кто обновляет движок, исправляет ошибки, добавляет страницы. Этот вопрос лучше решить заранее, прочитайте про поддержку и развитие сайта.
ТЗ пишет один человек. Маркетолог, руководитель и технический специалист по-разному видят сайт. Согласуйте документ со всеми, кто потом будет принимать работу.

Как подготовиться к написанию

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

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

Итоги

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

Нужен датасет под вашу задачу?

Подготовим тестовую партию изображений с разметкой, чтобы вы могли проверить подход на своей модели. Напишите на [email protected] или оставьте заявку.