Инструкция: как составить техническое задание на разработку сайта

Техническое задание – документ, описывающий все страницы и части сайта, их функционал и особенности реализации.

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

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

В статье мы расскажем о том, как по нашему шаблону самостоятельно составить ТЗ и на какие моменты нужно обратить особое внимание.

Кто должен составлять ТЗ

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

Рассмотрим на примерах, чем будут различаться их задания.

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

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

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

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

• перечень страниц сайта;

• краткое описание блоков страниц;

• данные о полях для ввода (например, поля в личном кабинете и т. д.);

• информацию о ссылках и переходах;

• данные о группах пользователей и их правах (возможность совершать действия в админке, на сайте и т. д.).

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

Техническое задание от исполнителя

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

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

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

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

При составлении можно опираться на несколько источников информации:

• бриф;

• пожелания заказчика;

• разработанную структуру сайта;

• прототипы.

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

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

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

Оформление ТЗ, которое поможет сэкономить время

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

Пример автособираемого оглавления ТЗ

При составлении структуры ТЗ его следует разделить на логические части. В примере шаблона ТЗ использованы следующие:

1. Общая информация о проекте.

2. Структура сайта и ссылки.

3. Описание страниц и их функциональных особенностей.

4. Конверсионные формы.

5. Другие элементы.

Опционально могут добавляться:

• описание необходимых интеграций с другими сервисами;

• информация об административной панели;

• данные о личных кабинетах, группах пользователей и их правах;

• любые другие пункты в зависимости от особенностей проекта.

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

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

Общая информация о проекте

Добавляем самые общие данные о проекте:

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

2. Новый и старый URL-адреса компании. Нужны программистам для настройки сайта.

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

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

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

6. Данные о языковых версиях сайта. Нужны программистам для подключения сайта и настройки вывода данных в админ-панели.

Пример главы с описанием проекта в ТЗ

Структура сайта и ссылки

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

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

Пример инструкции по формированию ссылок для сайта

Сквозные блоки сайта: футер, хедер, всплывающее меню и дополнительные формы

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

• сколько уровней меню будет в хедере/футере;

• нужен ли вывод меню в админ-панель или его можно редактировать только через код;

• если вывод в админку требуется, то в каком формате выводить информацию для редактирования (например, будут ли доступны для редактирования ссылка на страницу, названия пункта меню, сортировка пунктов);

• можно ли менять местами (сортировать) пункты меню в админ-панели;

• можно ли добавлять/удалять пункты меню или нужно задать их фиксированное количество;

• есть ли минимальное и максимальное количество пунктов, которое нужно задать при настройке админ-панели;

• будет ли выводиться меню, если один из параметров меню в админ-панели не заполнить (например, если не добавить ссылку или название пункта меню);

• будут ли выведены в админку email, телефоны и прочие контактные данные или их можно редактировать только из кода;

• что будет происходить при взаимодействии с логотипом;

• есть ли выделение у активного пункта меню;

• как пункты меню выстраиваются в футере;

• как появляется всплывающее меню;

• как будет выделен выбранный пункт при наведении на него;

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

Пример хедера

Пример футера

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

Описание страниц и их функциональных особенностей

При описании страниц многие элементы и блоки на них повторяются, для экономии времени на составление ТЗ мы до этого ввели заголовки.

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

Как сделать гиперссылку на заголовок документа

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

Пример поблочного описания страниц

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

• должен ли элемент или блок выводиться в админ-панель (редактируемый он или нет);

• есть ли ограничения по выводу и редактированию элемента/блока, и если да, то какие.

Конверсионные формы

Конверсионные формы – это все формы на сайте, которые всплывают либо размещены на страницах и требуют совершения действия. Например, ввода email для подписки на рассылку.

При описании блока в ТЗ вам нужно учесть:

• где расположена форма и при каких действиях пользователя происходит ее вызов;

• какие данные и поля для ввода данных содержатся в форме;

• что происходит при отправке формы;

• есть ли у нее проверка на корректность введенных данных;

• какие сообщения появляются у каждого из полей, если данные введены неверно;

• редактируются ли / выводятся ли в админ-панель поля и информация с формы;

• можно ли добавить в форму новые поля, менять их местами, удалять существующие;

• как закрывается форма и есть ли затемнение/осветление фона при ее открытии и закрытии;

• куда отправляются данные с формы (на почту, в сервис рассылок);

• какие данные и в каком виде отправляются с формы (например, в каком виде приходит заявка администратору сайта);

• есть ли у полей ввода данных подсказки.

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

Другие элементы

К другим элементам я отношу:

• заголовки страниц;

• хлебные крошки;

• пагинацию;

• блоки для SEO-текста и прочие элементы, которые встречаются во всех проектах.

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

Пример описания типовых элементов

ТЗ защищает обе стороны

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

Чтобы разработка двигалась поэтапно, а обе стороны осознавали наличие единого согласованного видения проекта, нужно себя защитить. Можно прописать в договоре, что техническое задание становится его частью после подписания, а само ТЗ дать подписать представителям с обеих сторон. Даже если юридически техническое задание не всегда спасает, то психологически оно отлично сдерживает обе стороны и позволяет успешно закончить проект в сроки и в полном объеме.

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