В каких случаях необходимы кнопки с индикатором загрузки
Кнопки бывают не только активными и неактивными, также у них есть состояние загрузки. Это состояние обычно не отображается пользователям, потому что большинство действий происходит в течение нескольких секунд. Но если, процесс загрузки требует немного больше времени, то отсутствие отображения состояния загрузки приводит к различным ошибкам действий.
Ошибки действий
Если для завершения действия требуется больше времени, чем обычно, пользователи должны понимать, что система обрабатывает их запрос. Если они не увидят никакого процесса, они подумают, что неправильно нажали кнопку. Следовательно, они будут нажимать кнопку снова и снова.
Когда пользователь нажимает кнопку более одного раза, это не только увеличивает нагрузку на систему, но и дублирует операцию. Это может привести к значительным ошибкам, в зависимости от ситуации, и создаст негативное впечатление у пользователей.
Например, пользователи могут случайно отправить одно сообщение несколько раз или заказать один и тот же продукт дважды. Эти ошибки действий создают дополнительные данные, которыми вы должны управлять и очищать. Очистка этих данных может занять у вас немало времени и денег.
Кнопки-индикатор прогресса
В случае, если процесс загрузки занимает более двух секунд, вам нужно использовать кнопки-индикатор прогресса, дабы исключить подобные ошибки. Исследование показало, что пользователи привыкли к загрузке страницы в течении 2-х секунд, не более, и поэтому, становятся слишком нетерпеливыми, если это занимает больше времени.
Кнопка-индикатор прогресса визуально указывает состояние загрузки. Когда пользователи видят происходящий процесс, они и не подумают нажимать кнопку снова, они будут ждать окончания процесса загрузки.
Вы можете отобразить состояние загрузки вне кнопки, но это не совсем удачная идея. Внимание пользователя уже сосредоточено на кнопке, так что лучшим вариантом будет отобразить процесс загрузки прямо на ней. Пользователям потребуется дополнительное время и внимание на поиск индикатора загрузки, если вы расположите его в другом месте, а это очень не удобно.
Кнопки-индикатора прогресса должны быть простыми в реализации и согласованны с общим стилем страницы. Таким образом, распознавание состояния загрузки станет куда проще, и кнопки не будут конфликтовать с другими элементами дизайна. Индикатор прогресса не должен влиять на размер кнопки. Также, обратите внимание на цвет кнопки, она не должна сливаться с фоном. Лучшим решением будет использовать полупрозрачный цвет кнопки и контрастный значок загрузки.
Индикатор прогресса не должен перекрывать значок кнопки. Это трудно сделать, когда у вас недостаточно места, чтобы удачно совместить индикатор загрузки и значок. В таком случае, вы можете использовать линейный индикатор загрузки, вместо привычного круглого. Вы также можете показать прогресс в верхнем краю кнопки. Очень удачное решение проблемы, как по мне.
Чтобы лучше информировать пользователей о происходящем, вы также можете изменить значок кнопки и описать происходящий процесс. Например, изменение исходного ярлыка с «отправить» на «отправка…» прямо информирует о процессе загрузки. Если ваша кнопка недостаточно широка, то этот вариант вам не подойдет.
Следуйте правилу двух секунд
Большинство дизайнеров не всегда учитывают отображение состояния загрузки при разработке кнопок. Но когда процесс загрузки занимает более двух секунд, то это просто необходимо. Кнопки-индикаторы прогресса контролируют отображение загрузки для пользователей. Используйте их, чтобы избегать ненужных ошибок и перегрузки системы, ведь это создаст только лишние проблемы вам и вашим пользователям.
Значок загрузки как называется
Но пока интернет-провайдеры меряются мегабитами в секунду, «тяжелеет» и контент. И это правильно, но, как понимаете, чревато проблемами со скоростью. Фактором может быть что угодно: от вялого хостера до старого браузера пользователя.
Как дать пользователю счастье, если на загрузку странички нужно время? Подарить ему универсальную игрушку-погремушку — лоадер.
Самолеты вполне могли бы делать без иллюминаторов, автобусы — без окон, а экран инсталлятора программы — без полосы прогресса.
Зачем все эти приблуды конечному пользователю? В транспорте он вполне может смотреть кино на планшете, есть рыбу/курицу, читать книгу или видеть сны.
Типичный вид из иллюминатора, вопреки ожиданиям. И так 8 часов.
А пока устанавливается GTA — сходить покурить или ужин приготовить. Давайте так и сделаем?
— Нет? Вам так некомфортно?
У обывателя должна быть пресловутая иллюзия контроля. Вы смотрите в крошечное неудобное самолетное окошко: и вам кажется, что под крылом проплывают знакомые пейзажи с географического атласа, вы видите, когда эта алюминиевая махина набирает высоту и снижается. Сразу становится спокойнее.
То же самое и с лоадером: фактически вы можете не знать, сколько еще минут (часов?) продлится распаковка архива, но вот на экране уже половина этой синей «колбасы», а значит, всё не так уж плохо!
Элементы интерфейса сайта
Элементы интерфейса, их еще называют элементы управления, которые используются при разработке сайта и при его использовании. Рассказываем, что есть что на самом деле.
Кнопка — элемент, при нажатии на который происходит какое-то действие на сайте.
Radiobutton — позволяет пользователю выбрать одну опцию.
Checkbox — позволяет выбрать несколько опций.
Select — позволяет пользователю выбрать одну опцию из выпадающего списка.
Accordeon — элемент интерфейса состоящий из заголовков и скрываемого и открываемого контента.
Слайдер — переключатель изображений (или другого контента) работающий автоматически или вручную.
Контент — текст, изображения, видео, то есть наполнение сайта.
Popup — небольшое всплывающее окно в углу экрана.
Модальное окно — разновидность всплывающего окна. Оно появляется на большую часть экрана и блокирует работу с остальным сайтом. Это может быть форма обратной связи, или просмотр фотографий в вк и фейсбуке.
Блок (Экран) — смысловой элемент включающий в себ я информацию только об одной сущности. Обычно блок начинается с заголовка и отделен от следующего каким-либо визуальным решением, цветом, линией, тенью.
Раздел — страница сайта. Тут все просто.
Шапка (хеддер / header) — самая верхняя часть сайта. Обычно в ней расположены логотип, меню и контактная информация. Шапка чаще всего бывает закрепленной, т.е. она перемещается вместе с перемещением пользователя по странице.
Подвал (футер / footer) — самая нижняя часть сайта. Чаще всего в ней расположена карта сайта, контактные данные, быстрые ссылки на популярные разделы, копирайт, политика конфиденциальности и ссылка на разработчика сайта.
Галерея — набор из нескольких изображений.
Превью (preview) — изображение или часть другого контента, уменьшенная в размере. При нажатии на превью открывается исходный размер контента, отображаемого в превью.
Бордер — обводка элемента. Бывает solid (цельной), dashed (линиями) и dotted (точками).
Тултип (tooltip) — подсказка, всплывающая при наведении на элемент.
Курсор Поинтер (Pointer) — тип курсора в виде руки с вытянутым указательным пальцем. Обычно появляется при наведении на ссылку.
Курсор Текст (Text) — тип курсора, стандартный для редактирования текста.
Навигация — любой вид элементов позволяющий перенаправлять пользователя на похожий элемент будь то страница, другая картинка, следующий текст и так далее.
П агинация — нумерация страниц, обычно отображенная как навигация в конце страницы.
Списки — в веб интерфейсах присутствуют нумерованные списки (цифрами), маркированные списки (точки, квадратики, кружки, черточки) и списки определений.
Стрелочки — вид навигации.
Поисковая строка — строка для ввода поискового запроса.
Плеер — элемент воспроизводящий аудио и видеофайлы.
Ползунок — предназначен для ввода чисел в указанном диапазоне.
Текстовое поле — поле для ввода текстовых значений.
Поле пароля — поле для ввода пароля. Автоматически скрывает символы, заменяя их на точки.
Маска — это значения, указывающие формат допустимых значений входных данных в поле.
Ссылка — элемент интерфейса перенаправляющий вас по адресу, указанному в нем.
Состояние ссылок и кнопок: Hover (Ховер) — состояние выбранного элемента при наведении на него курсора мыши (важно знать — в мобильных устройствах нет этого состояния)
Состояние ссылок и кнопок: Focus (Фокус) — состояние выбранного элемента при переключении между элементами клавишей tab (чаще всего это синяя обводка вокруг элемента)
Состояние ссылок и кнопок: Active (Эктив) — состояние выбранного элемента в момент нажатия на него.
Якорь — элемент интерфейса перенаправляющий вас по адресу и к конкретному элементу, указанному в нем.
Вкладки (табы) — элемент интерфейса, так же как и аккордеон, состоит из заголовка и скрытого контента, на который можно попасть при обращении к заголовку.
Строка загрузки — элемент, показывающий степень загрузки контента или исполняемой функции.
Переключател ь (switch) — элемент интерфейса, который позволяет выбрать одно из состояний, чаще всего вкл/выкл.
Алерт окно — всплывающее окно, блокирующее взаимодействие пользователя не только с элементами на данной страницы, но и в целом со всем браузером.
П релоадер (Preloader) — анимированный элемент, воспроизводящийся в процессе загрузки сайта, видео, изображений и другого контента.
Рейтинг (Rating bar) — элемент интерфейса показывающий среднюю оценку.
Теги — элемент чаще всего располагающийся под контентом. Показывает принадлежность статьи, товара и пр. к конкретной категории. Зачастую при нажатии на тег, вы попадете на страницу со всем контентом, у которого есть такой тэг
Хлебные крошки — навигационная цепочка — элемент интерфейса, показывающий путь от начала до того уровня, где в данный момент находится пользователь.