Прототипування? Чому я повинен за це платити?

Дуже часто, починаючи роботу над новим проектом, у дизайнера / менеджера виникають непорозуміння з клієнтом. Трапляється це через всім відомі нюанси. В першу чергу — помилкове визначення бюджету проекту, який не зафіксований у ТЗ клієнта. Ще один поширений біль: ціна продукту, яка змінюється за умови імплементації того чи іншого функціоналу. Ну звичайно, куди ж без питань про етапи дизайну, фронтенд і бекенд розробки. І НАЙПОПУЛЯДНІШЕ: «Ви мене не розумієте, я хотів трохи іншого, чому ми зараз робимо правки?»;)

Щоб уникнути цих факапів, проджект менеджер зазвичай пропонує ввести в розробку етап прототипирования. Звичайно, у клієнта виникають питання на кшталт: «Прототипування? А навіщо це потрібно?», «Чому я повинен платити за ці “сірі квадратики”?», «Навіщо тягнути час — давайте відразу РОБИТИ !!!». Якщо ви не знаєте, що відповідати на такі питання, пропоную відмінний варіант — скажіть клієнту, що ви досвідчений менеджер, «знаєте життя» і взагалі переживаєте за ЙОГО гроші і час. А потім підсуньте цю статтю ....

Отже, що ж таке прототип? Прототипом називається план вашого продукту (сторінки / додатка / інтерфейсу і т.д.), основний акцент в якому ставиться на функціоналі, а не візуальній складовій. Прототипування — це інструмент виявлення потреб клієнта в функціоналі його продукту.

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

Отже, прототипи діляться на кілька видів за кількома критеріями:

• в залежності від інструменту, в яких буде робитися прототип, він може бути:

• скетч (не плутати з sketchapp) — ми зараз про швидкий малюнок від руки. Перевага скетчу полягає в швидкості. Менеджер витрачає 10-15 хвилин для відтворення грубого прототипу. Це «відправна точка» переговорів і тепер є від чого відштовхуватися в діалозі з клієнтом;

• прототипування в графічному редакторі. Це займає трохи більше часу, вимагає певних програм і навичок роботи з ними. Але виглядає краще і поважніше. Тут вже вам прийдуть на допомогу: Sketch, Invision, Axure, Balsamiq, Ninja Mockup, Figma, Framer і всякі інші «фотошопи». Тут вже вибір за вами, до чого більше лежить душа і стоять руки. Прототипи, оформлені в графічному редакторі, дуже гарні для презентації групі клієнтів (коли ОПР не одне, а являє собою групу осіб).

• Залежно від деталізації прототипи бувають:

• недеталізовані — являють собою набір чорно-білих блоків з текстівками (або навіть «Рибою»). Це гарне рішення для маленьких проектів: заглушок, посадкових сторінок та ін.;

• деталізовані — це прототип, на якому знаходяться ВСІ функціональні блоки і елементи, задані місця розташування блоків, можуть бути намальовані таби, дропдауни, поп апи та інше. Це продукт, який показує ПОВНИЙ ФУНКЦІОНАЛ продукту і відмінно підходить для розробки Інтернет-магазинів, сервісів, інтерфейсів, додатків.

• За складністю взаємодії прототипи бувають:

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

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

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

Але питання вартості все ще не закрите) Розберімось, чи так це дорого і невиправдано ?!

Всі ми знаємо, що дизайн — це розв’язання проблеми. В кожному окремому випадку завдача різна, але якщо перебільшувати все, вийде, що менеджеру потрібно вирішити проблему клієнта за допомогою свого ІТ-ресурсу в найкоротші терміни і за мінімальні гроші!

Прототипування допомагає розв’язати такі важливі проблеми як:

1. Готовий контент від клієнта
   Зазвичай ОПР (особа, яка приймає рішення) — людина зайнята. І вона не завжди готова витратити свій час на пошук контенту або копірайтера. Оскільки контент — необхідна частина майбутнього продукту, то простіше пояснити клієнтові, що «Без ТЗ — Результат ХЗ» на ранній стадії проекту. Це вбереже проект від подальших правок і витрат клієнта на редагування і доопрацювання.

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

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

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

5. Надання клієнту швидких правок
   На етапі проектування правки робити набагато простіше, оскільки стиль ще не «натягнутий», а як наслідок — часу на редагування йде менше.

6. Надання варіантів для A/B тестування.
   Якщо під час обговорення спірних рішень, виникає необхідність в А / B тестуванні, то прототипування — краще розв’язання цієї проблеми: на підготовку прототипу йде мало часу, а його «безликість» не відволікає від пошуку оптимального рішення.

У підсумку, розглянемо реальний кейс — один з останніх, з яким ми мали справу: до нас звернувся клієнт із завданням розробити Інтернет-магазин його компанії. Наявний сайт його не влаштовував, тому що конверсія була занадто низька. Крім того, клієнт найняв команду маркетологів і аналітиків для просування свого бренду, виходу на новий ринок, збільшення цільової аудиторії і організації гуртових продажів на основі системи дилерства.

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

Менеджер запропонував почати з прототипування і поетапно просуватися з таким таймінгом:

• Проектування: 50 годин;

• Дизайн: 80 годин;

• Фронт-енд розробка: 100 годин;

• Бек-енд розробка: 140 годин;

ВСЬОГО: 370 годин

Під час прототипування, був обговорений весь функціонал, наша команда розробила і підготувала інтерактивні прототипи в Invisvion, надала права на ознайомлення всім співробітникам, залученим в проект, і представникам клієнта. Це дало можливість обговорити в реальному часі ВЕСЬ функціонал і витрати на його імплементацію.

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

Після узгодження всього спрайту прототипів (включаючи дропдауни, поп апи та інше), був розроблений UI Kit, який, разом з лейаутом головної сторінки, відправився фронт-енд розробникам. Це дозволило мінімізувати витрати часу, оскільки стилі CSS були вже задані, залишалося написати HTML.

Паралельно була відмалювати десктопна і мобільна версії сайту і проведено дизайн-рев'ю.

Звичайно, остаточний таймінг проекту трохи змінився, але не критично:

• Проектування: 68 годин;

• Дизайн: 63 години;

• Фронт-енд розробка: 96 годин;

• Бек-енд розробка: 152 години;

ВСЬОГО: 379 годин

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

А тепер уявімо, що етап проектування був упущений і робота почалася відразу з дизайну, тоді таймінг проекту був би такий:

• Дизайн: 100 годин;

• Фронт-енд розробка: 100 годин;

• Бек-енд розробка: 140 годин;

ВСЬОГО: 340 годин + ПРАВКИ

Різниця становить 39 годин, але давайте на секундочку уявимо, що клієнту необхідно було внести правки — 2 ітерації по 10 годин кожна, тоді до вищевказаних витрат часу додасться ще:

• Ітерація 1: Дизайн - 10 годин;

• Ітерація 1: Фронт-енд розробка - 10 годин;

• Ітерація 1: Бек-енд розробка - 10 годин;

• Ітерація 2: Дизайн - 10 годин;

• Ітерація 2: Фронт-енд розробка - 10 годин;

• Ітерація 2: Бек-енд розробка - 10 годин;

ВСЬОГО: 60 годин, що вже перевищує реальні витрати часу, та й шансів впоратися за 2 правки, коли клієнт не знає, що йому потрібно, практично немає!

Вирішуйте самі: чи витрачатися на проектування або «обійтися без чорно-білих квадратиків».

Як показує досвід, прототипування є дуже зручним інструментом роботи з клієнтом. Воно допомагає позначити межі роботи над майбутнім проектом, економить час і бюджет (що важливо під час розробки, наприклад, інтернет-магазину) зменшує стрес прийняття рішення, робота стає набагато більш гнучкою і швидкою, а ККД при командній роботі — на порядок вище!

І в самому кінці, повернемося до метафори про будівництво будинку)

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

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