Лучшие практики дизайна индикаторов прогресса

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

1. Избегайте использования индикатора прогресса для быстрых задач

Для задач, которые занимают менее 5 секунд, лучше использовать скелетные экраны или индикаторы загрузки. Урок: Как создать индикатор загрузки в Figma. Урок: Как создать анимированный скелетный экран в Figma.

2. Сохраняйте дизайн индикатора прогресса простым

Сам индикатор не должен привлекать слишком много внимания. Большинство продуктов выиграют от чистых, понятных визуальных элементов с минимальными отвлечениями (без излишне ярких анимаций). При рассмотрении визуального и интерактивного дизайна вашего индикатора прогресса подумайте о том, как он будет работать для новых и постоянных пользователей. Спросите себя: Как будет выглядеть мой дизайн при первом и тысячном просмотре пользователем? Это поможет вам избежать создания избыточных анимаций, которые могут выглядеть хорошо для новых пользователей, но, вероятно, будут раздражать постоянных. При выборе кривой анимации для вашего индикатора прогресса используйте кривые ускорения, такие как ease-in или ease-out, чтобы движение выглядело естественно.

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

3. Избегайте вводящего в заблуждение прогресса

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

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

4. Используйте правильный тип индикатора прогресса

Существует два типа индикаторов прогресса — неопределенные и определенные. Неопределенный индикатор используется, когда продолжительность неизвестна и прогресс не может быть измерен. Таким образом, вместо отображения прогресса система указывает активность, чтобы заверить пользователей, что работа выполняется. Индикатор прогресса просто показывает «что-то происходит».

Неопределенный индикатор прогресса. Изображение от Material Design. Для задач, где время известно (например, загрузка системных обновлений), индикатор прогресса визуально движется к завершению. Вы можете показывать определенные индикаторы прогресса вместе с дополнительной информацией, такой как:

• Время, необходимое системе для завершения операции (например, «Осталось 20 мин»).
• Что система делает в данный момент (например, «Шаг 2 из 4»), чтобы сообщить о прогрессе.
Вы также можете преобразовать один тип индикатора загрузки в другой.

Преобразование неопределенного индикатора прогресса в определенный. Изображение от Material Design.

5. Удерживайте внимание пользователей во время длительного ожидания

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

• Предложения микро-взаимодействий или мини-игр. Некоторые приложения позволяют пользователям нажимать на объекты, чтобы «собирать очки» по мере их появления на экране.
• Использования ненавязчивого текста, например «Мы почти там!», когда время ожидания почти истекло.

6. Плавный переход к следующему шагу

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

Анимация по завершении. Изображение от Cristina Guedes