Как оптимизировать вебформы?
Вебформы неотъемлемая и очень важная часть любого сайта. Ведь именно через формы в большинстве случаев происходит оформление заказов, регистрация пользователей, поиск по сайту, подписка на рассылки и т.д.. Поэтому этим элементам необходимо уделять особое внимание и заниматься их оптимизацией.
Представляю вашему вниманию подборку советов по улучшению вебформ:
- Уберите капчи (captcha) с форм. Captcha, конечно, один из лучших способов защиты от спама, но иногда они блокируют нормальные сообщения особенно в случае, когда у пользователя возникают проблемы с разбором предлагаемой картинки. Причем в последнее время многие разработчики стали значительно усложнять изображение на captcha из-за того, что спам-боты научились их распознавать. В отдельных ситуациях у меня получается разобрать текст с пятой попытки. Таким образом captcha может просто заблокировать необходимую информацию, а немного спама – это еще не конец света… Но если все-таки используете captcha, удостоверьтесь, что она легко читаема.
- Удалите ненужные поля. Например информация о дате рождения или гендерной принадлежности будет лишней при заполнение формы заказа товара.
- Проще – значит лучше. Чем проще выглядит форма, тем она понятнее и удобнее для пользователей.
- Уберите кнопку «Очистить». Кнопка «Очистить», размещенная вслед за кнопкой «Добавить» лишь приводит к случайным нажатиям и стиранию введенной информации. Просто ненужная опция.
- Удалить кнопку «Отменить». В формах, которые содержат несколько последовательно заполняемых страниц (например, форма оплаты заказа), необходимо убрать кнопку «Отменить». Данная кнопка только помогает пользователям на этапе заполнения данных лишний раз задуматься о целесообразности заполнения и отказаться к примеру от покупки. Это аналогично вопросу «Вы действительно хотите купить это?».
- Выделяйте обязательные поля. Чем проще человеку заполнить форму – тем лучше. Поэтому упростите пользователям жизнь и выделите обязательные для ввода данных поля. Это обычно делается с помощью * или выделением жирным заголовка поля.
- Используйте подсказки. Частенько бывает, что пользователи не сразу понимают назначение того или иного поля, поэтому разместите специальные подсказки. Они могут быть как маленьким шрифтом, так и открываться в сплывающих окнах.
- Показывайте примеры форматирования. Некоторые поля требует специального форматирования. Например: номера телефонов, цена, даты. Разместите рядом с полем ввода пример в каком виде должны быть данные.
- Делайте формы интернациональными. Иногда встречаются сайты, на которых необходимо ввести свой адрес, но в выпадающем списке отсутствует необходимая страна или город или вообще есть возможность ввести адрес только для граждан США – сразу предлагается список штатов. Если ваш бизнес подразумевает, что клиентами могут быть люди с различных регионов мира, учитывайте это при создании форм.
- Логическое переключение Tab. Ох как раздражает, когда при заполнении формы после нажатия Tab фокус прыгает не на следующее поле ввода, а куда-то в сторону. Такое случается, когда форматирование выполнено с помощью таблиц и в них нарушен порядок вложения.
- Проверяйте введенные данные на стороне сервера. Как известно существует 2 способа проверки правильности введенных данных: с помощью javascript и на стороне сервера. Используйте второй способ, так как он более безопасный и у некоторых пользователей javascript бывает просто отключен настройками безопасности.
- Делайте понятными сообщения об ошибках. Отображая сообщение об неправильности введенных данных пользователем, убедитесь, что сообщение будет предельно понятным пользователю и он сможет быстро исправить данные. К примеру лучше написать «Вы не ввели ваш email», чем «Вы не заполнили все обязательные поля».
- Отображайте только то, что надо. К примеру, вы определили по ip, что пользователь из России, тогда можно скрыть поля для выбора страны и сразу предложить пользователю ввести город или в выпадающем списке поставить Россию, как выбранный элемент.
- Логически сортируйте списки. К примеру, если у вас есть выпадающий список стран и вы знаете, что 90% посетителей из России и Украины, то данные страны можно поставить вначале списка. Но в любом случае как минимум должна быть алфавитная сортировка.
- Ajax проверка данных рулит. Очень удобно когда в процессе заполнения формы сразу выводится сообщение о корректности или некорректности введенной информации. Это позволяет быстро исправить ошибки.
- Функция «Запомнить меня». Для формы логина желательно размещать checkbox „Помнить меня” для автоматического входа в систему. Кто любит запоминать и постоянно вводить пароли?
- Устанавливайте фокус. Если загружается страница, содержащая форму, фокус необходимо устанавливать на первое поле формы.
- Избегайте особых требования к паролю. Получали когда-нибудь сообщение «Пароль должен содержат хотя бы одну цифру и букву и быть не менее 6 символов в длину»? Подобные требования приводят к тому, что пользователю приходится придумывать отдельный пароль для сайта, который он потом может забыть..
- Правильно называйте кнопки действий. Иногда значительно лучше назвать кнопку «Зарегистрироваться», чем использовать стандартный вариант «Submit» или «ОК».
Что вы думаете по поводу советов? Можете что-то добавить?
(+3 бал, 3 голосов)
>Логически сортируйте списки. К примеру, если у вас есть выпадающий список стран и вы знаете, что 90% посетителей из России и Украины, то данные страны можно поставить вначале списка.
не знаю как остальные, но меня это всегда напрягает, просто по привычке всегда ищешь страну по алфавиту, а не в начале списка
[...] уделять особое внимание и заниматься их оптимизацией. Далее… (Еще не оценили) Загрузка [...]
Капча нужна, но как у меня – простая, одной галочкой.
Не согласен. Капча иногда сильно затрудняет работу. Проще удалить потом спам. Так что я согласен с автором.
Советы дельные, думаю, мне это очень пригодится. Касаемо логической сортировки, удобно, когда наиболее часто используемые значения форм, стоящие в начала, а не по алфавиту, выделены жирным.
советы очень нужные! ни одного бы не выкинула. особенно вот про пароли и капчу мне близко! сейчас хотела на одном блоге коммент оставить, так и ушла ни с чем. даже пропало желание вообще на этом блоге что-то читать
Многие советы спорные, некоторые я бы никогда даже не подумал применять – просто вред.
Станислав Малкин, какие советы и чем вредны? Обоснуй пожалуйста!
Seo 2uz, согласен с вами, если капчу убрать то загрузка ускориться и если при этом поставить просто чекбокс – это и от ботов спасет, хотя конечно не от всех…
Капча, особенно рисуночная – это зло!
И вправду порой хочется плюнуть и более не возвращаться на ресурс. И про кнопку Отменить согласен на все 100. Лишняя она. Причем по-умолчанию она должна быть слева, а кнопка Принять – справа. На некотороых формах они переставлены местами, и ты по привычке клацаешь по правой, а выходит что все вылетает фтопку.
Да есть спорные моменты…
Например, сначала написано что надо испоотзовать проверку на сервере а чуть ниже что AJAX рулит. Нестыковочка.
Но в целом все понятно и логично, очень понравилось что вы обошлись без слова юзабилити
Костя, если говорить о технологии Ajax, то она как раз делает проверку на стороне сервера, посылая к нему запросы.
Ajax стопроцентно рулит! с такими сайтами приятно работать!
Вот это подборочка…сразу чувствуется рука профессионала, большое спасибо Ольга, добавил в закладки.
>Уберите капчи (captcha) с форм.
С этим я не соглашусь. Убрав капчи, вы пропускаете спам ботов, что только усложнит вашу ситуацию.
[...] Вебформы неотъемлемая и очень важная часть любого сайта. Ведь именно через формы в большинстве случаев происходит оформление заказов, регистрация пользователей, поиск по сайту, подписка на рассылки и т.д.. Поэтому этим элементам необходимо уделять особое внимание и заниматься их оптимизацией. Представляю вашему вниманию подборку советов по улучшению вебформ Дальше [...]
Думаю нормальная разборчивая капча в самый раз! Без неё спам льется рекой.
LiveStalker, полностью с вами соглсен, но считаю что капчи с цифрами уж больно неудобны вплане их сложности, лучше какую-нибудь капчу галочку, как например у меня на сайте.
Немного спама – это еще не конец света?! ДА его же очень очень много! Было бы не много, не делали бы и капчей
С кнопкой очистить, бесит когда форма очень большая и случайно нажимаешь эту кнопку
Совет: Проверяйте введенные данные на стороне сервера.
Совет: Ajax проверка данных рулит.
Эти два способа противоречат друг другу!
По поводу каптч: Они нужны, о каптчах и их обходах читайте вскоре на нашем сайте
Капчу лучше всего не буквенно-цифровую, а логическую. Но то, что её надо – без сомнений!
То что нужно !!!!1
капча, только, типо два + два
Подборка действительно внушительная, но не стоит забывать и о пользователях, если наворотить много всего, то кто же будет вообще комментировать и т.д.
«Избегайте особых требования к паролю. Получали когда-нибудь сообщение «Пароль должен содержат хотя бы одну цифру и букву и быть не менее 6 символов в длину»?» – ну а как же быть с устойчивостью пароля ко взлому? Если будут регистрировать короткие и лёгкие пароли, аккаунты будет легко увести
Дмитрий ты прав, тут какое-то другое решение должно быть.
капчу я не ставил в начале на один свой блог, в итоге за месяц Akismet набрал аж 417 спам-комментариев, но когда я его активировал то дышать как-то легче стало, поэтому с первым я частично не согласен.
А вот насчет первого пожелания
Согласен со всеми пунктами, но вот капчу, пожалуй, оствить следует.
Хм…. как раз таки именно от этого и зависит последующее впечатление от сайта, первое это дизайн, второе-ЮЗАБИЛИТИ!
Аш голова кругом от информации.
Спасибо за информацию.
Иеперь «переварю ее» и пойду править свой каталог сайтов, а то при беглом просмотре, благодаря Вашей информации, уже пяток «косяков» обнаруженно, а это потеря части поситителей.
Еще раз благодарствую.
О в точку заметка. Добавлю, что чекбоксы в выпадающем списке это жесть, хотя и реализуемо.
Про капчу конечно же немного спорно, но есть и альтернативные капчи. Например вводить названия городов или сложение чисел. А то, что капчи нужно упрощать это очень верно замечено, сам когда хочу что-то писать, но бывает из-за не правильно введенной капчи сбрасывается раннее введенная информация в полях. То это очень напрягает
В точку советы.
Оптимизирование вэб-форм способствует тому, что посетители сайта не убегут с него и у них возникнет желание вернуться туда снова, но естественно только при наличии уникального и интересного контента. А насчет капчи, как уже сказал Chief, и вправду, если её убрать совсем, то спамеры просто начинают атаковать. Боты звереют. В настоящее время на своем сайте я оставил возможность оставлять коментарии только для зарегистрированных пользователей, и спама не стало.
Насчет капчи абсолютно согласен, спасибо за статью.
Полностью согласен, Без каптчи нынчи никуда!
Казалось бы мелочи, но приятные =)
Каптча уже толком не защищает от спама..
Да, думаю скоро можно собрать ваши советы и опубликовать в книгу – все четко и верно. Простота и понятность – основа хорошего интерфейса.
«Ajax проверка данных рулит.»
подпишусь под всеми словами!
Вообще очень полезная статья!
Seo 2uz
«Капча нужна, но как у меня – простая, одной галочкой.»
Толку с простой капчи все равно спам-боты ее распознают на ура. Тогда ее лучше вообще не ставить. Или такие как решить простой пример 2+2 – боты еще не научились решать задачки
А словесные капчи почти все распознают, к тому же быстрее человека.
Ну не знаю а как прога распознает эти самые слова, которые и сам блин пишещь с ошибка особенно у googla, тактакм вообще все сливается жду от вас ответа
Ну есть алгоритмы распознавания, которые неплохо работают и являются очень сложными, большинство из них лежит в областях искусственного интеллекта.
Но чаще используется грубый метод, когда капча не распознается, а просто ищется среди гигантской базы уже распознанных капч, распознанных людьми. Известно, что есть целые биржы по распознаванию капч, на которых работают люди, которые вбивают тысячи капч всего за доллар. Представьте, сколько там распознанных капч.
Согласен с тем что капчу нужно ставить, но не сложную, которая легко читается к примеру ответ на контрольный вопрос:, теже 2+2, но лучше придумать что-то оригинальное .
нужно счетные проги ставить от ботов
Про «Очистить» и «Отменить» в точку, в своей работе никогда не использую, да и подходить к формам нужно немного изучив НЛП.
З.Ы. Капчи ужасно бесят
Спасибо за хорошие и продуманные советы !
Капча не нужна, раздражает людей страшно, а многие спам боты действительно ее распознают, если так уж свято верите в ее защиту ставте такую что бы не было двойного трактования знаков.
А как это все провернуть без программирования на PHP ?
А насчет капчей, счас стали появлятся и простые капчи, правда я не знаю насколько они эффективны, но там всего лишь надо вчитаться в вопрос, может даже не придется ничего ставить или писать нигде
По поводу рекламы: Сайты сделанные для людей а не для ПС рекламой никогда не изобилуют.. а ГС на то и ГС.
Не стоит забывать и о типе сайта. Естественно какой нибудь справочный ресурс или файлообменник или трекер будет вставлять больше рекламы (надо же отрабатывать деньги и время потраченные на создание и поддержку ресурса).
Согласен со всеми пунктами.
Капчу все же надо ставить, а то умучаешься стирать рекламу. Тут только успеешь почтовый ящик завести, а он уже во всех базах…и понеслась.
Если хотите чего нибудь добиться-ориентируйтесь на тех, кто уже добился-идите по их стопам. Это по Брайану Трейси. Тоесть заходите на сайте Артема Лебедева или Бюро Пирогова и смотрите на какой результат надо ориентироваться.
Абсолютно согласен, желательно легкий аудит лидеров провести и что то немного улучшить, тогда результат будет.
Добавить практически нечего! Всё учтено. Спасибо.
Насчёт логической сортировки всего лишь пару слов – часто приходится просмотреть список из десятка городов России, которые расположены не по алфавиту, а потом со словами «опять моего Нска, третьего по величине после москвы и питера, нет в верху» листать список вниз. Лучше пусть будет список по алфавиту и по умолчанию стоит город по IP. Или все «выделенные» в верх города пусть дублируются в алфавитном списке.
I.m.h.o.
Статья класс. Особенно понравился пункт про капчу…всех уже так она достала. Да роботов меньше, но люди сидят и портят зрение. Ну иногда встречается нормальная капча, но от неё прок обычно 0 для администратора сайта!
Добавлю – желательно на стороне сервера проверять переменную referer. С формы Вашего сайта пользователь шлет данные или с ее имитаци на другом сайте. Это во многих случаях (хоть многие программы спамеров и могут делать его подставу) предотвратит появление спама на Ваших сайтах и облегчит модерацию коментариев, статей и тому подобного контента.
Капчу все же надо ставить, а то умучаешься стирать рекламу. Тут только успеешь почтовый ящик завести, а он уже во всех базах…и понеслась.
Совершено согласен насчет капчи, это штука ненужная на хорошей форме. Порой она защищает не от ботов. а от заинтересованных пользователей и портит впечатление о сайте хуже любого спама. Лучше набрать команду толковых модераторов или установить системы, которые чистят спам на постмодерации, но капчи не ставить.
вместо капчи можно использовать галочки с выбором правильного ответа, который периодически меняется местами, и от ботов защита и людям не так раздражительно, а еще лучше использовать нестандартную форму с измененными переменными.
Насчет капчей согласен. Зачастую крайне проблематично понять, что там изображено. Но отказаться от них в некоторых случаях невозможно. Например, когда трафик слишком велик, чтобы адекватно и оперативно его модерировать.
Капчи хотя и грузят сервер, но не настолько чтобы их удалять. После удаления закалебешься спам убирать.
Я бы еще добавил про хождение пользователя по сайту, а именно какие страницы необходимо открывать в новом окне, а какие в этом же. Порой очень сильно раздражает когда на странице где уже что-то заполнено, жмешь на подсказку какую нибудь, она открывается в этом же окне и все заполнения исчезают (
Что касается капчи, она в 90% все таки нужно, но ввод надписи еле различимой, где без 100 грамм не разберешься, тоже порядком напрягает. Плюсую за новые методы антиробота, вроде выбора нужной картинки («на какой картинке изображен ананас»), или просто поставить галочку в нужном месте («я не робот»)
Если капча нормальная – нет проблем. Однако бывает такое, что после написания огромных размеров комментария, вводишь всё верно, но возникает ошибка, которую не обойти. Это обидно.
Ещё плохо, если после регистрации на са
Случайно нажал кнопку – отправить, удалите это сообщение.
Если капча нормальная – нет проблем. Однако бывает такое, что после написания огромных размеров комментария, вводишь всё верно, но возникает ошибка, которую не обойти. Это обидно.
Спс за статью. Добавил к себе в некоторые поля запросов примеры ввода, при нажатие на которых поле очищается=)
Спасибо большое за подборку советов, а я ведь даже не задумывался на эту тему, ладно занесу пока в закладки, тема нужная пригодиться. Ольга еще раз спасибо.
Согласен почти со всеми мыслями, что касается каптчи, сейчас есть варианты типа «сколько будет два плюс два» или «из предложенных фигур выберите квадрат», они простые для понимания и смогут отсечь часть ботов.
Ajax проверка данных рулит.
// вот это точно подмечено…
Случайно увидел эту статью – самое главное в формах это защита от атак –
Как известно если допустить ошибки при составлении кода на ajax java то можно создать xss – если она будет пасивная то у взломщика будет возможность перехватить куки ..
Так же обязательно :
Нужны проверки на пхп –
htmlspecialchars
stripslashes (чтобы к вам на почту либо в базу данных не попал вредоносный код ) .. . ..
Про капчу конечно же немного спорно, но есть и альтернативные капчи. Например вводить названия городов или сложение чисел. А то, что капчи нужно упрощать это очень верно замечено, сам когда хочу что-то писать, но бывает из-за не правильно введенной капчи сбрасывается раннее введенная информация в полях. То это очень напрягает
Очень много спорных моментов!!
к примеру сначала написано что надо использовать проверку на сервере а чуть ниже что AJAX рулит. неприкольно…
В основном все понятно и хорошо сделано, очень понравилось что вы обошлись без слова юзабилити