Должна ли кнопка «Продолжить» отключиться, если проверка не завершена?

В формах мы часто видим, что кнопка «продолжить» неактивна, пока все необходимые поля не будут заполнены:

mockup

скачать источник bmml - Wireframes созданный с помощью макетов Balsamiq

Это действительно помощь пользователю или препятствие?

Я полагаю, что Pro для этого - это визуальный индикатор для пользователя, что они еще не закончили заполнять форму или не справляются с ошибками (потому что даже при встроенной проверке пользователь не будет проинформирован, если они никогда не фактически взаимодействует с полем, поэтому не будет отображаться никаких ошибок для тех, кто находится в этой точке).

Но тогда основной Con для этого (что я также видел в тестировании юзабилити) заключается в том, что пользователи будут путать, почему они не могут нажать кнопку.

Является ли шаблон отключения кнопки «Продолжить» до тех пор, пока проверка не будет завершена, фактически предоставив отрицательный пользовательский интерфейс?

93 голоса | спросил JonW 17 FebruaryEurope/MoscowbTue, 17 Feb 2015 18:41:35 +0300000000pmTue, 17 Feb 2015 18:41:35 +030015 2015, 18:41:35

12 ответов


70

Тип захваченной информации и количество требуемых полей

Это зависит от типа и объема запрашиваемой информации и количества полей, которые необходимо заполнить:

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

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

В качестве примера рассмотрим пример страницы создать пароль с конкретными требованиями к паролю (ситуация, которую я разработал). В этом конкретном случае я отключил кнопку «Продолжить» до тех пор, пока не будут выполнены все правила для пароля, оговорка заключается в том, что пользователю необходимо получить визуальную обратную связь, когда они набрали новый пароль и увидели, что их ввод соответствует всем требованиям к паролю.

  

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

     

source: 10 эвристики юзабилити для дизайна пользовательского интерфейса

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

введите описание изображения здесь


Предотвращение ошибок

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

  

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

     

source: 10 эвристики юзабилити для дизайна пользовательского интерфейса


Встроенная проверка: предоставление сообщений об ошибках в контексте

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

  

Даже при встроенной проверке пользователь не будет уведомлен, если он никогда не   фактически взаимодействует с полем, поэтому не будет отображаться никаких ошибок для   эта точка

Любое взаимодействие с формой преобразуется либо в прогресс (тик), либо (встроенное сообщение об ошибке). Единственный случай, когда это не будет работать, - это когда пользователь нажимает «Зарегистрироваться», не предоставляя никакой информации, которая крайне маловероятна /иррациональна, и вам не нужно ее обслуживать.

введите описание изображения здесь>> </p>

<p> Если вы имеете дело с более длинными и более сложными формами, стоит приложить все усилия, чтобы структурировать вашу форму с помощью <strong> <a href = фрагментирование информации , требуемое значимым образом и введение поэтапный процесс /мастер или аналогичный шаблон, если это необходимо. Это поможет оптимизировать ваш дизайн и сосредоточить внимание на предотвращении ошибок.


Содержимое сообщений об ошибках

Другая область, которую вам может потребоваться, если включена опция «Отправить» или «Продолжить», это:

  

Совпадение между системой и реальным миром

Это может быть краевой случай, но, тем не менее, его стоит упомянуть; рассмотрите типичную форму входа с включенной кнопкой входа в систему, и пользователь нажимает на логин без каких-либо подробностей, что сообщение об ошибке tel пользователь без нарушения безопасности системы: Простейшее сообщение, которое я видел, читал следующее: «Недопустимое имя пользователя или пароль "

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


Когда может быть отключена кнопкаиспользуется?

Цель отключенной кнопки - вытеснить и предотвратить сообщения об ошибках, и они могут достичь этого оптимальным образом, когда:

  1. Форма имеет ограниченное количество полей , и пользователи могут видеть, какие поля отсутствуют.
  2. визуальный акцент на обязательных полях и четкая обратная связь при заполнении каждого поля (Цели, которые необходимо выполнить для активации кнопки)
  3. метки полей короткие и могут быть легко отсканированы , например, имя, имя пользователя, город /город и т. д., что усиливает 1-ю точку.
  4. Все поля являются обязательными , поскольку он предлагает понятный путь для активации пользователями кнопки и принятия к действию *.

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


Является ли кнопка отключения препятствием?

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


Проектирование для людей не машин

  

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

     

Источник: Дон Норман: Проектирование для людей

Я думаю, что я пытаюсь сделать то, что «люди» - это люди, как и все мы, и мы не должны недооценивать их разум и относиться к ним снисходительно:

  • Они будут Читать & понимать , если они четкие, четкие и сжатые
  • Они будут проверять для того, что от них требуется , если форма хорошо структурирована и встроена в то, что они хотят достичь (сфокусировано на задачах)
ответил Okavango 17 FebruaryEurope/MoscowbTue, 17 Feb 2015 20:04:16 +0300000000pmTue, 17 Feb 2015 20:04:16 +030015 2015, 20:04:16
23

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

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

Можно спросить: почему это отключено?

Нет никакой пользы, чтобы пользователь мог перейти через этот обруч.

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

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

Не останавливайте пользователя на выполнении заданной задачи по нажатию кнопки «Отправить», вам приятно знать, что форма позволит вам попробовать с минимальными последствиями. Будет достаточно мягкое сообщение об ошибке «Прочитайте ошибки формы, выделенные красным».


Другие мысли:

Я не уверен, какие веб-сайты или страницы, на которые вы часто видите это, но быстро просматриваете первые 10 форм «Контакты», которые находятся в Google, похоже, противоречат вашему наблюдению.

Мои два цента:

Если бы мне пришлось угадать, то отключение кнопки «Отправить» стало стандартной функцией популярного плагина проверки, а «разработчики» просто оставляют его как есть.

ответил MonkeyZeus 17 FebruaryEurope/MoscowbTue, 17 Feb 2015 19:20:30 +0300000000pmTue, 17 Feb 2015 19:20:30 +030015 2015, 19:20:30
14
  

мы часто видим, что кнопка «продолжить» неактивна

Я думаю, что это может быть ложным. Читайте дальше!

Для чего это стоит, я обновляю некоторые старые исследования по регистрации форм для популярных сайтов на данный момент и обнаружил, что довольно небольшой процент - около 5% или менее - отключить кнопку «Отправить» (будь то окончательный зарегистрируйтесь или кнопку продолжить ), пока данные не будут считаться «действительными».

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

Существует также проблема с отключенными кнопками, если только форма не выполняет замечательную работу по проверке данных «на лету», не отвлекая пользователя одновременно, то это предотвращает возможность пользователя видеть, что неправильно с контентом.

Один сайт, который делает это приемлемо для BBC ID

введите описание изображения здесь>> </p>

<p> Однако они делают  исключительную прозрачность  на лету, что действительно, а что нет. </p>

<p> <img src =

GoDaddy - это третий пример сайта, который отключает кнопку отправки. Однако здесь они не отключают кнопку до тех пор, пока все данные не будут valid - поля просто должны быть не пустыми - так будет сделана одна буква в каждом поле.

Здесь отключенная кнопка помогает пользователю определить поля пропущенные , а не недействительные .

введите описание изображения здесь>> </p>

<p> Итак, вкратце: </p>

<p> Если вы действительно хотите отключить кнопку, пока все данные  действительно не будут действительны , тогда <strong> форма должна быть очень короткой </strong> и <strong> исключительно хорошо проверена </strong > на лету. Длинная форма будет слишком неясной относительно того, что не так, и необходимый уровень валидации будет чрезмерно отвлекающим для всех полей. </p>

<p> <strong> Это приведет вас к небольшому меньшинству </strong>, особенно для полной проверки - независимо от того, что вы так часто видите:) </p></body></html>

ответил Roger Attrill 17 FebruaryEurope/MoscowbTue, 17 Feb 2015 20:30:30 +0300000000pmTue, 17 Feb 2015 20:30:30 +030015 2015, 20:30:30
10

Не следует отключать кнопку

Рассмотрим ситуацию с точки зрения пользователя. Разделите пользователей на две группы.

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

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

Для последней группы они считают, что форма завершена. Отключенная кнопка позволяет им знать, что они ошибаются, но не помогает им определить, что пошло не так. Теперь они должны отсканировать всю форму , которая, по их мнению, будет правильно заполнена для любой нотации, которую они пропустили, указав неполную секцию. Это упускает возможность взаимодействовать с пользователем. Это взаимодействие может помочь им найти разделы формы, которые не заполнены полностью. Отсутствие этого взаимодействия превращает форму в загадку: «webadmins знают, что вы сделали что-то не так, но вы должны ее найти».

Учитывая, что есть другие способы обработки графического намека на то, что форма завершена (я сам люблю выделенные кнопки), а кнопка «Продолжить» предоставляет пользователям возможность обратиться за помощью, я не вижу причин когда-либо отключать кнопку .

ответил Cort Ammon 19 FebruaryEurope/MoscowbThu, 19 Feb 2015 01:19:13 +0300000000amThu, 19 Feb 2015 01:19:13 +030015 2015, 01:19:13
4

Будут нажиматься кнопки. Если пользователь видит кнопку, он захочет нажать. Отключенная кнопка становится активной только тогда, когда все данные заполняются в этой конкретной форме, не является хорошим опытом. Я бы предпочел, чтобы пользователь (который я делаю с формами, которые я проектирую) в самом начале, что все поля являются обязательными, и вы не можете зарегистрироваться, если какое-либо из этих полей осталось пустым. Ваша форма не игра, в которой пользователь должен закончить уровень, который он играет, чтобы разблокировать другой. Просто мысль:)

ответил Guru Munishwar 18 FebruaryEurope/MoscowbWed, 18 Feb 2015 13:55:28 +0300000000pmWed, 18 Feb 2015 13:55:28 +030015 2015, 13:55:28
4

Это мета-ответ из разных выраженных мнений.

Если вы хотите отключить эту кнопку, вы все равно должны проверить наличие кликов и указать причину, по которой она отключена. Это имеет два преимущества: отображается меньше ошибок, и если вы почему-то ранее не сообщали, почему форма не может быть отправлена, вы можете явно сделать это.

ответил hildred 18 FebruaryEurope/MoscowbWed, 18 Feb 2015 20:08:22 +0300000000pmWed, 18 Feb 2015 20:08:22 +030015 2015, 20:08:22
1

Да кнопка Продолжить должна быть отключена до тех пор, пока все поля required не будут заполнены не менее some > text (предполагается, что требуемые поля каким-то образом назначаются пользователю). Доступность здесь заключается в том, что система не может даже пытаться продолжить , пока не получит требуемый ввод от пользователя.

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

Оттуда нажатие кнопки Продолжить запускает полную проверку и может возвращать пользователю подтверждение сообщений.

ответил landonz 17 FebruaryEurope/MoscowbTue, 17 Feb 2015 21:36:45 +0300000000pmTue, 17 Feb 2015 21:36:45 +030015 2015, 21:36:45
1

Кнопка «Продолжить» формы должна быть отключена до тех пор, пока все поля required не будут заполнены и не пройдут проверку.

Почему? Ну, это здравый смысл, действительно:

Представьте, что вы Банк. И у вас простая настройка формы, которая позволяет переносить деньги с одной стороны на другую. У вас есть «С какого счета вы хотите перевести деньги?» поле, поле «Получатель» и поле «Количество для отправки».

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

Теперь, что произойдет, если мы сделаем все три поля обязательными и укажем это пользователю, и пользователь действительно вводит информацию во всех обязательных полях, но они ошибаются в поле «Сумма для отправки»?

Давайте просто скажем, что пользователь ввел 0.00.

Ну, мы не можем отправить $ 0.00. Если бэкэнд не настроен должным образом для обработки таких случаев, как отправка нулевых долларов, что может произойти? Когда пользователь нажимает «Продолжить», это не только приводит к тому, что вы теряете пропускную способность и время, но также заставляет пользователя терять пропускную способность и время. И в бизнесе время равно деньгам, и если многие люди постоянно совершают ошибки или не вписываются в детали, когда они должны быть, вы эффективно создаете слишком много накладных расходов для себя (позволяя использовать слишком много ресурсов), а я что это в конечном итоге приведет к несоответствующим данным в какой-то момент.

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

ответил Jase 18 FebruaryEurope/MoscowbWed, 18 Feb 2015 13:42:49 +0300000000pmWed, 18 Feb 2015 13:42:49 +030015 2015, 13:42:49
1

Я считаю, что есть средний уровень. Кнопка с визуальным отключением не означает, что щелчок по ней «ничего», как было предложено. Это будет логически препятствовать пользователю продвигаться в отсутствие того, что требуется для включения этого основного действия, но нет никаких оснований, что щелчок по нему не может предоставить пользователю предупреждение о том, почему он отключен и как его включить.

ответил Bryan 20 FebruaryEurope/MoscowbFri, 20 Feb 2015 06:15:11 +0300000000amFri, 20 Feb 2015 06:15:11 +030015 2015, 06:15:11
1

Я буду держать это в курсе и до такой степени, поскольку большинство ответов уже охватывают множество допустимых и хороших областей.

Добавляет ли значение значение?

Я не могу вспомнить случай, когда пользователь должен /должен посмотреть кнопку продолжения, чтобы узнать, закончил ли он заполнение формы. Всякий раз, когда пользователь хочет нажать кнопку, он считает , что он закончил форму и направил его на любые необходимые действия, необходимые в этот момент. В принципе это уже должно быть ясно в хорошо продуманной форме, но тот факт, что пользователь полагал, что он был завершен доказывает , что это не так, поэтому фокусировка, временное мигание или каким-то другим способом пользователь является хорошим планом действий.

Как насчет проверки, которая не является синхронной?

Одна вещь, которая еще не была рассмотрена, заключается в том, что множество форм - это веб-формы или другие интернет-зависимости, и не все проверки могут быть мгновенными. Чтобы привести типичный пример регистрационной формы с именем пользователя: имя пользователя нужно искать в базе данных, и если имя пользователя уже используется, для этого поля потребуется другое имя пользователя. Обычно это очень быстрый поиск, но что, если пользователь, например, использует мобильный интернет и просто потерял соединение или имеет невероятно медленное соединение? При отключенной кнопке продолжения пользователь получит заполненную форму и не будет нажата кнопка, которая будет более запутанной, чем нажатие кнопки, и ожидание загрузки следующей страницы, которая будет использоваться таким пользователем при плохом подключении к Интернету. до бит дольше.

Конечно, вышеизложенное может быть несколько предотвращено, если поля, ожидающие проверки, очень четко показывают это, но обычно это не делается, и если поля all проверяются в прямом эфире на стороне сервера, как это все чаще, тогда это может быть просто запутать пользователя: «Почему вокруг моего имени?». Таким образом, если вы хотите сделать это, единственным решением, о котором я мог думать, было создание очереди с отключенной кнопкой отправки во время проверки. Единственная опасность заключается в том, что пользователь может подумать, что он отправил форму уже по ошибке, так как отключенная кнопка часто связана с нажатым /нажатым состоянием.

ответил David Mulder 22 FebruaryEurope/MoscowbSun, 22 Feb 2015 00:31:52 +0300000000amSun, 22 Feb 2015 00:31:52 +030015 2015, 00:31:52
1

При разработке некоторых веб-страниц я пришел на этот сайт, чтобы узнать, что другие должны были сказать, чтобы принять некоторые решения. Я пришел к выводу, что лучший ответ - «это зависит».

Я думал о моем собственном опыте с включенными кнопками, которые ничего не делают, кроме как сказать мне, что я сделал не так, а иногда и на плохо спроектированной веб-странице, очистить все! Я особенно раздражаюсь, когда я нахожусь в длинной форме, и ошибка находится наверху страницы ... которую я не вижу, пока не нажимаю кнопку «Отправить» несколько раз, а затем прокручиваю вверх, чтобы увидеть проблема. Кроме того, не каждый веб-сайт дает понять, что требуется, пока не будет нажата кнопка «Отправить». Не поймайте меня в плохой день с веб-сайта, который говорит мне после того, что я должен что-то ввести!

Я думаю, что веб-страницы должны быть абсолютно понятны, что требуется в форме, прежде чем я нажму кнопку, чтобы, если я нажал кнопку «Отправить» перед входом в обязательное поле, я думаю, что, думаю, я не могу поверить, что я пропустил это , Я знал, что это необходимо! С другой стороны, я должен согласиться с Jase, что я, конечно, не хочу, чтобы кнопка «Отправить» была включена на веб-сайте моего банка, пока я не ввел все необходимые поля! Я использую сайт своего банка больше, чем любой другой сайт, а кнопка «отключено» никогда не приводила меня в замешательство.

Итак, мой вывод? Если у вас обширная форма с несколькими полями, некоторые из них требуются, некоторые из них являются необязательными, четко обозначают все необходимые поля, активируют кнопку «Отправить» и, когда форма отправляется с недопустимыми или отсутствующими необходимыми данными, выделите поля проблем и список сообщений с ошибками. Если у вас есть форма, где все поля отображаются на одной странице ... вместе с кнопкой «Отправить», отключите кнопку и четко укажите, что нужно сделать пользователю, чтобы включить кнопку. Кнопка «Отправить» также может быть включена; однако, любой из способов должен работать отлично и обеспечить хороший пользовательский интерфейс ... здесь кроется красота веб-дизайна ... это зависит от вас! Наконец, знайте, какой путь сложнее закодировать, поскольку это также может помочь вам принять решение так или иначе, когда либо кажется прекрасным ... сохранение затрат для клиента всегда должно быть предметом рассмотрения.

Ох ... и как часто типичный пользователь «отключает» свой HTML? Я думаю, что это не распространено, и средний пользователь (не ИТ) даже не знает, как это сделать, поэтому я не думаю, что это достаточно хорошая причина, чтобы принять это во внимание при разработке удобного для пользователя сайта. Если пользователь достаточно умен, чтобы отключить свой HTML, тогда они должны знать, что им нужно включить его для полноценного функционирования сайта! Счастливое проектирование! :)

ответил My Two Cents 18 MarpmFri, 18 Mar 2016 23:09:31 +03002016-03-18T23:09:31+03:0011 2016, 23:09:31
0

Я думаю, что это плохо, чтобы отключить его, когда дело доходит до проверки правильности формы HTML. Это отнимает все удобство использования без проверки формы, оставляя вас только с проверкой.

Взял эту простую форму, например, когда вы заполните что-то в поле a и нажмите enter, ничего не произойдет. У вас нет видимых отзывов. Вы не знаете, что требуется, просто глядя на визуальный интерфейс.

<form>
  <input type="text" name="a" required>
  <input type="text" name="b" required>
  <input type="submit" disabled>
</form>

Где бы вы включили кнопку

<form>
  <input type="text" name="a" required value="sometext">
  <input type="text" name="b" required>
  <input type="submit">
</form>

Теперь, если вы хотите нажать Enter после ввода чего-либо в поле a, вы получите всплывающее окно, и поле ввода также будет сфокусировано

 введите описание изображения здесь>> </a> </p>

<hr>
<p> Наличие полностью структурированной формы проверки без отключения кнопки продолжения </p>

<ul>
<li> Вам не нужен javascript </li>
<li> Страница не перезагрузится (таким образом, сохраняя пропускную способность) </li>
<li> Вы получаете хорошую детальную обратную связь на своем родном языке, из-за чего не так (номера разговоров с шагом, max max добавлены к нему - вы получаете что-то вроде: «введите действительное число, два ближайших, действительных числа: x, y» ) </литий>
<li> Неверно заполненное поле также фокусируется </li>
<li> Не запутывает пользователя, почему он не может щелкнуть по нему, на самом деле все наоборот, вы знаете, что не так с формой </li>
</ul></body></html>

ответил Endless 30 Maypm17 2017, 13:48:35

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132