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

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

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

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

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

Облака тегов: с чем мы имеем дело?

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

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

Вот список тех тем, которые освещаются в BoingBoing, согласно Technorati.

С другой стороны, некоторые известные блоггеры уже удалили облака тегов со своих сайтов; например, облака тегов были удалены из популярного блога, посвященного Web 2.0 – O’Reilly.

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

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

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

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

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

Все эти ссылки помечены тегом "дизайн" на сайте Del.icio.us. Вы можете понять, что здесь к чему относится?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теги на news.com.

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

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

Tag Cloud Builder
ZoomClouds
Для тех, кто не обнаружил в списке сайт tagcloud.com: этот сайт в настоящее время перестал работать.

Нужны другие идеи?

Tagclouds Photoset представлены варианты дизайна облаков тегов в виде ленты Flickr.
В статье "Что такое облака тегов" объясняется, как устроены облака тегов, как они используются, и приводится несколько примеров.
Инструменты / сайты, с помощью которых можно создать облака тегов

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

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

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

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

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

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

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

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

Ваши теги и мои теги – это разные теги!

Источник: http://www.usabilityprofessionals.ru