Правила дизайна: что делать, если никто не использует вашу функцию

Брендан Фаган, ведущий дизайнер продукта в Intercom, рассказал о том, как они в компании улучшают невостребованные функции. Предлагаем вам русский перевод его статьи.

Когда мы запустили наш мессенджер в прошлом году, мы добавили для клиентов возможность создавать личный профиль с множеством информации о себе, чтобы их потребители всегда знали, что им отвечает настоящий человек. В чем проблема? Никто не использовал эту возможность. Вскоре после релиза только 13-15% заказчиков полностью заполнили свои профили. Многие были заполнены отчасти, а многие остались нетронутыми.

После обсуждения с командой исследователей и аналитиков мы обнаружили две основные причины проблемы:

• Видимость. Возможность создания профиля спрятана в незаметных местах интерфейса приложения.
• Обучение. Люди не знали о важности профилей в создании личных отношений с покупателями.

Одна часть большого решения

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

Также большим потенциалом для вовлечения пользователей обладали мобильные приложения: около 45% сотрудников компаний-клиентов общаются со своими потребителями через приложение для Android или iOS.

Начало работы

Для каждого нового продукта дизайнеры Intercom составляют простой список приоритетных целей, которые характеризуют проблему. Это помогает направлять движение при работе над высокоуровневыми решениями. Вот так выглядел наш список:

1. Повысить вовлеченность пользователей, которые не заполнили свои профили или заполнили их частично.
2. Рассказать пользователям о важности публичных профилей.
3. Сделать редактирование профилей проще.

Мыслить системно

Для начала мы рассмотрели профили отдельно, чтобы понять систему и решить, какие компоненты наиболее приоритетны. Это означало составление схемы частей, правил и состояний приложения.

Идеи приходят отовсюду

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

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

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

Дизайн решения

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

Обратите внимание: Одна из наших ключевых ценностей в Intercom: «думай о большем, начинай с малого». Мы уже планировали обновление навигации до этого момента. Переход от выдвижной панели к панели закладок было бы отличным решением по многим причинам, но потребовало бы массу усилий инженеров, а нам нужен был быстрый результат.

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

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

Эти диаграммы мы распечатали и повесили в нашей рабочей комнате. Разработчики часто смотрели на эти диаграммы в процессе размышлений, и несколько раз они замечали важные детали, которые мы потом изменяли вместе.

Исполнение

Теперь у нас был каркас, чтобы начать воплощать остальные части. Графический дизайн и проектирование взаимодействия происходили одновременно, так как мы знали, что нужно будет исправлять визуальную часть в процессе разработки. Мы обнаружили, что детали каждого сложного взаимодействия или анимации должны быть закончены как можно быстрее (вот почему высокодетализированные прототипы великолепны). Гораздо сложнее изменять эти детали позднее в противовес простому обновлению визуальных решений, вроде изображений или цветов. Мы использовали Framer JS в качестве способа проектирования ранних идей по взаимодействию, обсуждения с разработчиками и вынесения конечного решения. Вот пример финальной версии руководства для iOS, созданной после 12 прототипов.

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

Для образования пользователей было важно содержание. Нам нужно было лаконично объяснить, почему профили важны. Дизайнеры тесно работали с Элизабет МакГуейн, нашим стратегом по контенту, чтобы создать захватывающий опыт и помочь пользователям понять, почему хороший профиль имеет значение.

Тестирование и настройка

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

Для первого бета-тестирования наш общий показатель завершения был довольно низким, особенно на Android. Мы привнесли множество изменений в дизайн: сделали кнопку «напомнить позже» менее заметной, изменили разметку и сделали контент более игровым и менее поучительным.

Создание функции, которую люди будут использовать

После недели небольших изменений и наблюдения показатель заполнения резко возрос. Благодаря вкладу всех команд, количество заполненных профилей возросло с 14% до 46% всего за месяц. Пошаговое обучение в мобильных приложения сыграло в этом большую роль. Мы также составили список основных принципов, которые можно применить к следующему проекту:

• Убедитесь, что проблема ясна всем участникам во всех командах
• Исследуйте и измерьте проблему, используйте высокоуровневые цели, чтобы направлять ваши решения
• Что бы вы ни создавали, планируйте многое и начинайте с малого
• Дизайнеры должны сразу начинать работать с разработчиками, обмениваться идеями и согласовывать концепции
• Проектирование взаимодействия нужно закончить как можно раньше, визуальную сторону легче изменять в процессе разработки
• Знайте свои показатели успеха, отслеживайте их и убедитесь, что ещё есть время для изменений

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