Філософія швидкої візуалізації: як створювати віртуальні UX-концепти

26 серпня
Філософія швидкої візуалізації: як створювати віртуальні UX-концепти
Разом із принципом fail fast, принцип visualize fast став рецептом успіху при створенні нового програмного застосунку або поліпшення існуючого. Анастасія Режепп, керівник відділу дизайну DataArt, поділиться кількома корисними методиками для створення ідей, візуалізації та UI/UX-прототипування.

Створення програмного продукту — постійний процес формування ідей, їхньої валідації, отримання зворотного зв'язку, внесення поправок у продукт, а потім — проби чогось іншого. Візуалізація ідей є ключовим етапом цього циклу. 85 % людей сприймають інформацію краще, коли її візуалізовано. Побачити — значить повірити. Прототипи користувацького інтерфейсу (UI) та користувацького досвіду (UX) — найпростіший спосіб донести ідею до стейкхолдерів. Прототипи допомагають швидко узгодити бачення продукту всередині команди, презентувати його інвесторам і провести валідацію ідеї з користувачами.

Насправді прототипи UI/UX часто мають важливіше значення: вони можуть багато про що розповісти (може, навіть здивувати команду) та відкривають можливості, які залишалися прихованими до моменту візуалізації ідеї.

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

ЯК ВІЗУАЛІЗУВАТИ ІДЕЇ — КРОК ЗА КРОКОМ

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

  1. Дослідження та вишукування (в ідеалі — за участю стейкхолдерів і користувачів).
  2. Формування ідей, узгодження ідей з невеликою кількістю прототипів.
  3. Проектування візуального артефакту.
  4. Оцінка, дослідження користувацької аудиторії, збір відгуків.
  5. Ітерації.
image

Дике поєднання інструментів, технік, артефактів і методологій для UX-прототипування.

ОНЛАЙН-СЕМІНАРИ З ФОРМУВАННЯ ІДЕЙ І ПРОТОТИПУВАННЯ

Традиційно більшість методів UX-прототипування працює добре, коли вся команда збирається в одній кімнаті в офлайн-режимі. Однак це навряд можливо у нових реаліях під час пандемії. У DataArt ми почали користуватися цими онлайн-методами ще до того, як це стало загальноприйнятою практикою. У кожному з наших 20 офісів по всьому світу фахівці DataArt вже багато років працюють у розподілених командах і адаптують офлайнові методи роботи до онлайн-реальності.

Фахівці UI/UX у DataArt пропонують консультації з UX і проектування продукту. Ми допоможемо вам провести ефективний семінар з UX-прототипування, ґрунтуючись на типі та складності вашого потенційного застосування, термінах і кількості стейкхолдерів.

Ось кілька методик для онлайн-семінарів з формування ідей, їхньої візуалізації та UI/UX-прототипування. Ці семінари допоможуть стейкхолдерам і дизайнерам синхронізувати бачення майбутнього продукту. Як правило, семінари допомагають:

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

Семінар з дизайнерського мислення

Що: Семінар проводиться для генерації ідей майбутнього застосунку під час одноденної робочої сесії.

Як: Команда збирається у віртуальній конференц-залі, щоб провести мозковий штурм із питань місії та функціональності потенційного продукту. Етапи:

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

Процес і результати семінару з дизайнерського мислення

Семінар можна розбити на кілька сесій з короткими перервами. Наприкінці дня в команди зазвичай з'являється прототип UX.

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

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

image

Поради для онлайн-семінару

Семінар із задач, що підлягають виконанню (Jobs to Be Done, JTBD)

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

Як: Команда працює дистанційно та проводить мозковий штурм за всіма можливими випадками використання взаємодії, за схемою:

Коли (ситуація) → Користувач хоче (мотивація) → Щоб користувач міг (результат).

В ідеалі такі сценарії використання мають бути засновані на дослідженнях користувачів, а не лише на інтуїції команди. Всі ідеї компонуються в цих трьох колонках за допомогою онлайн-інструменту для спільної роботи (Google Docs або Microsoft Teams). Потім UX-застосунок проектується так, щоб охопити всі сценарії використання найбільш зручним способом.

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

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

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

image

Процес і результати семінару із задач, що підлягають виконанню (JTBD)

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

Семінар зі створення карт подорожі користувача

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

Як: Ця методика найчастіше використовується для поліпшення live applications, заснованих на зібраній аналітиці. Якщо команда вже має певний досвід і знання щодо того, як користувач взаємодіє з системою, її можна проаналізувати, створити віртуальний шлях користувача та прототип бажаного UX. Команда збирається у конференц-залі онлайн, уявляє хронологію дій користувача та висуває гіпотези про те, які емоції (позитивні й негативні) користувач відчував під час використання продукту. Мета полягає в тому, щоб з'ясувати, коли й чому з'явились негативні емоції, чому користувач міг піти, та як застосунок можна покращити для реальних користувачів. Нарешті, ці висновки візуалізуються для поліпшення UI та UX.

Тут представлено ​​гіпотетичну палітру емоцій, які відчуває користувач служби доставки продуктів харчування:

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

Коли: Цей метод добре працює і для застосунків, орієнтованих на клієнта (веб-сайти для бронювання, додатки для планування візитів до лікаря), і для систем, що використовуються всередині компанії (інструменти CRM чи ERP, які повинні мати неперевершений UI та UX, щоб забезпечити максимальні ефективність і зручність).

image

Процес і результати семінару зі створення карт подорожей користувача

Результат: Карта подорожі користувача зведена в документ, який надалі використовується як roadmap для поліпшення дизайну UI/UX і функціональності застосунку.

Семінар із сервісної мапи (Service Blueprint)

Що: Під час семінару команда візуалізує подорож користувача, створюючи прототип, який враховує всі внутрішні й зовнішні взаємодії для поліпшення UX як безпосередньо, так і опосередковано.

Як: В ідеалі до того, як команда застосує метод Service Blueprint, вона вже має карти подорожей користувача. Тепер задача команди — додати всі можливі багатоканальні точки дотику користувача та застосунку, розділити їх на доріжки та прототипувати “повну картину” системи. Сюди відносяться не лише взаємодії всередині програми, а й ті, що відбуваються до, після, між і навколо них.

Продовжуючи приклад служби доставки продуктів харчування, метод Service Blueprint дозволяє поліпшити і прямий UX всередині програми (наскільки легко замовити доставку бажаних страв), і непряму функціональність, що залишається для клієнта за лаштунками: доставку, керування ланцюгами поставок, грошові перекази тощо.

Коли: Ми рекомендуємо цей семінар для продуктів чи послуг, орієнтованих на споживача, і для застосунків, що містять безліч сервісних підрозділів і мають різних стейкхолдерів. Єдине візуальне представлення карти сервісу дає “повну картину” продукту декільком власникам субпродуктів. Крім того, семінар із Service Blueprint допомагає виявити нові групи користувачів, які могли залишитися неврахованими чи заблокованими функціональністю.

image

Процес і результати семінару із Service Blueprint

Результат: Service Blueprint представляється у вигляді графіка з декількома доріжками та виділеними точками, що потребують уваги, який служить як roadmap для поліпшення як дизайну UI/UX, так і функціональності застосунку.

ОСВОЄННЯ ФІЛОСОФІЇ ШВИДКОЇ ВІЗУАЛІЗАЦІЇ

Численні онлайн-інструменти виявились корисними для проведення онлайн-семінарів. Ось деякі з них:

image

Щоб дізнатися більше про семінари з UI/UX-прототипування, інструменти для створення клікабельних прототипів і макетів різної точності, для перевірки ваших ідей реальними користувачами для більш швидкого виведення цих ідей на ринок, подивіться вебінар “Кращі інструменти та поради для швидкого (віртуального) створення UX-концептів” від експертів DataArt у сфері UI/UX-дизайну Анастасії Режепп і Дмитра Козицького.