Наверное, моя единственная статья про дизайн.
Часто, просматривая сайты, видишь, что разработчики относятся к формам ввода легкомысленно. Многие дизайнеры видят в них только визуальный смысл - чтобы красиво смотрелась, забывая, о том, что это функциональный элемент сайта. Чем удобнее будет сделана форма, тем больше пользователей напишет вам комментариев и зарегистрируется на сайте. Все эти приемы были поняты мною на личном опыте, я сам когда-то совершал такие же ошибки, поэтому решил написать про это.
Несколько примеров, как быстро можно сделать формы удобнее:
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.
Хороший интерфейс сложно заметить. Пользователи считают, что так и должно быть. А малейшие изъяны видно сразу.
Удобства ваших формам! Жду комментарии и критику.
Ссылки по теме:
5 комментариев:
Добавлю от себя - если это касается ввода комментариев, то разработчик должен позаботится о том, чтобы e-mail'ы посетителей скрывались от СПАМ-ботов, к примеру, конвертировали их в графику.
Greignar. E-mail в картинках не сильно юзабелен пользователям. Как по вашему, шифрования через Javascript может быть достаточно, что бы емейл не обработали роботы?
Что значит менее юзабелен? Неужели секретарша при желании не сможет его ввести ручками? К тому же это далеко не капча, искажения практически отсутствуют, меняется только цвет букв и сетки.
Многие ресурсы, таким образом, скрывают e-mail'ы своих пользователей. Скрывать с помощью явы - прошлый век, если спам-боты умудрялись вытаскивать графический код из явы, то без проблем достанут и e-mail'ы.
В моей CMS даже адреса сайтов, что вводятся в специальное поле формы комментариев, преобразуются в графику. Так после этого нововведения, на двух сайтах полностью исчез рукописный СПАМ.
Спасибо за идею, только я не понимаю зачем скрывать адреса сайтов?
Спам робот сможет найти сайт через другие источники, а для поисковиков имхо проще использовать a href="/redirect?http://example.com"
Пишет человек - "Спасибо, очень интересно", а ссылка ведет или на дорвей, или на ресурс XXX, или еще хуже - на эксплоит. Один раз кликнув на такую ссылку и получив страницу мой антивирус начал возмущаться. Так чтоб таких "комментариев" больше не было, все html адреса преобразуются в графику. Что нужно сделать для того, чтобы засветить свой ресурс (для поисковиков) - поставить ссылку. А ссылки, как таковой и нет...
Отправить комментарий