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

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

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

Технічне завдання (ТЗ) — документ з вимогами до сайту. Дуже докладний. З картинками, схемами та ілюстраціями того, що робить кожна кнопка і як вона виглядає. Замовник його стверджує, а виконавці, від 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 або "футер", але хорошим тоном вважається створити окрему сторінку для замовника, де він прочитає короткий і зрозумілий опис технологій і функцій, використаних у проекті.

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