Як скласти грамотне ТЗ на розробку сайту

Що таке технічне завдання на створення сайту

Технічне завдання (ТЗ) – це документ, в якому описані всі завдання та вимоги по проєкту. Воно охоплює технічні, дизайнерські, функціональні, SEO та контентні аспекти. Кожен із цих етапів має бути докладно описаний. Можна створити базовий макет або схему для візуалізації ідеї.

Навіщо складати ТЗ на сайт

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

1. Як буде проходити процес.
2. Якими будуть проміжні результати.
3. Скільки часу може зайняти розробка.
4. Яка приблизна вартість робіт.

Ми вказуємо орієнтовний час і вартість, оскільки можуть бути зміни чи труднощі під час роботи. Але якісно складене ТЗ зменшує таку ймовірність. Проте розраховуйте на діапазон у термінах і вартості.

При обмеженому бюджеті чи термінах можна відкласти реалізацію деяких функцій. Вони можуть з'явитись на етапі розвитку та доопрацювань сайту.

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

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

Фінальні звірки відбуватимуться на етапі тестування та перед здаванням проєкту. Це страхує від розбіжностей із замовником і затягування термінів. Також це спосіб показати свою компетентність через правильні питання та пропозиції.

Як правильно сформувати техзавдання для сайту і хто має це робити

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

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

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

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

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

Основні пункти та розділи ТЗ для сайту

Якість технічного завдання багато в чому визначає якість розробки. Тому давайте розберемось, що має бути описано в цьому документі.

Платформа, на якій буде створено сайт

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

Платформи конструкторів пропонують додаткові опції та інтеграції – їх можна оплачувати окремо або під час переходу на дорожчу підписку.

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

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

Разом з тим, сайт на фреймворку потребує технічного супроводу. Якщо у вас немає програмістів у штаті, то варто заручитись підтримкою розробника.

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

Або одразу вказати вибрану платформу. В разі конструктора бажано вказувати тарифний план і список опцій. У випадку з CMS – перелік всіх необхідних модулів (плагінів).

Основні вимоги до сайту

Тут мають бути описані:

• сценарії взаємодії з сайтом;
• цільові дії відвідувачів;
• вимоги до навігації та юзабіліті;
• вимоги до функціоналу;
• бажані інтеграції;
• вимоги до адмінки;
• вимоги до продуктивності сайту.

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

1. Поділитись інформацією.
2. Перейти до корпоративних сторінок.
3. Поставити лайк публікації.
4. Залишити коментар.
5. Авторизуватись на сайті.

Кожен зі сценаріїв інтеграції потребує різного технічного підходу. Тому треба уточнювати, що мається на увазі. Що стосується продуктивності сайту, то до неї входить:

• швидкість завантаження сторінок;
• підтримуваний обсяг трафіку;
• допустимий розмір каталогу.

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

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

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

Головне в цьому – показати ієрархію сторінок і розділів. Найкращий варіант – інтерактивний прототип. Він найбільш якісно візуалізує розташування та взаємозв'язок різних блоків.

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

Якщо захочеться щось змінити або поліпшити, то на цьому етапі буде простіше внести зміни. На пізніших етапах це не завжди можливо.

Тут важливо вказати типи сторінок та їхню ймовірну кількість. Наприклад, головна сторінка завжди буде одна, а кількість сторінок категорій та товарів – варіативна. Окремо потрібно вказати наскрізні елементи, які будуть на кожній сторінці сайту:

• логотип;
• верхнє меню;
• нижнє меню;
• бокове меню;
• спливаючі вікна.

Бокове меню характерне для інтернет-магазинів і часто містить систему фільтрів. Цей момент обговорюється із замовником, тому що під час використання фільтрів повинні генеруватись нові сторінки з добірками товарів.

Спливаючі вікна можуть з'являтись за заданих умов. Тому умови їхньої появи обговорюються та налаштовуються.

При складанні структури бажано орієнтуватися хоча б на базове семантичне ядро та реальний асортимент товарів/послуг замовника.

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

Дизайн

Якщо є корпоративний брендбук, його можна використовувати. Якщо ні – дизайнери орієнтуватимуться на попередній прототип та обговорюватимуть побажання із замовником. На цьому етапі треба:

1. Вибрати колірну гаму та шрифти.
2. Визначити основний та другорядні шрифти.
3. Визначити допустимі та неприпустимі поєднання кольорів.
4. Описати стилізацію іконок, кнопок, інфографіки.
5. Вибрати тему зображень.
6. Замовити логотип (якщо його немає).
7. Описати побажання по адаптивності сайту.
8. Описати побажання щодо ефектів та анімацій (якщо потрібно).

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

При описі адаптивності важливо вказувати кількість і типи пристроїв. Під них буде адаптовано дизайн і верстку. Також тут потрібно прописати вимогу щодо кросбраузерності сайту.

Інфографіка не є обов'язковим елементом, але її можна намалювати, якщо ви паралельно замовляєте наповнення сайту контентом. Тоді можна домовитись і про обробку зображень.

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

Зміст сторінок та опис їхніх елементів

Для кожної унікальної сторінки має бути прописана своя структура – її буде скопійовано для однотипних сторінок. До елементів сторінки, як правило, відносяться:

• шапка;
• підвал;
• бокове меню;
• кнопки;
• банери;
• текстові блоки;
• фото й відео;
• блоки відгуків;
• блоки коментарів;
• форми заявки;
• форми зворотного зв'язку.

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

Тому структуру сторінок звіряють із загальною структурою сайту, а вимоги до дизайну сторінки – із загальними вимогами до дизайну.

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

Контент

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

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

Домен і хостинг

Замовнику краще надати кілька варіантів доменного імені, тому що найвдаліші домени часто бувають зайняті.

Якщо вам все ж таки подобається конкретне доменне ім'я, то можна спробувати змінити доменну зону: замість популярних .com, .ua та .com.ua використовувати менш конкурентні .shop або .online.

Вибір доменної зони залежить від типу та географії вашої діяльності. А ще від наявності торгової марки – без неї в Україні не вийде зареєструвати домен .ua.

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

1. Наявність у його складі слів, що асоціюються з комерцією.
2. Наявність у його складі назви вашої компанії.
3. Наявність у його складі ключових слів.
4. Бажана доменна зона (можливі варіанти).
5. Тематика домену: спорт, одяг, взуття, мандрівки, новини.

На підставі цього менеджер підбере кілька відповідних варіантів і запропонує вам на вибір. Щодо вибору хостингу, то тут теж треба вказати вимоги:

1. Бажаний тип – віртуальний хостинг, віртуальний сервер, фізичний сервер або хмарний.
2. Простір на диску, процесорний час, пам'ять, трафік.
3. Підтримка технологій: захист від DDoS-атак, можливість бекапів, доступ до SSH.
4. Чи є панель керування та яка саме.
5. Можливість швидкого встановлення вибраної CMS.
6. Можливість перенесення сайту на інший хостинг і платформу.

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

SEO-вимоги

Вони зазвичай створюються при співпраці із SEO-фахівцем – своїм або від веб-студії. Він дає як технічні рекомендації по сайту, так і рекомендації по контенту.

Перший тип рекомендацій призначений для програмістів, верстальників і деякою мірою для дизайнерів. Другий тип рекомендацій призначений для контент-менеджерів і копірайтерів.

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

Ці параметри впливають на поведінкові фактори. Зовнішній вигляд url і внутрішня перелінковка відіграють важливу роль. Ігнорувати їхню значущість було б помилково.

Популярні помилки при формуванні ТЗ

Є низка помилок, які часто зустрічаються при складанні технічного завдання. Серед них:

1. Не вказані цільові дії – треба уточнити, які дії будуть вести до бажаних продажів або підписок. Це допомагає побудувати вирву продажів і правильно налаштувати аналітику на сайті.
2. Немає прикладів схожих сайтів – бажано підібрати кілька хороших прикладів та один поганий. При цьому поясніть, що саме вам подобається і що не подобається. Це допоможе виконавцям зорієнтуватися.
3. Не описані сценарії для користувачів – це пов'язано з типом сайту, інтерфейсом і поведінкою цільової аудиторії. Треба зрозуміти для чого люди приходитимуть на сайт і що робитимуть на ньому.
4. Не вказано встановлення та налаштування сервісів веб-аналітики. Як мінімум, варто встановити та налаштувати Google Search Console та Google Analytics.
5. Не регламентована семантична розмітка сайту – це стосується SEO-вимог. Особливо важливо для комерційних ресурсів. Семантична розмітка допомагає пошуковику краще розуміти зміст сторінок.
6. Розпливчасті формулювання. Замість “гарного та стильного” краще написати “індивідуальний дизайн у тематиці спорттоварів”, а замість “швидке завантаження сторінок” – “від 90 балів у Google PageSpeed для кожної сторінки”. А замість фрази “якісні тексти” написати вимоги щодо відсотків унікальності, нудоти та води.

Ключове правило – якнайбільше конкретики. Якщо ви щось не вкажете у ТЗ, то це можуть не зробити. Навіть якщо вам це здається обов'язковим, очевидним або елементарним.

Висновки та рекомендації

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

А от коли починаєш описувати свої побажання, то замислюєшся і про дрібниці, і про важливі нюанси. Так можна допрацювати ідею, переглянути цілі, створити стратегію просування та краще вивчити ринок.

Навіть те, що здається очевидним, краще прописувати в ТЗ. При цьому варто дотримуватися моделі SMART: всі завдання мають бути конкретними (Specific), вимірними (Measurable), досяжними (Achievable), релевантними (Relevant) та обмеженими в часі (Time-bound).

Тоді у вас будуть чіткі критерії успішної реалізації. Жодних розпливчастих формулювань – лише цифри, схеми, назви сервісів, технологій та інструментів. Це технічний документ, тому уникаємо суб'єктивізму.