Каков наилучший способ макета / дизайна длинной сложной веб-формы для сбора пользовательского ввода - PullRequest
3 голосов
/ 12 октября 2009

Мне нужно спроектировать веб-форму, которую арендодатели могут использовать для добавления списков аренды. Есть 8 обязательных текстовых полей и 2 необязательных текстовых поля, 11 раскрывающихся списков, 12 флажков и одна большая текстовая область. Любые предложения о том, как расположить их таким образом, чтобы он был чистым и беспорядочным? Меня беспокоит, что если форма выглядит длинной, они могут не захотеть ее заполнять. Пока что я разделил элементы на странице на разделы, однако страница все еще выглядит загроможденной.

Ответы [ 6 ]

1 голос
/ 16 октября 2009

Хорошая идея разбить ввод на несколько секций.

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

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

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

Этот подход делает его менее впечатляющим для пользователя и делает для него более очевидным, что ему нужно вводить, от начала до конца.

1 голос
/ 16 октября 2009

Есть ли у отправителей профили учетных записей, которые вы можете использовать для заполнения контактных данных? Если это так, я бы удалил контактную информацию из формы для создания списка и добавил экран просмотра, который отображает всю информацию и дает ссылки для указания альтернативных контактных данных или внесения поправок в другую информацию. Затем пользователи видят один экран плюс экран обзора с большой кнопкой «Опубликовать это объявление». Процесс заказа Amazon использует хороший экран обзора.

1 голос
/ 12 октября 2009

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

В настоящее время более популярной методологией является использование AJAX для представления более крупной формы несколькими частями без перезагрузки всей страницы.

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

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

1 голос
/ 12 октября 2009

Я бы посоветовал вам использовать 2 страницы вместо 1. На первой странице покажите 8 обязательных текстовых полей и добавьте к ним дополнительный флажок, который позволяет отображать 2 дополнительных текстовых поля при нажатии. Это означает, что пользователь включит дополнительные флажки, чтобы сделать его более приемлемым и естественным для нее. Затем поместите кнопку отправки, которая переведет пользователя на вторую страницу.

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

1 голос
/ 12 октября 2009

Как насчет макета в стиле мастера?

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

Этот подход делает сообщения об ошибках немного менее опасными для пользователей (вы никогда не показываете им сообщение об ошибке «Пожалуйста, исправьте следующие 34 ошибки»).

Edit: увидев текущий макет формы, я на самом деле думаю, что у вас есть в настоящее время очень ясно, и хорошо сделано.

0 голосов
/ 13 октября 2009

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

Я бы очень осторожно разбил его на отдельные страницы (например, в качестве мастера). Прежде всего, это займет больше времени у пользователя, потому что теперь вы добавляете время навигации и переориентации. Во-вторых, покажется дольше; пользователь будет похож на: «Боже, я заполнил многостраничную форму?» В-третьих, пользователи не могут сказать, сколько работы ожидается от них, когда часть из них скрыта на других страницах (или с помощью трюков AJAX). Некоторые вообще не будут заполнять форму, предполагая, что это хуже. Другие откажутся от этого на полпути, потому что они либо не планируют достаточно времени для этого, либо просто устали от бесконечного попадания в Next. Вы можете смягчить эту последнюю проблему, заранее указав, сколько страниц существует, и показывая, как пользователь продвигается по ним, но это только подчеркивает тот факт, что он многостраничный и, следовательно, «длинный».

IMO, все, что нужно, - это более легкий графический дизайн. Я бы опустил заголовки разделов «обратное видео» и зеленый фон на чередующиеся разделы и сделал все это белым. Используйте цвет и / или жирный текст для заголовков разделов. Вы можете комбинировать метку раздела «Описание свойства» с меткой поля, чтобы уменьшить беспорядок и избыточность. Подумайте о том, чтобы поместить поля «Домашние животные» и «Парковка» на одну линию с бельем, а затем развернуть поля «Детали объекта» по вертикали, чтобы неправильное выравнивание полей было не столь заметным. В качестве альтернативы, измените размеры полей Unit Detail, чтобы они были лучше выровнены. Может быть, вы можете опустить поле «Как вы хотите, чтобы с вами связались?». Я ожидаю, что если пользователи не хотят связываться с одним из способов, они просто не заполняют это поле.

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

Наконец, убедитесь, что не слишком много шума и конкуренции со «стандартными» элементами страницы (например, меню боковой панели, юридическая информация).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...