Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Webdesign » Im Auge des Betrachters

Im Auge des Betrachters

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 3 Minuten
  • von Dr. Web Redaktion
  • 4. September 2003

Inhaltsverzeichnis

von Anneke Wolf
Die Wahrnehmung unserer Umwelt unterliegt bestimmten Prinzipien. Wer diese kennt, kann dem Besucher den Zugang zu seiner Website erheblich erleichtern.
1. Form und Grund
Ein erstes Prinzip menschlicher Wahrnehmung besteht darin, dass der jeweils wahrgenommene Ausschnitt einer Umwelt in einzelne Objekte und einen Hintergrund unterteilt wird. Man kann diesem Prinzip beim Erstellen von Webseiten entgegen kommen, indem man Objekt und Hintergrund durch Kontraste deutlich voneinander trennt. Möglich ist zum Beispiel der Einsatz von Farben.
grund Im Auge des Betrachters
grund2 Im Auge des Betrachters
Während sich in der oberen Grafik das Objekt deutlich vom Hintergrund abhebt, weist die untere Grafik einen Mangel an Farb- und Helligkeitskontrast auf.
Nachdem nun Form und Grund voneinander getrennt sind, stellt sich die Frage, wie sich mehrere wahrgenommene Objekte zueinander verhalten. Dieser Frage widmen sich die nun folgenden Prinzipien.
2. Das Prinzip der Nähe
Dinge, die nah beieinander liegen, werden als zusammengehörig wahrgenommen. So macht es in der Praxis Sinn, Inhaltliches auch optisch zu gruppieren. Man tut dies, indem man Gleiches zusammensetzt und Ungleiches trennt. Am besten lässt sich dies anhand von Linklisten verdeutlichen.
nah Im Auge des Betrachters
Die eingefügte Leerzeile trennt den Bereich Kultur vom Bereich Sport und ermöglicht somit ein schnelles Erfassen der beiden Themenbereiche.
3. Das Prinzip der Ähnlichkeit
Ebenfalls als zusammengehörig werden Dinge wahrgenommen, die einander ähneln. Dies kann sich sowohl auf die Farbgebung als auch auf die Form beziehen. So könnte obige Linkliste auch so unterteilt werden:
aehnl Im Auge des Betrachters
Die Ähnlichkeit der Farben ermöglicht hier die Zuordnung zu den unterschiedlichen Rubriken.
4. Das Prinzip der Geschlossenheit
Optische Gruppierungen lassen sich auch erzielen, indem man Objekte mit einem geschlossenen Umriss oder einer Umrahmung versieht. So sind die Grafiken in diesem Artikel mit einer dünnen, schwarzen Linie umrandet. Sie bildet einen geschlossenen Bereich, der sich vom textlichen Inhalt des Artikels abhebt. Optische Trennungen hingegen werden durch den Einsatz offener Trennlinien erzielt. Die einzelnen Postings in der Dr. Web-Community beispielsweise werden durch schwarze Balken getrennt.
geschlossen Im Auge des Betrachters
5. Das Prinzip der guten Fortsetzung
Nicht zuletzt lassen sich Objekte gruppieren, indem man ihnen einen fortlaufenden Charakter verleiht. Dies geschieht durch Anordnung auf vertikalen oder horizontalen Linien oder auch auf Kurven. Ein gut sichtbares Beispiel hierfür findet sich in den weiterführenden Links am Ende dieses Artikels. Die einzelnen Wörter (Objekte) werden nicht nur durch ihre sinngemäße Abfolge, sondern auch durch die Unterstreichung (horizontale Linie) zu einer Einheit verbunden.
fort Im Auge des Betrachters
Wichtig hierbei ist, dass die Linien nicht – wie im obigen Beispiel – tatsächlich sichtbar sein müssen. Es reicht, die Elemente auf einer gedachten Linie oder Kurve anzuordnen.
Neben diesen „Gruppierungsgesetzen“ gibt es noch zwei weitere Gesetze, die hier nicht unerwähnt bleiben sollen.
6. Das Prinzip der Prägnanz oder der guten Gestalt
Dieses Prinzip besagt, dass einfache, symetrische Formen besser wahrgenommen und erinnert werden können als komplizierte Gebilde. Dies kommt vor allem bei der Erstellung von Logos zum Tragen, da diese sich schnell einprägen und möglichst lange im Gedächtnis gespeichert werden sollen.
gut Im Auge des Betrachters
7. Erkennen und Einordnen
Neben den optischen Eigenschaften eines Objekts spielt auch dessen Einordnung in einen sinngemäßen Zusammenhang bei der Wahrnehmung eine Rolle. Hierbei ist die Erfahrung des Betrachters und seine Erwartungshaltung ausschlaggebend.
Ein Beispiel: Fügt man die Abbildung eines Automobils in eine Straßenabbildung ein, so kann dies vom Betrachter schnell wahrgenommen und eingeordnet werden. Das Objekt befindet sich in seinem „natürlichen“ Zusammenhang. Ebenso wäre es aber auch möglich, das Automobil „sinnentfremdet“ auf einer Sofaecke zu platzieren. Solche Brüche können im Einzelfall als zusätzliche Anregung eingesetzt werden, hemmen aber zunächst die Einordnungskompetenz des Betrachters.

Dr. Web Redaktion

Dr. Web Redaktion

An einem „Dr. Web Redaktion“ Artikel arbeiten i.d.R. mehrere Autoren, unter anderem Michael Dobler, und Markus Seyfferth.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Timo Specht Profilbild SEo-Agentur München.

Timo Specht – SEO Freelancer München & Online Marketing Experte

München

marketer UX

Düsseldorf

Johda Webdesign Berlin Logo.

JOHDA Webdesign

Berlin

WebOptimizer Logo mit der Aufschrift: Die deutsche Agentur in Österreich.

WebOptimizer

Villach

Evergreen Media Innsbruck Logo.

Evergreen Media®

Innsbruck

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑