Простий злом інтерфейсу для поліпшення Onboarding UX [OCD]

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

Простий інтерфейс месенджера, побудований за допомогою цього безкоштовного ресурсу ескізу

Але це ніколи не буває, коли користувач підписується. На початку даних немає, тому порожній стовпець контактів та порожнє вікно чату.

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

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

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

Існуючі рішення

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

Слайд на борту UX на слайді

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

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

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

Підказка на основі демонстраційного борту для introjs.com/

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

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

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

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

OCD aka Onboarding centric design

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

Я хотів рішення, яке:

  • Мав відношення до контексту
  • Не дратувало (ніхто не любить робити 17 кроків, щоб дізнатися, як працює ця функція)
  • Ненав'язливий (як маяки)
  • Простий у споживанні (підказки непрості в споживанні)

Результат

Я просто почав проектувати штати. Дизайн чату, який ви бачили, коли ви починали читати цю статтю, може бути розроблений з трьома станами.

Стан 1: Контактів немає

Стан 2: Контакти присутні, але чатів немає

Стан 3: Присутні як чати, так і контакти

Мета кожної держави - перехід користувача до наступного стану. Коли користувач перейшов до стану 3, вона успішно працює на борту. Враховуючи макет чату, метою кожної держави є наступні:

Мета 1: Основний користувач, щоб додати контакт

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

Стан 1 - Приготуйте користувача для додавання контактів (ілюстрація undraw.co)

Як тільки контакт буде додано, ми можемо розпочати другу мету.

Мета держави 2: Основний користувач, щоб розпочати чат

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

Стан 2 - Контакт додано, просто почати спілкуватися

Мета держави 3: Ні, користувач перебуває на борту - всі сигнали повинні зникнути

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

Стан 3 - Користувач успішно перебуває на борту

Переваги такого підходу

  • Порівняно із підходом до слайдів на етапі 1, Onboarding Centric Design (OCD) представляє вміст шматками. Інформація доступна в момент прийняття рішення.
  • Цей підхід можна використовувати як на мобільних, так і на настільних пристроях. Цей інтерфейс простий, але у випадку складного інтерфейсу користувача ви можете використовувати OCD з гарячими точками для підвищення CTA.
  • Цей підхід насамперед покращує ваш UX, змушуючи вас думати з точки зору подорожі користувача.
  • Якщо вам трапляється писати фронти, використовуючи React, такий підхід акуратно відповідає своїй архітектурі компонентів.

Отже, як правило:

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

Дякуємо за прочитане :)

Привіт, якщо вам сподобалась ця стаття та хочете постійно оновлюватись, слідкуйте за мною: Medium, Github чи Twitter

Я керую слабкою спільнотою (яка налічує 18 членів станом на 6 жовтня 2018 року), де ви можете допомогти іншим або отримати допомогу, що стосується фронтенду, бекенда та загального розвитку. Ви можете приєднатися до нього тут.