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

Навигация в браузерах с помощью горячих клавиш

Главная » Уроки » Клавиша F11

Давайте немного отвлечемся от угроз компьютеру и познакомимся с одной из интересных функций клавиши «F11»: (эф одиннадцать).

Это, наверно, самая используемая мной клавиша из функционального ряда клавиш «F1»...«F12».

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

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

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

Вот в них, да. Функциональные клавиши являются чуть ли не основным инструментом для работы.

Но вернемся к привычным для нас картинкам на нашем мониторе.

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

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

Правда есть одна клавиша, которая практически всегда несет один определенный функционал. Это клавиша «F1»:

Нажатие этой клавиши или комбинаций с этой клавишей приводит к вызову справки или помощи в любой программе.

Например, независимо от того, какие программы у Вас запущены, комбинация «Win+F1»:+   (технику нажатий клавиш я описывал в уроке «Как без ошибок ввести свой пароль? (Часть 2. Клавиатура)») вызовет справку по операционной системе Windows. Если запущена программа «Paint», то нажатие клавиши «F1» вызовет справку по этой программе. Если запущена игрушка, то клавиша «F1» выведет справку, как играть в данную игрушку.

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

Кстати, интересный факт в подтверждение вышесказанному. Если Вы используете в качестве интернет обозревателя Mozilla Firefox, то клавиша «F1» у Вас не сработает. И вообще никакой горячей клавиши для вызова справки у Mozilla Firefox нет. Видимо, разработчики не посчитали нужным это сделать.

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

Но так что там с клавишей «F11»:?

Бесспорно, что сейчас самыми используемыми программами являются интернет обозреватели (Google Crome, Opera, Mozilla Firefox и т.п.).

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

Для этого в окно браузера навешивается различный функционал в виде панелей инструментов. Еще их называют тулбары (от английского  toolbar).

Показательным браузером в этом отношении является браузер Mozilla Firefox. Вот на этом примере давайте и рассмотрим нашу клавишу.

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

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

Этот недостаток решается одним простым нажатием клавиши «F11»:. Окно браузера перейдет из оконного режима в полноэкранный режим.

Повторное нажатие клавиши «F11» вернет все на свои места, т.е. окно браузера перейдет из полноэкранного  режима в оконный режим.

Кода я первый раз случайно нажал клавишу «F11», я растерялся. С экрана монитора пропали привычные панель задач и оконный интерфейс браузера. Моя рука невольно потянулась к кнопке «Reset» на системном блоке.

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

Так как же быть, если нет привычных меню, вкладок, окна поиска?

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

Итак, о горячих клавишах.

Прокручивание экрана относительно страницы (скроллинг):

«Space»(пробел): или «Page Down»:  — перемещает экран монитора на одну страницу вниз.

«Shift+Space»:

«Home»:  - перемещает экран монитора в начало страницы.

«End»:  - перемещает экран монитора в конец страницы.

 Навигация:

«Alt+Стрелка влево»:+ или «Backspace»: 

«Alt+Стрелка вправо»:+ или «Shift+Backspace»:+— пройти вперед на следующую просматриваемую страницу.

Эти клавиши соответствуют кнопкам «Назад» и «Вперед» в окнах браузеров, как показано на рисунке:

«Alt+Home»:

«Ctrl + +»:+ (причем неважно какой «плюс», на основной или дополнительной клавиатуре), «Ctrl + -»:+, «Ctrl+колесико мыши» — увеличивает или уменьшает масштаб страницы.

«Ctrl+0»:+ — Восстанавливает исходный масштаб страницы.

Работа с вкладками:

«Ctrl+T»:+ — открыть новую вкладку, а заоодно и окно поиска.

«Ctrl+Tab»:+— переключится на нужную вкладку. Техника нажатия этой комбинации такая же, как я описывал в уроке «Работа с окнами» в разделе «Перелистывание окон».

Где мы были в интернете:

«Ctrl+H»:+ — открыть просмотр истории.

Ну и если все это надоело, то:

«Win+D»:

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

На этом на сегодня все. Всем удачи и творческих успехов.

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

С уважением ко Всем моим читателям и подписчикам

Олег Ивашиненко

Если Вам понравилась статья, поделитесь с друзьями в социальных сетях.

Ранее в этой же рубрике:

К записи 9 комментариев

Оставить комментарий

compsam.ru

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

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

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

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

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

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

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

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

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

Вы могли заметить 3 вещи:

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

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

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

Представьте, что вы используете мышь при веб-серфинге, но не видите курсора на экране. Удобно ли это? Скорее ужасно. Те же чувства испытывают пользователи клавиатуры, когда выбранный элемент никак не выделяется.

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

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

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

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

Все интерактивные элементы доступны

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

Самую большую проблему вызывают виджеты JavaScript с тегами <div> или <span> — доступ к ним с клавиатуры может быть настроен через 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

22-04-2014

lpgenerator.ru

Что такое строка навигации или как улучшить сайт

 Время чтения:8 минут Изображений:20

Что такое строка навигации? Строка навигации- это путь от начальной страницы до текущей, состоящий из отрезков пути, каждый из которых является разделом сайта.

Разработчики Drupal для обозначения строки навигации или цепочки навигации использовали термин breadcrumbs. Дословный перевод -  «хлебные крошки». Российские пользователи также используют и этот термин «хлебные крошки». Но мне привычнее все-таки строка навигации.

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

Зачем нужна строка навигации?

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

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

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

Когда нужна строка навигации?

Используйте строку навигацииесли …

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

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

Строки навигации

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

Первый тип строк навигации это стока - путь (path based breadcrumb). Она показывает пользователю точные шаги, которые он выполнил, чтобы попасть на текущую страницу. Это кликабельный, динамически создаваемый путь, позволяет переходить на любую из его составляющих частей. Пользователь может вернуться на любой уровень в пути, по которому он шел к данной странице.

Второй тип строк навигации это строка - местоположение (location based breadcrumb). Она позволяет пользователю понять, где он находиться внутри иерархической структуры сайта.  Обычно они используются там, где есть множество страниц, назначенные для конкретного региона в рамках веб-сайта.

Третий тип строк навигации это строка - атрибут (attribute breadcrumb). Она дает  пользователю информацию о том, к какой категории принадлежит  страница, на которой он находится. Например, пользователь посещает сайт на тему одежды. И здесь он может просматривать множество страниц, дающих детальную информацию о материале, цвете, стиле выбранной одежды. Каждая из этих страниц будет принадлежать к одной из категорий (атрибутов).

Примеры строк навигации

Guarian ↓

The Glasgow Collective ↓

Wufoo ↓

Girl Scouts ↓

Delicious ↓

Apple ↓

Yahoo! TV ↓

CoolSpotters ↓

Hillside Group ↓

BubbleStick ↓

Crooked Tongues ↓

Mia & Maggie ↓

Target ↓

Design Collectors ↓

Bell ↓

Nasa ↓

Ideo ↓

Bridge 55 ↓

Nestle ↓

Marchand Trucs ↓

По материалам Джоэля Рейеса

mainview.ru

Навигация в интернете с помощью Internet Explorer

Сегодня я хочу рассказать начинающим пользователям о навигации в интернете с помощью браузера (обозревателя) Internet Explorer. В состав операционной системы Windows7 входит браузер  Internet Explorer 8, на примере которого я и расскажу об основных приемах работы в интернете.

Для навигации в интернете применяются следующие элементы браузера (рис.1).

Рис.1. Элементы навигации: 1-адресная строка; 2-строка вкладок; 3-кнопка "Избранное"; 4-панель избранного; 5-строка поиска.

Вот как следует использовать инструменты навигации:

Адресная строка. В адресную строку введите URL нужной веб-страницы и нажмите кнопку Enter. Во время ввода адреса Internet Explorer может предлагать подходящие ссылки из Избранного или Журнала.

Строка поиска. В строку поиска введите текст запроса и нажмите клавишу Enter или кнопку «Поиск».

 Строка вкладок. Щелкните мышкой по заголовку нужной вкладки.

Панель избранного. Щелкните мышкой по нужной ссылке на панели избранного.

Папка Избранное.  Щелкните мышкой по кнопке «Избранное» в строке меню и в открывшемся окне выберите нужную ссылку.

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

Использование вкладок

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

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

При работе с вкладками можно использовать следующие приемы

Избранные ссылки

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

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

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

По своему содержимому папка Избранное соответствует аналогичной папке профиля пользователя.

Добавить ссылку в папку Избранное можно нажатием сочетания клавиш Ctrl+D. В появившемся окне «Добавление в избранное» можно переименовать ссылку, выбрать папку для ее хранения или создать новую папку. Нажать кнопку «Добавить».

Более современная версия браузера - Internet Explorer 9 ничем принципиально не отличается от Internet Explorer 8, так что все вышесказанное применимо и для нее.

Вот на этом и закончим. Сегодня мы выяснили, как может осуществляться навигация с помощью браузера Internet Explorer. Надеюсь, информация была для вас интересной.  Удачи!

С уважением, Владимир (Spectr-rv.ru).

spectr-rv.ru

Графические кнопки в системе навигации сайта - основные недостатки использования

Здравствуйте, уважаемые читатели блога Freenteza.ru!

Чаще всего на веб-сайтах используется стандартная текстовая навигация и текстовое меню. В данном случае ссылки на страницы и разделы представляют собой текст, в который встроен URL-редирект. Создание текстовой навигации — процедура довольно простая и во многих популярных CMS реализована по умолчанию. Однако иногда вебмастера хотят сделать дизайн своего сайта более необычным и оригинальным, используя так называемую графическую навигацию. Здесь вместо текстовых ссылок используются графические кнопки. Как правило, все кнопки имеют одинаковый дизайн, но отличаются по названию.

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

1. Трудоемкость создания системы навигации. Сделать простое текстовое меню очень легко, а вот с кнопками придется повозиться. Чтобы сделать красивые кнопки, нужно уметь работать в популярных графических редакторах и хоть немного разбираться в веб-дизайне. На создание красивого и проработанного графического меню может уйти несколько часов.

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

3. Несоответствие дизайну сайта. Так как кнопка является графической и обладает определенным размером и цветом, то вполне вероятно, что она не впишется в уже готовый дизайн вашего сайта. У простых текстовых ссылок в этом плане никаких проблем нет.

4. Увеличение времени загрузки страницы. Каждая кнопка является графическим файлом. Как известно, графика занимает намного больше места на странице, чем текст (имеется ввиду объем в килобайтах). Соответственно, страница, на которой расположено несколько десятков графических кнопок, будет грузиться дольше, чем страница, на которой их нет вообще.

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

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

7. Проблемы с загрузкой кнопок на странице. Так как мы имеем дело с отдельными графическими файлами, то нет гарантий, что какие-то из этих файлов будут неправильно подключены к странице (из-за некорректного абсолютного или относительного пути). В некоторых случаях графика может не отображаться из-за того, что в браузере пользователя не установлены нужные плагины. С текстовыми ссылками таких проблем нет.

8. Проблемы с отображением кнопок. При некорректной верстке страниц сайта блок с навигационными кнопками может сдвинуться в сторону, исказиться или вовсе пропасть. Тут многое зависит от разрешения дисплея пользователя и используемого браузера (чаще всего проблемы возникают со старыми версиями IE).

На этом все. Если понравилась информация, то поделитесь ею со своими друзьями или коллегами, буду очень приочень благодарен.

Счастья вам, семейного благополучия и дай вам бог здоровья=)

До новых встреч на страницах блога Freenteza.ru!

freenteza.ru

Смотрите также

• 
  Модальное окно браузера
• 
  Виды веб браузеров
• 
  Самые худшие браузеры
• 
  Браузер для tizen
• 
  Яндекс браузер rss
• 
  Яндекс браузер noscript
• 
  Браузер с докачкой
• 
  Андроид закрывается браузер
• 
  Читалка с браузера
• 
  Fps в браузере
• 
  Футбол в браузере