Будучи послушным мужем, я вместе с беременной женой проводил вегетарианство на диване, когда мы смотрели самое расслабляющее шоу в истории телевидения: «Радость живописи», организованное покойным Бобом Россом на PBS. Легкость, с которой он мог сбить пейзажную картину за двадцать минут, сделала это идеальным субботним утренним тарифом для людей, которые никуда не спешат. В каждой картине, если ей не изменяет память, было хотя бы одно счастливое маленькое облачко. Каждую неделю Боб говорил: «Я чувствую, что надвигается маленькое счастливое облако, не так ли?» Мы уверены, что сделали.
Теперь перейдем к суровой реальности Интернета. Думайте о своем сайте как об одной из пейзажных картин Боба. У вас есть отличная схема навигации на переднем плане и множество ценного и хорошо написанного контента на заднем плане. Милая. Но как насчет форм вашего сайта? Являются ли они «счастливыми маленькими формами» или препятствиями, которые отгоняют потенциальных клиентов, потому что они сбивают с толку, навязчивы, длинны и не отвечают?
Выполните следующие 7 шагов, чтобы сделать ваши формы — и ваших пользователей — счастливыми:
1) Доберитесь до сути
Возможно, вы просите слишком много информации. Пользователи неохотно публикуют информацию, особенно если то, что вы запрашиваете, не имеет значения. Например, если у вас есть форма подписки на новостную рассылку, пользователи, как правило, чувствуют себя достаточно комфортно, чтобы указать свой адрес электронной почты, но, возможно, не уличный адрес, возраст и пол. Если вы просите дополнительную информацию, четко укажите, почему вы ее запрашиваете и что вы собираетесь с ней делать.
Не заставляйте пользователей прокручивать страницу до первого поля ввода. Я видел формы, поля ввода которых скрыты под одной или двумя прокручивающими страницами вводного текста. Если вам действительно нужен короткий роман, чтобы помочь посетителю понять форму, рассмотрите возможность размещения ее под всеми полями ввода. Якорная ссылка в верхней части формы может привести посетителя к тексту по мере необходимости.
2) Обеспечить фокусировку поля
Это простое «приятное на ощупь» помещает курсор непосредственно в первое поле ввода ( first_name ) при отображении формы. Используйте событие BODY onLoad , вы можете сохранить посетителей одним щелчком мыши:
<BODY onLoad="document.forms[0].first_name.focus();">
3) Добавить справочную информацию
Конечно, поля, помеченные «Имя» и «Фамилия», не требуют особого введения, но могут быть менее очевидными и более неясными. Кроме того, не мешало бы указать направление в ситуациях, когда форматирование является проблемой. Например, для поля даты вы можете предложить пользователю желаемый формат даты:
<INPUT ... onFocus="window.status='Enter date in MM/DD/YY format'" onBlur="window.status=''">
onBlur onFocus и onBlur в вашем <INPUT> будут отображать и удалять, соответственно, ваши полезные подсказки в строке состояния браузера.
Другой и, вероятно, более заметный способ предоставления справочной информации на уровне поля — это «предварительное заполнение» значения элемента INPUT или TEXTAREA :
<INPUT ... value="- Help info goes here -" onClick="document.forms[0].first_name.value='';">
Когда посетитель щелкает в поле ВВОД, значение по умолчанию исчезает, и посетитель готов к вводу.
4) Используйте таблицы для выравнивания
Другой способ повысить удобство использования формы — выровнять элементы формы в двухколоночной таблице без границ — метки в первом столбце с полями ввода, выборами, флажками и т. Д. Во втором столбце.
5) Размер поля управляющего ввода
Предоставьте визуальные подсказки с точки зрения ожидаемого ответа от пользователей, варьируя ширину полей ввода. Например, для «среднего начального» поля вы бы заменили широкое поле ввода по умолчанию гораздо меньшим, добавив атрибут SIZE:
<INPUT TYPE=TEXT NAME=middleinitial SIZE=1 MAXLENGTH=1>
Добавьте атрибут MAXLENGTH если вы хотите контролировать объем текста, который можно ввести в поле.
Для ROWS (большие многострочные поля ввода) используйте ROWS и COLS для управления размером дисплея:
<TEXTAREA NAME=comments ROWS=3 COLS=40></TEXTAREA>
Обязательно протестируйте эти настройки в разных браузерах. IE и Netscape отображают их по-разному.
6) Предоставить четкое сообщение с подтверждением
Что видит посетитель после отправки формы? Как минимум, вы должны четко подтвердить, что форма была получена — отправьте их на страницу с сообщением о получении на веб-странице. Вы также должны сообщить им, что произойдет дальше — «Ваш ответ будет получен в течение двух рабочих дней» или «Ваш заказ будет обработан в течение 72 часов». Пока вы на нем, обеспечьте четкую и заметную навигацию, чтобы направлять их в другие логические места назначения.
В зависимости от цели формы отправка подтверждения по электронной почте также может быть реальной услугой для отправителя. В своем электронном письме введите подтверждение еще раз вместе с данными, предоставленными посетителем. Например, для формы заказа укажите в электронном письме информацию о продукте, цене и доставке, которую отправил клиент.
7) Вне счастливых маленьких форм
Это бонус за всю работу, которую вы проделали в шагах 1-6 по оптимизации ваших форм. Устали от того же старого взгляда на INPUT и TEXTAREA ? Добавьте немного цвета, измените границы и сходите с ума, применяя таблицу стилей к элементам формы.
<style> input, textarea, select { font-family: Arial, sans serif; font-size: 20pt; color: #ffffff; background-color: #000000; border-width: medium; border-style: ridge; border-color: #00FF00; } </style>
Как веб-профессионал я обычно не рекомендую этот вид дурачества, но если ваш сайт интересный, когда цвет и дурацкие изобилуют, сделайте это. Только не говори самозваному шерифу по юзабилити Якобу Нильсену, что ты получил это от меня. Я никогда не услышу конца этого.
… и пусть счастливые маленькие формы усеивают небо вашего сайта!