Рекомендации по интерфейсу форм
Создание красивых и функциональных форм, несомненно, требует особого мастерства. Естественно то, что начинающему, без помощи более опытного мастера, придется учиться на собственном опыте, совершая банальные ошибки. Попробуем дать несколько советов по улучшению дизайна и логической структуры.
Для начала приведем общие рекомендации:
— Постарайтесь развить в себе стремление к краткости в создании форм;
— Если размещаете на странице одну только форму (страница поиска – или регистрации), то постарайтесь не забывать поставить фокус ввода на первое поле;
— Путь по заполнения формы должен быть ясным, понятным и логичным;
— Основную кнопку формы будет лучше выделить цветной подложкой;
— Предусмотрите блокировку кнопки «Отправить» после нажатия пользователем в целях избегания повторной отправки данных;
Советы по группировке полей и многостраничным формам:
— Постарайтесь объединить поля так, чтобы пользователю не пришлось часто менять раскладку;
— Постарайтесь использовать подходящую группировку полей так чтобы применить наименьшее количество визуальных элементов необходимых для выделения формы;
— Постарайтесь заранее продумать вопросы, которые будет содержать форма.
Конечно, если количество получившихся вопросов будет большим, то вполне допустимо разместить форму на двух и более страницах но, как правило, пользователь, вряд ли будет заполнять такую форму. Наилучшим вариантом будет использование длинной страницы;
— Обеспечьте возможность пользователя вернуться на шаг назад в мастере;
Создание поля и ввод данных:
— Необходимо постараться критично оценить необходимость присутствия каждого поля в форме для того чтобы по возможности удалить ненужные но при этом не усложнить оставшиеся;
— Если данные в поле можно ввести несколькими способами, то обеспечьте гибкий ввод;
— Для упрощения ввода, например даты рождения – используйте маску ввода;
— Постарайтесь сделать проверку вводимых символов;
— Если пользователь, к примеру, ошибся с раскладкой – сообщите ему об этом;
— Помните, что большое количество пользователей используют при переходе по полям формы tab и контролируйте процесс при помощи tabindex;
— Если предполагается, что форма будет использоваться для управления большим количеством данных, то необходимо отключить автозаполнение;
— Недоступные для редактирования поля лучше будет визуально выделить;
Рекомендации по созданию подписей к полям и использование выпадающих списков:
— Подпись постарайтесь разместить над полем.
Таким образом, даже переведенная на другой язык подпись спокойно поместится;
— Подпись должна быть максимально сжатой, но, тем не менее, информативной;
— Место, находящееся справа от поля хорошо будет использовать под размещения пояснений;
— Постарайтесь выделить обязательные для заполнения поля. Самым простым способом выделения будет использование *;
— Помощь необходимая для заполнения полей лучше сделать, например, за счет всплывающих подсказок;
— Постарайтесь, каким-то образом выделить возникающие ошибки в заполнении;
— Ограничив длину поля, сообщите об этом пользователю заранее;
— Используйте сортировку по алфавиту в том случае если вариантов выбора больше 5;
— Наиболее часто встречающиеся варианты стоит разместить в начале списка;
— Если выбор варианта возможен только из двух вариантов, то стоит применить флажок;
— Хорошо продуманный интерфейс практически не требует использование кнопки «Отмена»;
— Кнопки «Отмена» и «Очистка» будет лучше заменять просто ссылкой;
Хочется надеяться на то, что приведенные советы смогут принести пользу начинающим веб-мастерам в создании по-настоящему продуманных и красивых формах.
____________________
Вам негде жить?