Eine Tag Cloud ist ein hübsches Spielzeug, oft gesehen in Blogs. Sie lädt zum Klicken ein, aber nur Besucher, die mit der graphischen Ansicht etwas anfangen können. Für alle anderen ist sie eine unkoordinierte, sinnlose Linkaufreihung.

Tag Clouds leben davon, dass die unterschiedlichen Gewichtungen der einzelnen Begriffe dargestellt werden. Klassischerweise wird durch unterschiedliche Schriftgrößen die Häufigkeit der verwendeten Tags (z.B. bei Suchbegriffen) symbolisiert. Dabei gilt: Je größer, desto häufiger.

Wie baut man eine Tag Cloud?

Grundlegende Hinweise zum Algorithmus von Tag Clouds finden sich in Kevin Hoffmann's Whitepaper "In Search of the perfect Tag Cloud" (http://dotnetaddict.dotnetdevelopersjournal.com/tw.htm),
Dank an Simbo für den Hinweis.

Häufig werden für Blogsysteme schon fertige Module oder Plug-Ins angeboten, die den oben genannten, bekannten Standards entsprechen und dementsprechend auf visueller Akzentuierung basieren.

So sieht sie dann aus

Beispiel einer klassischen Tag Cloud mit:

und ohne CSS

Offensichtlich ist, dass die Relevanz der einzelnen Begriffe nur über die graphische Darstellung realisiert wird, wodurch Usern ohne visuellen Zugriff die Kerninformation verborgen bleibt. Erschwerend kommt hinzu, dass sich Tastaturbenutzer durch eine schier endlos lange Liste von Links tabben müssen und so die Navigation höchst unergonomisch wird.

Recherche im Web

Recherchiert man im Web, so stößt man regelmäßig auf Hinweise, dass Tag Clouds nun einmal nicht semantisch seien und so Screenreadernutzern keine Hilfe böten.

Diskussion im Forum

Die Diskussion im SELFHTML-Forum zu diesem Thema erwies sich als ausgesprochen ideen- und abwechslungsreich. Nach mehreren Entwicklungsstufen kristallisierte sich die folgende Lösung heraus:

Lösungsvorschlag

Der Algorithmus zum Aufbau der Darstellung der unterschiedlichen Gewichtung wird ein wenig erweitert. Neben der Berechnung der Darstellungsgröße wird zusätzlich ein Begriff, der der Darstellungsgröße entspricht, aus einer Liste gewählt und ausgegeben:

Code-Schnipsel:

<a class="ignore"

" href="#ueb">Suchbegriffsliste überspringen</a>
<ul id="tagcloud">
<li><span style="font-size:101%"><a href="linkziel">allergien</a></span><span class="ignore"> eher selten</span></li>
<li><span style="font-size:104%"><a href="linkziel">arthrose</a></span><span class="ignore"> eher selten</span></li>
<li><span style="font-size:137%"><a href="linkziel">arzt</a></span><span class="ignore"> häufig</span></li>
<li><span style="font-size:169%"><a href="linkziel">Arzt-Suchdienst</a></span><span class="ignore"> ausgesprochen häufig</span></li>
<li><span style="font-size:105%"><a href="linkziel">ärzte</a></span><span class="ignore"> eher selten</span></li>
<li><span style="font-size:95%"><a href="linkziel">Asthma</a></span><span class="ignore"> eher selten</span></li>
<li><span style="font-size:109%"><a href="linkziel">augen</a></span><span class="ignore"> eher selten</span></li>
<li><span style="font-size:121%"><a href="linkziel">bluthochdruck</a></span><span class="ignore"> häufig</span></li>
<li><span style="font-size:99%"><a href="linkziel">Borreliose</a></span><span class="ignore"> eher selten</span></li>
<li><span style="font-size:93%"><a href="linkziel">Bücher</a></span><span class="ignore"> eher selten</span></li>
<li><span style="font-size:143%"><a href="linkziel">carstens-stiftung</a></span><span class="ignore"> sehr häufig</span></li>
<li><span style="font-size:107%"><a href="linkziel">Darm</a></span><span class="ignore"> eher selten</span></li>
<li><span style="font-size:96%"><a href="linkziel">depression</a></span><span class="ignore"> eher selten</span></li>
<li><span style="font-size:97%"><a href="linkziel">diabetes</a></span><span class="ignore"> eher selten</span></li>
<li><span style="font-size:100%"><a href="linkziel">durchfall</a></span><span class="ignore"> eher selten</span></li>
<li><span style="font-size:99%"><a href="linkziel">ernährung</a></span><span class="ignore"> eher selten</span></li>
<li><span style="font-size:104%"><a href="linkziel">globuli</a></span><span class="ignore"> eher selten</span></li>
<li><span style="font-size:104%"><a href="linkziel">hausapotheke</a></span><span class="ignore"> eher selten</span></li>
<li><span style="font-size:118%"><a href="linkziel">hausmittel</a></span><span class="ignore"> eher selten</span></li>
<li><span style="font-size:102%"><a href="linkziel">haut</a></span><span class="ignore"> eher selten</span></li>
[...]
</ul>

Die einzelnen Begriffe werden als Listenpunkte einer ungeordneten Liste ausgezeichnet; über CSS wird die visuelle Auszeichnung als Größe formatiert. Die zugehörigen erläuternden Begriffe werden außerhalb des Viewport (sichtbarer Bereich) geschoben.

Im konkreten Beispiel ging es um die Häufigkeit verwendeter Suchbegriffe, die in die folgenden Kategorien eingeteilt wurden:

• ausgesprochen häufig
• sehr häufig
• häufig
• eher selten

Neben dieser Einteilung ist auch die explizite Nennung der Häufigkeit denkbar.

So sieht's aus mit CSS

und so ohne

Die semantische Ausgestaltung einer Tag Cloud basiert auf den selbst entwickelten Funktionen. Nutzer vorgefertigter Module müssen sich zur Umsetzung dieses Vorschlags auf die Suche nach den Funktionen zum Aufbau einer Tag Cloud innerhalb ihres Blog-Systems machen, um die dort hinterlegten Algorithmen aufzufinden und diese entsprechend der hier vorgestellten Idee zu ergänzen.