Pull to refresh

Comments 119

по-моему если делать проверку на стороне пользователя, то нет проблем и подсветить неверно заполненые поля

у меня был случай, когда форма отправлялась на сервер (никаких недоступных кнопок) и рисовалась опять с сообщением об ошибке, но пользователи не замечали его т.к. оно было не достаточно контрастным и писали письма
Вот вот проблема в не disabled, а feedback.
Не корректные фидбэки или их отсутствие могут нарушить логику или сделать «не заполняемой» любую форму…
Может, даже не фидбэке, а в отображении сервисных сообщений => в дизайне интерфейса.
Товарищ barman ведь привел пример: фидбэк есть, а реакции пользователя — нет.

Я думаю, что пользователь не будет против красного шрифта ошибки в неверном поле :)
«Мы не знаем, в каком именно» — почему?
Ваша статья одна бока и бессмысленна, если основной аспект, «данного подхода к формам», реалтайм валидацию — вы, не учитываете в прицепи.
Имелось в виду не «джаваскрипт не знает», а читатель рассказа.

И еще — на стороне клиента — не validation, а assistance. Валидация проводится уже на сервере.
Но если мы знаем то почему мы не обозначим что именно пользователю исправить/дополнить/изменить чтобы он смог удовлетворить свои потребности?
«И еще — на стороне клиента — не validation, а assistance. Валидация проводится уже на сервере. „
То есть один ассистирует другой проверяет, я как то не разделял никогда, но взял на заметку, благодарю.
Речь идет о том, что многие разработчики, насмотревшись на примеры от известных студий, тупо дизаблят кнопку до заполнения полей. И простые, не суперпродвинутые пользователи никак не могут понять, в чем дело.

О том, как можно делать — в полной версии статьи.

Про валидацию. Дело в том, что форма может быть изменена злоумышленником, может быть какая-то ошибка на клиенте. Все данные, приходящие извне, считаются исходно невалидными, «грязными» (tainted). Они должны быть отфильтрованы и валидированы на сервере перед тем, как на их основании будут осуществлены какие-то операции.
А поймет ли марьивановна модное слово «электропочта» подсмотренное у какого-то неизвестного ей модного дизайнера. :)
Ваш вариант вполне хорош. Однако забудем, что у нас большой дисплей, сделаем resize до 1024x768 или даже 1280x800. Видите куда уползает ваше сообщение об ошибке? Теперь оно не в локусе внимания (кажется это так называется :)). Полагаю, сообщение об ошибке лучше выводить над кнопкой (в момент нажатия все внимание пользователя приковано к ней родимой) и кнопку все таки делать disabled (правда уже после нажатия, когда скрипт обнаружил ошибку). В этом случае пользователь видит, что система как-то отреагировала на его ошибку и начинает искать решение проблемы, а не думает что система зависла, как у него в бухгалтерской программе.

В вашем же случае пользователь может не заметить сообщения об ошибке или подсветку полей и будет продолжать кликать по кнопке ожидая реакции системы.
самое лучшее тестирование — это когда просишь соседку тетю Любу зайти на сайт. просто зайти. а сам стоишь и смотришь на ее действия. на реакцию. потом можно и попросить прокомментировать что ей непонятно и тд. и тп.
Далеко не для любого сайта, тот же хабр с его принципами и сообществом бывает непонятен даже обывателям которые работают в IT но при этом смотрят на его со стороны. Так что если ЦА ресурса Никак не включает «ту самую соседку» то ее тестирование можно считать зря потраченным временем.
спасибо за уточнение. именно об этом я и говорю. прислушиваться к мнению тех на кого рассчитан этот продукт.
Вы пробовали когда-нибудь такое делать?
Я тут недавно попробовал и охе… ел. Дамы за 50 могут видеть этот мир совсем по-другому. :(

Это лишний раз доказывает, что иногда лучше не изобретать велосипед, а сделать все как можно более простым, привычным и доступным.
А ведь так хочется придумывать, улучшать, идти вперед (особенно когда понимаешь, что некоторые вещи сделаны достаточно бестолково). ;)
Заголовок не совсем верный. Я думал вообще нельзя дизаблить — я например если перед отправкой что-то проверяю на клиенте — дизаблю до отправки и если окей — отправляю, если нет — сообщаю об ошибке и отдизабливаю. То же самое если отправка будет проходить через аякс, что бы не сильно разбирающиаяся в веб-технлогиях Мария Семеновна два раза не нажала на кнопку отправить.
Кстати двойное нажатие толком не отслеживается даже на Хабре, наблюдал недавно топик с лентой одинаковых комментов, как выразился автор — «клавиатуру чистил»…
мы стараемся отслеживать. Уж проще на клиенте, чем на сервере.
Специально для огульных критиков, печатающих быстрее, чем думающих (и оттого допускающих кучу ошибок) добавил ссылку на полный вариант заметки.
Извините, конечно, но этого «Как правильно?» в вашей статье не было изначально к этому мои и комментарии.
В связи с политикой «Хабра» я больше не выкладываю тут полные варианты статей (подробнее — в профиле). Потому вот и так :)
Понял, отстал :) Дык, в целом мы сходимся во мнении по проблеме обозначенной в статье.
О, как я и ожидал, подтянулись дрочеры, которые, увидев ссылку, тут же стали уводить статью в минуса.
Ну дык куда уж без них, меня тоже от чего-то задело в карму как я начал здесь комментить :)
UFO just landed and posted this here
Между прочим, написано по мотивам переделки интерфейса одного из магазинов. То, что нам кажется «клиникой», для обычного человека, не идиота, не тупицы, а вполне успешного в своей области, может оказаться непонятным.
UFO just landed and posted this here
Пользователь — любой человек, который стал пользоваться. Даже тот, кто в интернете впервые.
По одному шагу вести можно тогда, когда шагов не очень много. 2-3-4, не более. Иначе — другой нежелательный психологический эффект «ооо, как все долго предстоит».
Вообще не безупречные заявления… Есть другой юзабили-принцип «чем показывать пользователю сообщения об ошибках, лучше не дать ему эту ошибку сделать». Т.е. если, скажем, на форме присутствуют взаимоисключающие варианты, то нельзя давать их одновременно выбирать, если допускается ввод дробных чисел — надо поддерживать и точку и запятую в качестве разделителя и т.д. А разблокировка кнопки «сабмит» при любых бредовых данных как раз этот принцип нарушает.

Единственное, что бесспорно верно всегда и — этот та вышеупомянутая проверка (валидация, асистенс) на клиентское стороне по ходу ввода данных. Это да, всем юзерам нравиться.
У интернет-магазина нет цели «любой ценой не дать человеку совершить ошибку». Им товар надо продать. Тупой дизейбл кнопки без подсказок отсекает половину не-гиков.
UFO just landed and posted this here
То есть, исходно спрятать кнопку? О ужас!
UFO just landed and posted this here
Прятать кнопку — это криминал.

В заметке, кстати, и описан процесс первого заказа. Причем реальный (консультировал один магазин, сажал реальных пользователей).
UFO just landed and posted this here
> а более подкованный может в задумчивости клацнуть по кнопке (не боясь последствий, она ж задизейблена!)

Ага, и кто про «клинику»говорил?

Десяток подсказок сбивает не больше, чем десяток полей.
UFO just landed and posted this here
UFO just landed and posted this here
Вот интересно мне, что за дрочер ходит и минусует обсуждение в каментах с другими пользователями. Причем сплошняком.
UFO just landed and posted this here
Я за обработку в первый раз по действию пользователя. По клику на кнопку или нажатию энтера. Сообщения должны быть привязаны к действию пользователя.
UFO just landed and posted this here
Статья крайне однобока и предвзята.

Во-первых, если мы имеем инпут для ввода строки поиска и кнопку поиск (очевидно, что для того, чтобы совершить поиск, нужно ввести запрос), то задизейблить саму кнопку, пока в инпут не будет что-то введено — вполне нормальная практика. И проблемы возникнут разве что у идиота.

Во-вторых, у разных сайтов могут быть абсолютно разные направленности и абсолютно разная потенциальная аудитория. Если моя аудитория на 99% как раз гики, то плевать я хотел на вашу Марию Ивановну. Между прочим, я уверен, что на Хабре ваша Мария Ивановна тоже не поймет как и чего тут делать. Так что теперь, Хабр, наверно, просто ужасен с точки зрения юзабилити, да? :)

Ну и в-третьих, конечно, соглашусь, что показывать ошибку необходимо. Но показ ошибки абсолютно не противоречит дизейблу кнопки.
Кто-то говорил, что показ ошибки противоречит дизейблу? Покажите мне этого, с которым спорите.
То есть вы согласны, что если ошибки пользователю показываются, то кнопку дизейблить можно и в этом нет ничего ужасного?
При внимательном прочтении статьи (по ссылке есть еще часть, не выложенная на «Хабр»), это станет очевидно ;-) Хотя, я там написал про стилизацию под дизейбл. Суть в том, чтобы если человек кликнет по кнопке (как она там на самом деле запрограммирована будет — дело десятое), система изменила бы свое состояние в ответ на клик.
нельзя блокировать кнопку (делать ее disabled), чтобы предотвратить отправку неправильно заполненной формы

Наверно, из вот этих ваших слов это должно стать очевидно? :)

Вот и написали бы, в каких частных случаях дизейблить кнопку действительно плохо. А то нельзя и всё тут :)
Все потому, что когда-то разработчик сайта автор статьи решил сделать написать в провокационной манере «как на том сайте» и откопал где-то пример скрипта.
> И проблемы возникнут разве что у идиота

Зря вы считаете идиотами пользователей, которые не специализируются на задизабленных кнопках.
Вы считаете, что есть пользователь, который не поймет, что в поле ввода нужно что-то ввести? Тогда зачем ему вообще это поле ввода? А как только он что-то введёт, кнопка активируется. Что не так?
И все равно в каментах присутствуют непонятки :)
Стоило оставить заключительную часть статьи здесь, на Хабре.
Хм, честно говоря никогда не встречал чтобы кнопку отправки формы блокировали до того момента, когда форма будет полностью заполнена, не встречал именно в веб-приложениях, в десктопных это распространенная практика, например в различных инсталляторах. А вот отключение кнопки при отправке данных — я считаю правильным, есть некоторая категория пользователей, которая будет жать на кнопку отправки вплоть до поломки мыши, если вдруг произойдет задержка и результирующая страница не придет в пределах одной секунды :) Но тоже конечно с оговорками, если данные не удалось отправить в какой-либо определенный интервал времени — отставлять пользователя в гордом одиночестве с повисшей страницей и заблокированной кнопкой тоже не дело.
В статье явно читается что-то про Дизайнера Всея Руси =)
(кумир, жежешечка, знак рубля, известная студия)
Да уж, заголовок смутил. Ожидал немного другой мотивации отказа от блокировки кнопок.

Основные аргументы автора:
— пользователь совершил ошибки (случайные ли или еще какие);
— пользователь не отличил заблокированной кнопки от обычной.
Это ведь элементарно поправить, сопроводив каждое ошибочное поле соответствующей отметкой. И, как иногда это делается, резюмирующие сообщение о невозможности отправки данных возле этой самой кнопки.
UFO just landed and posted this here
Кроспостить на хабр оставляя один абзац текста за внешней ссылкой? фи
Идем в комментарии, видим, почему и для кого появилась эта ссылка.
Хабр — не место для копипастеров. Размещение полностью скопированного чужого контента с других сайтов запрещено. Даже при использовании гиперссылки на источник. В таких случаях лучше использовать топики-ссылки.
Речь о полностью скопированном чужом контенте, не так ли?
чужого контента с других сайтов — внешний для хабра.
Как видите, контент не чужой мне, я автор. И скопирован не полностью.
на meebo.com кнопка дизаблится после начала отправки данных формы на сервер
пока всё нормально, это никак не мешает пользоваться сайтом
но вот на этих выходных то ли у них были проблемы с нагрузкой, то ли у меня со связью, но meebo загружался у меня на айфоне очень медленно, и залогиниться у меня получалось один раз из десяти.
и в случае какого-нибудь edu.mail.ru я бы просто второй раз тыкнул на кнопку повторив отправку данных, а на meebo приходилось перезагружать всю страницу заново, дожидаясь загрузки минуты две-три — ужасно
Я стираю. Там сыпется что-то вроде «asdf» — форму тестируют. Правда, была еще попытка потроллить, причем довольно умелая (сперва абзац как бы по делу, потом наезд) — такие стираются сразу же, без церемоний.
Опубликуйте этот злобный коммент тут, интересно. Может кто-то даже авторство на себя возьмет. :)
Я его не запомнил, да и к чему развлекать троллей и дрочеров?
Кстати, очень плохая функция — дисаблить кнопку после сабмита. Если сделать браузером «назад» — кнопка остается задисабленной и повторно использовать форму просто невозможно. Далеко ходить не надо — могу плюнуть в крупную хостинговую компанию, причем очень часто достает.
Это не функция плохая — это разработчики плохие, раз не могут сделать так, чтобы кнопка всегда находилась в адекватном состоянии, в том числе, и после нажатия кнопки «назад».
это функция рук разработчика :D
UFO just landed and posted this here
я думаю хороший вариант будет событие на body onexit — раздисаблить кнопку — получится при уходе со страницы она становится нормальной и такой же остается в кэше.
нужно просто при загрузке странице и запуске скриптов все подобные кнопки открывать

$('.form-submit').removeAttr(«disabled»);
а разве при выходе из кэша onload срабатывает?
запуск скриптов и кеш — это разные вещи.

страница может быть закеширована как угодно — но скрипты запустятся при заходе на такую страницу.
Мария Ивановна бухгалтер на дисаблед батонс насмотрелась в 1С и прекрасно знает что это такое.

Низачот.
Ну вот, написали заметку ни о чем, без аргументов и с прекрасной аналогией, не имеющей ничего общего с обсуждаемой темой. И все ради чего? Чтобы пропиарить на Хабре свою студию в семьдесят четвертый раз? Бу.
Внимательно читаем каменты и видим, когда и для кого была оставлена ссылка.

Специально для вас будет пост про лузеров ;)
просто ппц) только заголовок прочитал — и сразу же хихи стал ловить… остановиться не могу. Честное слово…
ну а если по делу… Если ошибка в поле случилась, то сразу она подсвечивается и появляется описание проблемы. в этом случае юзеру не надо лишний раз кликать) вот.
напутано в ваших мыслях всё.

вы видите проблему в том, что не выводится никаких сообщений о том, ПОЧЕМУ кнопка заблокирована.

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

смотрите
e-ivanov.com/travel/
Вот это, как раз, неправильный интерфейс.
Абсолютно согласен, один раз пришлось огнежуком снимать дизаблед для того, чтоб пройти…
кстати, порой сайты падают в панику с таким хаком — когда приходят незаполненные поля, а «теоретически» они приходить не должны :)
Статья не однобокая. Она бестолковая. :)
Есть какой-то гон на каких-то подражателей, отсутствует описание решения (в статье в вашем блоге его, в принципе, тоже нет) ну и проблема рассмотрена как-то однобоко (в смысле не всесторонне). Как в воду плюнули. :)
Раздули целый пост из такой мелочи. Тьфу!
То, что тетка жмет на кнопку и ничего не меняется — проблема не отключенной кнопки, а обратной связи!
Про то и пост, что тупо отключают кнопку, не давая обратной связи.
Акцент смещён. Почему заголовок про блокировку тогда? Правило про мгновенную обратную связь — универсально. Примеры можно тоннами приводить.
Надо при нажатии на «отправить» проверять поля и выводить сообщение(рядом с кнопкой или всплывающим DIVом по середине страницы), что то-то и то-то заполнено не верно и все :-)
UFO just landed and posted this here
Это вы Лебедева начитались. Он не всегда прав ;)

Я считаю что кнопку дизеблить не надо. Надо просто явно указывать на ошибки.

Автор правильно привел пример с бухгалтером.

Один драк сказал, и все его слушают.
Ничего не напоминает? ;)
Кризис. Кризис жанра, кризис мысли. Кризис хомо сапиенс
Приведу ещё один аргумент в пользу проверки заполнения в браузере.
Проверка и отказ на уровне сервера вводит пользователя в заблуждение. Для простого пользователя это просто ступор. Он нажимает на кнопку «Добавить». А в ответ добавления не происходит. Происходит какая-то непонятная ошибка, в которой надо долго разбираться.
Тогда надо либо делать кнопку «Проверить» и строить всю логику интерфейса исходя из неё, либо изначально всё проверять настолько, чтобы сервер не отказал в добавлении.
Не уточнил. Я хотел сказать, что таким образом бы обманываем пользователя. Вот это главное!
Написали «добавить», а сами можем отказать.
«А вы хотите чтобы слушали только вас и ваших последователей» — так обычно отвечал один мой знакомый на голословные обвинения в приверженности лебедизму. (у некоторых есть вполне ощутимые представления о том, как все должно работать — свои, хотя и сонованные на предположениях других)
UFO just landed and posted this here
Статья хороша тем, что она подняла насущную и важную проблему. Проблема заключается в том, что сайт должен быть максимально прост и понятен простому обывателю с минимальными навыками работы в Интернет.

На своём сайте (целевая аудитория — люди, далёкие от IT и программирования), я её решаю следующим образом.
1. Я отказался от регистрации. Вообще. И придумал как оставить привязку без неё. В некоторых случаях это возможно.
2. Поскольку регистрации нет, добавление представляет собой заполнение формы с необходимыми полями, не более.
3. При заполнении формы добавления, кнопочка внизу формы либо disabled с надписью «Заполните поле ....», либо «Добавить». Расчёт на то, что пользователь попробует ткнуть кнопку, не выйдет, и он прочитает пожелание. Заполнит поле, и спокойно нажмёт «Добавить».
Всё, с этим люди вроде не путаются. По крайней мере, feedback на эту тему не получал.

Банально, но факт — крайне мало разработчиков Клиенто-ориентированы, но более эго-либидо-ориентированы.

Как грится в англиях «Знание — сила», но у нас это большей частью — «Горе от ума» :)
Например, нельзя блокировать кнопку (делать ее disabled), чтобы предотвратить отправку неправильно заполненной формы. Даже если вы совсем недавно научились отключать кнопочки. Даже если так делает ваш кумир. Это — порочная практика, подлежащая искоренению.

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

Пользователю нужно показывать, что форма работает т.е. «живая». Задисейбленная кнопка — ассоциация с «зависшей» страницей. Перебрасывать страницу на поле с ошибкой тоже не хорошо — человек будет теряться — только что он был у кнопки, а теперь фиг знает где.
Подсказку можно показывать, когда фокус находится на поле ввода, при выходе из поля можно показывать ошибку, но ни в коем случае не выводить модальный алерт.
Сводное количество ошибок со всей формы или названия незаполненных полей можно списком показать рядом с кнопкой подтверждения отправки ярким предупреждающим цветом. При это после нажатия на кнопку, если ошибки в заполнении есть можно вывести модальный алерт с просьбой заполнить форму корректно. Опять же не перемещая никуда фокус.
UFO just landed and posted this here
Блокировка кнопки — это самый простой путь к сокращению работы разработчика, который надеется написать код только для проверки на клиенте и не проверять данные на сервере.
По-моему опрометчиво это. Главное денные проверить на сервере, ведь он их обрабатывать будет.
Да и сообщать об ошибке нужно ярко, словами описывая человеку что не так.

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

Например к бытовой технике в конце инструкции указывают список возможных проблем, причин и методов устранения.
Новиков, остановитесь, вы так всю карму и хабрасилу растеряете.
Ну если это конечно для вас имеет значение.
Эй! За что Новикова минусуете?! Он привел случай из жизни. И все правильно, кстати, написал.
ИМХО проблема не стоти целой статьи…
Я бы добавил — проблема не стоит ссылки на блог в качестве «окончания» статьи. Окончание вполне влезло бы и сюда. А так — «казна що!»
Согласен на половину. Но почему-то, эта ваша статья, вызвала разношерстные чувства во мне.

С одной стороны, это плохо, когда разработчик думает не своими мозгами. А точнее, следует советам, которые не дали ему понимания модели поведения в целом. А думать сам он не хочет/умеет/нет времени.

С другой, на мой взгляд, стиль критики немного неуместен и несколько резковат. Потому что отключенная кнопка не виновата. Она совсем не виновата! Потому что иной раз есть формы, в которые можно 20 минут забивать инфу, но так и не понять, почему она не срабатывает. Кнопки там не отключены, зато ошибка та же.
Согласен.
В сообщении раздули из мухи слона и преподнесли как учебное пособие.
Мое мнение — нужно либо тон в сообщении изменить, либо рассмотреть все аспекты удобства работы с формами и методик проверки ошибок.
Что, кстати и осуждали у другого гуру :)
За что боролись на то и напоролись.
Sign up to leave a comment.

Articles