🚧Stepper

Обзор

Степпер или индикатор прогресса — это визуальное представление прогресса пользователя через набор шагов, направляющих к завершению определенного процесса.

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

Логический порядок

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

Шаги и их доступность

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

Названия шагов

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

Допускается использование степпера без названий шагов и вспомогательного текста при условиях:

• степпер содержит 3-4 шага

• контекст степпера понятен пользователю (это доказано пользовательскими исследованиями).

Проверка

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

Описание работы

Типы шагов

Общие правила и принципы

Каждый шаг обозначается своим порядковым номером. Если шаг имеет индикацию Success, Warning, Danger, то при выборе такого шага его порядковый номер меняется на иконку-индикатор.

1. Выбран шаг №1. Его Status: Default (действия не выполнены)

1. Выбран шаг №1. Его Status: Success (действия выполнены)

1. Выбран шаг №2.

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

• кликом на кнопки перехода (панель снизу)

• кликом на кнопки перехода + кликом на шаг (кружок с номером / галочкой + название).

Переход только прокликиванием шагов не используется. Если шаг заполнен, то кнопка перехода к следующему оформляется как Fill Primary:

Есть 2 возможных сценария:

1. Пользователь может просмотреть вкладки с последующими шагами

2. Шаг заблокирован до тех пор, пока не выполнен предыдущий шаг.

С возможностью просмотра следующих шагов

Текущий шаг не выполнен, кнопка перехода на следующий шаг Outline secondary:

Без возможности просмотра следующих шагов

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

Анатомия

1. Step number. Номер шага.

2. Name. Название шага, не обязательное, но рекомендуемое.

3. Divider. Линия-разделитель, нет у последнего шага.

Размеры и оформление

Внутренние отступы

Цвет

Внешние отступы

Stepper размещается в контейнер, значения отступов внутри которого описаны в Grids. Рекомендуемые отступы: 16рх, 8рх.

16рх

8рх

Аналогично для вертикального Stepper:

16рх

8рх

Адаптивность

Состояния (State)

Интерактивность

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

Состояния (State)

3 основных состояния шага:

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

2. Hover — при наведении курсора

3. Disable — неактивное (недоступное для взаимодействия).

Фокус (Focus)

Так же существует состояние Focus. Он появляется в момент выбора шага с помощью клавиатуры или при клике на него, и может быть совмещен с состояниями Default, Hover. Невозможен в состоянии Disabled.

Взаимодействие с клавиатуры

Рамка фокуса появляется при переходе клавишей Tab, если фокус стоял на другом компоненте. Если шаги располагаются вертикально, переключение фокуса производится клавишами ↓ ↑, если горизонтально — клавишами ← →.