Прототипування сайту
Велика частина помилок при розробці сайту виникають через непорозуміння. Замовник не озвучив все, що хотів, програмісти не розібралися в його вимогах …. В результаті з’являються помилки, які тягнуться одна за одною і виливаються в серйозну проблему.
Щоб цього уникнути, створюють прототип сайту. Що це таке? Навіщо він потрібен? Як розробляється? Всі ці питання ми і розглянемо в рамках даної публікації.
Що таке прототипирование сайту?
Будь-яка творча робота починається з ескізу. Адже саме він «показує», яким буде результат на виході.
Аналогічним чином розробляється прототип сайту. Фахівці створюють максимально простий начерк майбутнього веб-ресурсу, без дизайнерських фішок. За рахунок цього на роботу йде мінімум часу.
Здавалося б: навіщо потрібно прототипирование сайту? Адже майже всі веб-ресурси створюються за стандартними схемами. Але проблема в тому, що у кожного замовника є своє бачення того, як повинен виглядати сайт. Він може бачити будь-який елемент (наприклад, сайдбар) з лівого боку, з правого або зовсім відмовитися від нього. І таких «дрібниць» дуже багато.
Плюс треба враховувати інтереси аудиторії, «диктує» наявність і розташування певних елементів. Наприклад, для мобільних користувачів обов’язково повинна бути кнопка «гамбургер» в лівому верхньому кутку, при натисканні на яку вискакує основне меню. У тому час, як десктопних користувачам вона не потрібна, оскільки для них це зайва дія, яке доведеться здійснювати, щоб подивитися пункти меню. Вони до такого не звикли, і для них це незручно.
Саме тому прототипирование – ключовий етап, що допомагає створити основний кістяк майбутнього проекту без помилок.
Навіщо потрібно прототіпіровать сайт?
Основне завдання прототипирования – розробити чітку структуру сайту. А потім вивчити її, усунути знайдені помилки і отримати підтвердження від замовника, що таке рішення йому підходить.
Створення прототипу сайту допомагає:
- знайти ідеальне розташування всіх елементів;
- грамотно організувати систему навігації;
- продумати, як користувачі будуть взаємодіяти з сайтом;
- представити концепцію веб-ресурсу в наочному вигляді.
Крім цього розробка ескізу знижує кількість витраченого часу на створення сайту. Вона мінімізує помилки і скорочує кількість правок, які зазвичай доводиться виконувати через недомовленості або непорозуміння між клієнтом і виконавцем.
При наявності готового прототипу замовник відразу бачить, як буде виглядати сайт і може повідомити, що йому подобається, а що краще виправити, і як саме. І після схвалення ескізу програмісти легко створять новий сайт. По-перше, вони точно знатимуть мети і вимоги клієнта. По-друге, коли готовий прототип лежить перед очима – виконувати роботу набагато простіше.
Як зробити прототип сайту?
Перш ніж починати прототипирование сайту, потрібно уважно ознайомитися з ТЗ. У проектувальника повинно бути чітке розуміння завдання: що і в якому вигляді хоче отримати клієнт.
Для цього ще на етапі обговорення розробки сайту потрібно скласти ТЗ. І бажано максимально докладний, так як всі нюанси повинні прописуватися до дрібниць.
Починати прототипирование потрібно з аналізу контенту. Адже саме він визначає структуру сайту. Дизайн та інші дрібниці відходять на другий план. Головне завдання прототипу – розробити таку структуру сайту, щоб користувачам було зручно з ним взаємодіяти. І, звичайно ж, щоб вона сподобалася замовнику.
Існує кілька простих, але важливих вимог до прототипу:
- Він повинен швидко створюватися (чисто схематично, без зайвих візуальних елементів).
- Будь-які зміни можна вносити легко і просто.
- Він повинен бути доступним для всіх: проектувальника, менеджера проекту, клієнта.
- Він повинен бути детальним і інтерактивним.
Прототіпіровать сайт можна різними способами. Найпоширенішими є такі три:
- паперове прототипирование;
- за допомогою спеціального софту;
- за допомогою онлайн-сервісів.
Розглянемо докладніше кожен з цих варіантів.
Паперове прототипування
Це найбільш простий спосіб розробки прототипу сайту.
Основні плюси:
- прототип створюється дуже швидко;
- не потрібно володіти ніякими програмами;
- не потрібні знання в програмуванні;
- хороша масштабованість (завжди можна стерти одні елементи і домалювати інші);
- висока деталізація;
- коментарі та позначки можна залишати в будь-яких місцях.
Основні недоліки:
- немає інтерактивності;
- через будь-якої серйозної помилки доведеться перемальовувати все з нуля;
- клієнту може не сподобатися те, як виглядає ескіз на папері (естетичний вигляд залишає бажати кращого);
- блоки і елементи на папері мають умовні розміри (всі малюється на око).
Прототипування за допомогою спеціального софту
Такий варіант створення прототипу є найпоширенішим. Все тому, що у нього безліч переваг і практично немає недоліків.
Основні плюси:
- прототип сторінки створюється за 20-60 хвилин (в залежності від складності);
- прототип має естетичний зовнішній вигляд і високу деталізацію;
- інтерактивність вже закладена в функціоналі прототипу;
- будь-які правки вносяться легко і швидко (без повторного створення ескізу з нуля);
- прототип можна зберігати в будь-яких графічних форматах;
- коментарі та позначки можна залишати в будь-яких місцях;
- прототип доступний всім (його легко можна скинути по e-mail, на флешку і т.п.).
А єдиний недолік тут полягає в тому, що доведеться витратити час на вивчення програми.
Прототипування за допомогою онлайн-сервісів
Даний метод нічим не відрізняється від попереднього. За допомогою онлайн-сервісів теж можна створювати прототипи, які не поступатимуться ескізами, розробленими в будь-якій програмі.
Єдиний недолік полягає в тому, що онлайн-сервіси не підтримують російську мову. Хоча для тих, хто звик працювати з програмами англійською це не буде проблемою.
Які програми можна використовувати для створення прототипів сайту?
Так як найпопулярнішим способом є прототипирование за допомогою софта, то розглянемо нижче кілька програм, які підійдуть в даному випадку.
Balsamiq Mockups
Простий софт для скетчінга. Підходить для швидкого прототипування. Наприклад, коли потрібно за годину накидати новий ескіз. Або коли хочеться просто поекспериментувати.
Основні плюси програми:
- проста у використанні;
- можна створювати різні елементи (меню, шапку, підвал і т.п.);
- всі начерки виходять добре деталізованими;
- можна вибирати зовнішній вигляд ескізу (малюнок олівцем, строгий креслення);
- готовий прототип можуть дивитися всі учасники проекту;
- ескіз можна створювати у вигляді зображення або HTML.
Софт безкоштовний, але щоб зберегти прототип, доведеться купити ліцензію. Це і є єдиним його недоліком.
Axure
Професійна програма для прототипування. Складніше, ніж Balsamiq Mockups, але і функціоналу у неї більше.
Основні плюси:
- підтримує багатосторінкові ескізи, кнопки, посилання та інші фішки;
- підходить для тестування на окремих групах (тут можна створювати цілісні мокап всього веб-ресурсу);
- підтримує повну доступність для всіх учасників (готовий прототип можна вивантажити картинкою або у вигляді HTML-документа).
Єдиним недоліком є складність її освоєння. Функціонал тут величезний що, звичайно ж, добре, оскільки надає більше можливостей при розробці прототипів. Але на вивчення програми доведеться витратити чимало часу.
Photoshop
Створити прототип сайту можна і за допомогою графічних редакторів. В даному випадку добре підходить відомий всім Photoshop.
Основні його плюси:
- естетичний вигляд ескізу;
- висока деталізація;
- просте внесення правок (без повної перемальовування).
Основні мінуси:
- середня швидкість створення прототипу (в спеціалізованих програмах він розробляється швидше);
- відсутність інтерактивності.
Варіант з Photoshop підходить тільки тим, хто вміє з ним працювати. Всім іншим краще не витрачати час на його вивчення, а вибрати іншу, більш підходящу для прототипування програму і освоювати вже її.
висновок
Підсумуємо. Прототипування сайту – важливий етап, який ні в якому разі не потрібно ігнорувати. Причому розробляти його треба на совість, інакше проблем не уникнути.
Будь-які помилки в ескізі переходять в дизайн, верстку, код. Вони тягнуть за собою безліч проблем, вартість усунення яких зростає як снігова куля. І щоб від них позбутися, працювати доведеться не тільки проектувальнику, але і дизайнерам, програмістам, верстальщикам. А це не потрібно ні виконавцям, ні самому замовнику.
Щоб уникнути цього – до розробки прототипу треба підходити вкрай відповідально. Адже від нього безпосередньо залежить те, як буде виглядати веб-ресурс, і наскільки зручним він виявиться для користувачів. А зручність користування (тобто юзабіліті), як відомо, сильно впливає на конверсію і, відповідно, на прибуток сайту.
Тому, можна сказати, що прототип – це фундамент веб-ресурсу. Як він буде зроблений, такий вихлоп і вийде від сайту.
