FORM BUILDER

B2B

Конструктор форм: исследование и дизайн с нуля

FORM BUILDER

B2B

Конструктор форм: исследование и дизайн с нуля

FORM BUILDER

B2B

Конструктор форм: исследование и дизайн с нуля

Контекст и проблема

Контекст и проблема

Контекст и проблема

Я работал дизайнером в отделе инфраструктурной разработки Wildberries — крупнейшего маркетплейса в пространстве СНГ. Наш отдел занимался внутренними продуктами для организации бизнес-процессов компании.

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

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

Исследование

Исследование

Исследование

Целью исследования было понять, какие конструкторы форм используют сотрудники, как именно они ими пользуются и за что ценят, какие задачи выполняют и чего ожидают от нашего продукта. Я нашёл контакты сотрудников, которые часто создают формы. Кто-то согласился, кто-то был занят и посоветовал коллегу. У каждого респондента я спрашивал, кого ещё можно было бы проинтервьюировать.

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

Параллельно я нашёл и начал анализировать существующие решения. Чтобы понять какие конструкторы вообще существуют — гуглил, использовал ИИ для поиска, спрашивал у респондентов. В итоге изучил около 15 конструкторов форм. Цель была не в классическом анализе конкурентов, а в изучении того, как устроены подобные продукты. Эта информация была нужна мне, потому что для проектирования я использовал фреймворк ORCA.

ORCA — фреймворк из методологии объектно-ориентированного дизайна (OOUX). Про мой опыт его использования я написал отдельную статью. Рекомендую прочитать её, чтобы понимать, на основе чего строился дальнейший дизайн.

Дизайн

Дизайн

Дизайн

После завершения основных этапов ORCA я создал карту разделов продукта. Она показывала, какие экраны будут в продукте, как они связаны друг с другом, и легла в основу навигации.

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

Файловая система

Файловая система

Файловая система

Из проведённых исследований мы узнали, что пользователи организуют свои формы по проектам, в которых часто проводят исследования в разных направлениях. Поэтому верхней частью иерархии нашей файловой системы стали пространства. Внутри пространств можно создавать папки и формы.

Иерархия определяет уровень доступа. Если дать доступ к пространству, пользователь получит доступ ко всему, что в нём находится. Если к папке, то только к её содержимому. Если к форме, то только к этой форме.

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

Конструктор форм

Конструктор форм

Конструктор форм

Конструктор — интерфейс, который открывается, когда пользователь переходит к работе с формой. На самом деле название «конструктор» — условное, потому что в нём пользователь может как редактировать форму, так и просматривать её результаты.

Интерфейс редактора состоит из трёх частей:

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

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

Справа — панель настроек, содержимое которой зависит от выбранного блока.

Кроме основных частей, я спроектировал функционал совместного доступа к пространствам, папкам и формам, профиль пользователя и дополнительные разделы: «Корзина», «Недавние», «Доступные мне», «Избранное».

Поля

Поля

Поля

Немалую часть проектирования продукта составила работа с полями. В первую версию вошли 13 типов: короткий текст, длинный текст, выбор из списка, выбор из выпадающего списка, да/нет, число, рейтинг, дата, время, дата и время, загрузка файла, телефон, электронная почта. Решение, какие типы включить, принималось совместно с командой. Выбирали самые используемые, которые успеем сделать в срок.

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

Например, в поле «Короткий текст» пользователь мог сначала написать значение по умолчанию из 12 символов, а затем установить максимальное количество символов в 10.

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

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

Итоги

Итоги

Итоги

Описанная работа над проектом заняла около 8,5 месяцев. Исследования и применение фреймворка ORCA около 1,5 месяца, после чего началась работа над интерфейсом.

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

Пока продукт закрыт во внутреннем контуре компании, но скоро появится в открытом доступе.

Трудности

Трудности

Трудности

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

В некоторых случаях мне удавалось полностью отстоять своё решение, но иногда имели значение сроки, тогда мы находили компромисс.

@mikegoi

mikegoi@yandex.com

+7 917 533-68-01

© 2025 Mikhail Goi

@mikegoi

mikegoi@yandex.com

+7 917 533-68-01

© 2025 Mikhail Goi

@mikegoi

mikegoi@yandex.com

+7 917 533-68-01

© 2025 Mikhail Goi