Основи проектування цифрових продуктів

6. Проєктування та прототипування інтерфейсів
цифрових продуктів

Принципи проектування
та збір інформації

Що розглянемо?

Суть та основні методики процесу прототипування.

Основи формування User Stories, Job Stories, побудова User Flow.

Інформаційна архітектура.

Основні принципи проєктування дизайну циф. продуктів, стандарти доступності.

Суть та основні методики процесу прототипування

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

процес моделювання певного ступеня деталізації кінцевого продукту.

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

Основні види прототипів:

- словесне прототипування (Storyframing)/
Storyboarding;

- Sketches / Paper prototyping;

- Microframing;

- Wireframing;

- Visual design.

Storyframing / Storyboarding

Sketches

Paper prototyping

Мicroframing

Wireframing

Visual design

Отже, розпочинайте прототипувате вже на стадії досліджень, слухайте респондентів та формуйте Storyframe, формуйте та візуалізуйте ІС, керуйте увагою користувача, тестуйте свої проєктні рішення.

User Stories,
Job Stories,
побудова User Flow

User Story

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

Головною метою User Story є опис певної фічі із точки зору користувача.

Для однієї персони може бути сформовано декілька User Story.

Шаблон:

Як користувач я хочу зробити "...щось - дію..." щоб отримати "...щось - цінність..."

Наприклад,

Як клієнт сервісу ... я хочу швидко отримати їжу, щоб вивільнити свій час

Однак коли персон занадто багато із-за розрізненості ЦА чи коли ми хочемо охопити максимальну кількість користувачів варто застосувати фрейворк JTBD та Job Stories.

Користувацькі сценарії

розширена інтерпритація User Story, зокрема на якому бекграунді грунтуються історії та детальніше описує сам контекст, намагаючись розкрити проблемні місця.

Наприклад,

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

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

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

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

User Flow

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

Відповідно User Flow може охоплювати як окрему функцію, так і весь продукт.

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

Що спочатку User Flows чи User Journey Map?

Саме на цьому етапі User Story, сценарії і User Flows об'єднуються та бути трансформовані
в інформаційну архітектуру (ІС).

Інформаційна архітектура

Інформаційна архітектура

комплекс засобів/прийомів, що направлені
на полегшення та пришвидшення пошуку
та сприйняття інформації (контенту).

Формування ефективної ІС забезпечується такими факторами:

- неймінгу - іменування;

- структурування;

- взаємозв'язку.

Неймінг

формування конкретних назв певних елементів чи сутностей продукту, наприклад, назви, заголовки, теги тощо...

Максимально лаконічна конкретизація назв та її сприйняття ЦА є більш ефективною, ніж загальний опис.

Наприклад,

"Вегетаріанська піца" чи "Піца із овочами"

"Холодні напої" чи "Освіжаючі напої"

Все залежить від контексту...

Яку систему назв сформувати, вирішуєте саме дизайнер (+ райтер), але завжди враховуйте специфіку бізнесу та ЦА.

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

Структурування

процес класифікації та побудови ієрархії об'єктів і понять у продукті/сервісі.

Основними прийомами може слугувати класифікація за певними категоріями (алфавітна, часова, популярність, сезонність тощо) та структурами (лінійна, ієрархічна тощо).

Наприклад,

Категорії:

- корисна їжа;
- шкідлива їжа.

Категорії:

- овочі і фрукти;
- кулінарія;
- солодощі;
- напої.

На які групи розбити наявну інформацію це також завдання проєктувальника:

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

Взаємозв'язок

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

Сюди варто віднести системи навігації та пошуку інформації.

Основні етапи роботи над ІС:

- збір інформації про ЦА;

- вивчення процесів роботи майбутнього/
діючого продукту;

- вивчення тематики/термінології продукту;

- вивчення первинної структури продукту;

Основні етапи роботи над ІС:

- встановити всі сутності продукту;

- згрупувати їх;

- звязати ці групи;

- проаналізувати та переглянути назви, тексти тощо.

Принципи проєктування дизайну циф. продуктів

Завжди враховуємо специфіку ЦА щодо їх досвіду
та поведінки, дивайсних вподобань та контексту використання.

Що слід врахувати:

- тип пристрою;

- розмір екрану;

- хто й коли (як?) користується вашим продуктом.

Adaptive Design vs. Responsive Design

Якщо коротко, то responsive - дизайн, що залежить від ширини екрану девайсу (не завжди responsive layout)..., а аdaptive - сукупність підходів для надання найкращого досвіду, наприклад, визначення пристрою користувача тощо.

Mobile First чи Desktop First ?

Основні поради щодо адаптивного дизайну:

- використовуйте та адаптуйте сітку;

- враховуйте патерни, потоки тощо;

- фіксайте max. і min. розмір екрану, узгодьте
це із розробкою;

- враховуйте платформу (ховер для мобайл, жести тощо);

- растр/вектор = вектор)

Основні поради щодо адаптивного дизайну:

- оптимізація контенту (сет контенту);

- поп-апи для мобільних - ні, краще скріни;

- стани, прогреси - відклик системи;

- використовуйте реальний контент;

- в мобайл краще без відео;

- для мобайл оптимізуйте досвід.