Технічне завдання для розробки сайту

Технічне завдання для розробки сайту — основний документ, з якого починається співпраця між діджитал-агентством і майбутнім власником інтернет-магазину, корпоративного порталу або іншого онлайн-сервісу. Детально структуроване технічне завдання забезпечує взаєморозуміння і дотримання зобов’язань між усіма учасниками проекту.

Ця стаття насамперед призначена для тих, хто планує замовити розробку сайту, оскільки саме їм доведеться відповідати на запитання керівника, менеджерів та інших співробітників діджитал-агентства. Водночас навіть досвідчені фахівці можуть часом забути про важливі деталі.

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

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

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

• Побачити, за що платить. Технічне завдання на розробку сайту є його докладним описом. У ньому написано і навіть схематично намальовано, як виглядатиме сайт і як працюватимуть усі його функції. Якщо є питання, на них дадуть відповідь. Якщо щось не так, як ви собі уявляли, просто скажіть, і ТЗ відкоригують до початку розробки. Кожен розділ технічного завдання, наприклад, дизайн або підключення онлайн-оплати на сайті, включає ціну і час на реалізацію. Ви зможете відразу відмовитися від непотрібних функцій або відкласти розробку складних функцій на майбутнє.
• Оцінити компетентність студії. Скрупульозність — головна ознака хорошого виконавця. Краще витратити час на відповіді на запитання і отримати зрозумілий і структурований документ, ніж довіритися людям, які обіцяють зробити все, але не здатні скласти ТЗ. Ймовірно, їх код також буде безладним, що вплине на стабільність роботи, швидкість завантаження і прибутковість сайту.
• Отримати гарантії. Виконавець, підписуючи договір, зобов’язується виконати все точно за ТЗ. Якщо щось виглядає або працює не так, він повинен це виправити. У крайньому разі, можна звернутися до суду або передати готове технічне завдання іншим розробникам, які легко зрозуміють, що потрібно робити завдяки ТЗ.

Діджитал-агентство отримує від ТЗ ті ж бонуси, що і замовник, але у зворотному вигляді. Зокрема, технічне завдання є єдиним способом:

• Зрозуміти замовника і показати компетентність. Виконання хорошого проекту є головним пріоритетом гарної веб-студії. ТЗ — це перше, що побачить клієнт. Зробити його докладним і структурованим на основі аналітики та даних опитування означає справити хороше враження і, що важливіше, точно зрозуміти бажання замовника та цілі його бізнесу.
• Прискорити розробку. Ретельне і структуроване ТЗ потрібне не лише для відповіді на всі запитання замовника. Після затвердження ТЗ менеджеру проекту залишається лише розподілити його між відповідальними виконавцями, які одразу можуть почати роботу.
• Захиститися від несподіваних змін настрою замовника. Підписаний договір на основі ТЗ є паперовим щитом від будь-яких необґрунтованих претензій. Якщо клієнту хочеться щось змінити під час розробки, що далеко не завжди можливо, це обговорюється, і нові функції підключаються за додаткову плату. Згідно із законом, діджитал-студія може відмовитися від виконання будь-чого понад те, що прописано в ТЗ.

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

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

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

Введення” в ТЗ включає опис компанії замовника, його продукту, цільової аудиторії та її потреб, а також поставлені завдання. Технічні аспекти розширюють перший пункт у вигляді списку затверджених технологій і функціоналу. Тут вказують обрану CMS або фреймворк, тип хостингу, а також формулюють вимоги до адаптивності і кросбраузерності. Усі інтеграції, такі як з сервісами онлайн-оплати або 1С, також включаються сюди для створення базового чек-листа. Докладніше про різноманітні системи управління контентом і складності підключення функціоналу замовника будуть розглянуті під час підготовки ТЗ.

Далі описуються унікальні сторінки і наскрізні елементи, які відображаються на кожній з них. Це найбільш деталізований і обширний розділ технічного завдання, і розпочинати його краще з ієрархічної моделі взаємозв’язків між блоками для візуалізації. При розробці структури враховуються поведінкові аспекти цільової аудиторії, щоб елементи всіх сторінок спрямовували відвідувача до необхідної дії.

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

Наскрізні елементи описуються окремо за таким же принципом. Загалом їх чотири. “Хедер” — верхня частина сайту з загальним меню, контактною інформацією та логотипом компанії. “Футер” — нижня частина з навігацією, що дублює або доповнює дані з верхньої частини. Для інтернет-магазину також використовується бічна панель (“сайдбар”) з категоріями товарів і фільтрами. Четвертий наскрізний елемент — спливаючі вікна з формами для підписки, замовлення та інших дій. Окремо в технічному завданні можуть бути визначені сторінки для виведення результатів пошуку, авторизації, реєстрації та обробки помилок.

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

Розробка технічного завдання для дизайнерів — це важлива складова процесу створення сайту, яку іноді об’єднують з іншими етапами, щоб надати замовнику більш чітке уявлення. Дизайнери працюють над втіленням затвердженого макета: вони вибирають палітру кольорів, шрифти, створюють іконки та інфографіку, обробляють фотографії і багато іншого, взаємодіючи з майбутнім власником сайту. Цей процес зазвичай відбувається паралельно з front-end розробкою. Якщо у клієнта є брендбук, то це значно спрощує задачу; якщо немає — на етапі загального ТЗ визначаються базові елементи, такі як колірна схема і стиль.

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

1. Формулюйте чітко. Технічне завдання має бути точним і однозначним. Уникайте якісних прикметників, як-от “швидкий” або “зручний”, та абстрактних значень. Наприклад, замість “швидке завантаження сторінок” вкажіть “від 80 балів за оцінкою Google PageSpeed Insights” або “не більше чотирьох секунд на відображення кожної сторінки”. Замість “зручна функція замовити в 1 клік” надайте зображення спливаючого вікна з полем для введення тексту, номером телефону та відповідною кнопкою. Це правило стосується навіть дрібниць, як-от кількість картинок у блоці, порядок відображення статей у блозі, місце розташування позначки “знижка” тощо.
2. Описуйте сутності та функції. Чим докладніше технічне завдання, тим краще. Опишіть характеристики кожного товару, статуси в історії замовлень та все, що може відображатися на сайті. Програмісти об’єднають це в об’єкти з певними атрибутами та методами, якими легко керувати. Це ж стосується нестандартних функцій: підключення кнопок соціальних мереж, інтеграція з CRM, відправка повідомлень на e-mail або SMS повинні бути прописані в ТЗ.
3. Складіть глосарій. Клієнти не зобов’язані знати складні терміни розробників і дизайнерів. Технічне завдання має бути зрозумілим для всіх. Співробітники діджитал-агентства можуть пояснити, що таке CMS або “футер”, але створення окремої сторінки з коротким і зрозумілим описом технологій та функцій для замовника є гарною практикою.

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