Comments 83
В Ю-Мани (как минимум в Android) развили идею, и кнопка не активна даже если все поля заполнены (автоматом, например с QR-кода). Приходится удалять и вписывать символ вручную в любом из полей 🤔
Альфа-Онлайн в настольных браузерах при оплате ЖКХ: заполняешь все поля, а кнопка Продолжить остается неактивной. Ни за что не догадаетесь, как сделать ее активной — надо просто передать фокус с текстового поля на любое пустое место формы (кликнуть мышкой в любом незанятом месте). Такое было много лет подряд, как сейчас — не знаю.
Это как раз подводит к мысли: неважно активна (или неактивна) у вас кнопка в начале, если форма спроектирована с знанием дела, и работает без ошибок)
Ну и поведение кнопки должно быть одинаковым во всем проекте, конечно. Если только мы не хотим боли пользователям)
это кривые мобильные разработчики, коих к сожалению большинство, за 15 лет в мобильной разработке кого только не встречал
Валидатор повесили на 'input' , а проверку на заполнение сделать забыли.
Гораздо более плохой вариант: обязательные поля заполнены, но где-то есть невалидное значение. Кнопка отправки неактивна, сообщений об ошибках тоже нет. Удачи в поиске.
Вот да, это топ в бесячих интерфейсах. Ладно там когда пользователь продвинутый и понимает суть происходящего, может и в консоль залезть и код посмотреть, а как объяснить простому человеку, не прошаренному, почему "ничего не работает"?
Постоянно такое встречаю, да.
И ещё хуже, когда данные подставились автоматически, но для активации кнопки нужно обязательно удалить и записать самому один из символов…
Кто придумывает такие «грамотные» формы – они сами реально пробовали проводить хотя бы минимальное, ленивое тестирование различных сценариев?
Кстати если и делать активность по заполнению, то с проверкой валидности по таймеру, не onchange, не тем более onblur - где автозаполнение игнорируется нафик
то с проверкой валидности по таймеру
Почему по таймеру? Из за автозаполнений?
дополнительно к onchange нужно отслеживать автозаполнение, вставку из буфера обмена, кастомные контролы, которые значения пишут в невидимые поля
Можно сделать чтобы кнопка была как бы не активной, но все равно нажималась. И при нажатии выдавалась подсказка. И вот тут отдельная тема про подсказки. Я дальтоник и красный цвет мне не бросается в глаза. А некоторые формы делают подсказку сверху строкой над формой и другим цветом. Помню была форма где было не сильно заметно все обязательные поля и подсказка высвечивала сверху формы, а чтобы увидеть подсказку нужно было прокрутить страницу вверх. Потратил небольшое количество времени, но такой плохой дизайн запомнился на долго
Можно сделать чтобы кнопка была как бы не активной, но все равно нажималась.
Хм. элемент выглядит как неактивный, но ведет себя как активный? Это чтобы в конец всех запутать? :)
И главное не понятно зачем это всё, чтобы что? На чем экономия?
Те кто реагируют на не активную кнопку, сразу поймут что не заполнено. А те кто не понимают в чем дело и что нужно, при нажатии увидят сообщение что нужно заполнить и при вводе поля увидят что кнопка поменяла цвет. Так сказать два предупреждения
ну а в случае обычной кнопки - те кто реагируют на нее - сразу поймут что не заполнено, а тех кто не понимает в чем дело - просто не будет. И кроме сбивания с толку неактивным элементом интерфейса, который на самом деле активный - никаких отличий от обычной схемы с обычной кнопкой нет. Тогда зачем это всё, какая задача/проблема решается?
Поэтому валидировать обязательные поля надо не тогда, когда уже вся форма заполнена и пользователь ускроллился туда, где первых полей не видно, а с началом заполнения поля, следующего за обязательным.
Даже если по нажатию фокус будет смещаться на первое невалидное поле - это всё равно раздражает.
ИМХО лучше не делать такие простыни, где нужно поля проскролливать. Лучше разбить такую длинную анкету на странички с кнопками "Далее" и по нажатию на нее проверять поля. Ну и сохранять уже введенную информацию. А то тоже бывает заполняешь такую простыню, копаешься, и тут что-то заглючило и вся введенная инфа похерилась - начинай все сначала.
Такие вещи надо AB-тестировать по-хорошему. Очень много факторов - и количество полей, и их сложность для заполнения, возможность подкинуть подсказки/рамки сразу. Единого правила не придумать, да и вообще интуицией не полнять.
Согласен с вами, это как с разбитием длинных текстов на абзацы. В этом плане идеально отработаны онлайн-анкеты на оформление кредиток, как у Тинькова – там всё выверено с хирургической точностью за годы использования.
Минимум полей на каждом экране, максимум интерактива, очевидные подсказки, стимулирование закончить каждый шаг («вы увеличите шанс на одобрение на 89% заполнив эту форму»).
"А зачем нужна бабка кнопка, если на нее нельзя нажать?"
Если кнопка неактивна, должна быть явная информация, почему она неактивна, текстом. Например, "Не заполнены все необходимые поля формы".
Чтобы дать надежду, что кнопку можно будет нажать, но это не точно, т.к. возможны ошибки заполнения. А если кнопку не рисовать вообще до заполнения требуемых полей, то будут сомнения и подозрения, что время будет потрачено зря.
Если кнопка неактивна, должна быть явная информация, почему
Или альтернативный вариант: показывать эту информацию после нажатия на неактивную кнопку.
А потом развивается активный метод тыка у людей. Тыкать в интерфейс где попало, может чего путёвого натыкается, кнопки все подряд жать пока отклика нет. Неактивные элементы - это для продвинутых пользователей, которым требуется понимание о имеющимся фунционале, пусть и ограниченном в данный момент по ряду причин.
Это же нормально, когда не знаешь что происходит. Нажимаешь на кнопку и тебе говорят что делать дальше.
Можно дальше развить тему и поработать с надписью про действия пользователя, что указаны перед "названием":
"Заполнить форму и поля, отмеченные звездочкой" - тоже может кто из пользователей не сразу поймет, что тут речь не про одежду и сельхоз арт объект :)
Неактивная кнопка - стандарт UI уже лет тридцать. Но да, и его можно улучшить - рядом с кнопкой можно написать почему она неактивна, например, «Не заполнено одно отмеченное звёздочкой обязательное поле». И рядом можно поставить маленькую кнопку с, скажем, знаком вопроса. При нажатии на неё незаполненные обязательные поля можно подсветить и подписать почему это они обязательны.
Текст вверху примера формы недопустимо. Заполнение формы не может быть целью пользователя. Должно быть как минимум типа «Сообщите дополнительные сведения о фото котёнка», пользователь точно не хочет заполнять формы, но вполне может хотеть оставить описание.
Сначала придумываем дурацкие "стандарты", потом придумываем кучу костылей, что-бы эти стандарты хоть как-то подружить с реальностью.
Я как простой пользователь интерфейсов полностью согласен с автором. Хороший интерфейс должен быть максимально прозрачен и незаметен для пользователя, он не должен вызывать необходимость изучать его логику, читать всякие там подсказки под вопросиками.. В чем проблема просто дать человеку поля ввода и кнопку? К обязательным полям добавить примечание и возможно их как-то подсветить. А уже по нажатию, если пользователь сделал что-то не так, объяснить ему нормально что не правильно и как это исправить, вместо того что-бы заставлять его разгадывать ребусы - почему кнопка серая и не нажимается и что надо сделать что-бы она нажалась.
Любому пользователю с IQ чуть больше нуля понятно, «почему кнопка серая и что надо сделать чтобы она нажималась». Потому что, как уже сказали, это давний стандарт в интерфейсах. Для остальных при попытке нажать на неактивную кнопку будет выведена подсказка – «что́ неправильно и как это исправить, вместо того, чтобы заставлять его разгадывать ребусы».
Да, правда? Вы видите серую кнопку и тыкаете на нее что-бы увидеть подсказку? П те кто так не делают по вашему мнению имеют IQ чуть больше нуля?
Забавно, как по мне это такое классическое когнитивное искажение - считать людей, не обладающих вашим специфичным опытом, дураками.
Это в Windows 95 серый цвет и тусклые надписи означали, что кнопка неактивна. А в нынешние времена серость/белость/красность кнопки может вообще ничего не означать, а просто дизайнер с цветами игрался.
рядом с кнопкой можно написать почему она неактивна
Можно.
Но если это не "Госуслуги", у вас есть секунды три, прежде чем пользователь уйдет.
Успеете за 3 секунды заставить его прочитать все подписи, сноски со звездочками и вопросиками?
Неактивная кнопка - стандарт UI уже лет тридцать.
Да уж прям тридцать? Не преувеличивайте.
Но да, и его можно улучшить - рядом с кнопкой можно написать почему она неактивна, например, «Не заполнено одно отмеченное звёздочкой обязательное поле»
Или не заполнены два поля, три, десять? С указанием какие именно, или чел пусть сам ищет? Причем писать это надо сразу, хотя пользователь еще ничего заполнять не начал, т.е. избыточность двойного информирования (у полей звезды, у кнопки пояснения про звезды). А ведь при нажатии - ему эти поля бы подсветились, что и облегчает их визуальный поиск.
В общем может я чего пропустил в плане стандартизации, но не вижу никаких плюсов у неактивных кнопок.
Моя реальность - сайт, мне интересно, но что-то неясно. Есть форма для чата - Формулирую вопрос, а мне "заполните форму". Имя, тлф, емейл... Мне ничего ещё не дали, но уже хотят со мной по близкому?? Закрываю сайт.
Есть пример из настольных приложений. Не могу удалить WPS Office штатным анинсталером - не работает кнопка "Продолжить удаление". Не устанавливайте этот офис :)
Скрытый текст
.
По хорошему - за такие фокусы надо на законодательном уровне дрючить авторов программы, это вмешательство в нормальную работу системы, препятствование корректному удалению программ.
В Винде все еще сохраняется этот кривой пережиток прошлого системы, когда в ней не было даже такого понятия как репозиторий софта, и всё устанавливалось и удалялось как попало, как придумает автор программы. В том-же Линуксе это все более толково сделано, там и устанавливать и удалять все что нужно намного проще, понятнее и безопаснее (да, тоже не идеально и есть к чему придраться, но на фоне Винды..)
Это что. Недавно таки прилетело обновление на «новый улучшенный Outlook» (в котором даже фильтров нормальныхникаких нет, ага, здравствуйте, десятки тысяч писем), так он тупо по-тихому подменяет собой встроенное приложение Календарь в Windows 10. Запускаешь Календарь или открываешь файл календаря .ics — тот тупо закрывается и открывается календарь Outlook. Надо ли говорить, что событие из .ics-файла нихера в календарь Outlook не добавляется? Более того, события из Календаря Windows 10 помещались в системное расписание (которое по часам в панели задач раскрывается), а из Outlook'а конечно же туда ничего не попадает. А теперь ещё и отредактировать ничего невозможно, так как Outlook те события тоже не видит. Как вырубить эту заразу пока не понял, галочек соответствующих в интерфейсе нигде нет.
Яндекс с UI своего навигатора бы разобрался для начала. Там, например, кнопка поиска просто тупо не реагирует на нажатие. Возможно, что все это они разрабатывают на мощном железе и идеально быстром интернете, но, например, в автомобильной магнитоле железо не то что-бы особо мощное, и сеть может быть очень медленной где-то за городом. И вот жмакаешь эту кнопку, и ничего не происходит. Она как была зеленая,так и остается, никакой анимации нажатия не происходит, и сидишь думаешь - то-ли нажал не достаточно сильно, экран не сработал, то-ли все норм и запрос принят..
И отдельная боль - формы (особенно авторизации), которые не отправляются при нажатии на Enter. А всего-то надо поставить обработчик на submit тэга form, а у этой самой кнопки сделать type=submit. Ну да. Тогда еще в обработчике оправки формы нужно будет проверить её валидацию, а не просто деактивировать кнопку.
Ну и формы, у которых не проставлены tabindex, но это уже не так критично, хоть и бесит.
Да вот, прямо свежачок спорного UI. Скачиваю сейчас дрова для 3Д мышки с https://3dconnexion.com/uk/drivers/
Кнопка с выбором варианта ОС, ладно нажимаю.. ничего не происходит.. снова нажимаю.. ничего..
Какое-то время туплю, ничего не понимаю..
Блин! Надо промотать ниже!
Ну да, наверное это я дурачок не понял что это кнопка не скачивания, а переключения панелек.. но вот выглядит это несколько обескураживающе..
Илья Бирман всё же разобрал вопрос глубже: https://bureau.ru/soviet/20240521/
Рекомендую сделать кнопку активной, но сбрасывать все данные из формы, если не все обязательные поля заполнены.
Пользователи смотрят на форму, смотрят на кнопку — и уже в этом месте начинают делиться на группы. Кто-то сразу понимает, что кнопка неактивна, и задаётся вопросом: а почему она неактивна? И точно ли она неактивна?
Кто-то лезет в консоль и убирает disabled у кнопки. Без шуток, я так ОСАГО получал, только кнопка почему-то не активировалась после заполнения формы.
Я в течение довольно долгого времени занималась тем же самым при check-in'e билета на сайте airbaltic. Все заполнено, никаких сообщений об ошибке, а кнопка все так же неактивна. Иду в Developer Tools, убираю аттрибут - все работает. Сейчас уже исправили, но этот баг существовал не менее полугода! Мне прямо интересно, как выходили из положения другие пассажиры.
Думаю активна или неактивна кнопка – вопрос вкусовщины, лишь бы стандарт был принят во всем продукте. Путает чаще именно разный подход в разных разделах.
если пользователь не хочет какие-то данные отправлять, и кнопка не даст отправить данные, то этот пользователь покинет страницу и уйдет туда не будет подобных затруднений....или хотя бы будут подсказки какие именно данные обязательны....но в случае сбора данных пользователя в обмен на какую то информацию со страницы, пользователь пойдет туда где данные свои не надо оставлять без веской на то причины
Хорошо было лед 20 назад. Из поставщиков востребованных API - один. У него четкие гайдлайны. Ничего не объясняется, но для споров всегда есть место, где посмотреть. Сейчас каждый UX знает, что умнее других, поэтому пишет нвчтвыления другим и на них кивает. Для тривиальных форм, где одна звездочка еще как-то можно примириться с неактивной кнопкой. А в табах искать ответ на вопрос почему не горит кнопка пользователю очень неприятно. Хотя кому нужен это пользователь, если есть наставления от великих меторов.
На каждом сайте должна быть активная кнопка "Вы хотите, чтобы разработчик горел в аду?" а при нажатии ему отправлялся экземпляр книги про интерфейсы "Психбольница в руках пациентов"
А не ставить спаны с ошибками - тоже Яндекс рекомендовал, или это просто Ваше усиление тезиса? :)
Вы ещё не видели как пользователи заполняют формы. Три поля, все обязательные. Как заполняет тестер: сначала первое поле, потом, второе, потом третье. Как заполняет пользователь: прокручивает в самый низ экрана, заполняет третье, потом жмёт "Отправить". А так как поля зависят друг от друга, то всё ломается.
Ужасно раздражает, обычно даже не заполняю такое. Но Вы, с позиции UX дизайнера, ещё медицинские информационные системы не оценивали. Вот где жесть живёт. Там вполне реальна ситуация что кнопка активна, но не работает, или отрабатывает с ошибкой, которую может понять только разработчик. А влезть в devtools невозможно, потому что нельзя.
Статья прям пересказ моего разговора с фронтом по одному из проектов. В форме регистрации использовалась неактивная кнопка. Что было дико неудобно из-за того что было непонятно почему она неактивна. В итоге сделали активную кнопку и при нажатии подсвечивали поля которые не заполнены или заполнены неверно.
Количество жалоб на неработающую форму и обращений к менеджерам "помогите зарегистрироваться, мне ничего не понятно" сразу упало в разы.
Не раскрыта тема аналитики.
Контекста, в котором работали коллеги из Яндекса, мы не знаем, но раз это был аудит рекламы, можно предположить, что смотрели и в отслеживание конверсий.
В некоторых случаях события отправки форм считают через нажатия кнопки. Способ сомнительный, но всё же используемый. Самая очевидная проблема наивной реализации этого метода — в конверсию формы будут попадать все нажатия кнопки, включая те, что вызвали сообщения об ошибках и не отправили данные.
Возможно, вы слышали о таком инструменте, как Метрика. Она позволяет настроить цель "Отправка формы". И эта цель как раз срабатывает при любом нажатии на кнопку. В качестве меры по улучшению отслеживания документация Метрики предлагает деактивировать кнопку.
Проблема неактивной кнопки отправки формы