Struktur vor Design: warum sie zuerst kommt

Es heißt: Wir entscheiden, was die Website sagt, in welcher Reihenfolge und auf welcher Seite, bevor wir entscheiden, wie sie aussieht. Die Struktur umfasst vier Dinge: welche Informationen es gibt, wie sie gruppiert sind, was der Besucher zuerst sieht und wie er von einer Seite zur nächsten kommt. Das Design folgt direkt danach.

Ein einfacher Test: Nehmen Sie eine Seite und denken Sie sich alle Farben, Bilder und Schriften weg. Lesen Sie, was übrig bleibt. Wenn Sie verstehen, was das Unternehmen tut, an wen es sich richtet und was Sie als Nächstes tun sollen, funktioniert die Struktur. Dann hat das Design ein festes Fundament.

In der Fachsprache heißt das Informationsarchitektur. Gemeint ist die Art, wie Inhalte geordnet sind, damit man sie leicht findet. Die Nielsen Norman Group beschreibt sie als das Rückgrat der Informationen einer Website, getrennt von den Menüs und Schaltflächen, die darauf liegen. Das größere Bild finden Sie in was eine Unternehmenswebsite wirksam macht. Die Fallstudien zeigen dieselbe Reihenfolge in Website- und Plattformprojekten.

Design braucht eine Struktur, weil jede Gestaltungsentscheidung einen Grund braucht, und der kommt aus der Struktur. Ist sie fertig, wissen wir, warum eine Überschrift größer ist oder ein Bild breiter. Der Besucher versteht, was wichtig ist, wohin er zuerst schauen soll und wie die Informationen zusammenhängen.

Die Lesegewohnheiten machen das noch wichtiger. In der langjährigen Studie der Nielsen Norman Group darüber, wie Menschen im Netz lesen, überflogen 79 % der Teilnehmer eine neue Seite immer. Nur 16 % lasen Wort für Wort. Leser suchen die Stelle, die ihre Frage beantwortet. Sie überfliegen aussagekräftige Überschriften, kurze Absätze und eine klare Reihenfolge. Das sind alles Elemente der Struktur.

Auch beim Beurteilen von Arbeit ist Vorsicht nötig. Eine schöne Seite wirkt benutzerfreundlicher. Die Nielsen Norman Group nennt das den „Ästhetik-Usability-Effekt“ und merkt an, dass ansprechendes Design ernste Usability-Probleme nicht löst. Deshalb prüfen wir die Struktur getrennt, bevor echte Besucher sie beurteilen.

Struktur hilft dem Besucher, seine Fragen selbst zu beantworten, schnell und in logischer Reihenfolge. Wer ein Unternehmen prüft, vergleicht Optionen, sucht Passendes und schätzt das Risiko ein. Die Struktur legt die Antworten dorthin, wo er sie erwartet: was angeboten wird, für wen, wie es abläuft und was danach kommt.

Denken Sie an eine Geschäftsführerin mit zehn Minuten vor einer Besprechung und vier Websites in offenen Tabs. Auf der Website, auf der die Leistungen einfach benannt, logisch gruppiert und mit einem sichtbaren nächsten Schritt versehen sind, hat sie schnell ein klares Bild. Dort macht die Struktur den Unterschied. Das Design hebt sie hervor.

Struktur stützt auch das Vertrauen. Die Richtlinien des Web Credibility Project der Stanford University nennen einfache Kontaktaufnahme, ein sichtbares, real existierendes Unternehmen, genaue Informationen und fehlerfreie Texte. Das sind alles Inhaltsentscheidungen, die vor dem Design fallen. Dieselbe Beurteilung aus Sicht des Lesers betrachten wir in wie Entscheider eine Website beurteilen.

Er beginnt mit einer kurzen Folge von Entscheidungen, bei der jeder Schritt freigegeben wird, bevor der nächste startet. In dieser Phase arbeiten wir mit Worten, Listen und einfachen Seitenskizzen. Für eine Unternehmenswebsite sind das die Schritte vor jeder visuellen Gestaltung:

1. Wir benennen die Entscheidungen. Wir schreiben auf, wer die Website besucht und was jeder entscheiden muss: ein Angebot anfragen, das Unternehmen in eine Auswahlliste aufnehmen oder einfach die Leistung verstehen.

2. Wir erstellen die Seitenliste. Wir behalten die Seiten, die diese Entscheidungen stützen, damit jede Seite einen klaren Zweck hat.

3. Wir legen die Reihenfolge jeder Seite fest. Oben steht, was der Besucher zuerst braucht, danach, was er an zweiter Stelle braucht. Pro Abschnitt eine Kernaussage.

4. Wir schreiben den echten Text. Mit endgültigen Formulierungen, damit das Layout um das gebaut wird, was wirklich gesagt wird.

5. Wir prüfen das Verständnis in schlichter Form. Wir sehen einfache Seitenskizzen ohne Farben. Wir fragen, ob jemand außerhalb des Projekts erklären kann, was die Seite sagt.

6. Zum Schluss gestalten wir. Farbe, Schrift und Bilder betonen nun eine Hierarchie, die schon feststeht.

Dieselbe Reihenfolge steckt in den Phasen unseres Vorgehens. Deshalb beginnt jede Unternehmenswebsite, die wir bauen, mit Fragen, noch vor den ersten Entwürfen.

Das Design bestimmt, wie die Struktur wahrgenommen wird: was das Auge anzieht, wie schnell man eine Seite überfliegt, wie ruhig oder ernst der Ton ist. Seine Aufgabe ist es, die Struktur zu stärken: die Hierarchie zeigen, die Aufmerksamkeit lenken und die Navigation selbstverständlich halten. Es ist ebenso wichtige Arbeit, die nur an zweiter Stelle kommt.

Gutes Design hält die Struktur auch einheitlich. Die WCAG, der Barrierefreiheitsstandard des W3C, verlangt, dass eine Navigation, die sich auf mehreren Seiten wiederholt, jedes Mal in derselben relativen Reihenfolge erscheint. So können Menschen vorhersehen, wo etwas steht. Das ist eine Gestaltungsregel im Dienst einer Strukturentscheidung.

Das Design wirkt am besten, wenn der Inhalt klar, die Logik vollständig und die Ordnung richtig ist. Das liegt unter dem Design wie ein Fundament. Mit einem festen Fundament hält das Design über Jahre, ohne neu gemacht werden zu müssen.