Эффективные формы

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

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

Убедитесь, что ваши формы максимально помогают пользователям. Например, подбирайте размеры полей ввода текста так, чтобы намекнуть пользователю на приемлемую форму – пятисимвольные (или девятисимвольные) поля для почтового индекса2, например. Применяйте где можно выключатели, переключатели и списки выбора, сужая число доступных вариантов решений.

Проверьте также, что вы адекватно документировали вашу форму.


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

Дисплеи с ограниченными возможностями
Хотя большая часть персональных компьютеров усовершенствована, предоставляя теперь значительно лучшее разрешение, чем 600×480, которое было обычным, когда мы готовили первое издание этой книги, многие устройства (WebTV, сотовые телефоны со встроенными броузерами, портативные компьютеры) требуют, чтобы проектирование форм оставалось консервативным.


Наилучший компромисс – это предполагать, что окно просмотра документов имеет приблизительно 75 символов в ширину и от 30 до 50 строк в высоту.1 Вам следует разрабатывать формы (и все документы), чтобы ими было удобно пользоваться на экранах такого размера.

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

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

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


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

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

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

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

Другие правила могут определять порядок других групп элементов ввода. Чтобы понять, работает ли форма действительно, непременно просмотрите ее на нескольких броузерах, попросите ряд людей ее заполнить и отозваться о ее эффективности.

Улучшенный макет старой формы
На первый взгляд, основное правило HTML и XHTML – содержание, а не форма – находится в прямом противоречии с основным правилом создания хороших интерфейсов – точный, последовательный макет.Если даже и так, существует возможность использовать некоторые элементы, чтобы значительно улучшить макет и удобство чтения боль-
шинства форм.

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

С HTML и XHTML это труднее, но можно выполнить макетирование подобного рода для форм. Например, стоит группировать родственные элементы и отделять группы друг от друга пустыми абзацами и горизонтальными линейками.

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






Name:
Sex:
Male

Female
Income:





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

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

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела HTML на эту тему:
Атрибуты формы общего назначения
Группировка элементов формы и обеспечение их надписями
Многострочные области ввода текста
Получение данных из форм при помощи электронной почты
Программирование форм

Вернуться в раздел: HTML / 9. Формы