Блог студии Made
Заметки по делу rss
26 марта 2009 года в рубриках «Интерфейс» и «Так делать нельзя»

Как делать нельзя: проверка формы на сайте и блокирование кнопок

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

Например, нельзя блокировать кнопку (делать ее disabled), чтобы предотвратить отправку неправильно заполненной формы. Даже если вы совсем недавно научились отключать кнопочки. Даже если так делает ваш кумир. Это — порочная практика, подлежащая искоренению. И вот почему.

С кем мы имеем дело

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

Например, Мария Ивановна, бухгалтер пока еще не разорившейся фирмы. На компьютере она работает с бухгалтерской программой, справочниками по законодательству, «Вордом», «Экселем» и пасьянсом-косынкою.

«Знак рубля» для нее — непонятная закорюка, означающая какую-то иностранную валюту с неизвестным курсом. Она знать не знает про Apple или Google.

У нее нет «Айпода», уютной жежешечки или аккаута на «Твиттере».
Зато есть деньги и желание купить, скажем, несколько баночек всяких масок, кремов и лосьонов. С деньгами и готовностью их потратить Мария Ивановна попала на сайт, где выбрала все, что хотела и жмет кнопку «отправить заказ».

Обыкновенная история

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

В одном из этих полей Мария Ивановна допустила опечатку. Мы не знаем, в каком именно. То ли в электронной почте вместо точки попала по запятой, то ли пароли у нее не совпали, то ли вовсе пропустила одно из обязательных полей. Мы этого не знаем. И пользователь тоже.

Закончив немного нудную процедуру заполнения анкеты, Мария Ивановна готова нажать на самую важную кнопку. Ее не смущает, что кнопочка выглядит какой-то бледной. Ей также неизвестно, что «продвинутые разработчики» отключают кнопку отправки, если не заполнены какие-то из обязательных полей.

Мария Ивановна щелкает кнопкой мыши. Никакой реакции. После трех или четырех безответных щелчков ее осеняет: «Наверное, тут что-то зависло или сломалось, такое у меня в бухгалтерской программе часто случается». Мария Ивановна уходит на соседний сайт. Или возвращается к табличке в «Экселе». Или собирает вещи и идет домой, потому что рабочий день закончился, а она и так полчаса потратила на то, чтобы набрать товары, заполнить форму и укликать мышь до смерти.

Все потому, что когда-то разработчик сайта решил сделать «как на том сайте» и откопал где-то пример скрипта.

Как правильно?

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

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

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

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

Но не стоит просто «дизаблить» кнопку без каких-либо дополнительных сообщений. Блокировка кнопки годится для предотвращения двойной отправки.

©

33 комментария

  1. 26 марта 2009 года в 22:58

    Tits пишет:

    Я же ввел mail? :
    http://www.pichost.ru/show.php/109039_tits.gif.html

    P.S. боты ссылку “(почему спамить нас бессмысленно)” не читают :)

  2. 26 марта 2009 года в 23:08
    Алексей Новиков

    Алексей Новиков пишет:

    Не знал, что в email допустим знак равенства. Я таких адресов не видел, впрочем, уточню.

    Ссылка — не для ботов. Она для десятицентовых пионеров, которые вручную спамят, набрав заказов на “биржах постинга”

  3. 26 марта 2009 года в 23:20

    Александр комментирует:

    в e-mail допускаются дефис и точка

  4. 26 марта 2009 года в 23:36

    Tits комментирует:

    Алексей Новиков,
    В e-mail’e не может быть знака “=”. Это знаем мы. Но Мария Ивановна может перепутать, и написать “=” его вместо “-”, подзабыв адрес.
    Или перепутать латинские буквы с русскими.
    Форма должна предупреждать о том, что введены неверные символы. Причем происходить это должно при вводе, а не после него (onkeypress + preventDefault()).

  5. 26 марта 2009 года в 23:50
    Алексей Новиков

    Алексей Новиков пишет:

    Разумеется, данная форма не идеальна, я честно об этом предупредил страдальцев-перфекционистов :-)

  6. 27 марта 2009 года в 00:53

    Denai отвечает:

    Я считаю что надо ещё подсвечивать красным(бледным) те поля в которых ошибки и писать про ошибку непосредственно около них (а данном случае удобно слева)

  7. 27 марта 2009 года в 01:01

    qwer отвечает:

    У большинства сайтов проблема не с кнопкой отправки, а с вагоном бессмысленных вопросов. Вроде вводы два раза пароля, без которого можно вообще обойтись или “электропочты” в данным блоге (ну зачем она вам?) Нарушение принципа KISS раздражает куда больше чем любые кнопки.

  8. 27 марта 2009 года в 01:01
    Алексей Новиков

    Алексей Новиков пишет:

    Denai, в интернет-магазинах так и делаем.

    Qwer, электронная почта нужна, чтобы я мог лично написать комментатору. Или чтобы комментатор мог подписаться на обновления дискуссии.

  9. 27 марта 2009 года в 01:41

    qwer пишет:

    Оба случая под “обязательные” не попадают, строго говоря.
    С проверкой ввода тоже не все гладко. Например, половина проверяльщиков не знает, что адрес может содержать точку, а вторая половина, видимо, не понимают, что abc@aaa.com вместо aac@aaa.com, точно так же неверный адрес и в большинстве случаев это никак не проверяется. Бывает, что просят ввести емайл два раза, но большинство просто скопирует из предыдущего поля. А уж что начнется когда введут кириллические домены и представить страшно. Это я не к тому, что надо дизаблить кнопку, а к тому что задача не тем боком поставлена, поэтому как ее не решай сильно лучше не будет.

  10. 27 марта 2009 года в 01:47
    Алексей Новиков

    Алексей Новиков отвечает:

    как ее не решай сильно лучше не будет

    Не потерянные покупатели — сильно лучше или не сильно?

  11. 27 марта 2009 года в 01:58

    qwer пишет:

    У вас есть точные данные о том, сколько человек ушли потому что кнопка была задизейблена или это теория? Куча народу уходит с сайта магазина только потому, что там надо регистрироваться прежде чем там покажут сколько будет стоить отправка. Я сам с таких уходил неоднократно. Какая там была кнопка я даже не смотрел. Такие потери считаются или нет? Я же сказал не о конкретном решении, а о задаче. В статье рассматривается как минимизировать вред от ошибки, а надо бы рассматривать тему “как пользователю избежать ошибок.” тогда и проблемы кнопок не будет. И половина ответа тут не дизаблить или нет кнопку, а не задавать вопросов где можно ошибиться или задавать их как можно меньше и как можно реже.

  12. 27 марта 2009 года в 02:05
    Алексей Новиков

    Алексей Новиков пишет:

    После изменений клиент, которого я консультировал, стал получать на 1-2 заказа в сутки больше. Не знаю, точные ли это данные, из-за дизейбла ли они бросали корзины. Факт есть, этого достаточно в данном случае.

    как ее не решай сильно лучше не будет

    Это тема целой книги. И люди склонны делать ошибки, избавиться от всех ошибок невозможно. Следовательно, нужно уменьшить негативные последствия ошибок.

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

  13. 27 марта 2009 года в 11:10

    Gwynplaine пишет:

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

  14. 27 марта 2009 года в 15:20

    red5 комментирует:

    Нормальная статья, а вой на хабре, како-то неадекватный. Сам давно так делал, и искренне не мог понять, почему все так не выводят сообщения об ошибках ввода пользователя. Потом, почитал http://www.joelonsoftware.com, а потом у Вас встретил. Обидно, что не все ценят пользователей, как это делаете вы. Всего хорошего.

  15. 27 марта 2009 года в 15:33

    Aa комментирует:

    “Электропочты” не существует. Вы говорите, что нельзя делать как ваш кумир.. Что ж, вот наглядный пример двойного стандарта.

  16. 27 марта 2009 года в 16:47

    Roman Dots отвечает:

    Попытался отправить комментарий — заполнил все поля. После неудачной аутентификации по OpenID произошел редирект 404-ую: http://blog.studiomade.ru/wp-comments-post.php

  17. 27 марта 2009 года в 16:53
    Алексей Новиков

    Алексей Новиков комментирует:

    Aa, “электропочта” — это стёб ;-)

    Roman Dots, Вам повезло, мы как раз пытаемся подключить OpenID, соответственно, что-то может не работать. Сейчас мы его отключим, чтобы не искушать.

  18. 27 марта 2009 года в 18:30

    123 пишет:

    А при проверке формы почему бы не добавить focus() на первое неправильное поле

  19. 27 марта 2009 года в 18:42

    Tits пишет:

    >А при проверке формы почему бы не добавить focus() на первое неправильное поле

    Фокусы — отвратительная вещь. Вернее, это хорошая штука, но зачастую её используют так, что она становится отвратительной. Как пример — повсюду используемые фокусы в винде: вставил фотик в usb, а пока он инициализируется, листаешь какой-нибудь сайт. Кликаешь по кнопке на сайте, но в этот момент открывается диалоговое окно фотоаппарата с фокусом на кнопке и зачитывает твой клик. А может быть еще печальней — когда что-то удаляешь в спешке и делаешь дело параллельно.
    Пользователь сам должен решать, где должен находится его курсор и текстовый указатель.

  20. 27 марта 2009 года в 20:25

    Dimka отвечает:

    Отличное решение

  21. 1 апреля 2009 года в 11:10

    Александр Борисов комментирует:

    Я горжусь своим решением для сайта «Тверьстроймаша»

  22. 2 апреля 2009 года в 18:00

    Наталья пишет:

    Спасибо за статью. Пользователя действительно надо ограничивать как можно меньше и “вести” по сайту.

    Знак = (равно) может быть в адресе электронной почте. И даже + (плюс), ” (двойная ковычка), пробел и абсолютно дикие ^ # % &.
    Только сегодня изучала стандарт RFC 2822.

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

  23. 24 апреля 2009 года в 18:01

    пке4 пишет:

    56нр65

  24. 20 мая 2009 года в 03:46

    hzxg комментирует:

    AJHFAKLDJF

  25. 26 июня 2009 года в 05:09

    chess комментирует:

    тестируем проверку e-mail

  26. 28 июля 2009 года в 15:57

    Mester пишет:

    Есть ещё такая вещь как прогресс - и выбор уже за тем - поддерживать ли прогресс или оставаться с консерваторами. Если деньги настолько важнее - то консервы.

    А в молодости не хочется уходить от инноваций и не важно, что уйдут клиенты.

    То же самое про поддержку IE6.

  27. 7 августа 2009 года в 22:32

    \'TIT пишет:

    Ну вот пытаюсь оставить каммент, но что вы подразумеваете под полем “Сайт” — остается загадкой.

  28. 10 сентября 2009 года в 01:16

    Melana комментирует:

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

  29. 3 ноября 2009 года в 19:18

    Аркадий комментирует:

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

  30. 8 ноября 2009 года в 21:56

    Алекс отвечает:

    Похоже, что сайт http://parasite-eliminator.ru/умер :)

  31. 10 ноября 2009 года в 13:09

    Дмитрий комментирует:

    Мария Ивановна, говорите! Мне закостенелому гику долго не было понятно почему Яндекс(!!!) отключил кнопку “Отправить” в своей форме для вебмастеров. Оказывается надо было ввести капчу перед отправкой. Бился с проблемой несколько дней, даже разместил пост с проблемой на форуме. Где это видано: вначале капчу введи, а потом уж кнопка заработает.

  32. 7 декабря 2009 года в 17:02

    смчсм комментирует:

    /me набирал в полях произвольный набор символов

  33. 17 декабря 2009 года в 21:39

    Сергей пишет:

    А у меня на странице сайта http://www.okna-pvh.by/zamer.htm наверно тоже неправильно сделано?

Вам слово