Представьте себе мир, в котором по умолчанию все кнопки веб-форм неактивны. Как правило, они серого цвета и плохо различимы, на них нельзя перейти с клавиатуры, они могут теряться на общем фоне и содержать едва заметный текст, прочитать который не так легко.
Но подобный вид этой кнопке суждено иметь не всегда. Она станет активной и хорошо заметной, как только пользователь сделает все, что от него требуется: что-то выберет или введет все данные в корректном формате. Но прежде чем этот элемент дизайна обретет жизнь, он просто будет находиться там, под или над формой, едва видимый и будто занятый своими делами. Хотели бы вы оказаться в таком мире?
Один из многих примеров. Обычно кнопки неактивны, потому что интерфейс требует ввода данных от пользователя
Кнопки, неактивные по умолчанию, по общему признанию являются правильной и необходимой практикой, и на то имеются веские причины. Так или иначе, но дизайнеры и разработчики заинтересованы в том, чтобы пользователи как можно меньше допускали ошибок при работе с системой. С одной стороны, они не хотят прерывать опыт многочисленными сообщениями об ошибках, лишний раз раздражать пользователя, с другой — хотят быть уверенными, что введенные данные абсолютно верны еще до того, как эта информация будет отправлена на сервер. И прежде чем пользователи смогут перейти к следующему шагу, а чего-то важного вдруг не будет хватать, им обязательно на это укажут.
Замечательный интерфейс шведского веб-сайта общественного транспорта с кнопкой, которая изначально неактивна, но становится доступной после выбора маршрута
Поэтому на разработку надежной встроенной системы проверки уделяются время и силы. По мере того, как пользователи переходят от одного поля ввода к другому, им обеспечивают качественный и очень полезный фидбэк. И, конечно же, все кнопки по умолчанию неактивны, поскольку так удается избежать преждевременных кликов по ним, которые не приводят ни к чему иному, как круговороту сообщений об ошибках.
Для некоторых сценариев такой подход может быть очень эффективным, но для многих других он оборачивается настоящей катастрофой, часто приводящей к тому, что клиенты оказываются перед заблокированным интерфейсом, без единого шанса выполнить свою задачу.
В этой статье будут рассмотрены наиболее распространенные проблемы, возникающие при использовании неактивных кнопок, варианты решения этих проблем, сценарии, когда деактивация кнопок действительно оправдана.
Начнем с описания ситуации, когда от неактивных кнопок больше вреда, чем пользы.
Содержание статьи
Как пользователи реагируют на неактивные интерфейсы?
Когда неактивна большая часть интерфейса
Когда неактивна только одна кнопка
Встроенный валидатор тоже ошибается
Недостатки неактивных кнопок
Когда неактивные кнопки приносят пользу
Что делать, если в интерфейсе своего продукта вам ну никак не обойтись без неактивных кнопок?
Предусмотрите запасный выход
Так ли нужна встроенная валидация?
Альтернатива неактивным кнопкам
Заключение
Как пользователи реагируют на неактивные интерфейсы?
Все знают, что неактивное состояние какого-либо элемента в интерфейсе служит индикатором того, что что-то пошло не по плану, что-то человек заполнил неверно или не сделал вовсе. Однако этого вывода для рядового пользователя совсем недостаточно. Например, что делать, если вы хотите снять флажок, но интерфейс не позволяет вам это сделать? Как понять, в чем именно заключается проблема? Может быть, у вас пропало подключение с интернетом? А может, есть какие-либо проблемы с правами доступа? Вам нужно просто немного подождать, и тогда все наладится, или лучше сразу перезагрузить страницу? А если вы решитесь обновить страницу, можно ли быть уверенным, что все те данные, которые вы так кропотливо вводили в форму, сохранятся?
Когда пользователь сталкивается с неактивной кнопкой, ситуация не сильно отличается. Она заблокирована, правда не ясно по какой причине. Возможно, не хватает каких-то данных, которые необходимы для продвижения вперед. Или где-то была упущена инструкция, набранная мелким шрифтом. Или, возможно, человек допустил опечатку в одном из полей ввода. Или были введены неверные данные, или эти данные введены в некорректном формате. Или, возможно, со стороны пользователя вообще нет никакой ошибки, и это системный сбой, который абсолютно не поддается его контролю.
Существует так много вещей, которые могут привести к деактивации кнопки, и, как правило, пользователи так и остаются один на один с не подающим признаки жизни интерфейсом, пытаясь выяснить, какого кусочка пазла не достает.
Люди, оказавшиеся в такой ситуации, обычно демонстрируют два вида слегка отличающихся друг от друга поведения, и выбор реакции зависит от того, что именно недоступно в пользовательском интерфейсе.
Интуитивно понятный интерфейс: 4 простых принципа
Когда неактивна большая часть интерфейса
Наблюдение за пользователями, сталкивающимися с неактивным интерфейсом, позволяет выделить несколько видов реакций на эту ситуацию. Когда значительная часть элементов отключена, большинство людей склонно считать, что система занята каким-то фоновым процессом. И поскольку система работает (пусть и в фоновом режиме), они относятся к этому с большим терпением. Они просто сидят и ждут, когда появится иконка загрузки или страница станет активной. И чем ценнее введенные данные, тем дольше люди будут готовы сидеть и ждать.
Когда весь интерфейс заблокирован, пользователям не остается ничего, кроме как просто сидеть и ждать
Вы, вероятно, будете вести себя так же. Почему? Просто чтобы не допустить каких-либо сбоев или прерываний текущего процесса. Ведь вполне может случиться так, что ваша нетерпеливость станет причиной какой-либо необратимой ошибки, и вам придется проходить весь процесс заново.
Прерывание текущего процесса кажется рискованным, поэтому как правило пользователь предпочитает просто немного посидеть и подождать, пока экран не разблокируется — порог терпения достаточно велик, ведь в обратном случае все данные придется вносить заново.
В Coolblue список продуктов по мере его обновления становится неактивным, но боковая панель остается доступной все время
Однако даже в этом случае терпение когда-нибудь, да заканчивается, и тогда пользователи начинают осторожно двигать указателем мыши по экрану, менять раскладку на клавиатуре или свайпать пальцем, если нечто подобное случилось на мобильном устройстве. Если ничего не помогает, они начинают кликать по странице активнее.
Если и это не помогает, пользователи могут попробовать открыть эту страницу в другой вкладке браузера либо сделают скриншот, который приложат как доказательство, если придется обращаться в поддержку. Более опытные юзеры дойдут до того, что вообще откроют страницу в другом браузере.
«Скелетный» экран, создающий иллюзию неактивной области, служит индикатором того, что элементы сайта загружаются
Причина всех этих реакций в том, что мы, как пользователи, не хотим терять прогресс, достигнутый на неактивной странице. Вы могли потратить немало времени, чтобы корректно заполнить все поля формы, потрудились найти рабочий код скидки, а может даже сочинили текст поздравления. Поэтому было бы неплохо хотя бы сохранить результат этих действий и повторно ввести эти данные на другой вкладке или в другом браузере, нежели проделывать эту тяжелую работу заново.
Не бесите пользователей: 10 типовых ошибок юзабилити в интерфейсе
Когда неактивна только одна кнопка
Описанное выше поведение может показаться вполне предсказуемым для ситуаций, когда вся страница становится недоступной для пользователя, но оно, безусловно, должно отличаться от тех случаев, когда недоступна только небольшая часть интерфейса, скажем, одна кнопка. Как ни странно, но те же проблемы, хоть и в меньшей степени, возникают и с отдельными кнопками.
Поскольку остальная часть интерфейса доступна, пользователи, видимо, сильнее уверены в том, что проблема непосредственно связана с вводом данных. Вот почему увидеть человека, сидящего и ждущего, когда какая-то кнопка, например, «Продолжить», вернется к жизни или чудесным образом что-то изменится, большая редкость.
Однако главная проблема заключается в том, что пользователи замечают неактивное состояние кнопки только в конце всего процесса, особенно на мобильных устройствах. Многие не понимают, была ли кнопка неактивна с самого начала или на это повлияло то, какие данные они ввели. Некоторым даже приходится открывать ту же страницу в другой вкладке, чтобы посмотреть, каково же было исходное состояние кнопки.
Ситуация, когда неактивна только одна кнопка. На сайте немецкого банка Postbank кнопка «Weiter» («Продолжить») отключена по умолчанию, а если поле ввода остается пустым, появляется сообщение об ошибке
Таким образом, когда кнопка неактивна, первое, что происходит, — это резкое замедление взаимодействия. Люди будто в прямом смысле слова упираются в стену. Некоторые обязательно захотят проверить, действительно ли кнопка не работает, наведя на нее курсор, пытаясь ее щелкнуть / коснуться или перейти к ней с помощью клавиатуры. Однако в большинстве случаев ничего особенного и не происходит.
Если кнопка ни на что не реагирует, первое, на что обычно обращают внимание пользователи — правильность введенных данных: язык, отсутствие пробелов или знаков препинания и т.д. Если и это не помогает, большинство пользователей пройдут через всю форму, поле за полем, сверху вниз и обратно, пытаясь устранить все потенциальные проблемы, которые могли вызывать неактивное состояние.
Например, часто можно увидеть, как люди повторно набирают номер телефона с «+» и без него, с «8» в начале и без нее, с пробелами и без них. Иногда пользователи даже повторно вводят всю информацию, из-за того, что, как они полагают, браузер мог получить «неправильные» данные из-за автозаполнения.
Фактически, они пробуют все возможные варианты написания дат и времени, номеров заказов, фамилий, телефонов и всего остального, что чаще всего является не более чем догадками, потому что никто точно не знает, как работает приложение и как формат введенных данных влияет на его поведение.
Это прекрасный пример поистине разочаровывающего опыта. И, конечно, разработчики предполагают, что всех этих проблем легко можно было бы избежать с помощью современной встроенной проверки, которая позволяет выявлять ошибки ввода на раннем этапе. Оказывается, и здесь все не так просто.
Разработка личного кабинета пользователя: улучшаем интерфейс
Встроенный валидатор тоже ошибается
Теоретически все, что было рассмотрено ранее, не должно происходить в принципе. В конце концов, разве это не то, чему в первую очередь должна препятствовать встроенная проверка? Вместо того, чтобы выводить на экран сообщения об ошибках после того, как все данные введены, система должна уведомлять об ошибке сразу после того, как пользователи ее совершают — обычно после выхода из поля ввода. Но как хорошо система застрахована от сбоев?
Случалось ли в вашем опыте когда-нибудь, что ваш адрес доставки не принимался валидатором адресов — а все потому, что это здание построили недавно? Или, возможно, вы использовали совершенно правильный, но редко используемым знак синтаксиса, чтобы уберечь себя от спама, например, k.giraudel+smashing@bmx.de, но валидатор адресов электронной почты предположил, что символ «+» не может быть частью адреса?
Что делать, если у вас еще нет служебного адреса электронной почты, но сервис не принимает адрес на Gmail? Или, может быть, есть данные, которые вы не хотели бы указывать, например, возраст, пол, день рождения или номер телефона — и хотя они помечены как необязательные, форма не пропускает пустое значение?
Хоть и существует множество сценариев, когда встроенная проверка справляется с возложенной на нее миссией превосходно, но есть столько же примеров, когда встроенная проверка не работает совсем:
- когда почтовый адрес не может быть подтвержден слегка устаревшим валидатором адресов или автозаполнением;
- когда ваш индекс не подтверждается, хотя он действителен и верен (просто не соответствует общепринятому международному стандарту);
- когда в форме используется какая-то защита от спама, но она заблокирована агрессивным блокировщиком рекламы;
- когда пользователь блокирует отслеживание, но поле ввода отчаянно хочет определить местоположение пользователя и процесс прерывается;
- когда сторонние расширения браузера вводят данные (например, коды купонов), но в конечном итоге блокируются системой без возможности продолжить;
- когда пользователь сохраняет введенные данные в сложной форме, и, в конце концов, возвращается, чтобы завершить работу, но кнопка «Продолжить» неактивна, поскольку отправленные документы находятся в процессе обработки;
- когда в электронном письме есть совершенно допустимые префиксы или символы, но встроенная проверка далека от идеала и не распознает определенные символы.
На практике даже самая совершенная встроенная проверка может дать сбой. И когда это происходит, последствия неутешительные. Пользователь, которого случайно заблокировал встроенный валидатор, не имеет абсолютно никаких шансов на отправку формы, потому что кнопка отправки будет недоступна. Такая ситуация в 100% случаев приводит к отказу от заполнения формы (и потери вашей прибыли).
Конечно, людей, попавших в эту ситуацию, за день может набраться не так уж и много. Возможно, их всего лишь единицы. А может и тысячи. Так или иначе — если вы все-таки начнете отслеживать их количество, то уже сделаете первый шаг к пониманию, насколько велико влияние неактивных кнопок на опыт пользователя и на ваш бизнес в целом.
И дело не только в деньгах. По своей природе встроенная проверка — это довольно грубый валидатор, с жестким набором требований и ограничений. Однако очень часто пользователи попадают в ситуации, которые невозможно предсказать заранее. Возможно, большая часть требуемой информации известна, но сроки поджимают, а часть требуемых документов отсутствует, и, следовательно, от всей введенной информации следует отказаться.
Обычно это приводит к увеличению количества звонков и запросов в службу поддержки или просто к недовольству клиентов, которые аннулируют свою учетную запись и уходят к конкурентам.
Во многих отношениях использование неактивных кнопок — это риск. Тебе повезет и поля с ошибкой будут выделены красным цветом, но может случиться и такое, что интерфейс не даст никаких подсказок вовсе. Затем пользователю нужно будет найти и исправить эти ошибки, пройти проверку и, наконец, разблокировать заветную кнопку, чтобы продолжить. Это раздражает на десктопном экране, но еще больше негативных эмоций вызывает на экране мобильного, когда кнопка часто не видна, так как находится за пределами экрана в нижней части страницы.
Как отмечает Мэтью Стендедж (Matthew Standage), старший UX-дизайнер в Bottomline, «когда мы деактивируем кнопку в форме, мы будто отключаем призыв к действию — ту вещь на странице, на которую мы так пытаемся побудить пользователей кликнуть». Все это довольно рискованное мероприятие, потому что никто никогда не может быть абсолютно уверен, насколько безупречен его код, даже если протестирует его самым тщательным образом.
Удобная навигация и качественный онбординг — залог успеха вашего сайта
Недостатки неактивных кнопок
Приведенные выше примеры указывают на очень распространенную проблему, причина которой кроется в природе самого шаблона. Неактивные кнопки не объясняют того, что случилось. Они сообщают, что что-то не так, и на этом все. В результате слишком часто пользователи остаются один на один с вопросом, что на самом деле произошло, что введено не так, и, следовательно, как исправить положение.
Не говоря уже о кошмарах с доступностью. Как отмечает Адам Сильвер (Adam Silver) в своей замечательной книге «Шаблоны проектирования веб-форм», обычно на неактивные кнопки нельзя навести фокус, и, следовательно, пользователи не могут добраться до них с помощью клавиатуры. Причина, по которой люди обычно не обращают внимания на эти кнопки, заключается в том, что с ними невозможно взаимодействовать.
По своей природе неактивные кнопки страдают недостаточной контрастностью, поскольку они должны выглядеть иначе, чем обычные кнопки. В результате, их трудно заметить. Разработчики полагаются на JavaScript и встроенную проверку, а также на тот факт, что пользователи могут легко обнаруживать и исправлять ошибки, что на деле не соответствует истине, например, в сложной форме на узком экране смартфона.
Кнопка «Absenden» (Отправить) в правом нижнем углу по умолчанию неактивна, а значит на нее нельзя перейти с клавиши Tab
И тогда возникает вопрос о выборе правильного момента, когда добавить в интерфейс неактивную кнопку целесообразно. Большинство реализаций включают кнопку только в том случае, если все необходимые данные введены в корректном формате или/и были проверены встроенным валидатором, то есть в действительно тот самый момент, когда кнопка должна стать активной, но что насчет ситуаций, когда она может включиться и раньше?
Что делать, если клиент открывает банковский счет и ему необходимо подтвердить свое налоговое резидентство вместе с некоторыми другими документами? Или любые другие ситуации, когда какие-то данные не могут быть проверены сразу же? Или, возможно, некоторые поставщики еще не представили свои окончательные предложения, но проект нужно срочно добавить в систему?
Во всех этих сценариях на момент заполнения формы у пользователей может не оказаться под рукой всех необходимых документов. А теперь представьте, что все эти сервисы предоставляют 14-дневное «окно» после открытия счета, когда можно будет дослать все недостающие документы. Технически клиенты сохраняют возможность взаимодействовать с системой и без этих документов, но для этого им нужно будет для каждого отсутствующего документа при заполнении формы выбирать опцию «Отправить позже».
Для включения кнопки достаточно ввести один символ
Итак, в какой момент нужно включить неактивные элементы интерфейса? Только если пользователь выберет опцию «Предоставить документы позже»? Или в принципе не настаивать на регистрации, лишь оставив напоминание, что все документы необходимо загрузить в течение следующих 14 дней? Многие согласятся, что первый вариант, вероятно, более удачен, но только в том случае, если пользователь хорошо понимает, как скоро он сможет загрузить документы. Второй вариант, вероятно, увеличит число конверсий и привлечет больше лидов, но все ли из них сдержат свое обещание?.
В любом случае подобные ситуации требуют большой осторожности, особенно в крупных корпоративных и B2B-формах.
Все это, однако, не означает, что неактивных кнопок всегда следует избегать любой ценой. Они оказываются очень полезными, когда служат очень маленькой и конкретной цели.
UX-дизайн: как сделать ваш продукт удобным для восприятия
Когда неактивные кнопки приносят пользу
Представьте, что вы покупаете джинсы в интернет-магазине. Интерфейс сайта сообщает вам, что в наличии только один экземпляр выбранных вами джинс, поэтому, преисполненные надежды, вы спешите на страницу товара, быстро указываете размер, добавляете его в корзину — просто чтобы понять, доступны ли еще для покупки эти джинсы или уже нет. Конечно, это не самый вдохновляющий пользовательский опыт. В этом случае деактивация кнопки «Добавить в корзину», когда товар отсутствует, было бы более разумным, хотя бы для того, чтобы сберечь пользователю нервы и время.
Или, возможно, вы собираетесь перевести крупные средства с одного банковского счета на другой. Вы дважды проверили все поля ввода, сумму, данные получателя, просмотрели все комиссии и, наконец, готовы продолжить — яркая кнопка так и просит нажать на нее. И тут происходит неприятность — случайно вы нажимаете на эту кнопку два раза вместо одного.
Что произойдет в итоге? Вряд ли в ваши планы входило переводить эту сумму дважды. И уж тем более непонятно, какой из присланных системой кодов вы должны использовать для подтверждения платежа.
Поэтому деактивация кнопки после нажатия на нее — это весьма удачный индикатор того, что взаимодействие прошло удачно, что вам ничего не нужно делать для продолжения операции, просто сидеть и ждать, когда запущенный процесс завершится. Вот где неактивные кнопки действительно полезны.
На сайте Wise после нажатия на кнопку «Конвертировать» она отключается, но текст на ней не меняется, а рядом появляется индикатор загрузки и меняется указатель мыши
Когда опция или функция недоступны или в фоновом режиме выполняется некая задача, сообщить об этом нужно просто и понятно. Визуальное изменение кнопки помогает это сделать, но лучше также объяснить, почему кнопка неактивна и что именно происходит. Например, можно изменить текст на кнопке, чтобы оповестить о выполняемом процессе, а рядом поместить индикатор загрузки, сделав все происходящее более очевидным.
Текст на кнопке меняется на «Добавление в корзину...». В этом случае, возможно, имеет смысл ненадолго отключить кнопку, чтобы не допустить случайных повторных нажатий
Донести информацию о том, что какая-то опция недоступна, столь же важно, как и уберечь пользователя от совершения обидных ошибок:
- некорректных покупок: если цена зависит от разных факторов, разумно отключать кнопку «Купить» в процессе расчета окончательной стоимости;
- двойного бронирования. После нажатия кнопки разумно ее деактивировать и заменить CTA на индикатор прогресса. Подсказка даст представление о том, что происходит. Если для получения ответа от сервера потребуется слишком много времени, обязательно сообщите об этом, изменив текст подсказки;
- неверного ввода кода подтверждения. Кнопку сохранять неактивной, пока не будет введен весь код. Возможно, это решение стоит дополнительно протестировать, но, скорее всего, опыт оно не испортит.
Деактивация кнопок в подобных сценариях оправдано. Вот только в дизайне этих кнопок следует отказаться от неприметного и набившего оскомину серого цвета, сливающегося с фоном.
Рассмотрим практики, позволяющие сделать неактивные кнопки чуть более заметными.
Почему дизайн интерфейсов (UI) так важен при создании интернет-магазинов
Что делать, если в интерфейсе своего продукта вам ну никак не обойтись без неактивных кнопок?
В своей замечательной статье о том, «Как сделать неактивные кнопки более заметными» (Making Disabled Buttons More Inclusive), Сандрина Перейра (Sandrina Pereira) выделяет пару отличных приемов (с фрагментами кода), которые помогут придать неактивным кнопки более подходящий внешний вид, если от их использования вам никак не отказаться.
Вот несколько полезных стратегий, которые предложила Сандрина:
- визуально менять курсор на неактивной кнопке, как бы показывая, что с этим элементом пользователи взаимодействовать не могут («cursor: not-allowed»);
- указывать неактивное состояние кнопки при помощи всплывающей подсказки; при наведении курсора или касания по неактивному элементу вы можете выводить на экран специальную подсказку, поясняющую ситуацию. Этот прием можно использовать и в том случае, если пользователь переходит на кнопку с помощью клавиши «Tab», однако кнопка в этом случае должна быть фокусируемой;
- блокировать клик программно с помощью JavaScript, используя атрибут «aria-disabled», и таким образом избежать временной потери фокуса ввода во время отправки формы;
- «aria-disabled» сохранит фокус ввода для кнопки, но сообщит пользователю, что она еще неактивна;
- использовать интерактивные области ARIA для отображения динамического контента;
- остерегаться «pointer-events: none» в CSS; это действительно предотвратит клик, но не помешает фокусировке и навигации с клавиатуры.
(<iframe title="vimeo-player" src="https://player.vimeo.com/video/582460935?h=f92c940374" width="640" height="318" frameborder="0" allowfullscreen></iframe>)
Фокусируемая неактивная кнопка, которая оповещает пользователя о том, какую информацию ему необходимо ввести, в данном случае — количество билетов
Своего рода альтернативой всплывающим подсказкам могут быть сообщения об ошибках в самой веб-форме с указанием тех полей, куда ввели некорректные данные. А можно просто включить подсказку рядом с кнопкой «неактивно», чтобы объяснить, почему она не доступна для клика (как показано ниже):
Неактивная кнопка «Подтвердить» и подсказка «Вам нужно исправить 1 ошибку»
Всякий раз, когда кнопка находится в неактивном состоянии, вы можете тут же объяснить, почему это случилось и как это исправить. Обратите внимание на небольшую подсказку внизу, в которой пользователю предлагается сначала выбрать маршрут:
Небольшое объяснение того, что требуется сделать, чтобы продолжить, может оказаться очень уместным
С помощью подсказок и комментариев вы сможете эффективнее донести до пользователя, что происходит и что от него требуется для продолжения. Но если вы стремитесь резко снизить количество ошибок, можно сделать кое-что более существенное.
Tooltips: как создавать и использовать всплывающие подсказки лайк э босс
Предусмотрите запасной выход
Поскольку реальность непредсказуема, разработчикам невероятно сложно предугадать маршрут, по которому последует тот или иной пользователь. На его выбор могут влиять множество факторов, которые находятся вне вашей досягаемости. Таким образом, в случае ввода данных в некорректном формате или ошибки вы должны предоставить вашим клиентам возможность заполнить форму, даже если введенные значения не полностью соответствует вашим требованиям.
Полезный метод, который был обнаружен в ходе тестирования пользователей, заключается не только в добавлении подсказки, находящейся рядом с неактивной кнопкой и объясняющей, что не так, но и в добавлении ссылки для связи с поддержкой. Если пользователь столкнулся с ситуацией, когда он не может заполнить форму до конца или у него возник вопрос, он может обратиться в поддержку тут же.
Не можете продолжить? Сообщите об этом нам. Мы свяжемся с вами в ближайшее время
Кликнув по ссылке, пользователи могут оставить свой адрес электронной почты или номер телефона и указать, чтобы с ними связалась служба поддержки клиентов. А можно сделать и так: автоматически отправить электронное письмо в службу поддержки клиентов со всеми введенными в форму данными от имени клиента с запросом на звонок.
«Кажется, вы ввели данные с ошибкой. Но если все в порядке, можете продолжить»
Вы также могли бы разрешить клиентам продолжить работу, несмотря на ошибки, например, если введенное ими местоположение не соответствует предложенному системой. С «предупреждающим» оранжевым цветом фона. Хотя можно использовать и обычный зеленый.
Другой вариант — позволить клиентам продолжить работу, несмотря на обнаруженные ошибки. Конечно, вам нужно уведомить их о том, что что-то кажется неправильным, попросить их проверить свои данные, а также попросить разрешения связаться с ними в случае возникновения каких-либо проблем. Возможно, им захочется еще раз просмотреть введенные ими данные, перед тем как нажать кнопку «Продолжить».
Разумеется, эти небольшие изменения не помогут свести число отказов к «0», но, по крайней мере, дадут вам шанс удержать клиента в случае, если он не может ввести все необходимые данные, и заключить с ними сделку, оказав поддержку в решении возникших проблем.
Полное руководство по цвету в UX/UI-дизайне
Так ли нужна встроенная валидация?
С учетом всех произведенных изменений, возможно, было бы правильно пересмотреть роль встроенной валидации. Слишком много вопросов требуют обсуждения: когда следует начинать процесс валидации? когда если пользователь редактирует допустимое или недопустимое поле? когда нужно показывать сообщения об ошибках или подтверждение правильности ввода? Все эти вопросы заслуживают отдельной статьи, но в целом, если вы оставите встроенную валидацию, предусмотрев при этом пути «обхода», то ничего плохого не произойдет, и при этом вам необязательно использовать неактивные кнопки.
На самом деле встроенная валидация, вероятно, окажется даже более полезной без неактивной кнопки, поскольку пользователям будет проще разобраться с тем, что же они ввели не так и как это исправить, ведь валидатор их об этом оповестит. В этом случае кнопки отключать не надо вовсе.
Альтернатива неактивным кнопкам
Чтобы избежать всех тех проблем, причиной которых являются неактивные кнопки, вы можете упростить процесс и сделать кнопку «Продолжить» включенной постоянно, но сообщать пользователю об ошибках только по клику.
Ниже вашему вниманию предлагается вполне рабочая схема, которая не имеет никаких проблем с юзабилити:
- проверяйте корректность введенных данных только при их отправке;
- при наличии ошибок объясняйте, что это за ошибки (при помощи всплывающей подсказки или сообщения об ошибке);
- если допущена только одна ошибка, укажите пользователям поле формы, содержащее ошибку (с помощью простой строки текста);
- если ошибок больше, перечислите их в верхней части страницы, а рядом с кнопкой «Отправить» разместите ссылку на этот список.
Оставьте кнопку активной, а затем, при необходимости, отобразите сообщение об ошибках
Просто, понятно, доступно. Легко реализовать и не терзать себя сомнениями, что код будет вести себя некорректно и пользователь уйдет, не поняв, почему кнопка неактивна.
Однако, если пользователь все же должен сделать некий выбор, чтобы продолжить работу, возможно, было бы неплохим решением не просить его сделать этот выбор напрямую, а как бы сделать выбор за него, положившись на популярные значения, установленные по умолчанию.
Например, фуд-сервис Blue Apron вместо того, чтобы деактивировать кнопку «Выбрать» и таким образом заставить пользователей совершить действие (выбрать число рецептов, ингредиенты для которых ему будут доставляться на дом), устанавливает этот выбор за пользователя, предлагая либо оставить этот выбор по умолчанию, либо изменить его.
Кнопка активна, ведь выбор по умолчанию уже задан, но пользователь всегда может изменить его или оставить таким же
Порой неактивные кнопки можно заменить чем-то более интересным. К примеру, если определенная модель товара более недоступна для заказа, вы можете отразить информацию об этом в селекторе размеров. Если тот или иной размер отсутствует на складе, вы могли бы показать, что эта опция недоступна, сделав ее невозможной для выбора, но не отключать кнопку полностью.
Если опция недоступна, вам не нужно отключать кнопку. Вы можете разместить информацию об этом там, где пользователю будет естественно ее обнаружить. В данном случае — в селекторе размеров
В качестве альтернативы вы можете просто разместить над кнопкой уведомление, что товара нет в наличии, и попросить у пользователя разрешение выслать ему оповещение, когда интересующий его товар снова появится.
Ниже приведен пример этого паттерна от Zalando:
Нет в наличии. Мы вышлем вам email, как только товар поступит на склад
Всякий раз, когда вы имеете дело с неактивными состояниями кнопок, не забывайте задаться вопросом — а нет ли способа лучше оповестить пользователя о не введенных либо введенных с ошибками данных, и нет ли каких еще вариантов — выбор по умолчанию, всплывающие подсказки, призывы к действию — чтобы добиться того, чтобы человек заполнил форму до конца и отправил ее вам.
Tooltips: как использовать этот маленький, но мощный UI-паттерн
Заключение
Вы не можете контролировать то, что не можете измерить. Если у вас уже есть реализация с неактивной кнопкой, попробуйте узнать, сколько людей на самом деле оказываются в ситуации один на один с заблокированным интерфейсом и из-за этого не могут продолжить работу дальше. Эта информация поможет вам быстрее понять, как сильно влияют на опыт пользователей неактивные кнопки.
Если без неактивных кнопок по тем или иным причинам вам не обойтись, всерьез задумайтесь над тем, как сделать их более удобными и полезными, а также обеспечьте пользователей возможностью обратиться напрямую в поддержку, если вдруг они столкнулись с какой-то непонятной для них ситуацией.
Помните, что зачастую кнопки отключать не обязательно, если внедрить систему проверки введенных данных при их отправке, указывать пользователям на допущенные при вводе ошибки с образцом правильного заполнения.
В любом случае встроенная проверка сослужит вашим пользователям хорошую службу, если будет давать верное представление о достигнутом ими прогрессе в заполнении формы. Вместе с тем не стоит пускать на самотек те ситуации, когда проверка заводит пользователей в тупик: у людей должна быть возможность продолжить работу и обойти сообщения об ошибках, оставив их решение на потом.
Описанных выше практик должно быть достаточно, чтобы сделать вашу форму простой для заполнения и не сбивающей с толку своими неактивными состояниями, а пользователей — довольными и успешными. А внедрить подсказки вам поможет платформа Experrto — инструмент помощи и онбординга пользователей, который поможет избежать недоразумений в процессе освоения интерфейса и увеличить конверсию.
Чтобы начать пользоваться сервисом, достаточно скачать расширение Experrto для Google Chrome и установить код на ваш сайт. Управление подсказками происходит через браузер с помощью простого редактора (виджета).
Подписывайтесь на нашу группу в фейсбуке и канал в телеграм, чтобы следить за обновлениями.
Прокачайте свой онбординг!
По материалам: smashingmagazine.com Изображение: freepik.com
