Документация по разработке marketplace
PDF

Рекомендации по проектированию UX продукта

Glossary Item Box

Общие сведения

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

Ниже приведены рекомендации для разработчиков продуктов на платформе bpm'online, выполнение которых позволит избежать типовых проблем и ошибок, связанных c UX установки и первого использования продукта.

Продуманная навигация в системе

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

1. Отображение раздела в рабочем месте

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

Кейс: "Добавление нового раздела [Чаты]"

Неверно Создать отдельное рабочее место и включить в него новый раздел [Чаты]
Неверно Не включать раздел в рабочие места
Верно Включить раздел [Чаты] в рабочее место [Продажи] и/или [Маркетинг]

2. Переход к настройкам из дизайнера системы

Все разделы и блоки, используемые для настройки системы, должны быть собраны в дизайнере системы. Переход в дизайнер выполняется из любого места системы по кнопке в правом верхнем углу приложения. Блоки настроек дизайнера системы и кейсы их использования приведены в таблице 1.

Табл. 1. — Блоки настроек дизайнера системы

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

Из дизайнера системы можно реализовать переход к любому интерфейсу, где выполняется настройка, например:

  • к пользовательской странице настроек;
  • к странице раздела, посвященного настройкам;
  • к странице справочника (если настройка состоит в заполнении справочника).

3. Переход к настройкам из меню действий раздела

Часто user experience (восприятие продукта пользователем) формируется так: пользователь переходит к разделу с функциональностью приложения, начинает ее изучать, и только после этого понимает, что дальнейшая работа требует настроек.

Стандартное решение, которое поможет пользователю сразу сориентироваться и выполнить нужные настройки — добавление необходимого действия в меню кнопки [Действия] в разделе. Важно понимать, что раздел (реестр записей) и страница конкретной записи — это разные страницы. Для каждой из них набор действий может отличаться, поэтому кнопка [Действия] настраивается отдельно для реестра записей и для страницы записи. То есть, действие, добавленное в меню действий раздела, не продублируется в меню действий на странице записи.

Кейс: “Реализация перехода к пользовательской странице настройки авторизации во внешней системе Х (логин/пароль), с которой работает реализованный в приложении раздел [Интеграция]

Неверно Реализовать отдельную страницу настроек, доступную только по прямому URL-адресу
Верно В меню кнопки [Действия] раздела [Интеграция] добавить пункт “Настройки подключения к внешней системе Х”

Настройки: простота и удобство нахождения

Многие приложения marketplace требуют начальной настройки пользователем. Для этого в bpm’online есть ряд пользовательских инструментов.

1. Настройки в разделе [Системные настройки]

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

Кейс: "Добавление новой системной настройки

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

Неверно (не лаконичное название): “Валюта, которая используется в системе по умолчанию”.

Верно: “Базовая валюта”.

Неверно (название не отражает суть) “Состояние заказа”.

Верно “Состояние заказа по умолчанию”.

Неверно (название не дает информации о связанной с настройкой функциональности) "Автоматический запуск процесса".

Верно "Автоматический запуск процесса управления инцидентами".

Настройки необходимо группировать.

У пользователя очень мало шансов найти нужную настройку в общем списке, не зная ее точного названия. Группировка настроек — это простой и действенный способ упростить настройку приложения.

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

2. Настройки в разделе [Справочники]

Раздел [Справочники] используется для управления любыми данными (в т. ч. настройками и системными данными), которые можно представить в виде простого списка.

В таблице 2 приведены примеры использования раздела [Справочники] для выполнения разных задач в системе. Рекомендуется использовать справочники для решения подобных кейсов.

Табл. 2. — Примеры использования справочников

Задача Пример используемого справочника
Список данных для выбора пользователем

[Состояния документа]

В справочнике содержится список всех состояний, в которые переводится документ в ходе рабочего процесса (например, “Актуальный”, “Архивный”, “В процессе подготовки”).

Автозаполнение поля при интеграции

[Каналы лида]

В справочнике содержится список всех типов ресурсов, по которым получен лид (например, “Социальные сети”, “Поисковая реклама”, “Email”).

Настраиваемая бизнес-логика

[Правила уведомления контакта по обращению]

Справочник содержит список правил, по которым происходит отправка уведомлений контакту о ходе работы над его обращением (например, “Отправляется сразу”, “Отправляется с задержкой”, “Не используется”).

Системный список [Пользователи Webitel]
Настройка отображения функциональности в разных разделах [Настройки диаграммы Гантта]

3. Настройки в профиле пользователя

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

Ниже приведены примеры использования настроек в профиле пользователя:

1. Настройки подключения при интеграции:

  • Id оператора телефонии / номер телефона, под которым пользователь работает с коннектором к телефонии.
  • Настройки подключения пользователя к почтовому сервису.

2. Настройки поведения системы для пользователя:

  • Настройки уведомлений.
  • Настройки языка по умолчанию, который используется данным пользователем в сканере визиток.

4. Отдельная страница настроек

Вынесение всех настроек на отдельную страницу — самый удобный для пользователя вариант управления настройками приложения, хоть и более сложный в реализации (рис. 1).

Рис. 1. — Страница настроек bpm'online

Переход к странице настроек может выполняться из соответствующего раздела и/или из дизайнера системы.

Рекомендуется выносить все настройки приложения на отдельную страницу в любом из следующих кейсов:

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

Разработка с учетом базовой логики bpm’online

Корректное заполнение полей при создании лидов

Создание лидов при интеграции bpm’online с мессенджерами, чатами, посадочными страницами, социальными сетями — одна из типовых задач интеграции. При автоматическом создании лида важно сохранить корректную логику заполнения полей страницы лида, включая информацию о каналах привлечения потенциального клиента.

При разработке своего приложения следует позаботиться о том, чтобы пользователи bpm’online соотносили название поля с его назначением и смогли пользоваться сквозной аналитикой по лидам. Пример названий полей лидов приведен в таблице 3.

Табл. 2. — Примеры названий полей лидов

Название Использование
[Как зарегистрирован]

Способ регистрации лида:

  • создан автоматически;
  • добавлен вручную;
  • входящий звонок/email;
  • лендинг;
  • обращение.
[Канал]

Тип ресурса, с которого получен лид, например:

  • веб;
  • социальные сети;
  • реклама оффлайн;
  • мероприятие;
  • рекомендация/личный контакт.
[Источник] Название конкретного ресурса, с которого получен лид, например, Twitter, Google и т. д.
[Сайт перехода] Сайт, с которого пользователь перешел на посадочную страницу, в результате чего в системе был зарегистрирован лид. Поле недоступно для редактирования и заполняется автоматически при получении лида с посадочной страницы.

UI-минимум

Иконка раздела

Для каждого нового раздела должна быть добавлена иконка. Иконка раздела должна соответствовать таким требованиям:

  • формат — *.png или *.svg;
  • размер — не более 38 х 38px;
  • стиль — плоское изображение белого цвета без мелких элементов/линий, фон без заливки.

Подобрать подходящие иконки можно в в шаблонной библиотеке marketplace (https://marketplace.terrasoft.ru/template/biblioteka-ikonok-razdelov). Также можно воспользоваться бесплатным сервисом для поиска и преобразования плоских иконок.

© Terrasoft 2002-2019.

Был ли данный материал полезен?

Как можно улучшить эту статью?