Usability-Tipps - Kapitel "Layout und Technik"

Der funktionale Aufbau auf dem Prüfstand

Oft steht vor der konkreten Planung der Inhalte einer neu zu erstellenden Website neben der „Grobplanung“ in Form eines Entwurfs der wahrscheinlich benötigten Navigationspunkte vor allem die Frage nach dem „Design“ der Website ganz weit oben auf der Liste. Schließlich ist es gerade im Web ja auch die Verpackung und nicht nur der reine Inhalt, der bei Besuchern zwischen „bleiben“ und „gehen“ entscheidet. Und dazu gehören nicht nur Farben, Bilderwelten und Schriftarten, sondern vor allem auch der funktionale Aufbau der Seiten.

Zunächst einmal hat jede Seite einen bestimmten Aufbau, selbst wenn dieser auf Zufall basiert. Ob dieser aber erkennbar ist oder gar der Funktion der Seite entspricht oder eine Bedienung eher schwieriger macht, hängt zu einem sehr großen Teil auch vom Bediener selbst ab. Und da man diesen nur selten kennt, kann man nur auf Erfahrungswerte zurückgreifen und Annahmen über seinen Anwender treffen… und daraus dann einen geeigneten Aufbau ableiten.

Damit ein Layout als Unterteilung in verschiedene funktionelle Bereiche überhaupt wahrgenommen werden kann, ist zunächst einmal die Erkennbarkeit des Aufbaus für den Anwender entscheidend. Es nutzt nicht viel, wenn Sie sich an einen einheitlichen Aufbau für Ihre Seiten halten, dieser aber nicht vom Anwender erkannt werden kann. Unabhängig davon, ob Sie also ein mehrspaltiges Design oder einen Inhaltsbereich wählen, der je nach Seitentyp variabel ausfallen kann und ob ein Standardkopf für alle Seiten oder individuelle Gestaltungen eingesetzt werden sollen, muss es Kriterien geben, die zur Erkennung von einzelnen abgetrennten Bereichen dienen.

Dazu können verschiedene Mittel eingesetzt werden:

  • Unterschiedliche Hintergrundgestaltung je Funktions- oder Gestaltungsbereich
  • Abgrenzung der Bereiche durch Trennlinien oder Umrahmungen
  • Erkennbare Abstände („Whitespace“) zwischen den Bereichen
  • Unterschiedliche Gestaltung der Inhaltsbereiche durch Farben oder (Hintergrund-) Grafik

Als Hausmittel für einen Test können Sie z. B. eine Seite bei Google in eine fremde Sprache übersetzen und dann einem beliebigen Testkandidaten vorsetzen. Kann er noch erkennen, wo sich die Navigation, der Inhalt, der Kopf und der Fuß befinden? An welcher Stelle die Navigation untergebracht werden sollte, ob zusätzliche Inhalte besser oben, unten, rechts oder links vom Hauptinhalt platziert wird und wie viele unterschiedliche „Zonen“ das Design einer Seite benötigt, hängt wie immer auch vom Zweck der Seite ab, wenngleich eine Positionierung der [Detail-] Navigation auf der linken Seite – also anders als in diesem Blog – in der Regel immer die bessere Idee ist, da dieser Bereich nicht nur mehr im Fokus liegt, sondern für erfahrene User auch so etwas wie den angestammten Platz der Navigation darstellt. Mehr dazu finden Sie im Abschnitt über Navigation.

Wie auch immer die Positionierung nun genau vorgenommen wird: Bei erfolgreichen und zumeist größeren Websites, deren Seiten unterschiedliche Funktionen erfüllen und daher das Grundlayout von Zeit zu Zeit zwischen den Klicks wechseln (müssen), werden Sie immer Gemeinsamkeiten und ein möglichst harmonisches Design erkennen können, dass dem Anwender klar signalisiert, dass er immer noch beim gleichen Anbieter ist.