Psychology-Prinzip für Webdesign: Common Region
Ein Produktbild, ein Name und drei Angaben stehen auf derselben hellen Fläche. Wir lesen sie als Einheit. Schon die Gestaltung legt nahe, welche Beschreibung zu welchem Produkt gehört.
Auf Websites passiert diese Zuordnung ständig: bei Angeboten, Ansprechpartnern, Referenzen, Formularfeldern und einzelnen Schritten eines Ablaufs. Eine gute Fläche übernimmt einen Teil der Erklärung. Eine unpassende Grenze kann Informationen auseinanderziehen, die zusammengehören.
Was Common Region beschreibt
Das Prinzip der gemeinsamen Region beschreibt eine Form visueller Gruppierung: Elemente innerhalb einer erkennbaren gemeinsamen Fläche erscheinen zusammengehörig. Stephen Palmer stellte es 1992 anhand von Wahrnehmungsdemonstrationen vor. Dabei konnte eine gemeinsame Umrandung auch gegen andere Gruppierungshinweise wie Nähe oder Ähnlichkeit wirken.
Für die Gestaltung entsteht daraus eine konkrete Frage: Stimmt die sichtbare Gruppierung mit dem inhaltlichen Zusammenhang überein?
Die Originalarbeit von Palmer beschreibt das Prinzip; der Forschungsüberblick von Wagemans und Kollegen ordnet es in die breitere Forschung zur visuellen Organisation ein. Mehrere Hinweise wirken zusammen. Abstand, Ähnlichkeit, Grenzen und die wahrgenommene räumliche Anordnung lassen sich deshalb sinnvoll gemeinsam beurteilen.
Eine Karte ist eine inhaltliche Entscheidung
Stell dir drei Wartungsangebote vor. Jedes hat einen Namen, einen Leistungsumfang und eine Laufzeit. Liegen diese Angaben jeweils in einer gemeinsamen Karte, ist die Zuordnung einfach nachzuvollziehen. Stehen die Laufzeiten hingegen als abgesetzte Zeile unter allen drei Karten, muss der Leser die Verbindung selbst herstellen.
Noch deutlicher wird es bei Einschränkungen. Gilt ein Hinweis nur für das mittlere Angebot, gehört er sichtbar zu diesem Angebot. Gilt er für alle drei, braucht er eine übergreifende Position mit einer eindeutigen Formulierung. Die Fläche darf den Geltungsbereich unterstützen; der Text muss ihn weiterhin benennen.
Dasselbe gilt für Referenzen: Ein Kundenname, ein Zitat und das zugehörige Projekt sollten als Einheit erkennbar sein. Werden mehrere Zitate auf einer grossen Fläche ohne klare innere Gliederung verteilt, kann die Zuordnung verloren gehen.
Am Beispiel der Baudoctor-Website
Im Artikelbild hat jedes der vier Produkte auf der Baudoctor-Website eine eigene helle Fläche. Bild, Produktname und Kurzbeschreibung stehen innerhalb derselben Grenze. Gleichzeitig bilden die vier Karten eine gemeinsame Reihe.
Das Beispiel macht zwei Ebenen sichtbar: die einzelne Produktinformation und die zusammengehörige Produktgruppe.
Für Conversion-Optimierung auf Websites ist diese Unterscheidung nützlich: Erst prüfen wir, ob Informationen eindeutig zugeordnet sind. Ob eine Änderung auch das Verhalten verbessert, lässt sich anschliessend anhand der tatsächlichen Nutzung untersuchen.
Was wir beim Gestalten prüfen
Die Grenze folgt dem Zusammenhang
Welche Informationen müssen zusammen gelesen werden? Welche gelten für mehrere Elemente? Diese Fragen kommen vor Rahmenfarbe und Rundungsradius. Eine Fläche erhält eine Aufgabe, etwa «dieses Angebot vollständig erklären» oder «diesen Ansprechpartner vorstellen».
Innere Abstände unterstützen die Gruppe
Auch innerhalb einer Karte braucht es Hierarchie. Ein grosser Abstand zwischen Produktname und Beschreibung kann die Verbindung schwächen. Zu wenig Abstand zwischen zwei Karten lässt die äussere Gruppierung unklar werden. Beide Ebenen sollten zusammenpassen.
Mobile Reihenfolge bleibt verständlich
Eine dreispaltige Übersicht wird auf dem Handy oft zu einer langen Folge. Prüfe jede Einheit für sich: Bleiben Name, Umfang, Bedingungen und zugehöriger Link beieinander? Ein übergreifender Hinweis am Ende kann mehrere Bildschirmhöhen von der betroffenen Information entfernt sein.
Die Struktur funktioniert auch ohne die Fläche
Überschriften, Listen und sinnvoll ausgezeichnete Gruppen müssen den Zusammenhang ebenfalls tragen. Ein Screenreader liest keine Hintergrundfarbe als Erklärung vor. Visuelle Gruppierung ergänzt die inhaltliche und technische Struktur.
Häufige Fragen
Braucht jede Information eine eigene Karte?
Nein. Karten lohnen sich für klar abgegrenzte Einheiten. Bei einem fortlaufenden Gedanken können gute Überschriften und Abstände den Zusammenhang besser tragen. Zu viele verschachtelte Kästen machen die Hierarchie unnötig schwer lesbar.
Ist Common Region dasselbe wie Nähe?
Nähe verbindet räumlich benachbarte Elemente. Common Region beschreibt die Wirkung einer gemeinsamen erkennbaren Fläche. Beide können sich ergänzen; bei widersprüchlichen Signalen lohnt sich ein genauer Blick auf die tatsächliche Zuordnung.
Wie lässt sich die Gestaltung prüfen?
Lass eine Person kurz erklären, welche Angaben zu welchem Angebot gehören. Prüfe dieselbe Aufgabe auf Desktop und Handy sowie die semantische Lesereihenfolge. Damit testest du eine konkrete Verständlichkeitsfrage statt ein abstraktes «Gefällt mir».
Was eine gute Fläche leistet
Sie macht einen Zusammenhang sichtbar, den der Inhalt tatsächlich hat. Wenn Grenzen, Abstände, Reihenfolge und Beschriftung übereinstimmen, lässt sich eine Seite leichter als geordnetes Ganzes lesen.
Die wissenschaftlichen Quellen und weitere Einordnung stehen in der PSWD Science Library.