13 способов представления форм и будущее ввода данных — Заметка дизайнера Flexport
Дизайнер компании по экспедированию грузов Flexport Эндрю Койл описал в своем блоге на Medium 13 разных способов отображения формы приложения, а также рассказал об исследованиях в области будущего ввода данных.
Начиная от ERP-систем и заканчивая Facebook, приложения меняют свой смысл в зависимости от ввода данных. Форма — во многих своих проявлениях — является проводником для пользователя в суть приложения. В этой статье представлено 13 различных способов отображения формы и исследование в области будущего ввода данных.
Простые модальные окна хорошо работают в качестве несложных форм с ограниченным количеством полей. Такие формы легко внедряются и легко воспринимаются пользователем. Однако сложные взаимодействия, которые включают в себя дополнительные модальные формы или всплывающие окна, могут вызвать ошибку.
Модальные формы также не дают пользователю взаимодействовать с остальными частями приложения до момента окончания работы с формой. Для более длинных форм стоит продумать применение отдельной страницы, а также возможность редактирования строк.
Мультимодальные окна
Мультимодальные окна (пожалуй, это лучшее название) представляют собой перетаскиваемые панели, что позволяет взаимодействовать с несколькими формами сразу. Пользователь может перетянуть модальное окно в любое место страницы и посмотреть информацию под ней. Такой вид форм позволяет предоставить пользователю много информации одновременно. Однако такая презентация может вызывать проблемы у начинающих пользователей и, как следствие, стать причиной ошибочных действий.
Выдвижная форма
Такие формы представляют собой выдвигающееся окно сбоку от основного контента страницы. Подобно модальным формам она основывается на контексте и позволяет пользователю одновременно просматривать информацию на странице. Выдвижные формы обычно предполагают большее количество данных из-за того, что они занимают всю высоту окна.
Вспомогательный экран
Формы в виде вспомогательных экранов прекрасно подходят для быстрых правок и быстрого ввода данных. Такие формы обычно встроены в контекст основной информации, поэтому пользователь не упускает контент приложения из виду.
Встроенная форма
Встроенные формы позволяют вносить данные или правки прямо в представленных данных без переключения режима просмотра. Встроенные формы могут иметь режим чтения, режим редактирования или редактируемые поля ввода.
Редактируемая таблица
Подобно встроенным формам редактируемые таблицы позволяют взаимодействовать с данными прямо в том месте, где они представлены. Такой вариант хорошо работает в случае необходимости ввода табличных данных.
Управляемая форма
Управляемые формы позволяют пользователю взаимодействовать со сложными формами и иметь возможность вернуться к предыдущему варианту вида. Такие формы хорошо работают при необходимости ввода системных данных, потому что в таком случае нет необходимости менять режим просмотра.
Ассистент
Формы в виде ассистента позволяют пользователю последовательно вводить данные, шаг за шагом. Такие формы — прекрасное решение для сложных форм, которые в дальнейшем не требуют повторного взаимодействия с пользователем. Ассистенты требуются, когда пользователь не знаком с процессом. Это типичная форма — пример плохого UX, который предполагает превосходство над пользователем в некоторой степени.
Секционная форма
Секционные формы хорошо справляются с задачей ввода сложной информации. Преимущество пользователя состоит в том, что он видит полный контекст формы в отличие от варианта с использованием ассистента. Пользователь может заполнять информацию вразброс по всей форме, а не линейно.
Перенос
Будучи не совсем типичной формой этот вариант позволяет пользователям перетянуть предопределенные инпуты в формат WYSIWYG (что видишь на экране, то и получишь). Имитация физического воздействия добавляет некоторые элементы геймификации в процесс.
WYSIWYG (что видишь на экране, то и получишь)
WYSIWYG используется для текстовых редакторов вроде Microsoft Word, создания email вроде MailChimp, паблишеров сайтов вроде Squarespace и так далее. WYSIWYG-редакторы позволяют пользователю создавать содержание без знаний HTML, CSS и JS.
Заполнение пустых мест
Иногда можно пренебречь правилами юзабилити в пользу эстетики и взаимодействия в форме забавы вместо того, чтобы создавать плохой UX. Это стало темой моей статьи об эстетическом эффекте юзабилити. Форма в виде заполнения пустых полей предполагает наличие поля ввода для предложения или абзаца. Это позволяет пользователю самостоятельно решать, какие данные вводить.
Интерактивные формы UX и будущее
Интерактивные пользовательские интерфейсы (CUI) обычно предполагают наличие «бота», который реагирует на ввод текста. Затем бот отвечает пользователю для последующего прохождения формы. Такой вариант реализации формы хорошо работает для лучшей интерпретации ввода данных.
Вокруг интерактивных UI ходит много слухов. Многие дизайнеры считают CUI будущим веб-форм. Успех приложения WeChat обеспечил высокую степень доверия к таким UI. Однако Юнно Ченг и Якоб Нильсен отмечают, что преимущества интегрированных сервисных предложений WeChat больше исходят из привычного и удобного графического пользовательского интерфейса, а не из интерактивного.
CUI имеет большие недочеты в юзабилити, включая отсутствие понятности и произвольного пути прохождения. Однородность CUI не станет будущим дизайна форм. Однако это будущее многих чатовых приложений, которые основаны на подобном способе сбора данных.
Лично я с нетерпением жду дизайна, который будет объединять в себе CUI и красивый пользовательский интерфейс. Такие миниприложения могут быть созданы на основе пользовательского ввода данных, и, возможно, вскоре это выйдет за рамки окна чата. Также CUI можно будет использовать в случае, когда пользователь «потерялся» в приложении. Для более глубокого понимания вы можете ознакомится с отличной статьей Томаша Стофлы о будущем CUI.
***
Когда ввод данных будет стандартизирован, многие варианты форм устареют. Возможности оцифровки данных вырастут, а программное обеспечение позволит автоматизировать многие ручные процессы. Тем не менее, пользовательские интерфейсы всегда будут ценится высоко. Я искренне надеюсь, что различные варианты презентации форм, показанные в этой статье, помогут вам в разработке ваших приложений. Дайте мне знать, если я что-то упустил.
© vc.ru
