Простой взлом пользовательского интерфейса для улучшения Onboarding UX [OCD]

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

Простой мессенджер, построенный с использованием этого бесплатного ресурса скетча

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

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

Я усвоил этот трудный путь, когда впитал в себя как можно больше Dribbble, чтобы спроектировать панель управления для приложения b2b. На Sketch это выглядело великолепно, но наши клиенты не могли найти дорогу.

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

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

Одно из решений состояло в том, чтобы получить предварительную регистрацию с использованием слайдов, таких как интерфейс. Кажется, это стандарт для мобильных приложений.

Slack - основанный на слайдах UX

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

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

Было также решение на основе всплывающей подсказки, которое помогает пользователю выполнить определенные действия. Эта опция более популярна среди веб-приложений. Есть много хороших библиотек JavaScript, которые помогут вам построить эти потоки.

Всплывающая демонстрация на основе всплывающей подсказки для introjs.com/

Что касается решения на основе всплывающей подсказки, я нашел их раздражающими и почти всегда нажимал «пропустить учебник». Хотя крупные компании, такие как Canva, используют всплывающую подсказку. Продукт под названием AppCues позволяет создавать эти подсказки без аккуратного кода.

Существует также подход в стиле маяка, где обычно неправильно понимаемые элементы помечены светящимися маяками, которые предоставляют соответствующую информацию, когда (если) необходимо.

Это самый ненавязчивый способ. В отличие от всплывающей подсказки, которая проталкивает 17-шаговое учебное пособие по горлу и исчезает, когда вам это действительно нужно, этот подход, основанный на горячих точках, предоставляет информацию, когда вы будете готовы.

Стоит отметить, что Slack использует все 3 формы. Не удивительно, что их пользователи придерживаются. Что также как-то намекает на тот факт, что удержание прямо пропорционально легкости посадки.

OCD aka Бортовой дизайн

Мне нравится называть вещи. Имена помогают материализовать идеи в уме. Итак, давайте назовем этот ориентированный дизайн.

Я хотел решение, которое:

  • Был актуален для контекста
  • Не раздражало (никто не любит делать 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

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