Bei der Gestaltung einer Website neigen wir oft dazu, zu viele Informationen und Eindrücke auf einmal zu präsentieren. In unserem Streben nach "mehr" und "lauter" vergessen wir oft das Wichtigste:
Der User ist ein auch nur Mensch und seine Wahrnehmung ist begrenzt.
Was passiert in unserem Gehirn und wo liegen unsere Grenzen?
Wie gestalte ich "sinnvoll" (also unter Berücksichtigung unserer Sinne)?
Wie verpacke ich die Informationen so, dass meine User sie auch verarbeiten können?
Was ist eine gelungene Nutzererfahrung?
In diesem Beitrag erfahren Sie, worauf es beim Webdesign wirklich ankommt, und erhalten hilfreiche Tipps und praktische Beispiele von einer Designerin, die sich tagtäglich und ausgiebig mit diesen Themen beschäftigt.
- Warum unser Gehirn wählerisch ist
- Der Eisberg-Effekt - Wie wir Entscheidungen treffen
- Gestaltungsprinzipien – Wie gutes Webdesign uns unbemerkt lenkt
- Wahrnehmung im Webdesign: Praktische Tipps für klare Nutzerführung
Die magische Zahl 7
Visuelle Sprache - Wenn Kaffee zu uns spricht
Abstraktionsgrad - Zwischen Liebe zum Detail und Abstraktion mit Herz - Fazit: Das Geheimnis guten Webdesigns
- Kontakt
Aus dem Alltag einer Designerin ...
Wenn ich mich mit unseren Kunden über ihre Vorstellungen & gestalterischen Vorgaben für Ihre Website austausche, habe ich manchmal das Gefühl, sie sind in einem regelrechten Shopping-Rausch für die angesagtesten Stücke aus dem digitalen Ästhetik-Sortiment.
Das klingt manchmal in etwa so:
"Also, ich hätte gerne überall Animationen, Slideshows, und die ganzen Elemente von den aktuellen Trendseiten.
Die Inhalte? Keine Ahnung, da denk ich noch drüber nach.
Ach ja, jede Unterseite sollte übrigens dann komplett anders aussehen ..."
In solchen Momenten lehne ich mich zurück, atme tief durch und versuche meinem Gegenüber begreiflich zu machen, dass seine Website kein überambitioniertes Kunstprojekt ist (es sei denn, es ist eins :-)).
Vielmehr geht es darum, eine einladende Online-Präsenz zu schaffen, klare Ziele zu verfolgen und den Nutzer nicht mit einer unüberschaubaren Informationsflut zu überfordern.
Was wir uns vorstellen
Wie es wirklich ist
Wahrnehmung am Limit – Warum unser Gehirn wählerisch ist
Unsere Wahrnehmung ist ein komplexes Zusammenspiel aus Reizaufnahme, Verarbeitung und Bedeutungsgebung.
Täglich prasseln zahllose Eindrücke auf uns ein – viel zu viele, um sie alle bewusst aufzunehmen.
Also filtert unser Gehirn gnadenlos, lässt nur das Wesentliche durch und schützt uns so vor kognitiver Überlastung (engli. cognitive overload dazu gleich mehr).
Wir merken schnell, wenn wir an die natürlichen Grenzen dieser Filter stoßen:
Wir fühlen uns überreizt, ja sogar etwas gereizt, die Aufmerksamkeit schwindet, und das Kurzzeitgedächtnis macht schlapp.
Ein Reminder, wie wichtig es ist, unsere Sinne gezielt einzusetzen und Pausen für den Kopf einzuplanen.
Was ist kognitive Überlastung?
Kognitive Belastung beschreibt die mentale Kraft, die unser Arbeitsgedächtnis beim Verarbeiten von Informationen aufbringt.
Unsere Wahrnehmung ist nicht ohne Grund aufs Wesentliche getrimmt.
Evolutionär hat unser Gehirn gelernt, gefährliche Reize sofort zu erkennen und Nebensächliches auszublenden.
Damals war es das Knurren eines Raubtiers in der Wildnis.
Heute filtert es z. B. beim Lesen die Worte im Buch und ignoriert den Lärm drumherum.
Oder blendet beim Autofahren Plakatwände aus, damit wir uns mehr auf den Verkehr konzentrieren.
Unser Gehirn ist also nicht "faul" – im Gegenteil: Es setzt Prioritäten, damit wir schneller reagieren können und nicht von jedem Reiz überrannt werden.
Kognitive Überlastung passiert, wenn unser Gehirn mehr Informationen verarbeiten soll, als es in einem bestimmten Moment bewältigen kann.
Das passiert uns im Alltag oder bei der Arbeit, z. B. durch zu viel Multitasking oder wenn zu viele Entscheidungen auf einmal getroffen werden müssen.
Wie ein Rechner, der langsamer wird oder überhitzt, bis er womöglich abstürzt, wenn er kontinuierlich zu viele Informationen speichern, abrufen und verarbeiten soll.
Anzeichen für kognitive Überlastung
- Vergesslichkeit: man kann sich nicht merken, was gerade gesagt wurde.
- Fehleranfälligkeit: Kleinigkeiten werden übersehen, wichtige Punkte vergessen.
- Stress: Das Gefühl, ständig hinterherzulaufen und nicht anzukommen.
- Erschöpfung: man fühlt sich, als sei man einen (Gehirn-)Marathon gelaufen.
In der digitalen Welt, etwa bei UX/UI-Design, ist kognitive Überlastung ein echter Killer. Wenn die Nutzer mit zu vielen Infos oder verwirrenden Interfaces überfordert sind, klicken sie schneller weg, als Sie „Conversion-Rate“ sagen können.
Der Eisberg-Effekt: Warum Entscheidungen mehr verbergen als enthüllen
Unsere Entscheidungen wirken vielleicht klar und bewusst. Doch was wir sehen, ist nur ein kleiner Teil des Ganzen.
Unter der Oberfläche verbirgt sich ein riesiges Geflecht aus unsichtbaren Einflüssen: persönliche Erfahrungen, Werte, Emotionen und unzählige unbewusste Mechanismen.
Die verborgene Macht unserer Entscheidungen
Diese tief liegenden Motive sind der unsichtbare Teil des Eisbergs. Sie formen und steuern unser Verhalten, oft, ohne dass wir es merken.
Warum greifen wir zu einem bestimmten Produkt?
Warum ziehen uns bestimmte Ideen oder Menschen an?
Ob in Marketing, Design oder zwischenmenschlicher Kommunikation - wir entscheiden nach Glaubenssätzen, die tief in uns verwurzelt sind, und emotionalen Auslösern, die uns lenken.
Gestaltungsprinzipien – Wie gutes Webdesign uns unbemerkt lenkt
Die Gestaltpsychologie verrät, wie unser Gehirn visuelle Eindrücke organisiert – nämlich mit einer einfachen Regel: Übersicht schaffen, Chaos vermeiden.
Unser Gehirn mag's simpel - Formen, Farben und klare Botschaften
Daher wirken z. B. minimalistische Designs mit viel Weißraum einladend auf unser Gehirn.
Ein klarer Fokusbereich lässt uns intuitiv wissen, wo die wichtigen Infos stehen.
Beispiel für minimalistische Website mit viel Weißraum:
Wir erkennen automatisch Muster und stellen Verbindungen zwischen ähnlichen Objekten her.
Unser Gehirn sortiert visuelle Reize in Kategorien oder „Schubladen“:
Kreise hier, Quadrate da. Blautöne ins eine Fach, Rottöne ins andere. Wie ein aufgeräumter Aktenschrank, in dem man den richtigen Ordner schnell findet.
Dieses unsichtbare Ordnungssystem funktioniert wie ein Wegweiser und sorgt dafür, dass wir uns intuitiv in der Welt zurechtfinden.
Schauen wir uns ein paar Ordnungsprinzipien an:
Ähnlichkeit: Gleich und Gleich gesellt sich gern
Unser Gehirn liebt Muster.
Elemente, die sich in Form, Farbe, Größe etc. ähneln, werden als zusammengehörig wahrgenommen.
Perfekt, um Gruppen zu bilden und Zusammenhänge sichtbar zu machen.
Auch Symmetrie strahlt Ordnung und Harmonie aus.
Gleichmäßige Abstände zwischen Bildern oder Textteilen auf einer Seite erzeugen Balance. Und was das Auge als harmonisch empfindet, verarbeitet das Gehirn entspannter.
Nähe schafft Einheit
Wenn Elemente dicht beieinander liegen, nimmt unser Gehirn sie als Einheit wahr.
Abstände trennen und setzen klare Grenzen. Dieses Prinzip hilft, Informationen zu gliedern und übersichtlich darzustellen.
Beispiel: Onlineshop
Die Produkte sind übersichtlich in Kategorien gegliedert und folgen einem einheitlichen Design. Strategisch platzierte Abstände markieren dabei klar, was zusammengehört – und was nicht.
Kontrast: Hingucker schaffen
Durch Kontraste (z. B. hell/dunkel oder groß/klein) und Räumlichkeit (z. B. Schatten) heben sich wichtige Elemente hervor.
Unser Gehirn springt automatisch auf diese visuellen Highlights an. Das kann man nutzen, um den User zu einer bestimmten Entscheidung zu bewegen.
Design: Gewohntes & Erfahrung nutzen
Innovatives Design ist nicht immer die beste Wahl. Nutzer erkennen vertraute Elemente, wie Buttons, auf den ersten Blick – einfach, weil sie gelernt haben, wie sie funktionieren.
Das Wissen über bewährte Elemente im Web kann man gezielt einsetzen, um Orientierung zu fördern, statt Verwirrung zu stiften.
Man muss das Rad nicht jedes Mal neu erfinden.
Denn ein gutes Design arbeitet für den Nutzer, nicht gegen ihn.
Das heißt natürlich nicht, dass alle Buttons gleich aussehen müssen. Unterschiedliche Designs für wichtige Call-to-Actions können sinnvoll sein – solange sie klar und intuitiv bleiben. Vertrautheit und Vielfalt schließen sich nicht aus.
Nicht alle Call-to-Actions sind gleich wichtig – und das sollte man im Design auch zeigen.
Wichtige Aktionen, wie „Jetzt kaufen“ oder „Anmelden“, dürfen durch auffällige Buttons herausstechen, während weniger dringliche Optionen dezenter gestaltet werden können.
Das Ziel ist, den Nutzer zu leiten: Vertraute Designs geben Orientierung, und visuelle Hierarchien lenken den Fokus.
Erfahrung als Abkürzung im Design
Unsere Erfahrung nimmt uns Arbeit ab: Symbole wie die Lupe für „Suche“ oder das Hamburger-Menü sind so bekannt, dass sie sofort verstanden werden.
Wir müssen nicht lange nachdenken und erkennen sofort, was gemeint ist.
Solche etablierten Elemente sind mehr als Designstandards. Sie sind mentale Abkürzungen, die den Nutzerfluss verbessern.
Geschlossenheit: Das Gehirn ergänzt, was fehlt
Fehlende Details? Kein Problem!
Unser Gehirn ist in der Lage, Lücken zu schließen.
Ein Beispiel ist das WWF-Panda-Logo: Die Linien sind nicht durchgehend und es wird Weißraum genutzt, doch wir erkennen sofort das Tier.
Raum für Vorstellungskraft
Das Prinzip der Geschlossenheit kennt man auch aus optischen Täuschungen. Das kann auch im Design ein spannendes Werkzeug sein.
Bewusste Lücken oder unvollständige Formen lassen Raum für Interpretation und laden Ihr Publikum ein, aktiv mitzudenken.
Dieses Spiel mit der Vorstellungskraft kann das Design einzigartig und einprägsamer machen.
Aber bitte nur, wenn es passt! Setzen Sie es gezielt und sehr sparsam ein
Finden Sie alle 13 Tiere?
Bild: rtl.de
Kontinuität und Fortsetzung: Der unsichtbare Faden
Unsere Augen folgen Linien.
Linien und Muster verschmelzen für unser Gehirn wie von selbst zu einem Ganzen – ob bei Websites, Printdesigns oder Stadtplänen.
Auch verwischte Kanten oder Richtungslinien lassen Dinge „in Bewegung“ erscheinen und lenken so die Aufmerksamkeit in die gewünschte Richtung.
Ein Beispiel für das Kontinuitätsprinzip zeigt Google Maps.
Die Route verbindet Start und Ziel als fließende Linie, und selbst an Kreuzungen bleibt sie für unser Gehirn eine Einheit.
Unser Blick folgt dieser Linie intuitiv – so führt uns die Karte ganz ohne Umwege ans Ziel.
Gemeinsames Schicksal: Wenn Elemente ein Ziel verfolgen
Unser Gehirn erkennt Zusammenhänge und kombiniert: Diese Elemente gehören wohl zusammen, denn sie verfolgen die gleiche Richtung und haben ein gemeinsames Ziel. Ein Beispiel dafür sind Akkordeon-Strukturen. Klappt man eine Kategorie auf, erscheinen die zugehörigen Inhalte und die Gruppe bleibt als Einheit erkennbar.
Schau her, das ist eine Gruppe, die du aufklappen kannst
Tadaaa, hier bin ich! Ich bin die Info-Gruppe, die genau zu dieser Kategorie gehört. Brauchst du mich? Klapp mich einfach auf!
Willst du mich wieder loswerden? Klapp mich zu!
Ich bin praktisch, übersichtlich und immer bereit, wenn du mich brauchst.
Gemeinsam mit meinen Inhalten bleibe ich eine Einheit – kein Durcheinander, versprochen!
Noch eine Gruppe? Aber klar doch!
Hey, ich bin die zweite im Bunde! Klapp mich auf, und ich zeige dir alle Infos, die zu mir gehören.
Wenn du genug hast, schließe mich einfach wieder – ich bin da flexibel.
Ich bleibe schön bei meiner Kategorie, mache kein Chaos und bin immer bereit, wenn du mich brauchst.
Ordnung ist mein zweiter Vorname!
Das Zusammenspiel dieser Prinzipien sorgt dafür, dass Webseiten strukturiert und somit leichter verständlich wirken.
Denn im Design geht es nicht nur um die Inhalte, sondern vorallem darum, wie sie präsentiert werden.
Wahrnehmung im Webdesign: Praktische Tipps für klare Nutzerführung
Die magische Zahl 7
Hintergrund: Die Millersche Zahl, bekannt als „The Magical Number Seven, Plus or Minus Two,“ besagt, dass unser Kurzzeitgedächtnis nur etwa 7 ± 2 Einheiten (sogenannte „Chunks“) gleichzeitig aufnehmen kann. Deshalb ist es wichtig, Informationen gut strukturiert zu präsentieren – mit klaren Hierarchien und in kurzen Info-Häppchen.
Wenn wir eine Website öffnen, scannen wir sie zuerst mit den Augen durch: Überschriften, Bilder, hervorgehobene Passagen.
Statt jedes Detail durchzugehen, springen wir von einem markanten Element zum nächsten.
Gut strukturierte Inhalte mit „Chunkeinheiten“ lassen uns schneller begreifen, worum es geht.
Das Konzept „Chunking“ hilft, Informationen in sinnvolle Abschnitte zu teilen.
Ein Klassiker sind Telefonnummern.
Es ist einfacher, sich 1 (448) 732 4534 zu merken als 14487324534.
Beispiele für Chunking im Web:
-
Wall of text vermeiden
Lange Textblöcke ohne Absätze oder visuelle Unterbrechungen sind schwer zu lesen.
Allein der Anblick kann den Leser überfordern und dazu führen, dass er wichtige Informationen übersieht oder das Interesse verliert und den Text erst gar nicht liest.
Unterteilt man den Text in Absätze, fasst wichtige Punkte in Stichpunkte und setzt visuelle Hierarchien durch Überschriften, sieht die Sache schon ganz anders aus:
"Wall of text"
Lisa stand vor einer Mammutaufgabe: Für die Party sollte sie eine Einkaufsliste mit über 20 Dingen im Kopf behalten. Zunächst dachte sie, das sei machbar – schließlich waren Äpfel, Bananen und Karotten einfach zu merken. Doch je länger die Liste wurde – Saft, Wasser, Limonade, Chips, Nüsse, Kekse – desto mehr verhedderten sich die Punkte in ihrem Kopf. Frustriert und überfordert, saß sie schließlich da, bis ihre Mutter kam und einen einfachen Rat gab: „Teile die Liste in kleinere Gruppen auf.“ Lisa sortierte die Liste in drei Kategorien: Obst und Gemüse, Getränke und Snacks. Plötzlich fühlte sich alles leichter an. Das sogenannte Chunking – das Zerlegen von Aufgaben in überschaubare Teile – machte es ihr einfach, den Überblick zu behalten. Der Einkauf wurde zum Kinderspiel, die Party ein voller Erfolg, und Lisa nahm sich vor, diese Methode auch in Zukunft zu nutzen. Manchmal sind es die kleinen Tricks, die das Leben so viel einfacher machen!
Lisa und die lange Einkaufsliste
Lisa musste für eine Party einkaufen und hatte eine lange Liste mit über 20 Dingen. Sie versuchte, sich alle auf einmal zu merken, aber sie war schnell überfordert.
Der Rat ihrer Mutter
Ihre Mutter sah ihre Verzweiflung und sagte: "Teile die Liste in kleinere Gruppen auf."
Anwendung des Chunkings
- Gruppe 1: Obst und Gemüse (Äpfel, Bananen, Karotten)
- Gruppe 2: Getränke (Saft, Wasser, Limonade)
- Gruppe 3: Snacks (Chips, Nüsse, Kekse)
Erfolgserlebnis & Fazit
Plötzlich war es für Lisa viel einfacher, sich die Dinge zu merken.
Dank des Chunkings konnte Lisa ihren Einkauf problemlos erledigen, und die Party war ein voller Erfolg.
-
Gruppieren verwandter Elemente
Auch hier ist der Onlineshop das perfekte Beispiel:
Ordnet man die einzelnen Produkte gleichmäßig in die entsprechenden Gruppen bzw. Kategorien, weiß der User auf einen Blick, was zusammengehört.
Auf Webshops, wie Amazon, achtet man akribisch darauf. Die Nutzer sollen sich schließlich wohlfühlen, zurechtkommen und vor allem etwas kaufen:
Und siehe da, es sind magische 7 (sichtbare) Kategorien in einer Reihe: Wenn das mal kein Zufall ist ... ;-)
Visuelle Sprache - Wenn Kaffee zu uns spricht
Visuelle Sprache nimmt unserem Gehirn eine Menge Arbeit ab. Es ist eine Art visuelle Abkürzung.
Jeder kennt wohl den Spruch "Ein Bild sagt mehr als 1000 Worte". Klare Farben, Formen und Strukturen schaffen Assoziationen, die das Abspeichern begünstigen.
Man nennt das übrigens den "Picture Superiority Effect" – Bilder bleiben länger im Kopf als Worte.
Picture Superiority Effect
Bilder + Text = 65% Erinnerung nach 3 Tagen
Nur Text = 10% Erinnerung nach 3 Tagen
Visuelles bleibt also bis zu 6x länger im Gedächtnis!
Das Beispiel zeigt, wie visuelle Sprache funktioniert:
Dadurch, dass die Zutaten als farblich getrennten Schichten dargestellt sind, erkennen wir schnell die Unterschiede zwischen Latte Macchiato, Cappuccino und Americano.
Dadurch bleibt mehr mentale Energie für andere Aufgaben, und wir können uns auf das Wesentliche konzentrieren, ohne kognitiv überlastet zu werden.
Abstraktionsgrad - Zwischen Liebe zum Detail und Abstraktion mit Herz
Wenn es um den Abstraktionsgrad eines Symbols geht, ist die Balance zwischen Erkennbarkeit und Vereinfachung entscheidend.
Die Herausforderung besteht darin, den Grad der Reduktion so zu wählen, dass die Bedeutung immer noch intuitiv verstanden wird.
Wird das Herz zu detailliert und realistisch dargestellt, kann es schnell überladen wirken und an die tatsächliche Anatomie erinnern.
Dadurch verliert es die emotionale Bedeutung und die klare Botschaft.
Wird es dagegen zu stark vereinfacht oder abstrahiert, ist es nicht mehr als solches erkennbar, d. h. der Betrachter kann es nicht mehr als Herz identifizieren.
Das klassische Herzsymbol, wie wir es kennen, macht genau das:
Es reduziert die komplexen Formen des anatomischen Herzens und verwandelt es in ein universelles Zeichen (für Liebe).
Fazit: Das Geheimnis guten Webdesigns
Webdesign ist kein Wettbewerb.
Es geht nicht darum, wer die meisten Animationen und Slideshows auf eine Seite packt.
Es geht darum, dem Nutzer, den Weg zu weisen - ohne kognitive Stolpersteine.
Weniger ist mehr
Denn unser Arbeitsgedächtnis mag es simpel: weniger Lärm, mehr Struktur.
Das gilt besonders heute, in einer Welt voller Reizüberflutung und Ablenkung durch blinkende Banner und Werbetafeln.
Klare Designs, intuitive Navigation und sinnvolle Informationsaufteilung sorgen dafür, dass Ihre Website nicht zur Belastung wird.
Nutzen Sie psychologische Prinzipien, um den Nutzerblick gezielt zu lenken – und sparen Sie sich lieber den einen oder anderen "Schnickschnack", der mehr verwirrt, als überzeugt.
Indem wir Inhalte in kleinen, verdaulichen Häppchen servieren und sie mit konkreten Anweisungen (Call-to-Action) würzen, treffen unsere User fast automatisch die "richtigen" Entscheidungen oder tun zumindest das, was das Design subtil vorgibt ;-)
Wer alles zeigen will, zeigt am Ende nichts, denn gutes Design setzt Prioritäten.
ZUM AUTOR
Anna Leibßle
Artdirector | zertifizierter UX/UI Designer
Ein ausgeprägtes Auge für Ästhetik und der unstillbare Durst nach Kreativität sind Annas Antrieb.
Seit über 10 Jahren verleiht sie damit Projekten das gewisse Etwas und macht regelmäßig Kunden glücklich.
Sie liebt schlechte Wortwitze und gute Gespräche.
Fragen? Interesse? Einwände? - Kontaktieren Sie uns einfach!