Прост хакер за потребителски интерфейс за подобряване на бордовия UX [OCD]

UI макети и скици предполагат, че потребителските данни вече са налице. Например, макетът по-долу предполага, че потребителят ще има контакти, с които да разговаря, известия и дори теми за чат.

Прост потребителски потребител, създаден с помощта на този безплатен ресурс за скица

Но това никога не е така, когато потребител се регистрира. В началото няма данни, така че празна колона с контакти и празен прозорец за чат.

Блестящият дизайн на потребителския интерфейс улеснява консумацията на информация и не се фокусира върху това как да се създаде тази информация.

Научих това по трудния начин, когато накиснах толкова много от Dribbble, че можех да проектирам табло за приложение на b2b. На Sketch изглеждаше страхотно, но клиентите ни не успяха да намерят път.

Лошото UX увеличава разходите на борда и поддръжката, което пряко се отразява на приходите. Освен това е зле да гледате потребител, който се бори да консумира вашия пикселен перфектен дизайн. Напомня, че не сте успели.

Съществуващи решения

Едно от решенията е да имате предварителен борд, използвайки слайдове като интерфейс. Изглежда, това е стандартът за мобилните приложения.

Слайд UX на борда на UX

Проблемът с подхода на слайдовете е липсата на контекст. Можете да предавате само толкова много на слайдовете (колко запазва потребителят е различен въпрос).

Той е чудесен за предоставяне на преглед на продукта, но не е много полезен за обяснение как работи продуктът. Това беше без значение за моя случай на употреба, тъй като сложността на продукта не можеше да се сведе до няколко слайда.

Имаше и решение, базирано на подсказка, което разхожда потребителя през конкретни стъпки. Тази опция е по-популярна при уеб приложенията. Има много добри javascript библиотеки, които ще ви помогнат да изградите тези потоци.

Подсказка на базата на демонстрация на борда за introjs.com/

Що се отнася до решение, базирано на подсказка, ги намерих за досадни и почти винаги щракнах „урок за пропускане“. Въпреки че големи компании като Canva използват подсказка на базата на борда. Продукт, наречен AppCues, ви позволява да проектирате тези подсказки без код, чист.

Съществува и подход в стил маяк, при който обикновено неразбраните функции са етикетирани с светещи маяци, които предоставят подходяща информация, когато (ако) е необходимо.

Това е най-ненатрапчивият начин. За разлика от инструментариум, който хвърля урок от 17 стъпки по гърлото ви и изчезва, когато всъщност се нуждаете, този подход, базиран на гореща точка, предоставя информация, когато сте готови.

Заслужава да се спомене, че Slack използва всичките 3 форми. Нищо чудно, че потребителите им се придържат. Което също по някакъв начин загатва за факта, че задържането е пряко пропорционално на лекотата на качване на борда.

OCD aka Onboarding концентричен дизайн

Харесва ми да назовавам неща. Имената помагат да се материализират идеи в ума. Така че нека да наречем този централен дизайн на борда.

Исках решение, което:

  • Има отношение към контекста
  • Не беше досадно (никой не обича да предприема 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 г.), където можете да помогнете на други хора или да получите помощ по отношение на фронтенд, бекенд и развитие като цяло. Можете да се присъедините към него тук.