Клавиатура

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

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

Фокус — это выбор одного контрола или элемента интерфейса, с которым взаимодействует пользователь в текущий момент.

При работе с клавиатурой у элемента, с которым взаимодействует пользователь, появляется визуальное отображение фокуса. Например, у кнопок и полей рамка, у ссылок — подчеркивание.

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

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

Пользователь переключает фокус между интерактивными элементами клавишей Tab.

• Tab — переключает к следующему элементу
• Shift + Tab — к предыдущему

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

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

Правильно

При клике в пустую часть страницы фокус снимается.

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

Активировать любой элемент можно с помощью клавиш Enter или Space, а деактивировать с помощью Enter, Space или Esc.

Если нет фокуса на интерактивном элементе, то с помощью Space, Page Up и Page Down скроллится страница.

Меню комбобокса, поля с датой и других полей с подсказками раскрываются сразу по фокусу, это позволяет пользователю быстрее заполнить это поле.

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

Ctrl / Cmd + Enter — открывает ссылку в новом окне.

После того как элемент активирован, можно перемещать фокус или активную область внутри элемента, например с помощью стрелок ↓ ↑ в раскрывающемся списке. Перемещение фокуса внутри элемента стрелками зацикливается — с последнего элемента фокус перейдет на первый.

Выбор значения внутри элемента происходит по нажатию Enter, при этом фокус остается на том же контроле, который только что активировал пользователь.

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

Когда фокус у поля с текстом, некоторые клавиши работают иначе.

• Space — ввод пробела
• Enter в многострочном поле — переход на новый абзац

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

↓ ↑ ← → — перемещение между буквами и строками.

При открытии модального окна или сайдпейджа с блокировкой страницы, фокус клавишами Tab и Shift + Tab перемещается только внутри окна.

Закрыть модальное окно можно клавишей Esc, а также переместив фокус на крестик в правом верхнем углу, кнопку отмены в терминальной плашке и нажав Enter.

После закрытия фокус должен вернуться на тот элемент интерфейса, на котором он был до открытия.

Обычно отправка формы происходит по нажатию Enter, но в Контуре мы делаем исключение, чтобы пользователю сложнее было совершить ошибку, отправив форму случайно. Форму можно отправить, только нажав на кнопку отправки.

При загрузке страницы установите фокус на элементе для первого или основного действия, которое, скорее всего, выполнит пользователь:

«Контур Фокус» — стартовый фокус должен стоять на поле поиска

Не переназначайте уже знакомые пользователю действия и сочетание клавиш. Сочетание клавиш Ctrl + F — поиск на странице — очевидное и уже привычное действие по переключению, поэтому нельзя его переназначать.

Подробное описание и возможные исключения при взаимодействии контролов с клавиатурой читайте в разделе «Фокус и работа с клавиатурой» у каждого компонента.