Sprung zu
Artikelanfang
Haupt-Menue
Sitemap (Inhaltsverzeichnis)
Hilfe und Hinweise

Darstellung
Layout ausschalten
Layout einschalten

Kontakt
Impressum



Aktiv oder nicht?

Eine klare Anforderung an die Usability einer Website lautet:

"Biete keinen aktiven Link auf die aktuelle Seite an."
Will heißen: Eine Seite (bzw. ein Link) soll nicht auf 'sich selbst' verweisen.

Warum? Nun, erst mal ist es unlogisch: Ein Link ist ein Verweis auf ein weiteres Dokument, sei es Teil der eigenen Präsenz oder Teil eines anderen Web-Angebots. Der Verweis auf ein Ziel, das man bereits erreicht hat, ist also überflüssig und wenig elegant. Schlimmer noch – er kann zu Verwirrung führen. Beim Anwender kann der Eindruck entstehen, daß "nix passiert", der Link (bzw. der Quellcode) also fehlerhaft ist. Am schlimmsten kann sich das auswirken, wenn solch ein Link sich mitten im Text befindet (im Gegensatz zum Hauptmenü), vor allem wenn der Anwender bereits gescrollt hat, und nun an den Anfang der selben Seite geschleudert wird. Dies kann zu völliger Disorientierung führen.
Weiterhin würden bereits getätigte Formular-Einträge durch solch einen Klick gelöscht werden.

Die Gegner dieser Anforderung (klar, die gibt es auch) haben i.d.R. nur recht stumpfe Argumente wie:

- fehlende Reload-Möglichkeit oder
- das Fehlen diverser Funktionen über das spezifische Kontextmenü ...

Wer seinen Browser kennt, weiß natürlich, daß keine dieser Funktionen fehlt oder schwieriger zu erreichen ist als über einen (ansonsten sinnlosen) aktiven Link.

Viele der Gegner argumentieren weiterhin, daß eine deutliche Hervorhebung des aktiven Links ausreichend sei, nur: Das bloße Hervorheben des aktiven Links durch eine spezielle Formatierung (fett, farbig, veränderter Cursor) reicht nicht aus, da Anwender mit Textbrowser, Userstyles, PDA o.ä. weiterhin nur einen aktiven Link ohne jede Hervorhebung sehen.

Schauen wir uns ein Beispiel (mit sinnlosen Links) an:

<ul>
<li><a href="seite1.html">Seite 1</a></li>
<li><a href="seite2.html">Seite 2</a></li>
<li><a href="seite3.html">Seite 3</a></li>
</ul>

Wird dieses Menü nun unverändert auf jede Seite übernommen, hat der Anwender keinen Überblick, welche dieser Seiten gerade aktiv ist. Dem könnte man natürlich mit einer speziellen Formatierung abhelfen:

<ul>
<li><a href="seite1.html" class="aktiv">Seite 1</a></li>
<li><a href="seite2.html">Seite 2</a></li>
<li><a href="seite3.html">Seite 3</a></li>
</ul>

Sieht zwar nicht mehr wie ein Link aus, ein MousOver verrät ihn allerdings. Auch dem kann man abhelfen (mit cursor: text;):

Selbst ein MouseOver verrät nicht, daß darunter ein Link liegt, aber das ist alles nur Kosmetik, da der Eintrag weiterhin klickbar bleibt.
Dies wird deutlich, sobald wir das angelegte CSS deaktivieren:

So präsentiert sich das Menü in allen Fällen, in denen CSS (aus welchem Grund auch immer) nicht unterstützt wird.

Der einzige Weg, aus dem Link eine reine Standort-Anzeige zu machen, ist also tatsächlich, diesen Link zu deaktivieren:

<ul>
<li class="aktiv">Seite 1</li>
<li><a href="seite2.html">Seite 2</a></li>
<li><a href="seite3.html">Seite 3</a></li>
</ul>

Selbst wenn wir uns an diesem Punkt jetzt einig sind – ich höre das Stöhnen: "Uff, da muß ich ja jede Seite anfassen und das Menü ändern!" In der Tat <ggg> ... Ok, dieser Aufwand ist sicher nur bei kleineren Sites vertretbar. Bei großen Sites oder bei dynamisch inkludierten Menüs bietet sich an, dies per $script zu erledigen.

Letzteres ist meine favorisierte (PHP-)Methode. Auch wenn sie auf den ersten Blick aufwendig aussieht – da ich meine komplette Navigation in einem Include verwalte, ist es einmalige Arbeit und danach sehr simpel und komfortabel zu verwalten.


<?php
$scriptname =
preg_replace("/^.*\//","",$_SERVER['SCRIPT_NAME']);
?>

<ul>
<?php if($scriptname=="seite1.php") { 
	?>
<li class="aktiv">Seite 1</li>
<?php
	}else {
	?>
<li><a href="seite1.php">Seite 1 </a></li>
	<?php
	}
	?>

<?php if($scriptname=="seite2.php") { 
	?>
<li class="aktiv">Seite 2</li>
<?php
	}else {
	?>
<li><a href="seite2.php">Seite 2</a></li>
	<?php
	}
	?>

<?php if($scriptname=="seite3.php") { 
	?>
<li class="aktiv">Seite 3</li>
<?php
	}else {
	?>
<li><a href="seite3.php">Seite 3</a></li>
	<?php
	}
	?>
</ul>

Die Schreibweise ist meine persönliche Vorliebe, da ich so immer 'reines' HTML zwischen den Script-Blöcken habe. Das entsprechende Syntax-Highlighting im Editor (hier mit bold simuliert) macht das ganze sehr übersichtlich. Natürlich lassen sich die Menüs auch verschachteln und erweitern sowie beliebig formatieren.

Seitenanfang


(c) 2005 e-workers
http://www.e-workers.de/
mailto: info@e-workers.de