Вебдизайн Блог

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

ТЗ (технічне завдання) на розробку сайту – це певна форма документа без суворих правил оформлення, де винесено принципові візуальні та робочі моменти майбутнього сайту. Серед них потрібно виділити такі, що спрямовані на:

• техніку;
• функціонал;
• зміст - контент.

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

Навіщо воно потрібне і чи можна без нього обійтися

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

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

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

Для виконавця такий документ відкриває такі переваги:

1. Чітке деталізоване та поетапне розуміння підсумкової мети та шляхів, що виникають на етапі її реалізації.
2. Прискорення розробки проекту за рахунок чітко прописаних етапів, побажань та скорочення часу на внесення корективів, коли це необхідно та обґрунтовано.

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

Як правильно скласти ТЗ на розробку сайту

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

Традиційно у брифі уточнюються такі аспекти:

1. Вид замовлення: лендинг, невеликий сайт компанії до 8-10 сторінок, масштабний інтернет-гіпермаркет, корпоративний сайт, сайт, де передбачено особистий кабінет користувача.
2. Чи потрібно додатково розробляти програму, і якщо так, то для гаджетів на якихось операційних системах.
3. Планується створення абсолютно нового продукту, або ж потрібно змінити, прокачати старий ресурс, зробивши його більш комфортним.

Часто в брифі залишається позиція «Інше», і замовника просять коментарем залишити те, що йому хотілося б бачити в проекті.

Додатково в брифі можна вписати референси – посилання на сайти, які привертають увагу, наприклад, інтерфейс, функціонал, дизайн.

Особлива увага приділяється структурі. У ній замовника просять вказати, який саме вид, на його думку, найбільше підходить. Наприклад:

• Головна.
• Про нас.
• Доставка/оплата.
• Категорія товарів – окремий товар.

Або, наприклад, які тематичні блоки будуть у лендингу – сайті-односторіннику: опис пропозиції, умови зв'язку/замовлення, конкретні пропозиції.

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

Приклади ТЗ створення сайту

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

Організаційні питання

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

Цей розділ також включає такі аспекти:

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

Детальний опис певних моментів щодо системи управління, основних розділів сайту, змісту, дизайну, доменного імені.

Вимоги до сайту

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

• Структура.
• Навігація.
• Дизайн.
• Сценарії використання ресурсу.
• Оформлення, юзабіліті сайту.
• Впровадженим технологіям, наприклад, оплата через сторонні платіжні послуги для клієнта, а власника бізнесу – підключення до системи обліку.

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

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

Двигун

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

• Самописний.
• CMS, зокрема Joomla, Drupal, Wordpress та OpenCart.
• SaaS-платформ, а саме Tilda та Wix.
• Фреймоворк.

У виборі відповідного двигуна в рамках формування технічного завдання виконавцю необхідно уточнити у клієнта кілька важливих питань:

1. Самостійно або із залученням фахівця далі публікуватиметься контент.
2. На плечі яких лягає обслуговування ресурсу: особи з боку клієнта або безпосередньо розробника.
3. Хто виконує у майбутньому функції адміністратора: веб-майстер чи особа, яка представляє клієнта.

Коли у вас невеликий бізнес, розробники у штаті не передбачені, тоді коробкова CMS – саме те, що вам потрібно. А ось різновиди SaaS складніші, їх використовують для створення та подальшого використання обмежених різновидів сайтів.

Дизайн

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

У ТЗ на створення сайту, якщо брендбук відсутній або лише у розробці, потрібно прописувати конкретні побажання, серед них такі:

• Які шрифти хочете бачити головними, а які – другорядними.
• Тематичний напрямок, розмір та формат (суворі контури, обтічні лінії) фотографій, ілюстрацій.
• Базові та додаткові відтінки.
• Дозволені та неприпустимі поєднання відтінків, фактур в оформленні.
• Оформлення простору та постановка візуальних акцентів.

А ось від поглиблення в опис світлотіні, фігури, ліній, форм краще відмовитись. Це варто довірити безпосередньо дизайнерам та складання ними ТЗ вузького спрямування.

Основні розділи сайту

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

Далі продемонструємо корисні поради, напрацьовані за час:

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

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

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

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

• шапка;
• футер;
• бічна панель;
• активні кнопки.

Фільтри вкрай важливі, необхідні, зокрема для проектів, що продають.

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

Генерація сторінок

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

Фільтри

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

Серед базових вимог, що виносяться до сторінок-фільтрів, виділяють такі:

1. Під час формування URL фільтрів чітко продумайте та слідкуйте за виконанням порядку, оскільки помилки та непрацюючі параметри є неминучими.
2. Практично коли самостійно можна налаштувати Title, Description, заголовки рівнів від першого до шостого рівня, клчові слова.
3. У разі сторінок-фільтрів рівня Н1 та перетину більше двох параметрів необхідно використовувати виключно статичні посилання; обов'язковий та семантичний URL.
4. Практично на кількості відвідувань та утриманні на сторінці позначиться грамотне перелінкування, а також професійно налаштоване індексування.

Наявність контенту

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

Ще один аспект – вказівка ​​технічних параметрів текстів: водність, нудота, показники спеціалізованих сервісів, наприклад, «Главред», кількість і тип ключів, що вводяться. Додатково у цій рубриці ТЗ вказуються вимоги до фотографій, відео, анімації, інфографіки та інших частин контенту.

Підтримувані технології

Для типового зразка ТЗ ця позиція є обов'язковою. Щоб зручно було працювати фахівцям всі технічні нюанси до майбутнього, сайт краще оформляти окремим списком, щоб потім прощу контролювати виконання всіх пунктів. Вже кілька років «опорними стовпами» у такому розділі технічного завдання є такі вимоги:

• Кросбраузерна верстка.
• Адаптивний шаблон для мобільних гаджетів.
• Основний контент повинен завантажуватись не повільніше, ніж за 2,5 секунди, або ще швидше.
• Показник усунення елементів не перевищує 0,1 бал.
• Термін очікування до першої взаємодії з наповненням – 100 мілісекунд.

Також важливо виконати такі операції:

• Оптимізувати базові, потім другорядні в ієрархії сторінки ресурсу.
• Перевірити правильність коду відповіді сервера.
• Впровадити семантичний
• Налаштувати стандарт винятків для роботів у файлі robots.txt.
• Передбачити доступ через FTP.
• Створити карту сайту у двох різновидах: користувальницька та XML.

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

Доменне ім'я та доменна зона

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

1. Певна тема.
2. Використання слів, що співвідносяться з асортиментом.
3. Можливість вставки назви компанії.
4. Використання ключових слів.
5. Конкретна доменна зона.

Виконавець на основі побажань на вибір надає вибір варіанти, серед яких клієнт вибирає відповідне.

Вимоги до хостингу

Безпосередньо від хостингу залежить не лише налагоджена робота сайту, а й його доступність у мережі. Складаючи ТЗ, рекомендуємо прописати конкретні пріоритетні параметри:

• Які технології важливо, щоб підтримувалися: захист від DDoS-атак, доступ до SSH, можливість бекапів.
• Чи передбачено швидке встановлення CMS.
• Показники запланованого навантаження в кабінеті та трафік користувачів за 24 години.
• Незначна дискова квота.
• Відповідний тип хостингу: віртуальний, сервери, VPS.
• Чи є вбудований файловий менеджер.
• Чи можливе перенесення сайту без фінансових вливань.

Топ-7 помилок під час підготовки технічного завдання

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

1. Немає вказівки цільових дій (наприклад, дзвінок оператору, пряма покупка, бронь), це ускладнює аналітику.
2. Відсутність інформації про тип сайту Бачення того, це магазин або корпоративний сайт має вже бути на старті складання ТЗ. При цьому замовник може уточнити, що йому подобається той чи інший сайт, але повноцінне копіювання до нічого хорошого не приведе.
3. Відсутність деталізованих, конкретних, прописаних сценаріїв, що формуються на основі цільової аудиторії та її потреб. Важливо не образно, а уявляти, хто ваші клієнти, з яким бажанням чи потребою приходять на ваш ресурс.
4. Не прописані нюанси щодо лічильників для ведення веб-аналітики. В обов'язковому порядку хоча б представлений Google має бути.
5. Немає конкретних уточнень щодо дизайну: кольору, шрифти, розміщення блоків, а продиктовано лише загальні нюанси «красиво», «продажно», «сучасно», «ефективно».
6. Не обумовлено семантичну розмітку, що дозволяє пошуковій системі краще розпізнавати контент і сприяє виходу на верхні позиції пошукових видач.
7. Доволі нечітко сформовано вимоги. Оскільки ТЗ – документ, у ньому конкретно і зрозуміло вказуються побажання – «авторський шаблон, що підходить під магазин іграшок», «адаптація конкретного символу» та інше.

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

Висновок

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

Оперативний підхід без втрати якості.

Детальне складання із вниканням у суть кожного аспекту.

Консультації при необхідності, повні деталізовані відповіді на запитання

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

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

Грамотне ТЗ – крок на шляху продуктивного продажного сайту з високим трафіком та результатами пошукової видачі!