Когда использовать target="_blank"

Якорные ссылки1 могут иметь атрибут target который определяет, что произойдет при клике по этой ссылке. Одно из возможных значений этого атрибута — _blank, оно говорит браузеру открыть новое окно (или вкладку, если таково предпочтение пользователя) когда совершен клик по этой ссылке.

Раньше это значение было «не валидно» в HTML (может только в XHTML?), но люди все равно использовали его, поскольку оно работало. Теперь, в HTML5, оно полностью валидно. Но есть ли хорошие причины его использовать?

Плохая причина: потому что вам так нравится

Нравиться вам это или нет, target="_blank" изменяет стандартное поведение. Ссылки открываются внутри той же самой страницы — это стандартное поведение (как если бы ссылка имела атрибут target="_self").

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

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

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

Используя target="_blank", доступно только одно поведение.

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

Брендинг, брендинг, брендинг! По-больше глаз, детка. Показатели. ПРИВЛЕЧЕНИЕ.

Другие сайты должны иметь нормальный стиль ссылок, но наш сайт особенный. Наш сайт важнее и никогда не должен быть забыт.

Плохая причина: «внутренние» ссылки и «внешние» ссылки не одно и то же.

Наши «внутренние» ссылки (ссылающиеся на наш собственный сайт) будут вести себя нормально, но вот «внешние» ссылки (ссылающиеся на другие сайты) будут открываться в новом окне/вкладке.

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

Я слышал от многих людей, что это «соглашение». Что именно так и нужно делать. Это не так.

Плохая причина: эта ссылка на PDF файл

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

Плохая причина: мои клиенты хотят этого

Я понимаю высказывание — «я не хочу ввязываться в спор», ведь у нас так много энергии. Но странно то, что спор вообще возникает. Если они не доверяют вам здесь, то в чем они вам будут доверять?

Я бы подошел к вопросу как-то так:

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

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

Плохая причина: ссылка находится на странице с бесконечным скроллингом

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

Хорошая причина: пользователь инициировал воспроизведение медиа файла

Например: музыки, видео, подкаста…

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

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

Несмотря на это, я проверил YouTube, и они не надоедают уведомлениям2 при смене видео.

Хорошая причина: пользователь работает над чем-то, что может быть потеряно если текущая страница изменится

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

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

Вспомним CodePen, где пользователи часто пишут код. Мы делаем несколько вещей чтоб помочь им:

  • Ссылки, ведущие на другие страницы, которые по сути являются ссылками типа «подробнее» (например [?]) и которые вы видите только при работе с редактором, открываются в новой вкладке.
  • Обычные ссылки (например, ссылки в футере) имеют стандартное поведение, но мы заметим, если у вас в редакторе есть не сохраненные изменения, и напомним сохранить их перед уходом.
  • Если вы переходите на другой сайт (и при аварийном закрытии вашего браузера), мы сохраним состояния редакторов в локальном хранилище (localStorage), таким образом вы не потеряете работу.

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

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

Хорошая причина: некоторые технологически мрачные моменты

Я создаю письмо, которое людям нужно открыть в Outlook Kangaroo 2009 Enterprise Edition, нужно чтоб ссылки имели атрибут target="blank", иначе они будут открываться в боковой панели просмотра и…

Технологии

Если вам нужно…

Заставляем пользователя подтвердить намерение покинуть страницу:

window.onbeforeunload = function() {
    return "Под этим сообщением будет две кнопки. Покинуть или остаться на странице.";
}

Лирическое отступление

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

1. Элементы <form> также могут иметь атрибут target="_blank". Я считаю, это наиболее редкий вариант использования, но в статье я буду думать так же.

2. Если вы выбираете другое видео, то вы сразу переходите к нему. Мне просто интересно, был ли это выбор ради UX или ради продвижения. Если вы просмотрели видео наполовину, кликнули на другое видео (случайно), затем кликнули кнопку «назад», ваша позиция будет потеряна. Возможно для них важен беспрепятственный переход от видео к видео, но было бы неплохо если бы они слегка помогали пользователю. Возможно было бы достаточно небольшой стрелки под полосой прокрутки, что-то вроде ссылки «ранее это видео было просмотрено до сюда»

Оригинал статьи на английском на сайте CSS Tricks

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *