Навигация с клавиатуры как оптимизация юзабилити сайта

Posted on by riasevastopol

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

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

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

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

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

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

  • Пользовательский опыт и юзабилити на сайтах eCommerce

Как проверить доступность сайта для навигации с клавиатуры?

Если вы просматриваете эту статью на ПК либо ноутбуке в браузере Firefox, IE, Chrome либо Safari, то выполните следующий метод:

  • надавите на адресную строчок браузера;
  • уберите руку от мыши;
  • применяйте клавишу Tab для движения вперед по ссылкам (либо Shift+Tab для движения назад).

Вы имели возможность подметить 3 вещи:

  • при навигации с клавиатуры фокусировка перемещается к активному объекту на странице;
  • посредством клавиатуры вы имеете возможность выбрать любую ссылку на странице;
  • ссылки пролистываются в соответствии с макетом страницы: слева направо и сверху вниз по столбцам.

Быть может, навигация с клавиатуры медленная и мало раздражающая, но она хотя бы существует.

  • Как оптимизировать навигацию вебмагазинов, либо 7 раз отмерь

Индикатор фокусировки при навигации с клавиатуры

Представьте, что вы используете мышь при веб-серфинге, но не видите курсора на экране. Комфортно ли это? Скорее плохо.

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

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

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

MailChimp.com применяет выделение по умолчанию. На скриншоте прекрасно видно, что пользователь выбрал ссылку «Email Designer», перейти по которой возможно надавив Enter.

StrideHealth.com выбрал второй подход — ссылки с клавиатуры выделяются равно как и посредством мыши. На скриншоте пользователь выбрал вкладку Find Your Plan в верхнем правом углу.

Все интерактивные элементы дешёвы

Пользователи клавиатуры должны иметь возможность доступа ко всем интерактивным элементам страницы, а не только к внутренним ссылкам и основной навигации. Это указывает, что выпадающие меню, кнопки, диалоговые прочие веб и окна-элементы должны быть активны по нажатию Tab.

Самую громадную проблему вызывают виджеты JavaScript с тегами

либо— доступ к ним с клавиатуры возможно настроен через tabindex. Помимо этого, применение лишь HTML-ссылок гарантирует доступность всех элементов для клавиатуры.

Форма бронирования билетов на сайте зоопарка Сан-Франциско доступна с клавиатуры. На скриншоте пользователем выбрано поле «First Name». Нажатие на Tab переместит фокус на поле «Last Name», разрешая пользователям скоро и без неприятностей заполнить лид-форму.

Громадной проблемой есть то, что многие элементы навигации недоступны с клавиатуры. Однако их возможно настроить, как это показывает пример Bath, and Beyond. Посредством клавиатуры визитёр выбирает слайд интерактивного меню и переходит к нему, надавив Enter.

FDA.gov идет еще дальше, подключив управление всплывающими окнами с клавиатуры. Это крайне важно, потому что всплывающее окно способно заблокировать страницу при отсутствии мыши.

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

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

  • Примеры юзабилити интерфейса пользователя

Разглядим пути навигации на страницах

На большинстве сайтов вкладки и ссылки повторяют макет: сверху вниз и слева направо.

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

На сайте Лондона путь навигации через кнопку Tab повторяет макет.

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

  • Баланс контента и дизайна: формула высокой конверсии

Вывод

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

Высоких вам конверсий!

По данным nngroup.com, image source Kevin Poulton

Случайные статьи:

Что такое юзабилити и как оно должно быть сделано?


Подборка похожих статей:

riasevastopol

More Posts