Наверное, моя единственная статья про дизайн.
Часто, просматривая сайты, видишь, что разработчики относятся к формам ввода легкомысленно. Многие дизайнеры видят в них только визуальный смысл – чтобы красиво смотрелась, забывая, о том, что это функциональный элемент сайта.
Чем удобнее будет сделана форма, тем больше пользователей напишет вам комментариев и зарегистрируется на сайте. Все эти приемы были поняты мною на личном опыте, я сам когда-то совершал такие же ошибки, поэтому решил написать про это.
Несколько примеров, как быстро можно сделать формы удобнее:
1. Используйте теги метки
Метка (<label>) используется для связи между полем и его описанием.
Клик на метку обрабатывается браузером, как клик на сам элемент.
Это может быть перевод фокуса на поле с текстом или установка/снятие флажка для полей выбора (radio кнопок, флажков). В desktop приложениях я привык кликать не на сам флажок, а на его описание т.к. попасть по нему мышкой гораздо проще. Если использовать <label> можно добиться подобного поведения и в HTML.
Как это выглядит в HTML:
<input type="checkbox" name="agree" id="agree_id" value="1" /> <label for="agree_id"> Я принимаю условия соглашения </label>
3. Всегда указывайте порядок полей (tabstop’ы)
Опытные пользователи при работе с формами могут пользоваться только клавиатурой. Переходя по полям формы кнопкой TAB, часто можно попасть фокусом с первого поля на третее, а потом на второе.
4. Большие текстовые поля
Делайте большие поля для ввода. Помните о том, что пользователи там вводят текст! Каюсь, год-полтора назад я думал, что для формы добавления новостей вполне хватит и 4 строчного поля.
Кроме этого можно сделать так, чтобы ширина поля ввода автоматически подстраивалась под размер окна. Для этого нужно дописать в HTML
<textarea name="field" rows="8" cols="6" style="width: 95%"></textarea>
5. Внимание к мелочам!
Атрибут <input> maxlength не просто так придумали. Он позволит пользователю не вводить данных, больше чем возможно. Но нужно понимать, что он сделан для удобства пользователя, а не для проверки длинны текста. При желании и свободных 5 минутах, ограничение maxlength можно легко обойти. Посему лучше еще раз проверять длину текста на стороне сервера.
Если на вашей странице есть только форма, пусть первое поле сразу получит фокус ввода.
Это очень легко реализуется через
<body onload="document.getElementById('field1').focus()">...<input type="text" name="field1" id="field1" />
6. Тестируйте на пользователях
То, что для вас является абсолютно нормальным и понятным, как дважды два, обычных пользователей может ввести в смятение.
Первый раз я столкнулся с этим, когда сидел у знакомого и предложил зарегистрироваться на моем сайте. Он искал ссылку пару минут, и так ее и не нашел.
7. Сохраняйте данные в случае ошибки
Как бывает обидно, когда ты пишешь большой комментарий на сайт, тратишь на это время, думая «вот сейчас меня оценят, как я хорошо написал!>, нажимаешь кнопку и тебя встречает ошибка «Вы неверно введи код на картинке, вы – робот!».
Возвращаешься назад и видишь пустую форму. :`(
Можно сделать первичную проверку на Javascript, обычно он включен у пользователей, а дальше проверять данные на стороне сервера.
Либо сделать, чтобы в случае неверных данных, пользователю возвращалась та же форма, с комментариями, где он что неправильно заполнил. На PHP это очень просто делается с помощью библиотеки Дмитрия Котерова HTML_FormPersister
Если пользователю приходится писать большие комментарии, то можно сделать автосохранение в cookies (работает в LiveJournal) или на сервер с помощью AJAX (так поступает Google в GMail и Google Notebook)
P.S.
Хороший интерфейс сложно заметить. Пользователи считают, что так и должно быть. А малейшие изъяны видно сразу.
Удобства ваших формам! Жду комментарии и критику.
Ссылки по теме:
), и инородное тело для браузера.