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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Balsamiq Mockups

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

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

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

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

Axure

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

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

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

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

Photoshop

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

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

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

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

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

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

Висновок

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

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

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

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

Колесніков Дмитро

Технічний директор, студії BRAINLAB