Пошаговый динамический интерфейс приложения. Чем он хорош

Пошаговый динамический интерфейс приложения. Чем он хорош

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

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

Пример для поиска облигаций: весь интерфейс веб-приложения находится на едином экране.  
Пример для поиска облигаций: весь интерфейс веб-приложения находится на едином экране.  

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

Пример на сайте <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Friskover.ru%2F&postId=779860" rel="nofollow noreferrer noopener" target="_blank">Riskover.ru</a>: интерфейс возникает (разворачивается) пошагово: после ответа на вопрос или заполнения формы появляется следующий вопрос / форма / чек-бокс и т.д. 
Пример на сайте Riskover.ru: интерфейс возникает (разворачивается) пошагово: после ответа на вопрос или заполнения формы появляется следующий вопрос / форма / чек-бокс и т.д. 

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

Форма же с одновременным расположением на едином экране большого количества элементов расфокусирует внимание пользователя.

Я часто замечал, что пользователи забывают заполнить какие-либо элементы, находящиеся на едином экране. Это происходит именно потому, что внимание пользователей при таком пострении интерфейса расфокусировано.

Есть и еще один очень важный аспект, который подтверждает преимущество пошагового интерфейса.

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

Например, если пользователь в заполняемой анкете указал, что он состоит в браке, то далее в пошаговом интерфейсе появляются поля для ввода ФИО супруга, даты рождения супруга, места работы супруга и т.д. А если пользователь указал, что он не состоит в браке, то может быть задан вопрос разведен ли он или никогда не состоял в браке. Это умозрительный пример.

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

Такм образом, интерфейс динамически изменяется в зависимости от введенной пользователем информации.

А самое крутое это то, что приложения с таким интерфейсом можно делать без знаний программирования на low-code платформе Botman.one.

Алгоритмы, по которым у пользователя будут появляться те или иные элементы интерфейса (вопросы, чек-боксы, поля для заполнения и т.д.) задаются в визуальной среде.

Пример алгоритма конструктора договора займа, сделанного на платформе <a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Fbotman.one%2F&postId=779860" rel="nofollow noreferrer noopener" target="_blank">Botman.one</a> 
Пример алгоритма конструктора договора займа, сделанного на платформе Botman.one 

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

С помощью пошагового интерфейса пользователь может освоить работу в программе, интерфейс которой сложен и недружелюбен:

пользователь работает с простым пошаговым интерфейсом от Botman.one, а команды в программу со сложным интерфейсом поступают через API.

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

88
2 комментария

Преимущество всей анкеты на одной странице:
1) сразу видны все вопросы и можно оценить время на заполнение такой анкеты
2) позволяет прикинуть надо ли заполнять данные жены или лучше указать, что не женат (из примера в тексте)
3) позволяет не держать соединение открытым во время заполнения и обойтисть без скриптов на странице

Может есть ещё преимущества. Так-то ничего не мешает предоставить пользователю пошаговую анкету, оставив ему возможность переключиться в одностраничную.

1
Ответить

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

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

Насчет соединения точно не скажу. Зависит от того, выполняется ли скрипт на сервере или на машине пользователя, наверное.

Вообще да, есть возможность группировать элементы на одном экране. В botman.one это тоже реализовать можно.

Ответить