kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Websites erwartungskonform gestalten und konzipieren

Websites sind u.a. erfolgreich, wenn die Erwartungshaltung der Besucher bedient wird. Es muss vermieden werden, dass Besucher darüber nachdenken müssen wie etwas funktioniert oder wo der gewünschte Inhalt positioniert ist.  Nutzer erwarten eine bestimmte Anordnung und ein bestimmtes Verhalten wesentlicher Website-Elemente. Berücksichtigen wir diese Erwartungen beim Gestalten von Websites, erleichtern wir den Besuchern sich mit den wirklich wichtigen Informationen zu beschäftigen. Wir geben einen schnellen Überblick über die wichtigsten Aspekte.

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, Sketch, Adobe XD …

Jetzt Frühbucher-Rabatte sichern!

Nachdenken strengt an

Menschen fühlen sich in bekannten Umgebungen wohler und sicherer, sie können sich auf die wesentlicheren Dinge konzentrieren und müssen insgesamt weniger Energie aufwenden. Jedes Abweichen von erlernten Mustern erfordert mentalen Aufwand für den Nutzer. Automatisierte Abläufe werden erschwert, gestört oder gar abgebrochen.

Das ist nicht im Sinne der Website-Betreiber. Diese haben ein großes Interesse daran, dass ihre Besucher zum Ziel kommen, z. B. zu einem Kaufabschluss. Alles Erschwerende soll aus dem Weg geräumt werden. Entsprechend steht das Nutzerverhalten im Zentrum vieler Bemühungen. Begriffe wie »User Experience (UX) Design« und als dessen Grundlage besonders »UX Research« nehmen deshalb im Prozess des Web Design immer größeren Raum ein.

Website-Elemente erwartungskonform positionieren

Der überwiegende Teil der Erwartungen an Websites bleibt bemerkenswert konstant, auch wenn sich besonders in Hinsicht auf mobile Geräte einige Rahmenbedingungen verändert haben. Beispiele dafür sind:

  • Das Logo ist links oben
  • Ein Warenkorb ist rechts oben
  • Die Suche ist oben rechts oder mittig
  • Werbung ist rechts und/oder oben mittig. Im Umkehrschluss: wichtige Inhalte beginnen ganz links und laufen ggf. bis zur Mitte.
  • Die Hautnavigation ist oben horizontal angelegt und die Wichtigkeit ihrer Bestandteile nimmt nach rechts ab.
  • Sprungmarken (Links) zu rechtlich notwendigen Inhalten sind unten im Seitenfuß
  • Allgemeine Kontaktinformationen sind ganz unten zu finden

Typische Blickmuster der Besucher

Besucher betrachten eine Website nicht Zeile für Zeile. Sie überfliegen (oder »scannen«) sie eher von links nach rechts (im westlichen Kulturkreis) und von oben nach unten. Daraus ableitbare Muster (Pattern) sind vor allem:

F-Pattern

Das F-Pattern trifft eher auf Designs mit mehr Inhalten zu. Die Spur der Augenbewegungen bildet grob die Form eines großen »F«: Das Betrachten beginnt links oben, wandert schnell nach rechts und dann wieder auf der linken Inhaltsachse nach unten, um ggf. wieder nach rechts zu wandern.

Das F-Pattern am Beispiel eines klassischen Website-Aufbaus
Das F-Pattern am Beispiel eines klassischen Website-Aufbaus

Z-Pattern

Das Z-Pattern trifft eher auf Designs mit weniger Inhalten zu. Die Augenbewegungen bildet grob die Form eines großen »Z«: Das Betrachten beginnt links oben, wandert schnell nach rechts, anschließend diagonal nach unten wieder zurück zur linken Inhaltsachse, um ggf. wieder nach rechts zu wandern. Dieses Muster wiederholt sich bei ausreichend vorhandener Seitenhöhe und wird daher auch als»Zigzag-Pattern« bezeichnet.

Das Z-Pattern am Beispiel eines klassischen Website-Aufbaus
Das Z-Pattern am Beispiel eines klassischen Website-Aufbaus

Wenn das Website-Layout so gestaltet ist, dass es eines der beiden Muster (oder beide in Kombination – z. B. erst F, dann Z) bedient, werden Besucher in kürzester Zeit und mit geringer Anstrengung Informationen finden. Der Aufbau der Website ist dann allerdings oft stereotypisch – was von Kreativen gerne kritisiert wird.

Erwartungskonforme Interaktionen

Websites sind ein interaktives Medium und entsprechend setzen ihre Besucher bestimmte Grundlagen voraus, um Interaktionen zu ermöglichen:

  • interaktive Elemente verändern sich sichtbar, wenn der Mauszeiger darüberfährt (Hover-Effekt)
  • Das Logo oben links ist auf die Startseite verlinkt, damit ist es der erste Punkt der Hauptnavigation.
  • Links im Inhalt sind klar als solche erkennbar. Am eindeutigsten wird dies durch Unterstreichung. Im Umkehrschluss werden alle unterstrichenen Elemente als klickbar erwartet.

UX Research

UX Design stützt sich weitest möglich auf mittels UX Research erhobene Daten und wertet diese aus. Das ist grundsätzlich sehr zu begrüßen, denn häufig unterlaufen Website-Betreibern als auch -Gestaltern Fehler bei der Einschätzung und Beurteilung ihrer Besucher. Fehleinschätzungen kommen oft aufgrund selbst behaupteter Sachkompetenz und Menschenkenntnis zustande. Es ist erstaunlich, wie weit solcherart gewonnene Erkenntnisse mitunter von datengestützten Informationen abweichen.

Fehler dieser Art können den Erfolg einer Website spürbar beeinträchtigen. Deshalb sollte eine zumindest rudimentäre UX Research-Phase Bestandteil jedes seriösen Web-Projekts sein. UX Research generiert Daten, und mit diesen Daten können sowohl Ersteller als auch Auftraggeber den Erfolg des Projektes in Form sog. KPIs objektiver messen.

Erwartungskonformes Webdesign vs. Individualität

Wenn Websites immer erwartungskonformer gestaltet werden, bringt dies naturgemäß eine immer größere Gleichförmigkeit mit sich. Die Website-Struktur unterscheidet sich oft nur noch bei verschiedenen Website-Typen (z. B. Magazin, Shop etc.). Innerhalb eines Typs sehen Websites häufig austauschbar aus – wobei das nicht zwingend der Fall sein muss.

In dieser Entwicklung sehen manche Web Designer eine Einschränkung der gestalterischen Möglichkeiten, die durchaus bis zum Wegfall ihrer Dienste führen kann. Das ist nicht von der Hand zu weisen. Aktuelle Werkzeuge wie Theme-Builder, Baukästen etc. erlauben jedem potenziellen Website-Betreiber das Erstellen einer Website, die grundlegenden UX-Erwartungen ausreichend genügt. Das gilt insbesondere für kleine Projekte mit Standard-Anforderungen.

Die Standardisierung und Automatisierung bezieht sich jedoch meist auf die visuelle Anordnung und Darstellung von Website-Elementen. Die hauptsächliche Aufgabe von gutem Web Design liegt im Gestalten der Inhalte. Hier ist fast jede Website einzigartig, hier ist die Chance zu einzigartigem Design.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.