Start Basiskoffer für die Reise durchs Netz

Basiskoffer für die Reise durchs Netz

Hierarchien, Klassen und Abstände

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

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

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.

Seiten  1 2

12 Kommentare

  1. Gefällt mir sehr gut. Außerordentlich gut sogar. Es ist genau so beschrieben, wie auch ich es ‘lebe’ bzw. wie auch ich es hätte erklärt.

    Gerade wie die Basis erkärt ist … oder auch die Navigation, gefällt mir sehr. Denn gerade an der Basis scheitert es bei vielen schon. Da wird oft mit Schritt 2 begonnen und dann wird das Ergebnis oft nicht 100 Prozent. Auch wird mir in einigen Bereichen zu viel neues probiert und dabei das alt Bewährte und Erforderliche schlicht weg vergessen. Neue Sachen sind schön und ich lasse mich auch gern von neuen Sachen überraschen und inspirieren. Aber bestimmte Sachen sind nicht umsonst überall zu finden. Das hat den Grund, dass man sie benötigt und dass es ohne sie nur schwieriger wird.

    Das Bild mit der Rolltreppe ist sehr schön. :)

    Nach diesem Reisekonzept sollten alle arbeiten oder sich davon leiten lassen. Also die, die es nicht eh schon wissen und tun.

  2. Finde ich auch gut und direkt verwendbar um Neulinge heranzuführen. Dies sind kleinere Grundsätze mit denen man anfangen kann.

    Ein Problem habe ich nur mit dem Wort “Pages” in der Navigation und dem etwas “kunterbunten” Markup dieser Website hier. Bisschen div-Suppe hier und da und (also nicht self-closing) gibt es eigentlich nicht (mehr) bei XHTML. Ist kleinlicher Unsinn aber den muss man ertragen wenn man andere diesbezüglich belehren möchte :)

  3. Sehr inspirierend.
    Da kann man seine eigene Arbeitsweise mal wieder überdenken. Aber jeder der mal für Kunden eine Website entwickelt hat wird sich in diesem Ablauf wiederfinden und sicher festellten wo man beim nächsten Projekt effizienter arbeiten kann. Super. Vielen Dank!

  4. Hallo,

    das ist ein interessanter Beitrag. Er fängt sehr vielversprechend an, doch endet leider zu schnell. Nach ein paar Worten zum Aufbau ist Schluss…
    Gibt es nicht mehr den kompletten Betrag zu lesen? Oder habe ich nur den “weiter-lesen-Link” übersehen?

    Viele Grüße
    Sabrina

  5. Ein sehr nützlicher Basis-Koffer. Der name ist genau richtig gewählt. Deswegen verstehe ich den Kommentar über mir nicht – wenn die Basis endet dann endet auch der Artikel.

Kommentieren

Folgende HTML-Elemente können verwendet werden: <b> <i> <img src="meineurl"> <a> <blockquote>