Eine Anfrage klingt häufig so: „Wir möchten eine schönere Website.“ Sie ist berechtigt und verbirgt fast immer eine andere Frage: Die aktuelle Website erreicht nicht, was sie erreichen sollte. Menschen kommen und gehen wieder, oder sie verstehen nicht, was sie tun sollen.

Ein schöneres Design löst dann nur einen Teil des Problems. Ästhetik bestimmt den ersten Eindruck, aber nicht, ob jemand weiterliest, vertraut, den Nutzen versteht und schließlich Kontakt aufnimmt. Das entscheidet das Erlebnis: die Art, wie eine Seite die betrachtende Person führt.

Ästhetik und Erlebnis sind nicht dasselbe

Ästhetik ist in einem Standbild sichtbar: Farben, Typografie, Bilder und Abstände. Erlebnis entsteht über Zeit, während jemand scrollt, liest, innehält, zurückgeht, eine Seite öffnet oder seine Meinung ändert.

Eine Website kann in einem Bild makellos wirken und im Verlauf vollständig scheitern. Das passiert, wenn jeder Abschnitt dasselbe visuelle Gewicht hat, alle Textblöcke gleich lang sind oder sechs Schaltflächen auf einem Bildschirm miteinander konkurrieren. Nichts gibt Orientierung, und die natürliche Reaktion ist das Schließen der Seite.

Ein wirksames Erlebnis verlangt nicht, dass Besucher selbst wählen, wohin sie zuerst schauen. Das Design entscheidet und vermittelt diese Entscheidung ohne zusätzliche Erklärung.

Hierarchie: Jemand muss entscheiden, was zuerst gelesen wird

Hierarchie ist der unauffälligste Teil der Arbeit und der mit der größten Wirkung. Für jeden Bildschirm wird festgelegt, was zuerst gelesen werden soll, was danach kommt und was übersprungen werden darf.

Konkret sind es wenige, konsequent angewandte Regeln:

  • eine einzige Hauptaktion pro Bildschirm, ohne Suche erkennbar;
  • deutliche Größenunterschiede, denn eine Überschrift, die nur 15 Prozent größer als der Fließtext ist, schafft keine Hierarchie;
  • Kontrast als Gestaltungswerkzeug, nicht nur als Anforderung an Barrierefreiheit;
  • Freiraum um Wichtiges, die einfachste Art, einem Element Bedeutung zu geben.

Funktioniert die Hierarchie, kann jemand die Seite zehn Sekunden überfliegen und trotzdem erklären, worum es geht. Dieser Test lohnt sich für jede Startseite.

Lesbarkeit und Rhythmus

Für Lesbarkeit gelten bekannte Regeln: ungefähr sechzig bis fünfundsiebzig Zeichen pro Zeile, großzügiger Zeilenabstand, ausreichender Kontrast und kurze Absätze. Diese technischen Bedingungen lassen sich prüfen.

Rhythmus ist weniger festgelegt. Er unterscheidet eine angenehme von einer anstrengenden Seite: der Wechsel zwischen dichten und offenen Blöcken, Text und Bild, Abschnitten, die Aufmerksamkeit verlangen, und solchen, die sie zurückgeben. Fünfzehn identische Abschnitte ermüden auch dann, wenn jeder für sich gut gestaltet ist.

Rhythmus wird als Abfolge entworfen, nicht als Sammlung einzelner Bildschirmansichten. Deshalb ist es wenig sinnvoll, das Design einer Seite nur in Teilen zu beurteilen.

Inhalte kommen vor dem Layout

Ein Layout mit Blindtext hält nur, bis die echten Inhalte eintreffen. Eine Überschrift mit zwei Zeilen im Entwurf braucht plötzlich vier, die für dreißig Wörter geplante Beschreibung benötigt neunzig, und am Ende wird der Inhalt für das Design gekürzt.

Die richtige Reihenfolge ist umgekehrt. Zuerst wird festgelegt, was in welcher Abfolge gesagt werden muss, dann entsteht die Form, die es trägt. Eine Website ist vor allem eine Folge von Argumenten. Deren Reihenfolge ist eine unternehmerische Entscheidung, nicht nur Sache des Designs.

Wann Bewegung wirklich hilft

Bewegung ist sinnvoll, wenn sie etwas vermittelt, das sonst erklärt werden müsste.

Bewegung zur Orientierung

Ein Element, das beim Scrollen von unten erscheint, signalisiert einen neuen Abschnitt. Ein Übergang zwischen Seiten zeigt, dass ein Wechsel stattgefunden hat und die Website die Absicht verstanden hat. Ein Menü mit konsistenter Bewegung zeigt, woher es kommt und wohin es zurückkehrt. Die Animation beantwortet jeweils eine unausgesprochene Frage: Was ist gerade passiert?

Mikrointeraktionen

Sie sind unmittelbare Antworten auf Gesten: eine Schaltfläche reagiert auf Druck, ein Feld bestätigt den Empfang von Daten oder eine Karte hebt sich beim Zeigerkontakt kaum merklich. Sie dauern weniger als zwei Zehntelsekunden und zeigen, dass das System die Aktion registriert hat.

Ein oft übersehenes Detail: Auf Telefonen gibt es keinen Hover. Informationen, die nur beim Überfahren erscheinen, erreichen mobile Nutzer nicht.

Mehr Animation bedeutet kein besseres Erlebnis

Bewegung hat Kosten, und die Person, die etwas erledigen möchte, bezahlt sie.

Eine Eingangsanimation für jeden Absatz macht Lesen zu einer Abfolge von Wartezeiten. Manipuliertes Scrollen entzieht die Kontrolle über eine vertraute Geste. Starke Parallaxe erschwert es, auf einer Inhaltsseite die Position zu halten. Für Menschen mit vestibulären Störungen kann dies körperliche Beschwerden auslösen. Betriebssysteme bieten eine Einstellung für reduzierte Bewegung, die eine gute Website respektiert.

Unsere praktische Regel ist einfach: ein oder zwei erkennbare Bewegungsmomente pro Seite, alles Weitere ist funktionale Rückmeldung. Kann eine Animation die Frage „Was vermittelt sie?“ nicht beantworten, zeigt sie nur, dass jemand sie umsetzen konnte.

Performance ist Teil des Erlebnisses

Eine Seite, die fünf Sekunden bis zur Anzeige braucht, hat kein separates technisches Problem für später. Sie hat ein Erlebnisproblem, und es ist das erste, dem Besucher begegnen.

Das gilt besonders mobil, wo Verbindungen schwanken und Aufmerksamkeit knapp ist. Nicht optimierte Bilder, zu viele Schriftarten, blockierende Drittanbieter-Skripte und springende Elemente sind ebenso Gestaltungsfehler wie eine falsche Hierarchie. Der Hauptinhalt sollte sofort lesbar sein, ohne auf JavaScript zu warten.

Ein nützlicher Nebeneffekt: Eine schnelle Website kann sich mehr visuelle Qualität leisten, weil ihr Budget nicht bereits für unsichtbare Dinge verbraucht wurde.

Mobil ist keine verkleinerte Version

Schriftgrößen reduzieren und Spalten stapeln ist kein mobiles Design. Auf einem schmalen Bildschirm ändern sich Prioritäten: Die Reihenfolge der Argumente zählt mehr als die Komposition, Berührungsflächen brauchen echte Größe, lange Menüs werden zu Hindernissen und nebeneinander liegende Desktop-Inhalte brauchen eine eigenständig sinnvolle Lesereihenfolge.

Für Mobilgeräte zu entwerfen heißt neu zu entscheiden, was zuerst kommt, nicht Entscheidungen für einen 27-Zoll-Monitor zu komprimieren.

Was es praktisch bedeutet, ein Erlebnis zu gestalten

Design und Technologie führen Wahrnehmung und Verhalten: innerhalb weniger Sekunden verständlich machen, worum es geht, zur benötigten Information leiten, den nächsten Schritt deutlich machen und alles entfernen, was nicht dazu beiträgt.

Wenn es funktioniert, fällt das Ergebnis nicht auf. Niemand verlässt eine gut gestaltete Website mit dem Gedanken „Was für eine schöne Animation“. Die Person hat verstanden, was das Unternehmen tut, und im passenden Moment Kontakt aufgenommen.

Ästhetik bleibt wichtig. Sie ist der erste Satz des Gesprächs, und ein schlechter erster Satz kann es beenden. Aber sie ist nur der erste Satz, nicht das gesamte Gespräch.

Mehr dazuWebsites