Следующий пост Навигация по страницам сайта→

Облака тегов: обзор и примеры использования

5 марта 2008 by Gabo

Облако тегов или Туча ярлыков или Облако меток (англ. tag cloud) - визуальное представление списка ярлыков (или категорий). Частота упоминаний, поисков, ссылок в интернете с определенного сайта неких слов, терминов, имен, отображается на специальной странице в виде изображения этих слов в формате гиперссылок. Размер изображения тем больше, чем выше релевантность данного слова (термина, имени).

Разновидности облаков тегов

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

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

Индекс тегов как альтернатива облаку тегов

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

Облака тегов, использующие размер шрифта для указания веса тега

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

Использование цвета в облаках тегов

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

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

Форма облаков тегов

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

Использование облака тегов в онлайновых магазинах

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

Облака тегов, которые на самом деле совсем не облака тегов

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

Облака тегов на главных страницах сайтов

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

Карта Google News. Обратите внимание на стрелки: они символизируют растущую или убывающую популярность отдельного тега.

Экстремальное использование тегов на сайте Plurn. Нет, это не экранный снимок сайта. Оригинальный экранный снимок был уменьшен в несколько раз.

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

Поток сознания: веб-сайт как облако тегов

Целые страницы с тегами, и ничего более

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

Классика: Flickr и del.icio.us

Теги на news.com.

Реклама через теги. Очень похоже на спам.

Генераторы облаков тегов

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