Rapid prototyping UX/UI продуктів
Випуск будь-якого цифрового або веб-продукту неможливий без попереднього прототипування інтерейсів. Цей процес дозволяє легко отримати майбутній вигляд системи, тестувати ідеї та перероблювати їх безліч разів на макеті з однією метою - випустити продукт на ринок без погрішностей та недоліків. Найчастіше, при створенні великих проектів, розробці серйозних програм/сервісів/додатків, прототип - це максимально точна копія, яка виглядає та функціонує як кінцевий продукт. Вона дозволяє побачити остаточний результат на певному етапі роботи, оцінити його та протестувати. Але що роботи дизайнерам та розробникам, коли кількість ресурсів дуже обмежена, а часові рамки не дозволяють детально пророблювати прототипи?
У такому випадку команді стане у пригоді процес швидкого прототипування (rapid prototyping). Він полягає у швидкому моделюванні інтерфейсів з мінімальними витратами (створення ескізів, каркасів, макетів). По суті, це процес швидкого накреслення бажаного результату інтерфейсу веб-сторінки, програми чи мобільного додатка, на основі якого будуть створювати, тестувати та програмувати справжній інтерфейс майбутнього продукту. Швидке створення прототипів допомагає командам експериментувати з різноманітними підходами та ідеями, полегшує обговорення за допомогою візуальних засобів, а не слів, і зменшує ризик непорозуміння. Такі прототипи - це симуляції майбутніх інтерфейсів, в які можна легко вносити зміни під час розробки, тестувати і постійно вдосконалювати.
Процес rapid prototyping складається з 3 пунктів:
- Власне створення прототипу. Дизайнер або команда дизайнерів розробляють перший макет системи, який базується на встановлених шаблонах та побажаннях потенційних користувачів.
- Огляд створеного прототипу. Макет передається зацікавленим сторонам: замовнику, ширшій команді дизайнерів для затвердження та потенційним користувачам, щоб подивитися, чи відповідає він їхнім потребам і очікуванням.
- Вдосконалення прототипу. Отримавши фідбек, дизайнери визначають недоліки, проблемні місця системи, які потребують подальшої доробки.
Як правило, первинний прототип є дуже простим. Дизайнери визначають тільки ключові моменти інтерфейсу, не звертаючи уваги на деталі. У подальшій розробці, після роботи з фідбеком, прототип перероблюється, удосконалюється та деталізується доти, доки не буде створений фінальний варіант, готовий до передачі програмістам.
Rapid prototyping використовується не тільки для заміни процесу детальної розробки повноцінних прототипів. Процес широко застосовують для оперативного моделювання системи з метою підтвердження ідеї зацікавленими сторонами. Ескізи допомагають показати те, що описати словами неможливо. Ними дизайнери пояснюють замовникам та потенційним користувачам, як система повинна вести себе і виглядати. Так, наприклад, швидке прототипування буде дуже зручним, коли дизайнеру потрібно подати замовнику або ширшій команді дизайнерів декілька варіантів інтерфейсу для затвердження одного. Коли дизайнери перороблюють та покращують макет, для ще швидшого прототипування, вони малюють зміни, (додають/видаляють/переміщують елементи інтерфейсу) прямо на скріншотах програми.
Процес швидкого створення прототипів є необхідним, коли команда прагне отримати зворотній зв’язок на початку роботи з проектом. Робота з фідбеком на ранній стадії часто покращує остаточний дизайн і суттєво зменшує необхідність у змінах під час фактичного програмування кінцевого варіанта системи. Прості, швидко змодельовані, прототипи легко можна залучати на будь-яких етапах розробки для перевірки ідеї. Завдяки цьому дизайнери мають змогу своєчасно та регулярно отримувати фідбек і в них постійно є що тестувати.
На практиці швидке прототипування має багато методів: від примітивного креслення каркасів майбутнього інтерфейсу на папері (blueprint) та в цифрових програмах (wireframe) до створення максимально деталізованої симуляції з працюючим функціоналом. За словами дизайнера, вчителя школи веб-дизайну Treehouse, Ніка Петтіта (Nick Pettit), найрезультативніший та найдешевший спосіб - це скетч, намальований олівцем на папері, з низькою увагою до деталей (low fidelity prototype).
“Студенти Treehouse часто запитують мене, який інструмент я використовую для прототипування веб-сайтів, і моя відповідь майже завжди однакова: олівець і папір. Будувати веб-сайт через прототип набагато швидше, ніж робити це, пропускаючи етап прототипування взагалі. Навіть для дуже простого веб-сайту п'ятихвилинний ескіз може заощадити години проб і помилок на пізніх етапах. Чим дешевше прототип, тим краще, тому що прототипи передбачають легкі, моментальні зміни та вдосконаленння, які можуть влетіти в добру копійку, якщо їх робити на готовому сайті, а не на ескізі”, - пояснює Нік.
Він зазначає, що починати моделювання потрібно з найменш морально- та ресурсовитратного методу (що може бути швидше й легше за олівець і папір?), а потім переходити до дорожчих інвестицій та цифрового моделювання: “За кілька хвилин можна від руки накидати десятки ескізів. На першому етапі розробки це дозволяє швидко отримати широкий вибір ідей. Малюнки чудові, тому що вони мають більше простору для фантазії - рівень абстракції на папері можне кардинально змінюватись за лічені секунди, ви переінакшуєте ідеї, як вам заманеться. До того ж, цифрові макети є досить деталізованими і приділяють багато уваги шрифтам, кольорам, дрібним елементам інтерфейсу і т.д. На ранньому етапі мені це не потрібно, оскільки я тільки занотовую ідеї.” Малюнок інтерфейсу без деталей Нік рекомендує вже переносити в цифрові макети і там деталізувати, довершувати свої ідеї.
Подібний метод моделювання використала команда дизайнерів з Nielsen Norman Group та Mozilla для UX тестування прототипів, щоправда, там дизайнер спочатку розробив прототип інтерфейсу в OmniGraffel, а потім команда роздрукувала його на папері і дала тестувати користувачам. Таке поєднання цифрового та паперового моделювання виявилось дуже ефективним та зручним для тестування - користувачі дивилися, давали фідбек дизайнерам і ті моментально вносили зміни у надруковані макети.
Щодо цифрових інструментів для створення швидких прототипів, то тут є з чого вибрати. Починати варто з простих програм з невисоким рівнем уваги до деталей (medium fidelity prototype): Balsamiq Mockups або вищезгаданий OmniGraffle. Вони допомагають зробити ваш примітивний малюнок на папері більш точним, уникаючи використання кольорів, шрифтів та елементів стилю. У порівнянні з малюнком на папері це займає більше часу, і не має тієї гнучкості, але результат є більш реалістичним. Деталізація такого рівня є ефективною, якщо вам потрібно зосередити увагу на розташуванні елементів у системі.
Створювати прототипи з високим рівнем деталізації (high fidelity prototype) варто лише тоді, коли є на це час. Такі макети можуть бути дуже потужними та реалістичними, але їх створення суттєво уповільнює процес розробки продукту. Раніше створення детальних прототипів займало багато часу, процес швидкого прототипування вже фактично переставав бути таким. Але сьогодні, завдяки розвитку цифрових технологій, дизайнери мають змогу достатньо швидко та інтуїтивно конструювати складні інтерфейси в таких програмах, як: Sketch, Proto.io, Axure RP, Mockplus, UX Pin і т.д. Новітні графічні редактори типу InVision Studio виводять процес створення прототипів на нові рівні швидкості та зручності - вони дозволяють елементарно та дуже оперативно створювати максимально реалістичні макети для різних платформ із залученням анімації та інтерактивних елементів. High fidelity прототипи використовуються у випадках, коли необхідно показати відповідь системи на певну дію користувача.
Якими б методами дизайнери не користувалися, мета швидкого прототипування одна - оперативно отримати макет кінцевого варіанту системи та надати загальне розуміння концепції зацікавленим сторонам.
Експерт з користувацького досвіду Ліндон Керехо (Lyndon Cerejo) рекомендує, при розробці швидких прототипів, уникати макетування функцій, які не зможуть бути реалізовані програмістами. Для цього потрібно постійно радитись з розробниками щодо функціоналу софту. Також не варто займатися прототипування всього, що матиме майбутня система, і концентруватися на дрібницях без необхідності. Отримання фідбеку є основним етапом для покращення прототипу, тому Ліндон радить підходити до цього процесу відповідально, та дуже специфічно: “Не починайте тестування прототипу без чітких інструкцій стосовно зворотного зв'язку. Будьте дуже специфічні щодо типу фідбеку, який ви шукаєте, ставте конкретні питання (Чи логічно побудована взаємодія: чи навігація є чіткою та інтуїтивно зрозумілою? Якщо ви цього не зробите, то будьте готові до подібного: "Я не люблю блакитний в заголовку", або "Чи не можемо ми використати цей шрифт замість цього?", або "Ви можете зробите це більшим, жирнішим, червоненьким і миготливим?"
Наостанок додамо: послуговуйтеся принципом Парето - розробляйте прототип таким, щоб у ньому було 20% функціоналу, використання якого потребуватиме 80% взаємодії. І пам’ятайте, що швидкі прототипи не повинні бути ідеальними. Еффективність процесу rapid prototping полягає в оперативності створення зрозумілих макетів.