logologo
Prinzipien guten Webdesigns: was es zu wissen gilt

Ist es Ihnen schon einmal passiert, dass Sie aus den Augenwinkeln etwas sahen und dachten es ist ein Kugelschreiber oder ein anderer Gegenstand, um dann festzustellen, dass es sich eigentlich nur um einen Schatten handelte? Es ist etwas, womit Menschen mit stark eingeschränkter Sicht kämpfen: das Gehirn interpretiert Formen automatisch und lässt uns glauben, dass wir einen Gegenstand sehen, wo eigentlich gar nichts ist.

Das nennt sich „Wahrnehmung“. Und das Forschungsgebiet und die Grundprinzipien der Wahrnehmung nennen sich Wahrnehmungspsychologie. Sie ist besonders interessant für das Marketing, da auch Farben, Abfolgen, Schriften, Bilder und noch mehr interpretiert werden und so darüber bestimmen, ob ein Supermarkt, ein Flyer oder auch eine Webseite als „angenehm“, interessant und gut zu lesen empfunden werden oder nicht.

Grundsätzlich ist bei Webseiten der Zeitfaktor wichtig: Nutzer sollen auf den ersten Blick und ohne zu scrollen alle Informationen finden, die sie brauchen. Zudem sollen die Inhalte überzeugen und die Leser zum Kauf anregen. Gekoppelt mit den richtigen Handlungsaufforderungen soll das zum Erfolg führen.

Der nächst wichtige Faktor ist jedoch die Natürlichkeit im Lesefluss und die Einfachheit, mit der ein Text erfasst werden kann. Dies wird erreicht, indem der Aufbau von Text, Webseiten und Bildern über das Gesamtkonzept der Webseite hinweg genau durchdacht wird, um so einen natürlichen und ansprechenden Lesefluss zu erreichen. Wird eine Webseite nicht als angenehm und „natürlich“ empfunden, dann verweilen die Nutzer nicht lange auf ihr und können folglich auch nicht zu zahlenden Kunden konvertiert werden.

Bei der Gestaltung dieses Leseflusses wird bestimmt, wie das Auge durch das Design geführt wird. Man entscheidet darüber, wohin es zuerst schaut, wohin es danach gelenkt wird und wo es eine Pause macht sowie wie lange es dort verharrt. Das passiert basierend auf Wissen der Wahrnehmungspsychologie und wie Nutzer üblicherweise lesen.

In der Tat hat bei einer Webseite jeder Teil ein visuelles Gewicht, das den Blick des Nutzers mehr oder weniger anzieht. Dies kann eingesetzt werden, um der Webseite eine „visuelle Richtung“ zu geben. So hat Rot zum Beispiel ein höheres visuelles Gewicht, als Blau. Auch grössere, dünklere und regelmässige Elemente haben ein höheres visuelles Gewicht. Elemente im Vordergrund scheinen wichtiger, als jene im Hintergrund. Und vertikale Elemente sind leichter, als horizontale oder diagonale Elemente. Je weiter man vom Zentrum einer Komposition weg geht, desto grösser wird zudem das Gewicht von Elementen empfunden. All dies kann verwendet warden, um die Augen von Fokuspunkt zu Fokuspunkt zu führen und einen natürlichen Fluss in der Webseite zu haben.

Selbstverständlich ist dieser Fluss auch abhängig von der Sprache. So liest sich Englisch von links nach rechts. Für Arabisch müsste der Fluss von rechts auf links angepasst werden.

Diagram

Das Gutenberg-Diagramm.

 

Zur genauen Bewegung der Augen beim Lesen von Zeitungen oder Webseiten wurden Studien durchgeführt und festgestellt, dass es bei gleichmässig verteilten Inhalten insgesamt 3 Muster gibt

  • Das Gutenberg-Diagramm: Bei diesem Muster bewegt sich das Auge von oben links nach unten rechts und geht dabei durch das Zentrum der Seite. So erhält die obere rechte Ecke und ganz besonders die untere linke Ecke weniger Aufmerksamkeit.
  • Das F-Muster: Bei diesem Muster schauen die Augen von oben links nach oben rechts und dann etwas weiter runter, um dasselbe zu wiederholen. So hat dieses Muster die Form eines Fs.
  • Das Z-Muster: Die Augen schauen von oben links nacho ben rechts und bewegen sich dann diagonal nach links unten, bevor die Bewegung wiederholt wird.

Wenn eine Webseite also viel Text hat, dann lohnt es sich, den obigen Mustern zu folgen. Fürs Storytelling wird üblicherweise das Z-Muster angewendet.

Wenn jedoch Design-Elemente verwendet werden, dann fallen diese Muster weg, und es gilt das Prinzip des visuellen Gewichts. Trotzdem können wichtige Informationen so platziert werden, dass der Blick automatisch, auf natürliche Weise darauf fällt.

Die Gestaltung des Leseflusses

Um auf der Webseite ein optimales Storytelling zu haben lohnt es sich, auch das Design entsprechend zu gestalten und die Informationen in der richtigen Abfolge anzuordnen.

Um auf der Webseite einen guten Fluss herzustellen gilt es, die Prinzipien von visuellem Gewicht und Leserichtung zu kombinieren.

Der Fluss fängt üblicherweise beim heausstechendsten Element an. Dann können Elemente gezielt verwendet werden, um diesen Lesefluss zu steuern.

Elemente, die zur Lenkung der Leserichtung verwendet werden sind:

  • Repetitionen
  • Diagonale Linien
  • Richtungslinien und Pfeile
  • Perspektive
  • Farbabstufungen, etc

Die hauptsächliche Funktion von Linien ist es, den Blick zu lenken. Mit ihnen kann aber auch eine Bewegung in eine Richtung abgeschnitten warden, so dass der Lesefluss dort stoppt oder umgeleitet wird.

Verwenden Sie also Elemente und Linien, um die Leserichtung zu lenken oder die Bewegung zu stoppen.

Logik der Abfolge

Für den Fluss in der Webseite ist es zudem auch wichtig, dass die Abfolge logisch erscheint. So sollte der „Suchen“-Button rechts vom Eingabefeld sein, da die automatische Lese- und Aktionsweise von links nach rechts erfolgt.

similar picture

Ähnliches Bild?  

Gestaltung und Fluss

Bei der Gestaltung von Webseiten sollte mit dominierenden Elementen und Fokuspunkten gearbeitet werden, um den Blick zu lenken. Zudem können durch Ähnlichkeiten und Kontraste Muster und Abfolgen erstellt werden, die das durch die Webeite Lesen ebenfalls erleichtern.

Beispiele

Hier sind einige Beispiele vergangener Projekte, um die oben erwähnten Prinzipien zu erläutern. Gerne steht das MIK Agency Team in Zürich zu Ihrer Verfügung, um auch weitere Beispiele mit Ihnen anzuschauen und sie zu allen Möglichkeiten zu beraten:

MK Technik AG

12132

 

Beim Blick auf die Webseite von MK Technik AG fällt der Blick gleich sofort automatisch auf die rote Farbe im Logo und dann, durch die lineare Begrenzung, weiter zum Menü. Von dort gehen die Augen automatisch weiter auf den Fokuspunkt, das Haus und etwas herunter, zu Titel und Slogan. Als nächstes sieht man den Titel „Über uns“ mit dem Bild und wird dann durch die aufkommenden roten Punkte zu den Inhalten auf der rechten Seite gelenkt.

Restaurant Da Leone

restuant

Beim Restaurant Da Leone gibt es einen starken, horizontalen Fluss in der Webseite. So fällt als Erstes das Logo ins Auge. Anschliessend neigt das Auge durch den Balken dazu, nach rechts über das Menü zu schreifen – angezogen vom weissen Feld mit dem Willkommenstext. Dieses ist das herausstechendste Element der Webseite und erklärt in 3 Sätzen, was der Besucher auf der Webseite vorfindet, wie sich das Restaurant von anderen abhebt und wie es seine Gäste schätzt.

Glas Oberland GmbH

Oberland

Auch bei der Glas Oberland GmbH wurde mit einem Header gearbeitet, um den Blick vom Logo oben links übers Menü zu leiten. Durch das Rot schaut man anschliessend automatisch nach unten und schweift dabei mit dem Blick über den Titel und den Slogan des Unternehmens. Auch Kontraste wurden eingesetzt, um einen Fluss auf der Webseite zu erstellen.              Für mehr verweisen wir gerne auf die Webseite des Unternehmens auf http://glasoberland.ch/.

Zusammenfassung

Wie wir oben festgestellt haben, haben Sie also jede Menge Einfluss darauf, wie Nutzer ihre Webseite lesen und wahrnehmen. Nutzen Sie diesen aus! Setzen Sie sich ganz einfach für eine unverbindliche Beratung mit uns in Verbindung – wir helfen Ihnen gerne weiter.

Valon
About Valon
Valon Asani ist ausgebildeter Informatiker. Seit 2011 auch Unternehmer mit der Webdesign Agentur MIK Agency und dem KOSFON Call Center. Doch was nach wie vor am meisten Spass macht: Das leidenschaftliche Bloggen und Suchmaschinenoptimierung.

No Comments

Leave a Comment

<?php the_title(); ?>
Prinzipien guten Webdesigns: was es zu wissen gilt