Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 119
по-моему если делать проверку на стороне пользователя, то нет проблем и подсветить неверно заполненые поля
у меня был случай, когда форма отправлялась на сервер (никаких недоступных кнопок) и рисовалась опять с сообщением об ошибке, но пользователи не замечали его т.к. оно было не достаточно контрастным и писали письма
у меня был случай, когда форма отправлялась на сервер (никаких недоступных кнопок) и рисовалась опять с сообщением об ошибке, но пользователи не замечали его т.к. оно было не достаточно контрастным и писали письма
«Мы не знаем, в каком именно» — почему?
Ваша статья одна бока и бессмысленна, если основной аспект, «данного подхода к формам», реалтайм валидацию — вы, не учитываете в прицепи.
Ваша статья одна бока и бессмысленна, если основной аспект, «данного подхода к формам», реалтайм валидацию — вы, не учитываете в прицепи.
Имелось в виду не «джаваскрипт не знает», а читатель рассказа.
И еще — на стороне клиента — не validation, а assistance. Валидация проводится уже на сервере.
И еще — на стороне клиента — не validation, а assistance. Валидация проводится уже на сервере.
Но если мы знаем то почему мы не обозначим что именно пользователю исправить/дополнить/изменить чтобы он смог удовлетворить свои потребности?
«И еще — на стороне клиента — не validation, а assistance. Валидация проводится уже на сервере. „
То есть один ассистирует другой проверяет, я как то не разделял никогда, но взял на заметку, благодарю.
«И еще — на стороне клиента — не validation, а assistance. Валидация проводится уже на сервере. „
То есть один ассистирует другой проверяет, я как то не разделял никогда, но взял на заметку, благодарю.
Речь идет о том, что многие разработчики, насмотревшись на примеры от известных студий, тупо дизаблят кнопку до заполнения полей. И простые, не суперпродвинутые пользователи никак не могут понять, в чем дело.
О том, как можно делать — в полной версии статьи.
Про валидацию. Дело в том, что форма может быть изменена злоумышленником, может быть какая-то ошибка на клиенте. Все данные, приходящие извне, считаются исходно невалидными, «грязными» (tainted). Они должны быть отфильтрованы и валидированы на сервере перед тем, как на их основании будут осуществлены какие-то операции.
О том, как можно делать — в полной версии статьи.
Про валидацию. Дело в том, что форма может быть изменена злоумышленником, может быть какая-то ошибка на клиенте. Все данные, приходящие извне, считаются исходно невалидными, «грязными» (tainted). Они должны быть отфильтрованы и валидированы на сервере перед тем, как на их основании будут осуществлены какие-то операции.
Полностью солидарен :)
А поймет ли марьивановна модное слово «электропочта» подсмотренное у какого-то неизвестного ей модного дизайнера. :)
Ваш вариант вполне хорош. Однако забудем, что у нас большой дисплей, сделаем resize до 1024x768 или даже 1280x800. Видите куда уползает ваше сообщение об ошибке? Теперь оно не в локусе внимания (кажется это так называется :)). Полагаю, сообщение об ошибке лучше выводить над кнопкой (в момент нажатия все внимание пользователя приковано к ней родимой) и кнопку все таки делать disabled (правда уже после нажатия, когда скрипт обнаружил ошибку). В этом случае пользователь видит, что система как-то отреагировала на его ошибку и начинает искать решение проблемы, а не думает что система зависла, как у него в бухгалтерской программе.
В вашем же случае пользователь может не заметить сообщения об ошибке или подсветку полей и будет продолжать кликать по кнопке ожидая реакции системы.
Ваш вариант вполне хорош. Однако забудем, что у нас большой дисплей, сделаем resize до 1024x768 или даже 1280x800. Видите куда уползает ваше сообщение об ошибке? Теперь оно не в локусе внимания (кажется это так называется :)). Полагаю, сообщение об ошибке лучше выводить над кнопкой (в момент нажатия все внимание пользователя приковано к ней родимой) и кнопку все таки делать disabled (правда уже после нажатия, когда скрипт обнаружил ошибку). В этом случае пользователь видит, что система как-то отреагировала на его ошибку и начинает искать решение проблемы, а не думает что система зависла, как у него в бухгалтерской программе.
В вашем же случае пользователь может не заметить сообщения об ошибке или подсветку полей и будет продолжать кликать по кнопке ожидая реакции системы.
самое лучшее тестирование — это когда просишь соседку тетю Любу зайти на сайт. просто зайти. а сам стоишь и смотришь на ее действия. на реакцию. потом можно и попросить прокомментировать что ей непонятно и тд. и тп.
Далеко не для любого сайта, тот же хабр с его принципами и сообществом бывает непонятен даже обывателям которые работают в IT но при этом смотрят на его со стороны. Так что если ЦА ресурса Никак не включает «ту самую соседку» то ее тестирование можно считать зря потраченным временем.
Вы пробовали когда-нибудь такое делать?
Я тут недавно попробовал и охе… ел. Дамы за 50 могут видеть этот мир совсем по-другому. :(
Это лишний раз доказывает, что иногда лучше не изобретать велосипед, а сделать все как можно более простым, привычным и доступным.
А ведь так хочется придумывать, улучшать, идти вперед (особенно когда понимаешь, что некоторые вещи сделаны достаточно бестолково). ;)
Я тут недавно попробовал и охе… ел. Дамы за 50 могут видеть этот мир совсем по-другому. :(
Это лишний раз доказывает, что иногда лучше не изобретать велосипед, а сделать все как можно более простым, привычным и доступным.
А ведь так хочется придумывать, улучшать, идти вперед (особенно когда понимаешь, что некоторые вещи сделаны достаточно бестолково). ;)
Заголовок не совсем верный. Я думал вообще нельзя дизаблить — я например если перед отправкой что-то проверяю на клиенте — дизаблю до отправки и если окей — отправляю, если нет — сообщаю об ошибке и отдизабливаю. То же самое если отправка будет проходить через аякс, что бы не сильно разбирающиаяся в веб-технлогиях Мария Семеновна два раза не нажала на кнопку отправить.
Специально для огульных критиков, печатающих быстрее, чем думающих (и оттого допускающих кучу ошибок) добавил ссылку на полный вариант заметки.
Извините, конечно, но этого «Как правильно?» в вашей статье не было изначально к этому мои и комментарии.
Между прочим, написано по мотивам переделки интерфейса одного из магазинов. То, что нам кажется «клиникой», для обычного человека, не идиота, не тупицы, а вполне успешного в своей области, может оказаться непонятным.
По одному шагу вести можно тогда, когда шагов не очень много. 2-3-4, не более. Иначе — другой нежелательный психологический эффект «ооо, как все долго предстоит».
Вообще не безупречные заявления… Есть другой юзабили-принцип «чем показывать пользователю сообщения об ошибках, лучше не дать ему эту ошибку сделать». Т.е. если, скажем, на форме присутствуют взаимоисключающие варианты, то нельзя давать их одновременно выбирать, если допускается ввод дробных чисел — надо поддерживать и точку и запятую в качестве разделителя и т.д. А разблокировка кнопки «сабмит» при любых бредовых данных как раз этот принцип нарушает.
Единственное, что бесспорно верно всегда и — этот та вышеупомянутая проверка (валидация, асистенс) на клиентское стороне по ходу ввода данных. Это да, всем юзерам нравиться.
Единственное, что бесспорно верно всегда и — этот та вышеупомянутая проверка (валидация, асистенс) на клиентское стороне по ходу ввода данных. Это да, всем юзерам нравиться.
У интернет-магазина нет цели «любой ценой не дать человеку совершить ошибку». Им товар надо продать. Тупой дизейбл кнопки без подсказок отсекает половину не-гиков.
Статья крайне однобока и предвзята.
Во-первых, если мы имеем инпут для ввода строки поиска и кнопку поиск (очевидно, что для того, чтобы совершить поиск, нужно ввести запрос), то задизейблить саму кнопку, пока в инпут не будет что-то введено — вполне нормальная практика. И проблемы возникнут разве что у идиота.
Во-вторых, у разных сайтов могут быть абсолютно разные направленности и абсолютно разная потенциальная аудитория. Если моя аудитория на 99% как раз гики, то плевать я хотел на вашу Марию Ивановну. Между прочим, я уверен, что на Хабре ваша Мария Ивановна тоже не поймет как и чего тут делать. Так что теперь, Хабр, наверно, просто ужасен с точки зрения юзабилити, да? :)
Ну и в-третьих, конечно, соглашусь, что показывать ошибку необходимо. Но показ ошибки абсолютно не противоречит дизейблу кнопки.
Во-первых, если мы имеем инпут для ввода строки поиска и кнопку поиск (очевидно, что для того, чтобы совершить поиск, нужно ввести запрос), то задизейблить саму кнопку, пока в инпут не будет что-то введено — вполне нормальная практика. И проблемы возникнут разве что у идиота.
Во-вторых, у разных сайтов могут быть абсолютно разные направленности и абсолютно разная потенциальная аудитория. Если моя аудитория на 99% как раз гики, то плевать я хотел на вашу Марию Ивановну. Между прочим, я уверен, что на Хабре ваша Мария Ивановна тоже не поймет как и чего тут делать. Так что теперь, Хабр, наверно, просто ужасен с точки зрения юзабилити, да? :)
Ну и в-третьих, конечно, соглашусь, что показывать ошибку необходимо. Но показ ошибки абсолютно не противоречит дизейблу кнопки.
Кто-то говорил, что показ ошибки противоречит дизейблу? Покажите мне этого, с которым спорите.
То есть вы согласны, что если ошибки пользователю показываются, то кнопку дизейблить можно и в этом нет ничего ужасного?
При внимательном прочтении статьи (по ссылке есть еще часть, не выложенная на «Хабр»), это станет очевидно ;-) Хотя, я там написал про стилизацию под дизейбл. Суть в том, чтобы если человек кликнет по кнопке (как она там на самом деле запрограммирована будет — дело десятое), система изменила бы свое состояние в ответ на клик.
> И проблемы возникнут разве что у идиота
Зря вы считаете идиотами пользователей, которые не специализируются на задизабленных кнопках.
Зря вы считаете идиотами пользователей, которые не специализируются на задизабленных кнопках.
Статья разжевана до уровня героини истории.
Хм, честно говоря никогда не встречал чтобы кнопку отправки формы блокировали до того момента, когда форма будет полностью заполнена, не встречал именно в веб-приложениях, в десктопных это распространенная практика, например в различных инсталляторах. А вот отключение кнопки при отправке данных — я считаю правильным, есть некоторая категория пользователей, которая будет жать на кнопку отправки вплоть до поломки мыши, если вдруг произойдет задержка и результирующая страница не придет в пределах одной секунды :) Но тоже конечно с оговорками, если данные не удалось отправить в какой-либо определенный интервал времени — отставлять пользователя в гордом одиночестве с повисшей страницей и заблокированной кнопкой тоже не дело.
В статье явно читается что-то про Дизайнера Всея Руси =)
(кумир, жежешечка, знак рубля, известная студия)
(кумир, жежешечка, знак рубля, известная студия)
Да уж, заголовок смутил. Ожидал немного другой мотивации отказа от блокировки кнопок.
Основные аргументы автора:
— пользователь совершил ошибки (случайные ли или еще какие);
— пользователь не отличил заблокированной кнопки от обычной.
Это ведь элементарно поправить, сопроводив каждое ошибочное поле соответствующей отметкой. И, как иногда это делается, резюмирующие сообщение о невозможности отправки данных возле этой самой кнопки.
Основные аргументы автора:
— пользователь совершил ошибки (случайные ли или еще какие);
— пользователь не отличил заблокированной кнопки от обычной.
Это ведь элементарно поправить, сопроводив каждое ошибочное поле соответствующей отметкой. И, как иногда это делается, резюмирующие сообщение о невозможности отправки данных возле этой самой кнопки.
Кроспостить на хабр оставляя один абзац текста за внешней ссылкой? фи
на meebo.com кнопка дизаблится после начала отправки данных формы на сервер
пока всё нормально, это никак не мешает пользоваться сайтом
но вот на этих выходных то ли у них были проблемы с нагрузкой, то ли у меня со связью, но meebo загружался у меня на айфоне очень медленно, и залогиниться у меня получалось один раз из десяти.
и в случае какого-нибудь edu.mail.ru я бы просто второй раз тыкнул на кнопку повторив отправку данных, а на meebo приходилось перезагружать всю страницу заново, дожидаясь загрузки минуты две-три — ужасно
пока всё нормально, это никак не мешает пользоваться сайтом
но вот на этих выходных то ли у них были проблемы с нагрузкой, то ли у меня со связью, но meebo загружался у меня на айфоне очень медленно, и залогиниться у меня получалось один раз из десяти.
и в случае какого-нибудь edu.mail.ru я бы просто второй раз тыкнул на кнопку повторив отправку данных, а на meebo приходилось перезагружать всю страницу заново, дожидаясь загрузки минуты две-три — ужасно
Кто стирает комментарии тут? -)
Кстати, очень плохая функция — дисаблить кнопку после сабмита. Если сделать браузером «назад» — кнопка остается задисабленной и повторно использовать форму просто невозможно. Далеко ходить не надо — могу плюнуть в крупную хостинговую компанию, причем очень часто достает.
Это не функция плохая — это разработчики плохие, раз не могут сделать так, чтобы кнопка всегда находилась в адекватном состоянии, в том числе, и после нажатия кнопки «назад».
Мария Ивановна бухгалтер на дисаблед батонс насмотрелась в 1С и прекрасно знает что это такое.
Низачот.
Низачот.
Ну вот, написали заметку ни о чем, без аргументов и с прекрасной аналогией, не имеющей ничего общего с обсуждаемой темой. И все ради чего? Чтобы пропиарить на Хабре свою студию в семьдесят четвертый раз? Бу.
просто ппц) только заголовок прочитал — и сразу же хихи стал ловить… остановиться не могу. Честное слово…
напутано в ваших мыслях всё.
вы видите проблему в том, что не выводится никаких сообщений о том, ПОЧЕМУ кнопка заблокирована.
но если делать правильный интерфейс и предупреждать о том, что поля нужно заполнить верно, то не вижу проблем.
смотрите
e-ivanov.com/travel/
вы видите проблему в том, что не выводится никаких сообщений о том, ПОЧЕМУ кнопка заблокирована.
но если делать правильный интерфейс и предупреждать о том, что поля нужно заполнить верно, то не вижу проблем.
смотрите
e-ivanov.com/travel/
Абсолютно согласен, один раз пришлось огнежуком снимать дизаблед для того, чтоб пройти…
Статья не однобокая. Она бестолковая. :)
Есть какой-то гон на каких-то подражателей, отсутствует описание решения (в статье в вашем блоге его, в принципе, тоже нет) ну и проблема рассмотрена как-то однобоко (в смысле не всесторонне). Как в воду плюнули. :)
Есть какой-то гон на каких-то подражателей, отсутствует описание решения (в статье в вашем блоге его, в принципе, тоже нет) ну и проблема рассмотрена как-то однобоко (в смысле не всесторонне). Как в воду плюнули. :)
Раздули целый пост из такой мелочи. Тьфу!
То, что тетка жмет на кнопку и ничего не меняется — проблема не отключенной кнопки, а обратной связи!
То, что тетка жмет на кнопку и ничего не меняется — проблема не отключенной кнопки, а обратной связи!
Надо при нажатии на «отправить» проверять поля и выводить сообщение(рядом с кнопкой или всплывающим DIVом по середине страницы), что то-то и то-то заполнено не верно и все :-)
Это вы Лебедева начитались. Он не всегда прав ;)
Я считаю что кнопку дизеблить не надо. Надо просто явно указывать на ошибки.
Автор правильно привел пример с бухгалтером.
Один драк сказал, и все его слушают.
Ничего не напоминает? ;)
Кризис. Кризис жанра, кризис мысли. Кризис хомо сапиенс
Я считаю что кнопку дизеблить не надо. Надо просто явно указывать на ошибки.
Автор правильно привел пример с бухгалтером.
Один драк сказал, и все его слушают.
Ничего не напоминает? ;)
Кризис. Кризис жанра, кризис мысли. Кризис хомо сапиенс
Приведу ещё один аргумент в пользу проверки заполнения в браузере.
Проверка и отказ на уровне сервера вводит пользователя в заблуждение. Для простого пользователя это просто ступор. Он нажимает на кнопку «Добавить». А в ответ добавления не происходит. Происходит какая-то непонятная ошибка, в которой надо долго разбираться.
Тогда надо либо делать кнопку «Проверить» и строить всю логику интерфейса исходя из неё, либо изначально всё проверять настолько, чтобы сервер не отказал в добавлении.
Проверка и отказ на уровне сервера вводит пользователя в заблуждение. Для простого пользователя это просто ступор. Он нажимает на кнопку «Добавить». А в ответ добавления не происходит. Происходит какая-то непонятная ошибка, в которой надо долго разбираться.
Тогда надо либо делать кнопку «Проверить» и строить всю логику интерфейса исходя из неё, либо изначально всё проверять настолько, чтобы сервер не отказал в добавлении.
«А вы хотите чтобы слушали только вас и ваших последователей» — так обычно отвечал один мой знакомый на голословные обвинения в приверженности лебедизму. (у некоторых есть вполне ощутимые представления о том, как все должно работать — свои, хотя и сонованные на предположениях других)
Статья хороша тем, что она подняла насущную и важную проблему. Проблема заключается в том, что сайт должен быть максимально прост и понятен простому обывателю с минимальными навыками работы в Интернет.
На своём сайте (целевая аудитория — люди, далёкие от IT и программирования), я её решаю следующим образом.
1. Я отказался от регистрации. Вообще. И придумал как оставить привязку без неё. В некоторых случаях это возможно.
2. Поскольку регистрации нет, добавление представляет собой заполнение формы с необходимыми полями, не более.
3. При заполнении формы добавления, кнопочка внизу формы либо disabled с надписью «Заполните поле ....», либо «Добавить». Расчёт на то, что пользователь попробует ткнуть кнопку, не выйдет, и он прочитает пожелание. Заполнит поле, и спокойно нажмёт «Добавить».
Всё, с этим люди вроде не путаются. По крайней мере, feedback на эту тему не получал.
На своём сайте (целевая аудитория — люди, далёкие от IT и программирования), я её решаю следующим образом.
1. Я отказался от регистрации. Вообще. И придумал как оставить привязку без неё. В некоторых случаях это возможно.
2. Поскольку регистрации нет, добавление представляет собой заполнение формы с необходимыми полями, не более.
3. При заполнении формы добавления, кнопочка внизу формы либо disabled с надписью «Заполните поле ....», либо «Добавить». Расчёт на то, что пользователь попробует ткнуть кнопку, не выйдет, и он прочитает пожелание. Заполнит поле, и спокойно нажмёт «Добавить».
Всё, с этим люди вроде не путаются. По крайней мере, feedback на эту тему не получал.
Банально, но факт — крайне мало разработчиков Клиенто-ориентированы, но более эго-либидо-ориентированы.
Как грится в англиях «Знание — сила», но у нас это большей частью — «Горе от ума» :)
Как грится в англиях «Знание — сила», но у нас это большей частью — «Горе от ума» :)
Например, нельзя блокировать кнопку (делать ее disabled), чтобы предотвратить отправку неправильно заполненной формы. Даже если вы совсем недавно научились отключать кнопочки. Даже если так делает ваш кумир. Это — порочная практика, подлежащая искоренению.
Например, нельзя приводить категоричные утверждения (делать из людей дураков), чтобы предотвратить с их стороны недопонимания. Даже если вы совсем недавно научились провоцировать людей. Даже если так делает ваш кумир. Это — порочная практика, подлежащая искоренению.
Пользователю нужно показывать, что форма работает т.е. «живая». Задисейбленная кнопка — ассоциация с «зависшей» страницей. Перебрасывать страницу на поле с ошибкой тоже не хорошо — человек будет теряться — только что он был у кнопки, а теперь фиг знает где.
Подсказку можно показывать, когда фокус находится на поле ввода, при выходе из поля можно показывать ошибку, но ни в коем случае не выводить модальный алерт.
Сводное количество ошибок со всей формы или названия незаполненных полей можно списком показать рядом с кнопкой подтверждения отправки ярким предупреждающим цветом. При это после нажатия на кнопку, если ошибки в заполнении есть можно вывести модальный алерт с просьбой заполнить форму корректно. Опять же не перемещая никуда фокус.
Подсказку можно показывать, когда фокус находится на поле ввода, при выходе из поля можно показывать ошибку, но ни в коем случае не выводить модальный алерт.
Сводное количество ошибок со всей формы или названия незаполненных полей можно списком показать рядом с кнопкой подтверждения отправки ярким предупреждающим цветом. При это после нажатия на кнопку, если ошибки в заполнении есть можно вывести модальный алерт с просьбой заполнить форму корректно. Опять же не перемещая никуда фокус.
Блокировка кнопки — это самый простой путь к сокращению работы разработчика, который надеется написать код только для проверки на клиенте и не проверять данные на сервере.
По-моему опрометчиво это. Главное денные проверить на сервере, ведь он их обрабатывать будет.
Да и сообщать об ошибке нужно ярко, словами описывая человеку что не так.
Надо сообщать не только какая ошибка произошла, а еще и возможные причины и методы устранения. Думаю Марья Ивановна разберется если ей объяснить объяснить, что значит эта ошибка и что ей дальше делать.
Например к бытовой технике в конце инструкции указывают список возможных проблем, причин и методов устранения.
По-моему опрометчиво это. Главное денные проверить на сервере, ведь он их обрабатывать будет.
Да и сообщать об ошибке нужно ярко, словами описывая человеку что не так.
Надо сообщать не только какая ошибка произошла, а еще и возможные причины и методы устранения. Думаю Марья Ивановна разберется если ей объяснить объяснить, что значит эта ошибка и что ей дальше делать.
Например к бытовой технике в конце инструкции указывают список возможных проблем, причин и методов устранения.
Новиков, остановитесь, вы так всю карму и хабрасилу растеряете.
Ну если это конечно для вас имеет значение.
Ну если это конечно для вас имеет значение.
Эй! За что Новикова минусуете?! Он привел случай из жизни. И все правильно, кстати, написал.
ИМХО проблема не стоти целой статьи…
Согласен на половину. Но почему-то, эта ваша статья, вызвала разношерстные чувства во мне.
С одной стороны, это плохо, когда разработчик думает не своими мозгами. А точнее, следует советам, которые не дали ему понимания модели поведения в целом. А думать сам он не хочет/умеет/нет времени.
С другой, на мой взгляд, стиль критики немного неуместен и несколько резковат. Потому что отключенная кнопка не виновата. Она совсем не виновата! Потому что иной раз есть формы, в которые можно 20 минут забивать инфу, но так и не понять, почему она не срабатывает. Кнопки там не отключены, зато ошибка та же.
С одной стороны, это плохо, когда разработчик думает не своими мозгами. А точнее, следует советам, которые не дали ему понимания модели поведения в целом. А думать сам он не хочет/умеет/нет времени.
С другой, на мой взгляд, стиль критики немного неуместен и несколько резковат. Потому что отключенная кнопка не виновата. Она совсем не виновата! Потому что иной раз есть формы, в которые можно 20 минут забивать инфу, но так и не понять, почему она не срабатывает. Кнопки там не отключены, зато ошибка та же.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Как делать нельзя: проверка формы на сайте и блокирование кнопок