text buttons states 1160x620 - В каких случаях необходимы кнопки с индикатором загрузки

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

Ошибки действий

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

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

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

Кнопки-индикатор прогресса

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

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

В каких случаях необходимы кнопки с индикатором загрузки

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

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

В каких случаях необходимы кнопки с индикатором загрузки

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

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

В каких случаях необходимы кнопки с индикатором загрузки

Следуйте правилу двух секунд

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

Оригинал: uxmovement.com

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Система подбора цветов для интерфейса. Основы. Часть 1

Как создать доступный цифровой опыт Цвет, как инструмент Сегодня мы проводим большую…

Новый подход к подбору цвета интерфейса

Совместное использование нового способа построения цветовых систем для доступных пользовательских интерфейсов. Создайте…

Базовая сетка 4px для достижения визуальной точности

Я пользуюсь базовой сеткой 4px уже более 2-х лет и пытаюсь заставить мою команду начать использовать ее.