Школа
Веб-разработка

Расскажите о горячих клавишах на сайтах

Расскажите, пожалуйста, что думаете, о горячих клавишах на сайтах.

Какой системы внедрения горячих клавиш придерживаетесь на своих проектах?

Никита Скурыгин
15 апр 2021
👁 4731   🗩2
Веб-разработка

Расскажите о горячих клавишах на сайтах

Расскажите, пожалуйста, что думаете, о горячих клавишах на сайтах.

Какой системы внедрения горячих клавиш придерживаетесь на своих проектах?

Никита Скурыгин
15 апр 2021
👁 4731   🗩2
Василий Половнёв
Технический директор бюро
Полезно
 15
15
Непонятно
  
Войдите в Бюросферу, чтобы голосовать

Никита!

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

Во‑первых, горячие клавиши должны быть предсказуемыми и использовать те же модификаторы, что и горячие клавиши в операционной системе. Будет очень странно и неудобно, если на Маке выделенный текст будет превращаться в жирный по нажатию Ctrl + O, а не ⌘ + B.

Во‑вторых, горячие клавиши должны быть последовательными, следовать уже принятым в популярных приложениях клавиатурным сочетаниям:

  • Ctrl (⌘) + C/V/X, чтобы скопировать, вставить или вырезать сущность;

  • Ctrl (⌘) + A, чтобы выбрать все сущности;

  • Ctrl (⌘) + Z, чтобы отменить предыдущее действие;

  • Ctrl (⌘) + B/I/U, чтобы сделать выделенный текст жирным, курсивом или подчёркнутым;

  • ?, чтобы показать список горячих клавиш;

  • /, чтобы перейти в поле с поиском;

  • ↑/↓ и j/k, чтобы передвигаться вверх‑вниз между сущностями;

  • g <X>, чтобы перейти к разделу сайта;

  • Esc, чтобы закрыть попап;

  • Ctrl (⌘) + Enter, чтобы отправить форму.

В‑третьих, пользователю нужно как‑то подсказать горячие клавиши. Обычно это делают отдельным «слоем» по нажатию ?:

Гитхаб
Гугль‑почта
Фейсбук
Твитер
Яндекс.Почта

Или подсказками в интерфейсе:

Фигма
Книги бюро
Гугль‑доки
Бейскемп

Ещё по теме

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
 15
15
Непонятно
  
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментарии

Перечисленные три пункта — это не всё, что нужно предусмотреть. Вот ещё:

 4. Горячие клавиши, как правило, не должны ломать функциональность браузера.

4a. Антипример: компонент ACE Editor, широко используемый на сайтах в качестве редактора кода, забирает себе Ctrl+L под переход к строке по номеру. Ctrl+L — это всегда* был переход в адресную строку, и у половины пользователей он прошит в пальцах. (У другой половины прошит Alt+D, и третья половина вообще не пользуется адресной строкой.)

*: В ранних браузерах Ctrl+L открывал отдельное диалоговое окно, эквивалентное адресной строке. От этого отказались где‑то в конце девяностых.

4b. Другой антипример: клавиша / в Firefox’е открывает панель быстрого поиска по странице. Если ваш сайт или веб‑приложение отображает сколько‑нибудь длинные страницы и вы перехватываете клавишу / — вы сломали мне поиск. (Да, есть ещё Ctrl+F, но / в пальцах, а Ctrl+F нет.)

4c. Допустимо перехватывать Ctrl+S, если вы веб‑приложение и сохранённая отдельно копия HTML’я текущей страницы неработоспособна.

 5. В Firefox’е есть настройка, при включении которой нажатие любой цифро‑буквенно‑символьной клавиши открывает ту же панель быстрого поиска по тексту страницы или по ссылкам. Если ваши горячие клавиши обычно вводят текст — /, ?, j/k, g <X> — не забудьте вместе с обработкой горячей клавиши обезвредить событие вызовом event.preventDefault(). Иначе ваш обработчик отработает, затем событие всплывёт до браузера, поднимет панель поиска, и она заберёт у вас фокус ввода. Это особенно вредно для повторяющихся клавиш (j j j…j для перемещения на несколько сущностей вниз) и для двухкомпонентных шорткатов (g <X>).

:q, чтобы выйти.

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

Рекомендуем другие советы