1 1160x480 - 13 способов представления форм и будущее ввода данных

Начиная от ERP-систем и заканчивая Facebook, приложения меняют свой смысл в зависимости от ввода данных. Форма – во многих своих проявлениях – является проводником для пользователя в суть приложения. В данной статье представлено 13 различных способов отображения формы и исследование в области будущего ввода данных.

Модальное окно

2 80x65 - 13 способов представления форм и будущее ввода данных

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

Мульти-модальные окна

3 80x65 - 13 способов представления форм и будущее ввода данных

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

Выдвижная форма

4 80x65 - 13 способов представления форм и будущее ввода данных

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

Вспомогательный экран

5 80x65 - 13 способов представления форм и будущее ввода данных

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

Встроенная форма

6 80x68 - 13 способов представления форм и будущее ввода данных

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

Редактируемая таблица

7 80x65 - 13 способов представления форм и будущее ввода данных

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

Управляемая форма

8 80x63 - 13 способов представления форм и будущее ввода данных

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

Ассистент

9 80x68 - 13 способов представления форм и будущее ввода данных

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

Секционная форма

10 80x63 - 13 способов представления форм и будущее ввода данных

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

Перенос

11 80x62 - 13 способов представления форм и будущее ввода данных

Будучи не совсем типичной формой, данный вариант позволяет пользователям перетянуть предопределенные инпуты в формат WYSIWYG (что видишь на экране, то и получишь). Имитация физического воздействия добавляет некоторые элементы геймификации в процесс.

WYSIWYG (что видишь на экране, то и получишь)

12 80x86 - 13 способов представления форм и будущее ввода данных

WYSIWYG используется для текстовых редакторов типа Microsoft Word, создания имейлов типа как MailChimp, паблишеров сайтов типа Squarespace и т. д. WYSIWYG редакторы позволяют пользователю создавать содержание без знаний HTML, CSS и JS.

Заполнение пустых мест

13 80x42 - 13 способов представления форм и будущее ввода данных

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

Интерактивные формы UX и будущее

14 80x79 - 13 способов представления форм и будущее ввода данных

Интерактивные пользовательские интерфейсы (CUI) обычно предполагают наличие “бота”, который реагирует на ввод текста. Затем, бот отвечает пользователю для последующего прохождения формы. Такой вариант реализации формы хорошо работает для лучшей интерпретации ввода данных.

Вокруг интерактивных UI ходит много слухов. Многие дизайнеры считают CUI будущим веб форм. Успех приложения WeChat обеспечил высокую степень доверия к таким UI. Однако Юнно Ченг и Якоб Нильсен отмечают, что преимущества интегрированных сервисных предложений WeChat больше исходят из привычного и удобного графического пользовательского интерфейса, а не из интерактивного.

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

Лично я с нетерпением жду дизайна, который будет объединять в себе CUI и красивый пользовательский интерфейс. Такие мини приложения могут быть созданы на основе пользовательского ввода данных и возможно, вскоре это выйдет за рамки окна чата. Также, CUI можно будет использовать в случае, когда пользователь “потерялся” а приложении. Для более глубокого понимание, вы можете ознакомится с отличной статьей Томаша Стофлы о будущем CUI.

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

Данная статья является частью инициативы по созданию шаблона пользовательского интерфейса основанного на эстетике и юзабилити. Если вас это интересует, подписывайтесь для получения обновлений.

Свежие вакансии
 Together Networks Together Networks Senior Product Designer и Junior Product Designer Офис Киев
 Inly Inly Middle/Senior дизайнеры в офис (Москва) или на удаленку Офис Москва
 Miro Miro Product Design Lead Офис Пермь
 MosPromo MosPromo Графический дизайнер, веб-дизайнер UX/UI Офис Москва от 65 000 до 85 000 ₽
 Mos.ru Mos.ru Senior Web Designer Офис Москва от 130 000 до 170 000 ₽
Все вакансии

Оригинал: Andrew Coyle

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Как упростить свой дизайн, большое руководство

Свыше 20 понятных иллюстрированных примеров Компании постоянно стремятся создавать простые и полезные…

5 способов сделать кнопку призыва к действию интуитивно понятной

Нажать или не нажать – это вопрос, который приходит в голову пользователю,…