Формы
Еще одна повседневность, кроме таблиц, В2В, профессиональных и специализированных интерфейсов: разные формы ввода данных.
Разнообразные формы и интересные поля ввода в конце.
Короткие кейсы
1. Оптимизация больших форм
Как правило, задача приходит в виде большого списка параметров. Чаще всего в виде технических названий параметров, краткого описания и типа данных.
Как правило, основные действия здесь: логично сгруппировать параметры и по возможности подобрать альтернативные варианты отображения, кроме стандартных полей ввода.
2 примера форм в карусели:
Первый слайд. Настройки ИИ-агента для продукта Agent Platform. Шаги по оптимизации:
  1. Все параметры логически разделила на 2 блока: настройки самого агента и его работы в сценариях (взаимодействие с другими агентами и функциями).
  2. Затем каждый блок разделила еще раз на смысловые группы.
  3. Чтобы избавиться от обилия полей ввода, снизить уровнь визуальной "ряби" и добавить динамики, встроила в Настройки поведения слайдер достаточной для использования ширины. Переключение между полями клавиатурой работает.
  4. Поскольку ЦА достаточно широкая, заменила суровые технические термины на более человеческие (термин доступен в тултипе, но профессиональные пользователи и без подсказок поймут "гуманную" альтернативу).
Второй слайд. Форма «План полета» — документ, составляемый перед вылетом для обеспечения безопасности, расчета топлива и навигации, который утверждает командир воздушного судна. Включает маршрут, эшелоны, запасные аэродромы, расчетное время, количество топлива, etc.
  1. Разделила всю информацию на группы.
  2. Поскольку это узкоспециализированный интерфейс, работа с которым доведена до автоматизма, без новаторств: человек будет быстро проскакивать через всю форму с помощью клавиатуры.
  3. По той же причине форма собрана максимально компактно, строками, но без смысловых пересечений. Что позволяет быстро ориентироваться и не сбиваться (механика та же, что у текста, выровненного по левому краю против выравнивания по ширине).
  4. Терминологию тоже трогать нельзя.
Задача
  1. Облегчить для человека заполнение формы, чтобы он а) не испугался, б) выжил.
2. Оптимизация ветвистых форм
Формы могут быть большими и маленькими, но главное: практически каждый шаг, каждый выбор параметра в форме, изменяет набор следующих параметров.
Создание подключения в продукте Agent Platform. Каждый тип подключения предполагает свой набор параметров. Параметры так же ветвятся. На примере подключения LLM:
  1. Замена первой выпадайки на альтернативный вариант, чтобы немного разгрузить форму.
  2. Сокрытие неактуальных на данный момент полей ввода для сохранения фокуса и чтобы не смущать пользователя переключением содержимого при смене выбора.
  3. После того, как пользователь выбрал вариант в выпадайке, для ускорения процесса система автоматически перебрасывает фокус на следующее поле. Если там выпадайка, она раскрывается.
Задача
  1. Как и в предыдущем пункте.
3. Оптимизация нестандартного функционала
В База клиентов бота для каждого клиента есть набор характеристик (атрибуты): часть системная (например, мессенджер, в котором проходил диалог), часть создана самим пользователем и бот пытается распознать значения атрибутов в процессе общения.
Исходили из информации, что редко будет большое количество параметров в рамках одного атрибута.
  1. Совместила в одном окне список атрибутов с параметрами и их редактирование, потому что весь функционал укладывается в одно окно и можно сэкономить на лишних переходах.
  2. Добавила быстрое создание нового значения атрибута, потому что вероятность неучтенного значения выше, чем необходимость полного редактирования атрибута. В итоге большую часть времени окно выглядит компактно и аккуратно, с быстрым доступом к самому нужному действию. Но и позволяет расширить функционал.
Задача
  1. Необходим блок, в котором человек может создавать и настраивать атрибуты клиентов.
  2. С точки зрения пользователя: нужно возможность внести в систему свои атрибуты и управлять ими.
4. Интересные формы и инпуты
В конструкторе ботов Aimylogic человеку нужно настраивать разные Навыки бота (оформить заказ в интернет-магазине, отвечать на вопросы, иметь подходящее меню, etc). Функционал настройки довольно объемный и сложный. Чтобы процесс создания был понятен человеку без какого-либо ботостроительного опыта, использовала формы с простыми контролами: поля ввода, выпадайки, etc.
Инженерная задача получилась такая: упаковать сложный функционал в простые контролы, но так, чтобы не было путаницы и все выглядело визуально компактно и однозначно.
Так появился формат "таблиц" из "карточек" с простыми контролами, где каждый блок отвечает за какой-то параметр настройки. Блоки можно перемещать, удалять, добавлять новые. Менять в них контент, корректировать поведение бота, задавать свои параметры.
Например, при настройке кнопок в Меню бота. Человек может скорректировать, какой именно навык кнопка запускает и какую реакцию бота в рамках навыка активирует, система отслеживает и предлагает только доступные (если навык жестко связан с реакцией, отредактировать можно только название кнопки). Для других Навыков могут быть выпадайки, позволяющие не только выбрать предзаданный вариант, но и создать свой.
Вообще карточный подход позволяет легко считывать смысловые группы и отделять настройку вспомогательных параметров от параметров Навыков. Например, Навык Авторассылка, когда бот сам отправляет клиенту сообщения по определенному расписанию:
В интерфейсе Базы знаний бота (библиотека вопросов к боту от клиента и его ответов) человек прописывает не только вопрос, но и возможные формулировки. Это нужно, чтобы снизить риск ошибки бота при распознавании. Проф. пользователи могут использовать формат Паттернов — это особый способ записи, своего рода кодирование, которое позволяет модельке распознавания речи реагировать на большее количество вариаций целевых слов, например, игнорировать окончания. Грубый и упрощенный пример: в формате текста для модели будет разница между "кредит" и "кредитЫ", в формате паттерна "%кредит%" она среагирует на любое окончание после "кредит-".
Поскольку формулировки вносятся достаточно быстро и массово, нужен быстрый доступ к обзору и редактированию, составила контрол, который передает сценарий взаимодействия пользователя с системой. Поля ввода объединены в одну таблицу, сохранение введенной формулировки запускается по Enter (и кнопке), новая введенная формулировка добавляется в список сразу же создавая новую пустую строку. В общем, паттерн, напоминающий Excel-таблицу и использующий аффорданс. (А еще сюда можно массово скопировать фразы из внешнего документа и система сама разобьет их на отдельные строки). Подобный инпут потом разошелся по продукту.
В некоторых обстоятельствах у пользователя возникает необходимость отправлять через бота информацию отдельными сообщениями + отправлять разный контент. То есть это одно разовое взаимодействие бота с клиентом, просто с отправкой сообщений друг за другом. Обычные поля ввода и стандартные способы отображения прикрепления файлов в стандартной форме не давали ощущения монолитности конструкции.
Поэтому здесь тоже появилось комбинированное поле ввода, больше похожее на таблицу: можно перемещать блоки с контентом, удалять, добавлять новые, использовать форматирование и прикреплять различный контент (с предупреждением о поддерживаемых каналах).
(Для прикрепленных файлов используется стандартный компонент, его не меняли по задаче).
Краткий обзор все)
Формы
Инпуты
Made on
Tilda