комментарии 25.11.2008 Ольга Иванова @ Дизайн рассылки, Интернет-бизнес

Как оптимизировать вебформы?



Вебформы неотъемлемая и очень важная часть любого сайта. Ведь именно через формы в большинстве случаев происходит оформление заказов, регистрация пользователей, поиск по сайту, подписка на рассылки и т.д.. Поэтому этим элементам необходимо уделять особое внимание и заниматься их оптимизацией.

Представляю вашему вниманию подборку советов по улучшению вебформ:

  • Уберите капчи (captcha) с форм. Captcha, конечно, один из лучших способов защиты от спама, но иногда они блокируют нормальные сообщения особенно в случае, когда у пользователя возникают проблемы с разбором предлагаемой картинки. Причем в последнее время многие разработчики стали значительно усложнять изображение на captcha из-за того, что спам-боты научились их распознавать. В отдельных ситуациях у меня получается разобрать текст с пятой попытки. Таким образом captcha может просто заблокировать необходимую информацию, а немного спама – это еще не конец света… Но если все-таки используете captcha, удостоверьтесь, что она легко читаема.
  • Удалите ненужные поля. Например информация о дате рождения или гендерной принадлежности будет лишней при заполнение формы заказа товара.
  • Проще – значит лучше. Чем проще выглядит форма, тем она понятнее и удобнее для пользователей.
  • Уберите кнопку «Очистить». Кнопка «Очистить», размещенная вслед за кнопкой «Добавить» лишь приводит к случайным нажатиям и стиранию введенной информации. Просто ненужная опция.
  • Удалить кнопку «Отменить». В формах, которые содержат несколько последовательно заполняемых страниц (например, форма оплаты заказа), необходимо убрать кнопку «Отменить». Данная кнопка только помогает пользователям на этапе заполнения данных лишний раз задуматься о целесообразности заполнения и отказаться к примеру от покупки. Это аналогично вопросу «Вы действительно хотите купить это?».
  • Выделяйте обязательные поля. Чем проще человеку заполнить форму – тем лучше. Поэтому упростите пользователям жизнь и выделите обязательные для ввода данных поля. Это обычно делается с помощью * или выделением жирным заголовка поля.
  • Используйте подсказки. Частенько бывает, что пользователи не сразу понимают назначение того или иного поля, поэтому разместите специальные подсказки. Они могут быть как маленьким шрифтом, так и открываться в сплывающих окнах.
  • Показывайте примеры форматирования. Некоторые поля требует специального форматирования. Например: номера телефонов, цена, даты. Разместите рядом с полем ввода пример в каком виде должны быть данные.
  • Делайте формы интернациональными. Иногда встречаются сайты, на которых необходимо ввести свой адрес, но в выпадающем списке отсутствует необходимая страна или город или вообще есть возможность ввести адрес только для граждан США – сразу предлагается список штатов. Если ваш бизнес подразумевает, что клиентами могут быть люди с различных регионов мира, учитывайте это при создании форм.
  • Логическое переключение Tab. Ох как раздражает, когда при заполнении формы после нажатия Tab фокус прыгает не на следующее поле ввода, а куда-то в сторону. Такое случается, когда форматирование выполнено с помощью таблиц и в них нарушен порядок вложения.
  • Проверяйте введенные данные на стороне сервера. Как известно существует 2 способа проверки правильности введенных данных: с помощью javascript и на стороне сервера. Используйте второй способ, так как он более безопасный и у некоторых пользователей javascript бывает просто отключен настройками безопасности.
  • Делайте понятными сообщения об ошибках. Отображая сообщение об неправильности введенных данных пользователем, убедитесь, что сообщение будет предельно понятным пользователю и он сможет быстро исправить данные. К примеру лучше написать «Вы не ввели ваш email», чем «Вы не заполнили все обязательные поля».
  • Отображайте только то, что надо. К примеру, вы определили по ip, что пользователь из России, тогда можно скрыть поля для выбора страны и сразу предложить пользователю ввести город или в выпадающем списке поставить Россию, как выбранный элемент.
  • Логически сортируйте списки. К примеру, если у вас есть выпадающий список стран и вы знаете, что 90% посетителей из России и Украины, то данные страны можно поставить вначале списка. Но в любом случае как минимум должна быть алфавитная сортировка.
  • Ajax проверка данных рулит. Очень удобно когда в процессе заполнения формы сразу выводится сообщение о корректности или некорректности введенной информации. Это позволяет быстро исправить ошибки.
  • Функция «Запомнить меня». Для формы логина желательно размещать checkbox „Помнить меня” для автоматического входа в систему. Кто любит запоминать и постоянно вводить пароли?
  • Устанавливайте фокус. Если загружается страница, содержащая форму, фокус необходимо устанавливать на первое поле формы.
  • Избегайте особых требования к паролю. Получали когда-нибудь сообщение «Пароль должен содержат хотя бы одну цифру и букву и быть не менее 6 символов в длину»? Подобные требования приводят к тому, что пользователю приходится придумывать отдельный пароль для сайта, который он потом может забыть..
  • Правильно называйте кнопки действий. Иногда значительно лучше назвать кнопку «Зарегистрироваться», чем использовать стандартный вариант «Submit» или «ОК».

Что вы думаете по поводу советов? Можете что-то добавить?

Как оптимизировать вебформы?
голосов: 0, средняя оценка: 0.00

Теперь подписаться на свежие статьи и новости стало еще проще:

Статьи через RSS
Статьи на почту:
  • http://myezine.ru/ рядовой веб-мастер

    >Логически сортируйте списки. К примеру, если у вас есть выпадающий список стран и вы знаете, что 90% посетителей из России и Украины, то данные страны можно поставить вначале списка.

    не знаю как остальные, но меня это всегда напрягает, просто по привычке всегда ищешь страну по алфавиту, а не в начале списка

  • http://2uz.info/ Seo 2uz

    Капча нужна, но как у меня — простая, одной галочкой.

    • http://desing-studio.ru Николай

      Не согласен. Капча иногда сильно затрудняет работу. Проще удалить потом спам. Так что я согласен с автором.

      • http://tk-zaderovv.ru/ Павел

        Проще удалить спам, когда посетителей на сайте до 1000, а когда защкаливает за 1000, капча очень неплохо помогает…
        Так что тут палка о двух концах

  • http://everclean.spb.ru Smilingboy

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

  • http://www.repeat-please.ru Netka

    советы очень нужные! ни одного бы не выкинула. особенно вот про пароли и капчу мне близко! сейчас хотела на одном блоге коммент оставить, так и ушла ни с чем. даже пропало желание вообще на этом блоге что-то читать

    • http://tk-zaderovv.ru/ Павел

      Согласен что быывает столько капчи наставят, что аж плакать хочеться, но от простенькой капчи на своем сайте отказываться я не собираюсь…

  • http://malkin.com.ua Станислав Малкин

    Многие советы спорные, некоторые я бы никогда даже не подумал применять — просто вред.

  • http://www.epochta.ru/blog/ Оля Иванова

    Станислав Малкин, какие советы и чем вредны? Обоснуй пожалуйста!

  • http://www.mysoftexplorer.com lupica

    Seo 2uz, согласен с вами, если капчу убрать то загрузка ускориться и если при этом поставить просто чекбокс — это и от ботов спасет, хотя конечно не от всех…

  • http://www.vsuhov.ru/ Василий Сухов

    Капча, особенно рисуночная — это зло! 👿 И вправду порой хочется плюнуть и более не возвращаться на ресурс. И про кнопку Отменить согласен на все 100. Лишняя она. Причем по-умолчанию она должна быть слева, а кнопка Принять — справа. На некотороых формах они переставлены местами, и ты по привычке клацаешь по правой, а выходит что все вылетает фтопку.

  • Костя

    Да есть спорные моменты…
    Например, сначала написано что надо испоотзовать проверку на сервере а чуть ниже что AJAX рулит. Нестыковочка.
    Но в целом все понятно и логично, очень понравилось что вы обошлись без слова юзабилити 😆

  • http://www.epochta.ru/blog/ Ольга Иванова

    Костя, если говорить о технологии Ajax, то она как раз делает проверку на стороне сервера, посылая к нему запросы.

    • http://overbag.ru overbag

      Ajax стопроцентно рулит! с такими сайтами приятно работать!

  • http://puzat.ru/ Пузат

    Вот это подборочка…сразу чувствуется рука профессионала, большое спасибо Ольга, добавил в закладки.

  • http://www.picta.ru Антон Андреевич

    >Уберите капчи (captcha) с форм.

    С этим я не соглашусь. Убрав капчи, вы пропускаете спам ботов, что только усложнит вашу ситуацию.

  • http://www.livestalker.net LiveStalker

    Думаю нормальная разборчивая капча в самый раз! Без неё спам льется рекой.

  • http://puzat.ru/ Пузат

    LiveStalker, полностью с вами соглсен, но считаю что капчи с цифрами уж больно неудобны вплане их сложности, лучше какую-нибудь капчу галочку, как например у меня на сайте.

  • http://abrosait.ru Abra

    Немного спама — это еще не конец света?! ДА его же очень очень много! Было бы не много, не делали бы и капчей

  • http://www.kupit-krohe.ru Новорожденный

    С кнопкой очистить, бесит когда форма очень большая и случайно нажимаешь эту кнопку

  • http://g-sg.net Вадим

    Совет: Проверяйте введенные данные на стороне сервера.
    Совет: Ajax проверка данных рулит.

    Эти два способа противоречат друг другу!

    По поводу каптч: Они нужны, о каптчах и их обходах читайте вскоре на нашем сайте

  • http://borigen.blogspot.com Borigen

    Капчу лучше всего не буквенно-цифровую, а логическую. Но то, что её надо — без сомнений!

  • http://www.bolpochek.ru Дима

    То что нужно !!!!1 😀

  • http://wlad2.ru/ wlad2

    капча, только, типо два + два

  • http://4min.name Виктор Фомин

    Подборка действительно внушительная, но не стоит забывать и о пользователях, если наворотить много всего, то кто же будет вообще комментировать и т.д.

  • http://selection.by Дмитрий

    «Избегайте особых требования к паролю. Получали когда-нибудь сообщение «Пароль должен содержат хотя бы одну цифру и букву и быть не менее 6 символов в длину»?» — ну а как же быть с устойчивостью пароля ко взлому? Если будут регистрировать короткие и лёгкие пароли, аккаунты будет легко увести 😈

  • http://neoblok.ru retorin

    Дмитрий ты прав, тут какое-то другое решение должно быть.
    А вот насчет первого пожелания :) капчу я не ставил в начале на один свой блог, в итоге за месяц Akismet набрал аж 417 спам-комментариев, но когда я его активировал то дышать как-то легче стало, поэтому с первым я частично не согласен.

  • http://themer.ru/ Pseudo-Person

    Согласен со всеми пунктами, но вот капчу, пожалуй, оствить следует.

  • http://bogdanblog.ru Bogdan

    Хм…. как раз таки именно от этого и зависит последующее впечатление от сайта, первое это дизайн, второе-ЮЗАБИЛИТИ!

  • http://ruskatalog.net/ Fedor

    Аш голова кругом от информации.
    Спасибо за информацию.
    Иеперь «переварю ее» и пойду править свой каталог сайтов, а то при беглом просмотре, благодаря Вашей информации, уже пяток «косяков» обнаруженно, а это потеря части поситителей.
    Еще раз благодарствую.

  • http://talne-info.com Тальное

    О в точку заметка. Добавлю, что чекбоксы в выпадающем списке это жесть, хотя и реализуемо.

  • http://artshilov.ru Chief

    Про капчу конечно же немного спорно, но есть и альтернативные капчи. Например вводить названия городов или сложение чисел. А то, что капчи нужно упрощать это очень верно замечено, сам когда хочу что-то писать, но бывает из-за не правильно введенной капчи сбрасывается раннее введенная информация в полях. То это очень напрягает

  • http://visual-com.info/ Олег

    В точку советы.

  • http://razlogenie.ru potor

    Оптимизирование вэб-форм способствует тому, что посетители сайта не убегут с него и у них возникнет желание вернуться туда снова, но естественно только при наличии уникального и интересного контента. А насчет капчи, как уже сказал Chief, и вправду, если её убрать совсем, то спамеры просто начинают атаковать. Боты звереют. В настоящее время на своем сайте я оставил возможность оставлять коментарии только для зарегистрированных пользователей, и спама не стало.

  • http://todayer.ru Todayer

    Насчет капчи абсолютно согласен, спасибо за статью.

  • http://serials-v-dvd.ru Семен

    Полностью согласен, Без каптчи нынчи никуда!

  • http://www.3TAJIOH.ru 3TAJIOH

    Казалось бы мелочи, но приятные =)

  • http://video-portal.pp.ua/ Ivan

    Каптча уже толком не защищает от спама..

  • http://www.trendbender.ru/ trendbender

    Да, думаю скоро можно собрать ваши советы и опубликовать в книгу — все четко и верно. Простота и понятность — основа хорошего интерфейса.

  • http://chipsite.com.ua создание сайта визитки

    «Ajax проверка данных рулит.»

    подпишусь под всеми словами!

    Вообще очень полезная статья!

  • http://freesoftspace.com/ Владимир

    Seo 2uz
    «Капча нужна, но как у меня – простая, одной галочкой.»

    Толку с простой капчи все равно спам-боты ее распознают на ура. Тогда ее лучше вообще не ставить. Или такие как решить простой пример 2+2 — боты еще не научились решать задачки 😉
    А словесные капчи почти все распознают, к тому же быстрее человека. :smile:

    • http://сеосайт-просто.рф Илья

      Ну не знаю а как прога распознает эти самые слова, которые и сам блин пишещь с ошибка особенно у googla, тактакм вообще все сливается жду от вас ответа

      • http://android-shark.ru LockWork

        Ну есть алгоритмы распознавания, которые неплохо работают и являются очень сложными, большинство из них лежит в областях искусственного интеллекта.

        Но чаще используется грубый метод, когда капча не распознается, а просто ищется среди гигантской базы уже распознанных капч, распознанных людьми. Известно, что есть целые биржы по распознаванию капч, на которых работают люди, которые вбивают тысячи капч всего за доллар. Представьте, сколько там распознанных капч.

  • http://www.zarabotokest.ru/ Dezm

    Согласен с тем что капчу нужно ставить, но не сложную, которая легко читается к примеру ответ на контрольный вопрос:, теже 2+2, но лучше придумать что-то оригинальное . 😉

  • http://elibro.ru/ br-caterina

    нужно счетные проги ставить от ботов

  • http://khlivnyuk.com/ Khlivnyuk

    Про «Очистить» и «Отменить» в точку, в своей работе никогда не использую, да и подходить к формам нужно немного изучив НЛП.
    З.Ы. Капчи ужасно бесят

  • http://twicecola.livejournal.com/ Лжец

    Спасибо за хорошие и продуманные советы !
    Капча не нужна, раздражает людей страшно, а многие спам боты действительно ее распознают, если так уж свято верите в ее защиту ставте такую что бы не было двойного трактования знаков.

  • http://kotoblog.com lanqu

    А как это все провернуть без программирования на PHP ?
    А насчет капчей, счас стали появлятся и простые капчи, правда я не знаю насколько они эффективны, но там всего лишь надо вчитаться в вопрос, может даже не придется ничего ставить или писать нигде

  • http://slammweb.net sl4mmer

    По поводу рекламы: Сайты сделанные для людей а не для ПС рекламой никогда не изобилуют.. а ГС на то и ГС.

    Не стоит забывать и о типе сайта. Естественно какой нибудь справочный ресурс или файлообменник или трекер будет вставлять больше рекламы (надо же отрабатывать деньги и время потраченные на создание и поддержку ресурса).

  • http://mobnes.ru Ветер

    Согласен со всеми пунктами.

  • http://www.tosweden.ru/ Tosweden

    Капчу все же надо ставить, а то умучаешься стирать рекламу. Тут только успеешь почтовый ящик завести, а он уже во всех базах…и понеслась.

  • http://excalibur.com.ua excalibur

    Если хотите чего нибудь добиться-ориентируйтесь на тех, кто уже добился-идите по их стопам. Это по Брайану Трейси. Тоесть заходите на сайте Артема Лебедева или Бюро Пирогова и смотрите на какой результат надо ориентироваться.

    • http://butik-chaya.ru/ Чайник

      Абсолютно согласен, желательно легкий аудит лидеров провести и что то немного улучшить, тогда результат будет.

  • http://flameonarium.livejournal.com/ flameon

    Добавить практически нечего! Всё учтено. Спасибо.
    Насчёт логической сортировки всего лишь пару слов — часто приходится просмотреть список из десятка городов России, которые расположены не по алфавиту, а потом со словами «опять моего Нска, третьего по величине после москвы и питера, нет в верху» листать список вниз. Лучше пусть будет список по алфавиту и по умолчанию стоит город по IP. Или все «выделенные» в верх города пусть дублируются в алфавитном списке.
    I.m.h.o.

  • http://russtalants.ru/ Роман

    Статья класс. Особенно понравился пункт про капчу…всех уже так она достала. Да роботов меньше, но люди сидят и портят зрение. Ну иногда встречается нормальная капча, но от неё прок обычно 0 для администратора сайта!

  • Max_KT

    Добавлю — желательно на стороне сервера проверять переменную referer. С формы Вашего сайта пользователь шлет данные или с ее имитаци на другом сайте. Это во многих случаях (хоть многие программы спамеров и могут делать его подставу) предотвратит появление спама на Ваших сайтах и облегчит модерацию коментариев, статей и тому подобного контента.

  • MixFive

    Капчу все же надо ставить, а то умучаешься стирать рекламу. Тут только успеешь почтовый ящик завести, а он уже во всех базах…и понеслась.

  • http://android-shark.ru LockWork

    Совершено согласен насчет капчи, это штука ненужная на хорошей форме. Порой она защищает не от ботов. а от заинтересованных пользователей и портит впечатление о сайте хуже любого спама. Лучше набрать команду толковых модераторов или установить системы, которые чистят спам на постмодерации, но капчи не ставить.

  • http://ruoplata.ru платежи в интернете

    вместо капчи можно использовать галочки с выбором правильного ответа, который периодически меняется местами, и от ботов защита и людям не так раздражительно, а еще лучше использовать нестандартную форму с измененными переменными.

  • Андрей

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

  • http://scoolseo.ru heretic

    Капчи хотя и грузят сервер, но не настолько чтобы их удалять. После удаления закалебешься спам убирать.

  • Naama

    Я бы еще добавил про хождение пользователя по сайту, а именно какие страницы необходимо открывать в новом окне, а какие в этом же. Порой очень сильно раздражает когда на странице где уже что-то заполнено, жмешь на подсказку какую нибудь, она открывается в этом же окне и все заполнения исчезают (
    Что касается капчи, она в 90% все таки нужно, но ввод надписи еле различимой, где без 100 грамм не разберешься, тоже порядком напрягает. Плюсую за новые методы антиробота, вроде выбора нужной картинки («на какой картинке изображен ананас»), или просто поставить галочку в нужном месте («я не робот»)

  • http://gunfighter.ru/ Игрок

    Если капча нормальная — нет проблем. Однако бывает такое, что после написания огромных размеров комментария, вводишь всё верно, но возникает ошибка, которую не обойти. Это обидно.

    Ещё плохо, если после регистрации на са

    • http://gunfighter.ru/ Игрок

      Случайно нажал кнопку — отправить, удалите это сообщение.

  • http://gunfighter.ru/ Игрок

    Если капча нормальная — нет проблем. Однако бывает такое, что после написания огромных размеров комментария, вводишь всё верно, но возникает ошибка, которую не обойти. Это обидно.

  • http://megahertz-rc.ru Радиоуправляемый

    Спс за статью. Добавил к себе в некоторые поля запросов примеры ввода, при нажатие на которых поле очищается=)

  • SEOPATRIOT

    Спасибо большое за подборку советов, а я ведь даже не задумывался на эту тему, ладно занесу пока в закладки, тема нужная пригодиться. Ольга еще раз спасибо.

  • http://butik-chaya.ru/ Чайник

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

  • http://d-ma.name d_ma

    Ajax проверка данных рулит.
    // вот это точно подмечено…

  • http://dar-zdorovie.ru/ Линчжи

    Случайно увидел эту статью — самое главное в формах это защита от атак —
    Как известно если допустить ошибки при составлении кода на ajax java то можно создать xss — если она будет пасивная то у взломщика будет возможность перехватить куки ..

    Так же обязательно :

    Нужны проверки на пхп —

    htmlspecialchars

    stripslashes (чтобы к вам на почту либо в базу данных не попал вредоносный код ) .. . ..

  • http://wo-jo.ru Девушка

    Про капчу конечно же немного спорно, но есть и альтернативные капчи. Например вводить названия городов или сложение чисел. А то, что капчи нужно упрощать это очень верно замечено, сам когда хочу что-то писать, но бывает из-за не правильно введенной капчи сбрасывается раннее введенная информация в полях. То это очень напрягает

  • http://wo-jo.ru Девушка

    Очень много спорных моментов!!
    к примеру сначала написано что надо использовать проверку на сервере а чуть ниже что AJAX рулит. неприкольно…
    В основном все понятно и хорошо сделано, очень понравилось что вы обошлись без слова юзабилити

  • http://recandplay.ru Евгений

    Хотел написать про капчи… а тут все пишут про капчи!!! ))) ну… я тоже думаю, что «не много спама» — это очень мягко сказано, разгребать замучаешься. А вообще сейчас как-то редко попадаю на неудобные формы.

  • http://stroisovet.com/ Роман

    да, капча порой очень раздражает…

  • http://tolko-poleznoe.ru marishka

    Капчу лучше всего не буквенно-цифровую, а логическую. Но то, что её надо – без сомнений!

  • http://блог-обычного-школьника.рф/ Denchick

    Капча то порой и раздражает, но без нее столько спама на сайт попадает…

  • http://www.cream.net.ua Маруся

    Спасибо за статью, очень познавательно! Особенно не задумывалась над кнопкой «Отменить», ведь действительно иногда останавливаешься на пол пути и надоедает доходить до конца анкеты регистрации из-за множества полей данных.

  • http://www.cream.net.ua Маруся

    О, и хочу выразить благодарность Олечка вам! Как нашла ваш сайт так и уходить не хочу, в каждой статье есть что выделить, почитать, обучиться. Спасибо большое вам за такую трудоемкую работу. Я теперь с вами!

    • http://cvetydushi.ru moremanx

      полностью поддерживаю Марусю, спасибо Вам

  • http://siteshow.com.ua/ Сайт-шоу

    хорошая статья, спасибо Вам

  • http://school111.ru baturin

    Приходиться самому искать лучшее, отлично, когда есть практические советы и хорошие помощники. Побольше таких статьей. Четко и грамотно все описано и показано.

  • http://school111.ru baturin

    Предотвратить действия спамеров — дело не очень простое.

  • http://vk-hack.ucoz.ru/ артём

    да капча порой раздражает

  • http://flyingwheels.ru/ галина

    Если сложности с каптчей — просто оставляю сайт. Раздражает сильно…

  • http://glozis.com/ Glozis

    Я когда-то получила один хороший совет, он касается всех сфер, отношения к себе и уважения к окружающим себя людям, юзабилити и как следствие высокая конверсия сайта в том числе. Если уж взялись за дело, доведите до ума и сделайте так, чтобы в первую очередь было удобно пользоваться вам самим, ведь любому адекватному и уравновешенному человеку выест глаза и доставит дискомфорт, к примеру, ярко-красная подложка с кислотного цвета текстом и прыгающим кеглем….правил действительно много…ведь все хочется довести до идеала, но в первую очередь избегайте таких непростительных ошибок и берегите нервы ваших потенциальных покупателей.