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

В этом материале поговорим о том, как использовать кнопки с индикатором загрузки для улучшения user experience.

Какие проблемы они решают

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

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

Представьте, что после установки новостного приложения юзера просят создать учётную запись. Он заполняет длинную анкету, выбирает категории интересов, привязывает социальные сети и отправляет информацию. Система долго обрабатывает информацию на сервере. Человек ждёт минуту-две, а потом закрывает и удаляет приложение.

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

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

Индикатор прогресса — интерактивный диалог, который отображает состояние системы. Нажали кнопку отправки, появился progressbar и дополнительные объяснения не нужны. Хороший user interface в обязательном порядке предоставляет информацию о ходе выполнения операции. Бывают случаи, когда визуальные элементы спасают ситуацию. Они приходят на помощь, если действие выполняется слишком долго или система перегружена запросами.

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

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

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

Загрузка может длиться 5-10 секунд или даже несколько минут. Главное, чтобы время было сопоставимо с пользой, которую получит человек. Если он заполняет форму и на отправку данных уходит 5 минут, мало кто будет ждать. Когда речь идёт о скачивании важного файла, который сложно найти, подождать можно. Особенно, если загрузка осуществляется в фоновом режиме.

Типы индикаторов

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

Давайте разберёмся, как правильно использовать инструменты визуализации на примерах.

Петлевая анимация

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

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

Процентный индикатор

Распространённый формат, который чётко отображает ход выполнения операции от 0 до 100%. Если добавить крутые эффекты, пользователи с удовольствием будут за ними наблюдать. Индикатор сопровождает нас везде: установка приложений на смартфоне и компьютере, загрузка файлов, просмотр видеоконтента. 

В примере выше кнопка загрузки трансформируется в красивый блок. Анимация плавная и приятная. 

Прогресс-бар

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

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

Способы применения

Любой элемент UI надо использовать по назначению. Хороший интерфейс отличается логичностью, последовательностью и наличием обратной связи. Если добавить анимацию и progressbar без необходимости, можно запутать аудиторию, а не упростить решение задачи.

Отображение прогресса

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

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

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

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

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

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

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

Проверка данных

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

Посмотрите, как разработчик добавил проверку пароля на соответствие заданным требованиям. При наборе символов заполнитель линии показывает, сколько осталось до финиша. Через определённое время полоска становится зелёной и появляется галочка.

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

Загрузка и выполнение действий

Чаще всего индикаторы и прогресс-бары используют для скачивания и загрузки файлов. Можно пойти дальше и добавить статус выполнения к важным действиям: подписка на обновления по email, активация sim-карты и другие операции.

Посмотрите, насколько изящно реализована анимация. Сначала тележка заполняется, затем показывается иконка, которая подтверждает успешное завершение. 

Советы по использованию

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

Объясните, что происходит

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

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

Отвлекайте от ожидания

Задача прогресс-бара заключается не только в информировании. Нестандартная анимация переключает внимание и человек забывает про ожидание. Люди не любят тратить время. Если отправка анкеты или загрузка файла будет длиться слишком долго, пострадает user experience. Чтобы избежать этого, добавьте креативную анимацию.

Показывайте время

Подсказка с длительностью выполнения задачи покажет, что у процесса есть конец. Просто напишите: «Активация подписки займет не более 3 минут. Мы проверим данные кредитной карты у платёжного агрегатора».

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

Укажите объём работы

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

Способ реализации на картинке ниже — идеальный вариант для сложных задач. Человек понимает, что 3 из 22 сообщений отправлены и надо ещё подождать.

Проведите тестирование

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

Если отправка данных была прервана из-за проблем с интернетом — юзер должен об этом знать. Тогда он захочет потратить время ещё раз и запустит процесс заново.

Добавьте плавность

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

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

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

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

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

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

Веб-студия IDBI ставит пользовательский опыт на первое место. Давайте вместе разработаем идеальный UI для вашего проекта.