Лучший дизайн для длинной [закрытой] формы ввода HTML

У нас в компании есть похожие формы, и в итоге мы получаем комбинации 2 и 3, то есть показываем вкладку в верхней части экрана, а также включаем кнопку Next, чтобы перейти к следующей вкладке. Вот некоторые причины/рассуждения, 1, используйте ajax для загрузки каждой вкладки, чтобы сделать форму меньше на стороне клиента, обычно пользователь просто просматривает/редактирует одну или две вкладки каждый раз. 2, мы можем показывать различные вкладки при загрузке формы, основываясь на разных сценариях. 3, аналогично 1, мы можем показывать/скрывать некоторые вкладки, основываясь на привилегиях пользователя. 4, некоторые поля взаимосвязаны, поэтому при обновлении предыдущей вкладки мы изменяем некоторые настройки на другой вкладке соответственно. 5, и иногда форма слишком длинная, чтобы с ней можно было работать, если не разделять ее на вкладки

с частичным просмотром, я в основном строю и #1, и #3 и буду получать отзывы от своих пользователей. Моё первоначальное ощущение, что #3 будет более масштабируемым по мере того, как я буду добавлять всё больше и больше данных.

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

некоторые из лучших онлайн-форм, которые я видел, всегда имели:

1. легкую валидацию
2. , если она была слишком длинной, она имела вкладки (а не бесконечное прокручивание вниз)
3. Одна замечательная особенность, которую я видел только один раз: сохранить форму в виде черновика.

Это, я бы сказал, должно быть лучшей практикой :)

Как пользователь, я определенно предпочитаю вариант 1.

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

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

Tab интерфейсы бесценны для навигации, но, IMO, почти никогда не полезны для последовательного ввода.

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

Во-первых, хорошей статьей, как обычно, является Nielsen.

Хороший анализ также можно найти в этой должности .

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

1. Плюсы и минусы

Длинные HTML-формы:

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

Многостраничные со "следующими" ссылками

Худшие из обоих миров. Жесткий щелчок ("следующая" - маленькая мишень), нет случайного доступа ни к одной из частей формы (если это имеет смысл). Эта опция ТОЛЬКО полезна, когда вы ДОЛЖНЫ заполнить части формы в определенном порядке и возврат назад не является опцией.

Tab-интерфейс

Это хороший вариант, но с недостатками. Единственным недостатком является то, что вы не видите всю информацию формы сразу (и вы должны помнить, какой вопрос был на какой вкладке, если вы хотите вернуться назад/вперёд).

2. Заключение

Таким образом, это подбрасывание между #1 и #3 в зависимости от того, что вашим пользователям кажется проще всего (прокрутка длинной вертикальной страницы по сравнению с кликом по вкладкам).

3. Заметки

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

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

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

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

4. Боковые заметки

Почему именно у вас такая длинная форма? Одним из основных пунктов исследования удобства использования является то, что заполнение любых форм является длинным, трудным и ненавистным для пользователей. Поэтому, если вы ДОЛЖНЫ получить информацию, не спрашивайте ее. Это особенно касается регистрационных форм - см. Нильсен и другие ссылки

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

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

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

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

Комбинация 2 и 3.

Путеводитель по страницам с помощью кнопок "Далее" и "Назад", и устанавливают некоторые элементы интерфейса (вкладки отличные, но также ярлыки в виде сухарей...), чтобы позволить пользователю переходить непосредственно к страницам.

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

1. Держать все входные элементы в одном, не прокручиваемом вью-порте удобнее и менее пугающе для большинства пользователей.
2. Если у конкретной страницы есть некоторые проблемы с валидацией, их легче увидеть и исправить, если они сразу же видны на экране.
3. Если у вас есть зависимости между различными компонентами, вы имеете легкий доступ к предыдущей информации, чтобы использовать ее для более поздней информации, и можете убедиться, что они введены в правильном порядке.
4. Если различные части могут быть заполнены в разное время, это позволяет пользователю заполнять форму поэтапно.

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

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

Я предпочитаю (1) простоту прокрутки html с четко определенными разделами.

Многие коммерческие сайты предпочитают тупой подход (2), с, возможно, немного (3), чтобы позволить клиентам просмотреть свои варианты. (2) держит все на экране, следит за тем, чтобы пользователь читал то, что вы хотите, чтобы он прочитал.