Usability-Tipps - Kapitel "Navigation"

Zurück zur Startseite – per Klick auf das Logo?

Neben Links im Inhaltsbereich und einer ein- oder mehrstufigen Hauptnavigation ist ein im Kopf der Seiten angebrachtes Logo eines der wichtigsten Navigationselemente, da hier erfahrene wie unerfahrene Nutzer gleichermaßen (wenngleich aus unterschiedlichen Gründen) erwarten, dass ein Klick dort zur Startseite führt.

Dabei ist es egal, ob Sie dort wirklich einen Link hinterlegen oder nicht – die Klicks in diesem Bereich sind unvermeidlich! Tun Sie sich und Ihren Besuchern daher unbedingt lieber gleich den Gefallen und sorgen Sie dafür, dass das Erwartete auch wirklich eintritt und die Startseite der Domain angezeigt wird, indem Sie einen entsprechenden Link „um“ die Grafik legen.

Auch Seiten, die ein in das Hintergrundbild des Kopf eingebettetes Logo verwenden, welches per CSS auf die Seite gebracht wird, ohne sichtbare Spuren im Seitenquellcode zu hinterlassen, können mit einem Minimum an „unnötiger“ Erhöhung des Markup-Anteils eine Lösung herbeiführen. Wenn der Kopf der Seite z. B. durch einen eigentlich „leeren“ Container erzeugt wird, der Hintergrundbild und Höhe über CSS-Anweisungen erhält, fügen Sie einfach einen weiteren „leeren“ Container hinzu, den Sie ebenso per CSS mit passender Höhe und Breite versehen und „über das Logo“ des Hintergrundbilds legen. Bei der Positionierung hilft es übrigens enorm, erst einmal eine aufällige Hintergrundfarbe zu definieren, bis das Logo komplett verdeckt wird und die Position stimmt. Fügen Sie die Anweisung pointer: cursor; zu den CSS-Stilanweisungen hinzu, damit der Benutzer sieht, dass hier geklickt werden kann. Anschließend erhält das Element ein onclick-Ereignis per JavaScript, welches dann für die Navigation zur Hauptseite der Domain sorgt.

Ein Beispiel. Im Seitenquellcode finden sich zwei Container, die den Header inkl. Hintergrundbild mit enthaltenem Logo und den „klickbaren“ Bereich des Logos erzeugen:

<div id=“header“>
<div onclick=“location.href=’http://meinestartseite.de'“ id=“logo“/>
</div>

In den CSS-Anweisungen zum Aufbau der Seite erhält der Header sein Hintergrundbild:

#header {
background: transparent url(img/header.jpg) no-repeat scroll right top;
height: 100px;
}

… und der „logo“-Container bekommt seine genaue Position und den Cursor, der ihn als anklickbar erkennbar macht:

#logo {
cursor: pointer;
height: 75px;
margin-top: 10px;
margin-left: 50px;
width: 200px;
}

Mit diesen Anweisungen kann auch ein Layout, in dem Sie – aus welchen Gründen auch immer (z. B. zur Optimierung für Suchmaschinen) – auf eine Verwendung des Logos als „echtes“ <img> im Seitenquellcode verzichten wollen, dem gelernten Verhalten des Anwenders entgegen kommen. Es sollte Ihnen aber bewußt sein, dass dieser Link nur verwendbar ist, wenn JavaScript im Browser aktiviert wurde… und wenn es überhaupt ein Browser ist, der Ihre Seite gerade anzeigt. Daher kann dieser zusätzliche Link auf die Startseite auf keinen Fall der einzige Weg sein, von einer beliebigen Unterseite wieder zur Startseite zurückzukehren . „Startseite“, „Home“ oder ein ähnlicher Link gehört in die Hauptnavigation und / oder in eine „Brotkrumennavigation“ („breadcrumb navigation“), die von der aktuellen Seite aus den Weg zurück bis zur Startseite mit dezenten Links – zumeist oberhalb des Hauptinhalts einer Seite – ausweist (mehr dazu später in einem separaten Beitrag).