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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Следует использовать лаконичные и понятные названия системных настроек. Название настройки должно отражать ее суть и указывать на функциональность, к которой она относится.	Неверно (не лаконичное название): “Валюта, которая используется в системе по умолчанию”. Верно: “Базовая валюта”. Неверно (название не отражает суть) “Состояние заказа”. Верно “Состояние заказа по умолчанию”. Неверно (название не дает информации о связанной с настройкой функциональности) "Автоматический запуск процесса". Верно "Автоматический запуск процесса управления инцидентами".
Настройки необходимо группировать.	У пользователя очень мало шансов найти нужную настройку в общем списке, не зная ее точного названия. Группировка настроек — это простой и действенный способ упростить настройку приложения.
Необходимо добавить описание	Описание поведения системы, которым управляет настройка, ответит на массу вопросов пользователя, которые у него обязательно возникнут.

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

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

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

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

Задача	Пример используемого справочника
Список данных для выбора пользователем	[Состояния документа] В справочнике содержится список всех состояний, в которые переводится документ в ходе рабочего процесса (например, “Актуальный”, “Архивный”, “В процессе подготовки”).
Автозаполнение поля при интеграции	[Каналы лида] В справочнике содержится список всех типов ресурсов, по которым получен лид (например, “Социальные сети”, “Поисковая реклама”, “Email”).
Настраиваемая бизнес-логика	[Правила уведомления контакта по обращению] Справочник содержит список правил, по которым происходит отправка уведомлений контакту о ходе работы над его обращением (например, “Отправляется сразу”, “Отправляется с задержкой”, “Не используется”).
Системный список	[Пользователи Webitel]
Настройка отображения функциональности в разных разделах	[Настройки диаграммы Гантта]

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

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

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

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

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

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

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

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

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

Рис. 1. — Страница настроек Creatio

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

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

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

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

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

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

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

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

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

UI-минимум

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

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

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

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