Прототипування сайту

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

Щоб цього уникнути, створюють прототип сайту. Що це таке? Навіщо він потрібен? Як розробляється? Всі ці питання ми і розглянемо в рамках даної публікації.

Що таке прототипирование сайту?

Будь-яка творча робота починається з ескізу. Адже саме він «показує», яким буде результат на виході.

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

Здавалося б: навіщо потрібно прототипирование сайту? Адже майже всі веб-ресурси створюються за стандартними схемами. Але проблема в тому, що у кожного замовника є своє бачення того, як повинен виглядати сайт. Він може бачити будь-який елемент (наприклад, сайдбар) з лівого боку, з правого або зовсім відмовитися від нього. І таких «дрібниць» дуже багато.

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

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

Навіщо потрібно прототіпіровать сайт?

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

Створення прототипу сайту допомагає:

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

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

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

Як зробити прототип сайту?

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

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

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

Існує кілька простих, але важливих вимог до прототипу:

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

Прототіпіровать сайт можна різними способами. Найпоширенішими є такі три:

• паперове прототипирование;
• за допомогою спеціального софту;
• за допомогою онлайн-сервісів.

Розглянемо докладніше кожен з цих варіантів.

Паперове прототипування

Це найбільш простий спосіб розробки прототипу сайту.

Основні плюси:

• прототип створюється дуже швидко;
• не потрібно володіти ніякими програмами;
• не потрібні знання в програмуванні;
• хороша масштабованість (завжди можна стерти одні елементи і домалювати інші);
• висока деталізація;
• коментарі та позначки можна залишати в будь-яких місцях.

Основні недоліки:

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

Прототипування за допомогою спеціального софту

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

Основні плюси:

• прототип сторінки створюється за 20-60 хвилин (в залежності від складності);
• прототип має естетичний зовнішній вигляд і високу деталізацію;
• інтерактивність вже закладена в функціоналі прототипу;
• будь-які правки вносяться легко і швидко (без повторного створення ескізу з нуля);
• прототип можна зберігати в будь-яких графічних форматах;
• коментарі та позначки можна залишати в будь-яких місцях;
• прототип доступний всім (його легко можна скинути по e-mail, на флешку і т.п.).

А єдиний недолік тут полягає в тому, що доведеться витратити час на вивчення програми.

Прототипування за допомогою онлайн-сервісів

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

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

Які програми можна використовувати для створення прототипів сайту?

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

Balsamiq Mockups

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

Основні плюси програми:

• проста у використанні;
• можна створювати різні елементи (меню, шапку, підвал і т.п.);
• всі начерки виходять добре деталізованими;
• можна вибирати зовнішній вигляд ескізу (малюнок олівцем, строгий креслення);
• готовий прототип можуть дивитися всі учасники проекту;
• ескіз можна створювати у вигляді зображення або HTML.

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

Axure

Професійна програма для прототипування. Складніше, ніж Balsamiq Mockups, але і функціоналу у неї більше.

Основні плюси:

• підтримує багатосторінкові ескізи, кнопки, посилання та інші фішки;
• підходить для тестування на окремих групах (тут можна створювати цілісні мокап всього веб-ресурсу);
• підтримує повну доступність для всіх учасників (готовий прототип можна вивантажити картинкою або у вигляді HTML-документа).

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

Photoshop

Створити прототип сайту можна і за допомогою графічних редакторів. В даному випадку добре підходить відомий всім Photoshop.

Основні його плюси:

• естетичний вигляд ескізу;
• висока деталізація;
• просте внесення правок (без повної перемальовування).

Основні мінуси:

• середня швидкість створення прототипу (в спеціалізованих програмах він розробляється швидше);
• відсутність інтерактивності.

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

Висновок

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

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

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

Тому, можна сказати, що прототип – це фундамент веб-ресурсу. Як він буде зроблений, такий вихлоп і вийде від сайту.

Питання та відповіді

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

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

Які інструменти можна використовувати для прототипування сайту?

Існує безліч інструментів для прототипування сайту, включно з графічними редакторами, онлайн-платформами та спеціалізованим програмним забезпеченням. Деякі з популярних інструментів включають Adobe XD, Sketch, Figma, InVision, Axure RP і Balsamiq.

Чи можна використовувати прототип сайту для презентації або зворотного зв’язку від клієнтів?

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

Які види прототипів існують?

Інтерактивні прототипи, HTML/CSS прототипи, прототипи з використанням графічних редакторів, прототипи з низькою фіделітетністю, прототипи з високою фіделітетністю.