Огляд процесу UX-проєктування

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

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

Як побудувати процес проєктування

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

Чому це важливо? Як ми пам'ятаємо, інтерфейс — це місце взаємодії людини та програми. UX-дизайнер дивиться на інтерфейс з точки зору людини, а ось за інтеграцію його з програмою відповідають бекенд- і фронтенд-фахівці. І якщо з самого початку не знайти компроміс між цими двома точками зору, потім це буде зробити набагато складніше.

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

Етапи проєктування взаємодії

Проєктування інтерфейсів можна поділити на такі етапи:

  • Опис продукту
  • Проєктування взаємодії
  • Розробка схематичних уявлень інтерфейсу
  • Створення і тестування прототипу

Давайте розберемо кожен етап окремо.

Опис продукту

Завдання етапу

Визначити ролі в системі та їх завдання і сформувати інформаційну структуру продукту.

Суть етапу

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

При цьому у кожної ролі є свої завдання і можливості, для яких потрібні свої, окремі інструменти. Для Facebook їх можна описати так:

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

Методи

Для опису ролей і їх завдань можна використовувати:

  • звичайні текстові замітки зі списками і таблицями,
  • карти зв'язків (mind maps),
  • історії для користувача (user stories),
  • підхід «робота, яку треба виконати» (jobs-to-be-done).

У цій статті ми не будемо зупинятися на інструментах проєктування. Але найбільш популярні з них описані в статті «Огляд методів проєктування взаємодії».

Результат етапу

Коли всі ролі та їх завдання будуть описані, корисно зібрати їх у вигляді карти продукту — тобто схеми всіх розділів і підрозділів продукту.

Проєктування взаємодії

Завдання етапу

Створити маршрут користувача та сценарії використання.

Суть етапу

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

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

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

Для кожного завдання і процесу потрібно описувати свій сценарій використання.

Методи

Для проєктування взаємодії зазвичай використовують такі методи:

  • блок-схеми,
  • маршрути користувача (user journey map),
  • сценарії використання (user flow).

Детальніше про них читайте в статті «Огляд методів проєктування взаємодії».

Результат етапу

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

Розробка схематичних представлень інтерфейсу

Завдання етапу

Візуалізувати інтерфейс і описати способи взаємодії з ним користувачів.

Суть етапу

Коли всі сценарії користувачів описані та визначені необхідні для них функціональні елементи, можна переходити до формування ескізів екранів, або каркасів (wireframes).

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

Методи

Для побудови каркасів зазвичай використовуються спеціалізовані програми та сервіси, серед яких:

  • Figma,
  • InVision,
  • Miro,
  • UXPin,
  • wireframe.cc.

Детальніше про них читайте в статті «Інструменти для схематичного проєктування».

Результат етапу

Результатом цього етапу буде набір ескізів всіх сторінок сайту або програми.

Створення і тестування прототипу

Завдання етапу

Зібрати інтерактивний прототип продукту і перевірити його на користувачах.

Суть етапу

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

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

Методи

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

Результат етапу

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

·
5194
·
4
·
goodsuper 109
Головна