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

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

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

Клавиатурные сокращения (хоткеи)

Горячие клавиши - очень удобный способ управления вкладками. Особенно когда вкладки становятся такими крошечными, что по ним даже неудобно кликать.

  • Ctrl + Tab - переключение между вкладками в правую сторону.
  • Ctrl + Shift + Tab - переключение между вкладками в левую сторону.
  • Ctrl + W / Cmd + W на Mac - закрыть активную вкладку.

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

Запоминание открытых вкладок

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

Включите эту функцию и тем самым освободите себя от лишней работы в будущем:

  • Google Chrome: Настройки → Начальная группа → Продолжать работу с того же места.
  • Firefox: Настройки → Основные → При запуске Firefox → Показать окна и вкладки, открытые в прошлый раз.
  • Apple Safari: Настройки → Основные → Safari открывается при старте → Всех окон из последнего сеанса.

Добавление вкладок в избранное

Ещё один быстрый способ сохранить открытые вкладки, чтобы поработать с ними потом, - это добавить их в отдельную папку в закладках. Для этого кликните на вкладке правой клавишей мыши и выберите пункт «Добавить вкладки в избранное». Название пункта может различаться в разных браузерах, но легко понять, что это именно тот пункт, который вам нужен. В результате у вас в закладках появится папка с нужными вам адресами сайтов. Далее сделайте правый клик на этой папке, выберите пункт «Открыть все закладки» - все вкладки снова перед нами.

Сортировка вкладок по отдельным окнам браузера

Кто сказал, что все вкладки должны быть в одном окне браузера? Вы можете отсортировать ваши вкладки по разным окнам. Например, все вкладки, которые касаются одного проекта, вы можете перенести в одно окно браузера, а всё, что касается развлечений, в другое и так далее. Просто потяните вкладку на пустое место рабочего стола, и у вас откроется новое окно. Ещё один способ - сделать правый клик по ссылке или закладке и выбрать из списка «Открыть в новом окне».

Выбор сразу нескольких вкладок

Вы можете совершать различные действия не с одной вкладкой, а сразу с несколькими. Но для этого сначала нужно выбрать эти самые вкладки. Зажмите клавишу Ctrl (или Cmd на Mac) и выберите необходимые вам в данный момент вкладки. Всё, теперь можете их закрывать, перезагружать, добавлять в закладки и так далее.

Закрепление вкладок

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

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

Иногда получается так, что случайно закрываешь вкладку, которую вовсе не хотел закрывать. Рука дёрнулась или передумал в момент закрытия - всякое бывает. Чтобы открыть эту вкладку заново, можно, конечно же, зайти в историю браузера и найти этот сайт. А можно использовать клавиатурное сокращение Ctrl + Shift + T (или Cmd + Shift + T на Mac в Chrome и Firefox и Cmd + Z в Safari), чтобы вернуть эту вкладку. Также вам может помочь правый клик мышью на любой вкладке вашего браузера.

Группы вкладок в Firefox

Почти пять лет назад разработчики добавили в браузер Firefox очень крутую функцию , которая называется «Группы вкладок», или «Панорама». Она практически выполняет трюк, который описан выше. Речь идёт об использовании разных окон браузера для вкладок. Только здесь всё это выполнено более красиво, и вам не нужно плодить множество окон. Пара кликов, и вы уже переключились на работу с другим проектом или, наоборот, развлекаетесь после работы. Чтобы запустить группы вкладок, воспользуйтесь клавиатурным сокращением Ctrl + Shift + E или Cmd + Shift + E на Mac.

Надеюсь, что теперь ваша работа с большим количеством вкладок браузера станет немного проще.

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

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

Разные разработчики воплотили и различные подходы для управления этим компонентом. К примеру, в Internet Explorer (Интернет Эксплорер) его запуск можно осуществить двумя способами. Первый из них предусматривает применение пункта меню «Файл», где есть подпункт «Создать…». Второй способ заключается в наведении на специальный символ в виде квадрата, который располагается справа от текущей вкладки. Нажатие автоматически задействует открытие описываемого элемента.

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

Такие популярные браузеры, как и Mozilla Firefox (Мазила Фаерфокс), также предусматривают несколько режимов открытия. Один из них, по аналогии с браузером от Майкрософт, задействует подпункт меню «Файл». Другой способ заключается в нажатии на значке «+», который располагается справа от активной на данный момент вкладки. В открывшемся меню будет раздел «новая вкладка». Firefox и Opera позволяют открыть этот элемент еще одним способом. Для этого необходимо нажать правой клавишей на верхней панели и выбрать необходимую команду в открывшемся списке.

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

Есть еще и универсальные методы. Выучив их, можно получить доступ к управлению инструментом «Новая вкладка» во всех распространенных браузерах. К примеру, сочетание кнопок «Cntrl» и «T». С клавишей «Cntrl» есть еще две важные команды. Ее нажатие вместе с кнопкой «Shift» позволит открыть ссылку в новой вкладке на переднем плане в окне браузера. А в сочетании с левой клавишей мыши ссылка будет открыта на заднем плане. Также этого можно добиться нажатием на ссылку колесиком мышки.

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

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

Вкладка - это...

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

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

Важно: чем больше вкладок открыто, тем медленнее будет работать обозреватель сети.

Основные операции

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

Вот список основных операций, выполняемых с вкладками:

  • обновление;
  • закрытие (одной, нескольких, всех);
  • открытие;
  • восстановление.

Для обновления используют или кнопку около адресной строки с изображением закрученной стрелки, или сочетание клавиш (F5, Ctrl + F5, Fn + F5). Далее мы познакомимся с остальными функциями. О них известно далеко не всем.

Закрытие одной вкладки

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

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

  1. Открыть интернет-обозреватель.
  2. Создать вкладку.
  3. Подвести курсор мыши к желаемой вкладке в верхней части браузера.
  4. Нажать на крестик в правом углу соответствующего элемента.

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

Активная вкладка и клавиатура

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

Необходимо перейти на желаемую вкладку, сделав ее тем самым активной. Далее нажать на клавиатуре сочетание клавиш Ctrl + W (Command + W в MacOS). Произойдет быстрое закрытие вкладки.

Важно: в некоторых браузерах закрытие активной страницы осуществляется через сочетание клавиш Ctrl + F12. Например, подобный прием используется в Opera.

Помощь мыши

Как А восстановить все страницы? Завершить работу со всеми изучаемыми ранее элементами?

Справиться с поставленными задачами поможет компьютерная мышь. Достаточно кликнуть ПКМ по строчке с вкладками браузера. Далее пользователь должен выбрать, что сделать:

  • Открыть новую.
  • Закрыть все вкладки слева/справа.
  • Закрыть выбранную страницу.
  • Открыть недавно закрытую вкладку.

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

Завершение работы со всеми элементами

Есть еще один довольно простой и интересный прием. Он помогает ответить, как закрыть все вкладки в интернет-обозревателе.

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

Экстренное завершение

Как С одним приемом мы уже познакомились. Позже рассмотрим еще несколько вариантов развития событий. Сначала разберемся с закрытием вкладок.

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

Алгоритм действий предлагается следующий:

  1. Нажать на клавиатуре Ctrl + Alt + Del.
  2. Выбрать "Диспетчер задач".
  3. В открывшемся окне выделить подходящий (заранее открытый) браузер.
  4. Нажать на "Завершить задачу/Завершить работу".

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

О восстановлении

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

Недавно закрытые странички и настройки

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

Как правило, необходимо действовать следующим образом:

  1. Зайти в браузер.
  2. В правом верхнем углу нажать на кнопку "Настройки". Чаще всего это или изображение списка, или картинка с тремя точками, расположенными друг под другом.
  3. Навести курсор на раздел "История".
  4. Выбрать параметр "Недавно закрытые вкладки".
  5. Нажать на страницу, которую хочется открыть.

Соответствующий адрес активируется в новой вкладке. Подобный прием не работает, если страница была закрыта в прошлых сессиях.

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

«Жизнь подобна беседе. Веб-дизайн тоже должен быть таким. В сети вы говорите с кем-то, кого, скорее всего, никогда не видели, поэтому важно быть ясным и точным. Хорошо структурированные навигация и организация контента идут рука об руку с прекрасным диалогом».

Руководитель направления по оптимизации UX компании Nest Чакези Иджиази (Chikezie Ejiasi).

Может ли навигация в виде вкладок быть ясной и точной? Конечно, да, и потому она является жизнеспособной формой навигации и организации контента. Но, как и с большинством вещей, касающихся пользовательского опыта (User Experience или UX), имеет значение, как вы ее внедрили и оптимизировали.

Во-первых, что такое навигация в виде вкладок?

Неплохое объяснение дал Мэтт Кроунин (Matt Cronin), фриланс-дизайнер и разработчик:

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

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

Кроме того, обратите внимание, как цвет открытой вкладки соответствует цвету вмещающего блока, а другие вкладки при этом светлее. Это еще один распространенный стилевой момент».

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

1. Углы вкладок закруглены;
2. Вкладки разделяются с помощью пространства или линии;
3. На вкладках используются ;
4. Для большей глубины цвета и задания размера вкладок применяется плавный переход цветов (градиент).

Вкладочная навигация имеет в своей основе метафору с папками, образ, знакомый любому человеку, работавшему в офисе или видевшему его обстановку. Вот как это сравнение понимает Джастин Мифсад (Justin Mifsud), основатель UsabilityGeek:

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

Использование вкладок в UI является чудесным воплощением метафорического подхода, поскольку они выглядят как разделители рубрик в документах или ярлыки папок, стоящих в накопителях для бумаг.

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

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

Как любая другая качественная навигационная система, навигация с вкладками позволяет:

  • Разносить контент по разным секциям в соответствии с его значением;
  • Показывать, какой контент доступен и как его можно получить;
  • Визуально демонстрировать людям, в каком месте сайта они находятся.

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

Такой вид навигации наиболее оправдан, когда:

  • У вас есть от 2 до 9 категорий контента;
  • Названия категорий относительно короткие и предсказуемые, это касается как размещения, так и самого текста (то есть они должны сочетаться с прототипной версией);
  • Число категорий не будет часто меняться;
  • Категории похожи по сути, и потому логично их расположение вблизи друг от друга;
  • Все категории умещаются в один ряд.

По словам Джейкоба Нильсена (Jakob Nielsen), основателя и руководителя Nielsen Norman Group, в тех случаях, когда вкладочная навигация становится настолько сложной, что требует несколько рядов, начинают возникать проблемы:

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

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

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

Не стоит включать в дизайн навигацию с вкладками, когда:

  • Вы хотите, чтобы люди одновременно сравнивали контент. В этом случае вкладочная навигация будет переутомлять память, значительно повышая .
  • Вы начинаете раздумывать о добавлении вкладки типа «Более» или «Дополнительно»

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

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

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

… некоторые компании все же используют панель с вкладками в качестве основного вида навигации.

Люк Вроблевски (Luke Wroblewski), руководитель отдела по разработке новых продуктов в Google, отмечает, что пионером тренда был Amazon:

«В 1998 году у сайта было 2 категории высшего уровня: книги и музыка.

Вот так выглядела вкладочная навигация на сайте Amazon на ранних стадиях:

Сайт набирал популярность, и число вкладок росло:

В 1999 году Джейкоб Нильсен из Nielsen Norman Group назвал это «плохим дизайном, отражающим злоупотребление метафорой»:

«Я утверждаю, что вкладки лучше использовать для переключения между альтернативными (но родственными) данными, чем для навигации по несвязанным локациям.

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

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

В 2016 году, как и в 1999-м, Нильсен все еще придерживается своей точки зрения:

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

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

Внедрение

Многие крупные авиакомпании, включая Air Canada, успешно используют подобную навигацию:

Если вы тоже решили внедрить навигацию с вкладками (на любом уровне), имейте в виду следующее:

  • Сначала разработайте (Information Architecture, IA) сайта — так вы сможете принимать более продуманные решения относительно вкладок.
  • Вся поверхность вкладки должна быть доступной для нажимания, а не только содержать название категории (текст).
  • Не используйте вкладку «Домашняя страница», если применяете навигацию для всего сайта. Вместо этого включите логотип, приводящий посетителей на соответствующую страницу.
  • Вкладка должна быть связана с тем контентом, к которому относится ее название, чтобы был понятен тип информации, озвученный в тексте вкладки.
  • Название категории должно укладываться в 1-2 слова и быть написано обычным шрифтом, без кэпс-лока, поскольку это усложняет чтение вкладок.
  • Не нагромождайте ряды вкладок. Если есть необходимость, используйте подкатегории (то есть вторую горизонтальную строку под вкладками). Если вы так сделаете, убедитесь, что существует визуальная связь между выбранной вкладкой и линейкой подкатегорий под ней. Не включайте чрезмерное количество подкатегорий, все должно быть емко и просто.
  • Выбранная вкладка должна выделяться, определяя местоположение пользователя в данный момент. Остальные вкладки при этом не должны «заглушаться» настолько, чтобы их забыли или не заметили.
  • Важно выдерживать одинаковый порядок вкладок на всех страницах, чтобы посетитель понимал, как вкладки относятся одна к другой.

Джейкоб Нильсен разъясняет значимость постоянства в этом вопросе:

«1. Узнаваемость. Когда вещи выглядят одинаково, вы знаете, что искать и когда вы это нашли.

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

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

4. Эффективность. Устраняется необходимость тратить время, учась новому или беспокоясь об эффекте непоследовательного функционала».

Примеры удачного дизайна

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

Здесь внимание на себя обращают 2 вещи:

1. Навигация вертикальна.
2. Она включает иконки.

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

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

Заметьте, что хотя Album Art Collection использует навигационные иконки, они не отказываются и от текстовых описаний. В нашем блоге вы можете найти отдельную статью, посвященную , но сейчас отметим главное: зачастую текстовые описания работают лучше одних иконок без текста. Почему это происходит, рассказал Джейкоб Гьюб (Jacob Gube), главный редактор ресурса для разработчиков и веб-дизайнеров Six Revisions:

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

Это базовый пример навигации в виде вкладок, хотя и включающий вкладку «Home», что является излишним решением. Выбранная вкладка выдвигается на передний план, все вкладки связаны с тем контентом, что они презентуют.

3. Buffer

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

Вот так выглядит контент для физлиц:

А так начинается контент для бизнеса:

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

Посыл похожий, но различие в расположении играет важную роль.

По мнению специалиста по дизайну и разработке компании UX Booth Дэвида Легета (David Leggett), навигация с вкладками имеет право на существование и помимо первичного и вторичного уровней навигации и даже может быть использована под линией сгиба, как у Buffer:

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

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

3 лучшие практики на заметку

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

1. Общедоступность имеет значение

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

  • Позволить посетителям перемещаться между вкладками, .
  • Разрешить выбирать вкладку, нажимая кнопку «Enter».
  • Включить различную индикацию выбранной вкладки. Например, можно подсветить небольшую надпись со словом «Активна».

Проектирование сайта, удобного для большего количества людей, никогда не повредит конверсии.

2. Чанкинг имеет значение

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

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

Просмотрите весь свой контент и сгруппируйте его в 4-5 сегментов. Затем повторите это упражнение, может быть, вам удастся сократить число групп до 2-3. Проведите пользовательское тестирование, чтобы увидеть, на какой тип навигации люди реагируют лучше. Помимо всего прочего вы должны убедиться, что:

  • Контент разбит на части таким образом, что это представляется логичным, ожидаемым и ясным для посетителей.
  • Текст на ваших вкладках отличается логичностью и предметностью.
  • Вкладки следуют существующему прототипу. Например, SaaS-сайты часто делят контент одним способом, а e-Commerce — другим.

3. Скорость имеет значение

Скорость важна всегда, в том числе касаемо навигации в виде вкладок.

Джейкоб Гьюб, Six Revisions:

«Цель применения модульных вкладок — достижение быстрой и интерактивной презентации контента. Чтобы достичь этого, вам следует встроить в HTML-документ контент неактивных окон, а затем использовать CSS и JavaScript, чтобы создать стиль окна и визуально скрыть его, что позволит устранить ожидание загрузки страницы или запроса данных с удаленных источников.

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

Данный совет относится не к тем, кто собирается использовать вкладочную навигацию в качестве основной навигации, а к тем, кто будет применять ее в той форме, что представлена на сайтах Air Canada и Buffer.

Заключение

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

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

Подводя итог:

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

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

3. Не используйте ее, если вы задумываетесь над тем, чтобы добавить ссылку «Больше информации».

4. Вы можете следовать лучшим практикам, но…

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

6. Отладьте все возникающие шероховатости, а если проблем слишком много — подумайте о другой навигации.

7. Общедоступность, чанкинг и скорость — все эти моменты имеют значение, когда речь заходит о навигации с вкладками, так что обратите на них пристальное внимание.

управление вкладками в браузерах

Как открывать новые
вкладки, окна в браузерах
и закрывать ненужные

Иногда пользователи сталкиваются с необходимостью иметь в браузере дополнительную вкладку или ещё одно окно. А затем правильно закрыть ненужное.

Необходимость иметь открытыми несколько вкладок или окон
в браузере может появиться и не только у тех, кто зарабатывает
в Интернете, а и у любого пользователя. Например – вы хотите
присутствовать одновременно и на «Одноклассники.ру»,
и в социальной сети Mail.ru, и «ВКонтакте.ру».

Как открывать новые вкладки, окна в браузерах

Как открывать новые
вкладки, окна в браузерах

Способы создания новых вкладок и окон в браузерах зависит от тех
настроек вкладок, которые либо первоначально были настроены
разработчиками браузера, либо уже перенастроенные вами.
То есть, каким образом браузер открывает новые страницы –
в новых окнах или в новых вкладках на «Панели вкладок».

А вот открывать новые окна и вкладки
– можно при любой
настройке вкладок.

В браузере Mozilla Firefox открывать новые
вкладки и окна можно разными способами.

1 способ – нажмите «Файл» на панели и выберите в меню нужную функцию.


2 способ – нажмите внизу на Панели задач на ярлык Mozilla Firefox правой клавишей мыши и выберите в меню нужную функцию.


3 способ – «Горячими клавишами». Ctrl+T (английская раскладка на клавиатуре) открывает новую вкладку в открытом браузере Mozilla Firefox. Ctrl+N открывает новое окно.

Для тех, кто установил на панель Mozilla Firefox Яндекс.Бар, открывать новую вкладку можно прямо с панели. Нужно просто нажать кнопку Яндекс, слева от адресной строки.



Новая вкладка откроется с Яндексом.

Чтобы открыть новую вкладку в Internet Explorer – щёлкните правой клавише по вкладке с активным окном браузера. А если вкладок на «Панели вкладок» несколько, то по любой другой вкладке. Откроется такое контекстное меню



И щёлкните по строке «Создать вкладку».

Чтобы открыть в Internet Explorer и новую вкладку, и новое окно – щёлкните правой клавишей мыши по ярлыку Internet Explorer внизу (под экраном) на «Панели задач». Откроется такое контекстное меню.


Открыть новую вкладку в Internet Explorer можно и с помощью
«Горячих клавиш» Ctrl+T (на английской раскладке клавиатуры).
Открыть новое окно – Ctrl+N .

Чтобы открыть новую вкладку или новое окно в браузере Google Chrome – щёлкните по значку в виде гаечного ключа или такого значка , вместо гаечного ключа. Справа, под кнопками управления окном. Откроется окно из которого вы и выбираете нужное.


Открыть новую вкладку в Google Chrome вы можете и другим способом. Щёлкните правой клавишей мыши по любой вкладке на панели браузера. Откроется такое контекстное меню.


Новые окна в Google Chrome можно открывать и с «Панели задач» (внизу под экраном). Для этого щёлкните правой клавишей мыши по ярлыку Google Chrome. И откроется контекстное меню в котором две возможности открыть новое окно.


«Горячие клавиши» для открытия новых вкладок в Google Chrome – Ctrl+T

Открывать новые окна и новые вкладки в браузере Safari можно
из кнопки меню «Файл». Щёлкните – и откроется такое окно.



Открыть новую вкладку в браузере Safari можно и щёлкнув
по вкладке на «Панели вкладок» правой клавишей мыши.
Причём, если вкладка только одна –
открывается такое контекстное меню.


А если на «Панели вкладок» две или несколько
вкладок, то контекстное меню более расширенное.


Открыть новое окно можно и с «Панели задач». Щёлкните правой клавишей мыши по ярлыку Safari (внизу под экраном) и откроется контекстное меню. Из которого вы можете открыть новое окно.


«Горячие клавиши» для открытия новых вкладок в Safari – Ctrl+е .
Открыть новое окно – Ctrl+т . Всё, в отличии от других браузеров – на русской раскладке клавиатуры (с кириллицей). Но надо сказать, что браузер Safari может быть крайне чувствительным к «Горячим клавишам», поэтому нажатие на клавиши должно быть коротким. Если вы задержите нажатие, то Safari вам откроет множество вкладок и окон. Во всяком случае, на моём компьютере Safari ведёт себя именно так.

Открывать новые окна и новые вкладки в браузере Opera тоже
можно из кнопки меню «Файл». Щёлкните – и откроется такое окно.


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


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


Вы также можете создать новую вкладку с «Панели задач».
Для этого щёлкните по ярлыку браузера Opera (ниже экрана)
правой клавишей мыши и откроется контекстное меню.


«Горячие клавиши» для открытия новых вкладок в Opera – Ctrl+T
(на английской раскладке клавиатуры). Открыть новое окно – Ctrl+N .

Обобщая тему открытия новых вкладок и окон в браузерах, следует
отметить, что безусловно удобнее всего это делать «Горячими клавишами».
Тем более, что для четырёх, из основных браузеров в России: Internet Explorer, Mozilla Firefox, Opera и Google Chrome – «Горячие клавиши» для этих целей, одинаковы.
Для открытия новых вкладок – Ctrl+T (на английской раскладке
клавиатуры). Открыть новое окно – Ctrl+N .
Но знать о дополнительных возможностях открытия вкладок и окон,
тоже надо. Случается, что «Горячие клавиши» не срабатывают.

Как закрывать ненужные вкладки в браузерах

Как закрывать
ненужные вкладки в браузерах

Браузеры Safari и Internet Explorer изначально настроены на открытие
новых сайтов в отдельной окне. Хотя обновлённый Internet Explorer делает
это несколько непривычно. И новые вкладки открывает в новом окне,
и копит вкладки справа от адресной строки.

Закрывать ненужные окна можно обычным способом – щёлкнуть по значку
с крестиком в правом верхнем углу браузера (кнопки управления окном).

А вот в Mozilla Firefox, Opera и Google Chrome –
новые вкладки копит на «Панели вкладок».


Это скриншот части панели браузера Mozilla Firefox с тремя вкладками.
Светлая вкладка – это вкладка активного окна браузера, а две тёмные – это неактивные вкладки. Чтобы закрыть вкладку – просто нажмите крестик в правой части вкладки (на который направлена красная стрелка). Таким же образом закрывать вкладки и в других браузерах.

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

Если вы хотите уйти с просматриваемого сайта, то либо нажмите кнопку «Домой», либо вернитесь по вкладке на сайт, с которого вы зашли. А эту вкладку закройте.

Ну, а если вы всё-таки накопите вкладок на «Панели вкладок», то по мере увеличения количества оставленных вкладок – они становятся у́зкими и в этом случае будут не видны крестики для закрытия вкладки. Тогда закрывать такие вкладки надо при помощи правой клавиши мыши.

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



В самом низу контекстного меню – функция «Закрыть вкладку».
И в этом же меню вы можете выбрать любую другую функцию для вкладок.