Анкорные ссылки — проклятье или благо?

Posted on by riasevastopol

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

Это делает актуальной задачу недостатков и переоценки достоинств этого веб-дизайнерского ответа.

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

В чем анкорные ссылки улучшают UX

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

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

Анкорные ссылки — проклятье или благо?p

Просматривайте кроме этого: Секреты действенных гиперссылок: анкоры как средство оптимизации юзабилити сайта

Три распространенные формы применения «якорей»

Возможно выделить три самые популярные формы применения внутристраничных ссылок:

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

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

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

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

Буквенный индекс на сайте Saks.com разрешает пользователям скоро отыскать интересующего их дизайнера по первой букве его фамилии

Влияние размера экрана

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

Слева: пример отображения страницы сайта MayoClinic.org на 13-дюймовом экране ноутбука (помещаются 4 абзаца текста и видеоролик). Справа: та же статья, но уже на экране мобильного устройства (помещается лишь 2 абзаца)

Как верно применять анкорные ссылки

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

Учитывайте длину контента

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

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

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

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

Switch.which.co.uk: в случае если секции сайта маленькие и на одном экране их может поместиться пара, то анкорные ссылки не необходимы

Применяйте заголовки и понятные ссылки

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

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

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

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

Ссылки в верхней части страницы сайта американского руководства дают полное представление о ее содержимом

Метки анкорных ссылок

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

«Якори» на сайте EPA.gov снабжены заголовком «На данной странице», дабы указать визитёрам на функциональную принадлежность этих ссылок

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

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

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

Подтвердите переход

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

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

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

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

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

Разглядите возможность зафиксировать анкорные ссылки на странице

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

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

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

Внутристраничные ссылки на сайте American Red Cross не покидают поле зрения пользователя кроме того на протяжении скроллинга

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

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

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

Анкорные ссылки на сайте World Wildlife Fund (Фонд дикой природы) имеют вид зафиксированного навигационного меню, дешёвого при скроллинге

Фиксированные ссылки: укажите на расположение пользователя

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

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

Просматривайте кроме этого: Нужна ли навигация на лендинге: эти, подтвержденные кейсами

Что по поводу кнопки «назад»?

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

Это зависит от применения:

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

Аккордеон-меню либо не?

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

В то время, когда раздел свернут, аккордеон-меню делает функцию интерактивного оглавления.

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

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

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

Заключение

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

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

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

По данным nngroup.com. Источник картины: Herve_P

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

Что такое безанкорные и анкорные ссылки? В чем между ними разница? Академия SEO


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

riasevastopol

More Posts