Hierarchien, Klassen und Abstände

Webnutzer sind dankbar, wenn sie schnell durch eine Website navigieren können. Einheitliche Farben jeweils für Links, für Überschriften und für nicht verlinkten Text sorgen dafür, dass dies möglich ist. Wichtige Objekte sollten groß und weniger wichtige Elemente klein abgebildet werden. Was profan klingt und selbstverständlich sein sollte findet sich dennoch in unzähligen Webauftritten unzureichend wieder. Eine gute Orientierung beginnt mit einem in sich schlüssigen Schriftklassenkonzept. Die Feinjustierung von Abständen hingegen ist eine typische Maßnahme kurz vor dem Relaunch.

Abstände sind ein stark vernachlässigtes Ordnungssystem. Sie sind vermutlich das am meisten unterschätze Gestaltungsmittel überhaupt. Um es einmal mit der Reisemetapher auszudrücken: Mit Abständen ist es, wie mit guten Wanderschuhen. Wenn man keine hat, gibts wunde Stellen. Zu große oder zu geringe Abstände fallen beim Webdesign sofort ins Auge. Ausgewogene Abstände nimmt man nicht wahr, und das ist auch gut so. Ein Seitentitel als wichtigste Information einer Webseite benötigt nicht nur eine entsprechende Größe, die in der CSS-Datei h1 zuzuordnen ist, sondern zusätzlich genügend Freiraum. Das Selbe gilt auch für das Logo, den Fließtext inklusive der Zeilen, Tabelleninhalten, Fotos, Abschnitte auf Ãœbersichtsseiten, etc… Weißraum will genauso gestaltet sein, wie der Inhalt, den es abzubilden gilt. Optimale Abstände sorgen für Ãœbersichtlichkeit. Sie schaffen gemeinsam mit den angesprochenen Hierarchien einen besseren, weil nutzerfreundlicheren Webauftritt.

Usability

Keiner dürfte den Begriff “Usability” in Verbindung mit den digitalen Medien so mit Inhalt gefüllt haben, wie Jakob Nielsen. Man muss nicht alle seiner Ansichten teilen. Mit zahlreichen Publikationen hat er aber dafür gesorgt, dass ein Faktor in Bezug auf das Web- oder Interfacedesign in seiner Position gestärkt wurde – das Nutzerverhalten. Die Gebrauchsfähigkeit einer Website bildet eine Allianz mit dem Nutzen (Utility).

Man kann unterstellen, dass die allermeisten Besucher ein Ziel vor Augen haben und so schnell wie möglich an eine bestimmte Information gelangen möchten. Design ist nichts, was diesem Streben im Wege stehen sollte, es aber zwangläufig tut, da nicht jeder diese Sichtweise für sich entdeckt hat und in die Rolle des Nutzers schlüpft. Wer sich darauf einlässt wird feststellen, dass Usability keineswegs der Königsmörder des Designs ist. Viel mehr unterstützt es die Kreation, macht sie einen Entwurf doch erst nachhaltig. Hierarchien, Abstände und ein Farbkonzept bestimmen die Gebrauchsfähigkeit einer Site ebenso wie grundlegende Gegebenheiten wie Leserichtung und Blickführung.

Navigationskonzept

Ein Navigationsgerät, das einen ständig fehl leitet sollte man ebenso schnell austauschen, wie eine Website, auf der man die Orientierung verloren hat. Rolltreppen in Kaufhäusern tragen Nummern, so dass man erkennt auf welcher Etage man sich befindet. Ebenso zeigen Schilder oberhalb der Supermarkregale in welchem Gang man sich befindet. Das ist so selbstverständlich, dass keiner jemals auf die Idee käme die Schilder einfach wegzulassen was uns zu der Frage führt, weshalb es immer noch so viele Websites gibt, bei denen man nach drei Klicks nicht mehr weiß in welchem Bereich man sich befindet. Kein Projekt geht bei mir auf die Reise, ohne dass es eine Kennzeichnung des Klickpfades gibt. Die Hervorhebung der angeklickten Navigationstasten gewährleistet eine sichere Standortermittlung. Wer seine Position kennt, kann seine Bewegung zielgerichteter fortsetzen.

In komplexen Sites ist nach wie vor ein Brotkrumenpfad als Unterstützung hilfreich. Unterschiedliche Nutzer navigieren unterschiedlich, deswegen machen sich auch eine Volltextsuche und bedürfnisorientierte Einstiege für Zielgruppen gut. Einheitliche Linkfarben, treffende Begriffe sowie eine semantische Ordnung, in der Gruppen gleicher Gewichtung in Haupt-, Zielgruppen, Meta- und Footer-Navigation zusammengeführt werden, erleichtern die Bedienung und das Zurechtfinden. Eine gute Haptik, hervorgerufen durch gute Rollover-Zustände der Links, Buttons und Schaltflächen, verleiht dem Joy-of-Use den letzen Schliff.

Mit dieser Ausrüstungs- und Packliste sollte man auch für Projekte in wilden Fahrwassern und unwegsamen Terrain gewappnet sein. Sie erhebt nicht den Anspruch vollständig zu sein, ist aber vielleicht Orientierungshilfe, wenn es darum geht sich durch ein Webprojekt zu hangeln.

Ich wünsche eine gute Reise!

Der Artikel ist erschienen im Web Designer´s Sketchbook.