Оформление ссылок

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

Текстовые ссылки. Текстовые ссылки представляют собой обычный текст.

Достоинства:

Недостатки:

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

Графические ссылки. Графическая ссылка - изображение.

Достоинства:

Недостатки:

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

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

При взаимодействии посетителя с элементом управления важно не только четко показать возможность взаимодействия с ним, но и то, что это взаимодействие произошло. Действительно, очень трудно понять, произошло ли нажатие на кнопку, если во время щелчка на ней не произошло изменение ее внешнего вида. Такое поведение в Windows-приложениях показывает, что кнопка недоступна. Но тогда возникает вопрос, а должно ли поведение элементов управления на web-страницах быть похожим на то, как они ведут себя в Windows? Да, если это стандартные элементы управления, такие как: текстовое поле, кнопка, список, выпадающий список, переключатель и др. Однако помимо стандартных элементов управления разработчик размещает на странице ссылки и объекты, которые могут быть похожими на стандартные элементы управления, например, ссылки-кнопки. Как быть в этом случае? Мне кажется, что в Web допустимо некоторое упрощение поведения пользовательских элементов управления, если оно не противоречит общепринятому функциональному действию, которое должен выполнять этот элемент. Это допустимо по той причине, что в Web понятие "активный элемент" трактуется несколько шире. Активный элемент в обычном приложении - элемент, который находится в фокусе, например, кнопка или текстовое поле (понятно, что этот элемент доступен для взаимодействия). В приложениях типа Word или Excel пользователь может взаимодействовать практически с любым элементом интерфейса, поэтому возможность взаимодействия с элементом управления осуществляется путем изменением его доступностью. Если элемент недоступен для взаимодействия, то это видно визуально - его надпись и оформление затеняются. web-страница - среда для просмотра информации, поэтому здесь нужно явно указать, какие элементы и области являются чисто информационными, а какие активными, то есть те, при взаимодействии с которыми происходят некоторые действия. В Windows-приложениях при наведении курсора на элементы управления во многих случаях не происходит изменения его формы, тогда как при наведении на ссылку это изменение происходит, хотя посетитель редко обращает на это внимание. Сложности для посетителей в понимании работы с элементом управления могут возникнуть в том случае, если разработчик графически выполнил элемент управления весьма похожим на стандартный элемент, а его действие не соответствет общепринятому. Конечно, во многих случаях это не критично, поскольку посетитель не знает многих вариантов взаимодействия с элементами управления и не ожидает от web-страницы интерактивности Windows-приложения, но все-таки лучше не заставлять его задумываться, почему графическая системная кнопка не нажимается при щелчке на ней.

Графические ссылки в виде кнопок можно использовать в том случае, если их количество не очень большое и названия ссылок по длине примерно равны, как показано на рис. 1

Рис. 1. Графические ссылки.

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

Рис. 2

Мы видим, что оформление ссылок в виде текста не только компактнее, но и хорошо различимо, поскольку вокруг каждой ссылки находится большое пустое пространство и нет ни одного дополнительного элемента, мешающего их распознаванию. Теперь посмотрите на правую часть рисунка - различимость и читаемость ссылок в виде кнопок намного хуже. Более того, высоко контрастные регулярные горизонтальные полосы между границами кнопок приводят к тому, что через некоторое время после просмотра области начинает рябить в глазах (и даже кружиться голова), и уже трудно понять, где какая ссылка. А теперь представьте, что так оформлен каталог поисковой системы или интернет-магазина, где ссылок может быть несколько десятков? Увидев такое оформление хочется покинуть страницу уже через 2-3 секунды.

В разделе "Информационная струкутра" нашего курса мы выяснили, что сначала посетители оценивают визуальное оформление информации и только потом ее смысл. В нашем примере на рис. 2 с оформление в виде кнопок посетитель вынужден прикладывать огромные усилия для фокусировании внимания на тексте ссылки, а это в свою очередь ведет к уменьшению его фокуса на самом смысле. Чтобы Вам было понятен этот момент предположим, что посетитель имеет 100 единиц энергии для распознавания ссылки. Предположим, что для распознания визуальной составляющей ссылки в общем случае используется - 20 единиц энергии, а на смысловое - 60. Пусть это будет левый пример на рис.2. Но в случае с кнопками на распознавание у посетителя будет затрачиваться 60 единиц энергии, в то время как на смысл остались все те же 60 единиц. В сумме получается 120 единиц. Но посетитель может потратить только 100 единиц энергии. Это значит, что 20 единиц энергии, которая необходима на распознавание смысла ссылки теряются - посетитель начинает плохо понимать или вообще не понимает смысл ссылки. Но проблема заключается даже не в этом. При взаимодействии с информацией на экране монитора посетитель часто должен "синхронизировать" несколько одновременно выполняемых действий - держать в фокусе интересующий его целевой элемент информации, распознать его, выполнять движение мышью, оценивать положение указателя мыши относительно целевого элемента, нажать кнопку мыши и др. Понятно, что каждое из этих действий требует внимания и усилий. Если же посетитель прикладывает дополнительные усилия и внимание на распознавание информации, то очевидно, что другим действиям, происходящим в этот момент, выделаятся меньше внимания, что приводит к рассогласованию этих действий, в результате чего возникают ошибки. Впервые я обратил на это внимание, когда увидел, как неопытный пользователь пытался перетащить в проводнике файл из одной папки в другую - он просто не мог совместить три действия - нажать и удерживать кнопку мыши, выполнять перемещение мыши и оценивать это движение с точки зрения приближения к требуемой целевой папке. Теперь представьте, что помимо ссылок и информации на странице присутствует анимационный баннер, реклама и т.п. Посетителю трудно синхронизировать основные действия, так еще эти элементы отнимают у него внимание на себя.

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

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

Рис. 3. Ничего не произошло

Рис. 4. Произошел переход на новую страницу

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

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

Рис. 5. Комбинированная навигация.

Предположим, что ярлыка "Каталог" нет (он выделен красным цветом) Если мы выбираем ярлык основной навигации, например "Контакты" то происходит загрузка страницы "Контакты" и его выделение, но как быть, если мы выбираем какой-то раздел каталога, например "Дети"? Загрузится страница "Дети", а будет выделен ярлык "Контакты" или нужно совсем убрать выделение ярлыка? Хорошо, давайте в ярлыки добавим "Каталог" и сделаем активным его при выборе любого раздела. Но тогда возникает вопрос, если после контактов мы щелкаем на ярлыке "Каталог", то что должно произойти - загрузка последнего выбранного раздела каталога, его оглавление или что-то еще? Возникает неоднозначность, поскольку происходит попытка определения местоположения посетителя в двух несвязанных между собой навигационных структурах - основная навигация и навигация по каталогу.

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

Рис. 6. Вид страницы до щелчка на ярлыке "Фото-навигатор".

Рис.7. Вид страницы после щелчка на ярлыке "Фото-навигатор".

Мы видим, что после щелчка на ярлыке "Фото-навигатор" произошел переход на страницу "Фото-навигатор", но выделение ярлыка не произошло. Допустимо ли это? Я думаю, что допустимо, поскольку в данном случае мы видим не систему ярлыков, а текстовые ссылки, оформленные как ярлыки, что, однако, может озадачить некоторых посетителей. Здесь важно то, что на странице "Фото-навигатор" отсутствуют ссылки на каталог, то есть мы видим страницу самостоятельного сервиса, где неоднозначность местоположения посетителя устранена.

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

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

Однако есть некоторые соглашения, которых следует придерживаться при оформлении ссылок - постоянное подчеркивание или подчеркивание при наведении указателя на ссылку и изменение вида курсора со стрелки на указатель. Почему я подчеркиваю этот момент? Дело в том, что активный элемент можно сделать программно без использования тега <a> - если элемент страницы поддерживает событие, то из него можно сделать ссылку. (нажмите на выделенное слово - это активный элемент, созданный из тега <b></b>). Если бы я не сделал это пояснения, то можно было подумать, что автор зачем-то выделил слово "ссылка", поскольку никакого признака активности нет. Но, если при наведении на ссылку появлялось бы подчеркивание и курсор (наведите указатель на это слово) изменил свой вид, то посетитель понял, что попал в активный элемент. Понятно, что подчеркивание при наведении на ссылку в тексте не видно, поэтому в тексте применяют явное отображение ссылки, а подчеркивание при наведении используют в области навигации, которую посетитель достаточно четко воспринимает как область ссылок.

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

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

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

Рис . 8. Горизонтальное расположение семи ссылок

Рис . 9. Вертикальное расположение тридцати восьми ссылок.

Если сделать горизонтальные ссылки во всю ширину экрана, то в нее можно "уместить" 14-16 ссылок, но получится длинная нечитаемая строка текста. А вертикальное размещение смотрится единым читаемым блоком, в который легко можно поместить еще и 3-ю колонку, что позволит пользователю видеть все разделы каталога (порядка 60 ссылок) и сразу перейти в любой из них.

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

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

Рис. 10. Глубина навигации.

Мы видим, что при такой организации для просмотра страницы с описанием автомобиля нужно выполнить 4 щелчка:

4 щелчка - достаточно утомительно. Как можно уменьшить глубину навигации? Очень просто - расширить ее, то есть объединить несколько уровней, например, так:

Рис. 11. Оптимизация навигации.

Здесь мы ссылку "Легковые" превратили в подраздел и поместили в него ссылки на производителей. Нетрудно заметить, что уменьшение глубины навигации привело к увеличению области навигации на второй странице - вместо 2 ссылок - "Легковые" и "Грузовые" теперь мы видим 4 элемента - "Легковые", "Производитель 1", "Производитель 2", "Грузовые".

Давайте теперь объединим 2-ю и 3-ю страницу.

Рис. 12. Оптимизация навигации.

Теперь для просмотра описания автомобиля нужно сделать 2 щелчка! Но не все так просто. Представьте, что производителей 10 наименований, а моделей - 40 для каждого производителя. Получается, что только в подразделе "Легковые" будет находиться 400 ссылок! Думаю, что немногие посетители захотят постоянно прокручивать страницу, чтобы добраться до нужной модели или сравнить несколько моделей разных производителей.

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