19.12.2008 11:18Оптимизация дизайна: формы ввода веб сайта

Перевод статьи How To Optimize Your Site Forms

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

Основы оптимизации веб форм:

• Делайте их покороче: не заставляйте своих потенциальных клиентов вводить кучу данных (важных, но не во всех случаях), чтобы связаться с вами. Требуйте заполнить только самые важные поля (имя, адрес эл. почты, запрос).
• Делайте их попроще: Терпеть не могу, когда меня просят указать свой номер телефона (или дату рождения), например, только в определенном формате.
• Отметьте обязательные поля, но не делайте это с помощью красного цвета (потому что это смотрится, как ошибка). Мне нравится, когда используют жирный шрифт или звездочки.
• Внимательно выбирайте CAPTCHA: не заставляйте посетителей решать математические примеры, чтобы отправить заполненную форму. Сделайте ее простой, можете также использовать креативные или забавные CAPTCHA.

• Кнопки веб-формы:

• • уберите лишние кнопки: с этим можно поспорить, но я плохо себе представляю, зачем могут понадобиться кнопки «Очистить» и «Отмена», если можно просто закрыть окно или вернуться назад. Такие кнопки зачастую раздражают посетителя;
  • пишите на кнопках понятный текст (призывающий к действию): например, на кнопке для отправки сообщения лучше написать «Отправить», а не «Передать».

• Возвращайте пользователя к сохраненной веб-форме: если возвращаете посетителя к веб-форме для исправления некоторых ошибок, то сделайте так, чтобы он вернулся к веб-форме со всеми внесенными им данными (в которой отмечены поля с ошибкой);
• Пишите в простым языком: посетитель должен четко понимать, что и где нужно заполнить, что он упустил (сообщение об ошибке) и т.д.
• Обеспечьте достаточно места для ввода текста: Терпеть не могу, когда не вижу, что я печатаю.
• Не забывайте о подтверждающих сообщениях: посетитель должен четко понимать, что он все сделал правильно. Мне больше всего нравится, когда меня перенаправляют на эту же страницу с четким подтверждающим (или содержащим благодарность) сообщением (без какой-либо промежуточной страницы, которая исчезает быстрее, чем я могу прочесть, что я сделал).

Более продвинутые советы по оптимизации веб-форм:

• Делайте веб-формы на разных языках;
• Обеспечьте возможность перемещения по веб-форме с помощью клавиатуры (переход к следующему полю с помощью табуляции);
• Расположите поля в логическом порядке (иными словами, не заставляйте пользователя указывать свой номер телефона до того, как он укажет свое имя);
• Посмотрите, к чему пользователи уже привыкли: зачастую, чтобы пользователям было проще заполнять вашу веб-форму, достаточно использовать веб-форму, к которой люди уже привыкли (посмотрите контактные веб-формы на других сайтах, улучшите что-то, но не меняйте их коренным образом);
• Соблюдайте логический порядок в списках (например, в выпадающих списках) сделайте так, чтобы самый очевидный пункт стоял выше других: напр., ставьте Россия выше чем Афганистан.

Советы по оптимизации надписей:

• Используйте внешние надписей;
• Лучше поместить надписи над полем ввода;
• Если у вас надписи расположены слева от полей ввода, то, по крайней мере, выровняйте их по правому краю;
• Пользователям немного сложнее читать надписи, выделенные жирным шрифтом.

• Взлом Wordpress с использованием клоакинга по IP-адресам Google
• 43 ошибки веб-дизайна, которых следует избегать (Часть 3 - окончание)
• Заработок на Adult партнерках (Окончание)
• Бесплатные ссылки: ссылки с .gov, .edu, .mil (nofollow и dofollow)
• Как использовать Google Alerts для обнаружения взлома сайта