Inhaltsverzeichnis:

Website-Usability als Erfolgsfaktor – Das solltest Du beachten

Website-Usability als Erfolgsfaktor – Das solltest Du beachten

Lesezeit: 19 Min | Autor: Nils Jorzenuk | 2 Kommentare

Teile den Artikel
omt logo

Diesen Artikel jetzt als Podcast anhören

Jetzt anhören aut: Spotify | iTunes | Google Podcast

Endlich – die neue Schere liegt parat. Nie wieder langwieriges Knibbeln oder Zerreißen! Läge sie nur nicht selbst in der gut verschweißten Plastikverpackung.

Glücklich – wer noch ein altes Modell oder das Küchenmesser in Reichweite hat, denn hier versagen leider auch ungekürzte Fingernägel schnell. Abgesehen vom wenig nachhaltigen Verpackungskonzept, fehlt hier eindeutig die Nutzerfreundlichkeit (Usability).

Im Alltag begegnen wir immer wieder Dingen, die mehr oder weniger benutzerfreundlich sind. Umso wichtiger, dass Deine Website benutzerfreundlich ist, damit sich Deine User gut zurechtfinden, sich bei Dir wohlfühlen und vor allem gerne wiederkommen. Dabei reicht es nicht, Deine Website einfach nur „hübsch“ zu machen, sie sollte auch funktional sein. Sehen wir uns die wichtigsten Prinzipien der Nutzerfreundlichkeit und Gestaltung genauer an.

Ausgabe 3 jetzt verfügbar!!!
OMT Magazin - Ausgabe 3

Endlich online! Die 3. Ausgabe des OMT-Magazin. 228 Seiten geballtes Online Marketing-Wissen!

Jetzt kostenfrei downloaden

Was ist Website-Usability?

Sicher hast Du einige Websites, die Du regelmäßig wieder besuchst. Was könnte der Grund dafür sein?

Zum einen wirst Du Dich schnell zurechtfinden und zum anderen bieten sie Dir einen Mehrwert. Ihre Ladezeit ist schnell und Du erreichst gut strukturiert Dein Ziel. Anders ausgedrückt, diese Websites sind ein Selbstläufer, Du musst einfach nicht darüber nachdenken, wie Du sie bedienst.

Aber wie erreichst Du diese starke Usability genau für Deine Website?

Definition Benutzerfreundlichkeit

„Benutzerfreundlichkeit bezeichnet die vom Nutzer erlebte Nutzungsqualität bei der Interaktion mit einem System. Eine besonders einfache, zum Nutzer und seinen Aufgaben passende Bedienung wird dabei als benutzerfreundlich angesehen.”

https://de.wikipedia.org/wiki/Benutzerfreundlichkeit

Bleib konsequent in Deiner Usability

Halte Dich an die Web-Konventionen, sprich ungeschriebenen Gesetze wie:

  • Logos verlinken auf die Startseite (Homepage)
  • Buttons sind als solche zu erkennen und anklickbar
  • Eine Lupe steht für die Suchfunktion

Das sind Funktionen, die der Nutzererwartung entsprechen. Deine Nutzer müssen nicht darüber nachdenken. Sie haben das Gefühl, das System zu kontrollieren, das gibt Ihnen Vertrauen und Sicherheit.

Deshalb ist es wichtig, dass Du diese Erwartungen auf Deiner Seite nicht unterbrichst und die allgemein gängigen Muster übernimmst. Ist das nicht der Fall, steigt die Absprungrate.

Tipp: Hast Du zum Beispiel Deine Website mit roten Buttons eingerichtet, dann bleibe auch bei dieser Farbe. Ein plötzlicher blauer Button würde eher verwirrend erscheinen. Natürlich kannst Du auch einen blauen Button gezielt als Akzent einsetzen, wenn das aber nicht geplant ist, vermeide es besser und bleibe Deiner Linie treu. Womöglich interagieren Deine Nutzer sonst nicht so, wie Du es gerne hättest. Konsistenz schafft Ruhe und Harmonie auf Deiner Website.

Lade Deine User zum Lesen ein

Endlos lange Textmauern auf Deiner Website erreichen alles andere als das.

Außerdem ist das digitale Lesen viel anstrengender als jenes auf Papier.

Deshalb scannen Deine User Deine Website zunächst nur und finden innerhalb weniger Sekunden, was sie suchen – andernfalls verlassen sie die Seite so schnell, wie sie gekommen sind.

Wie setzt Du schnell zu erfassende Lösungen um?

Mit gut strukturierten Inhalten:

  • Ein packender Artikeltitel
  • Treffende Zwischenüberschriften
  • kurze Absätze
  • kurze, einfache Sätze
  • Aufzählungen/Listen
  • auflockernde Bilder, passende Grafiken oder Videos

Website mit Wohlfühlfaktor dank Usability

Der beste Garant dafür, dass Deine Nutzer bleiben und wiederkommen ist, dass sie sich wohlfühlen. Mit dem Design Deiner Website kannst Du das sehr gut beeinflussen. Das Auge isst mit!

Farben für eine bessere Usability

Ein abgestimmtes Farbkonzept ruft Emotionen bei Deinen Usern hervor – je nach Wunsch Harmonie oder auch Aufmerksamkeit.

Ein hilfreiches Tool für die Farbfindung Deiner Website ist das Adobe Color Wheel.

Es hilft Dir nicht nur verschiedene Farbpaletten zu erstellen, sondern extrahiert auch die verwendeten Farbpaletten aus bestehenden Designs. Neuerdings ist dies auch ausgehend von Farbverläufen möglich.

website-usability-farben

Hilfreiches Tool für das Farbkonzept Deiner Website und ihrer Usability, das Adobe Color Wheel (Quelle: color.adobe.com)

Aber auch Pinterest oder Canva unterstützen Dich sehr gut bei der Auswahl Deines Farbschemas, wenn Du z. B. nach Moodboard suchst.

website-farbschema

Usability und Farbkonzept: Suchergebnisse bei Pinterest für „Farbschema + grün + Natur (Quelle: pinterest.de)

Kennst Du die 60-30-10 Regel?

Sie wird zur Anwendung von Farbpaletten als goldene Regel empfohlen.

Prinzip: die Hauptfarbe macht circa 60 Prozent des Layouts aus, eine Komplementärfarbe umfasst 30 Prozent und eine dritte Farbe setzt mit 10 Prozent weitere Highlights.

Dieses Vorgehen wirkt besonders harmonisch auf den Nutzer.

Tipp: Vermeide eine unkontrollierte „Buntheit“ auf Deiner Website. Akzente zu setzen ist natürlich erlaubt, aber achte für Deine Usability darauf, dass Du farblich eine gewisse Ruhe hineinbringst und Deine Seite nicht zu bunt gestaltest.

Farbwirkungen und Usability

Farben enthalten Informationen, die das gesamte Denken, Fühlen und Handeln von Menschen unbewusst prägen und steuern – eine wichtige Komponente für Dein Marketing.

Die durch Farben ausgelösten Assoziationen können Dein Markenimage aufbauen und verstärken:

  • Rot: Warnzeichen, aber auch Leidenschaft und Liebe
  • Grün: Hoffnung, Wachstum, Lebenskraft
  • Blau: Ruhe, Harmonie, Zufriedenheit, Vertrauen
  • Weiß: Reinheit, leicht, leer (Kulturelle Unterschiede beachten: bei uns bedeutet die Farbe Weiß rein, in China: Tod und Trauer)
  • Gelb: Freude, frech, explosiv

Schriften und Usability

Den Großteil Deines Webdesigns machen neben den Farben die Schriftarten aus. Neben ihrer Lesbarkeit, ist auch die Anzahl der gewählten Schriftarten entscheidend.

Verwende nicht mehr als zwei Schriftarten auf Deiner Website, um eine bessere Usability zu erreichen. In Kombination harmonieren Serifen-Schriften mit Sans-Serif-Schriftarten. Um noch mehr Ruhe und Konsistenz umzusetzen, ist auch eine einzige Schriftart sehr gut. Diese kannst Du mit unterschiedlichen Schriftstärken kombinieren und Deinem Marketing Wiedererkennungswert verleihen.

Für die Schriftartenrecherche eignen sich die Google Fonts hervorragend.

Hast Du bereits eine Website, kannst Du bei typewonder verschiedene Schriftarten auf Deiner Seite simulieren. Probiere es aus, es ist sehr praktisch.

webdesign-schriftarten

Typewonder simuliert die gewünschte Schriftart auf Deiner Website, nachdem Du Deine Domain eingetragen hast. Mit einer klaren Typographie kannst Du die Usability Deiner Website entscheidend verbessern.

Ebenfalls wichtige Elemente sind:

  • Schriftgröße,
  • genügend Zeilenabstand
  • ein guter Kontrast zum Hintergrund Deiner Website.

Deine Nutzer werden erfreut sein, wenn das Lesen am Bildschirm angenehm ist.

TIPP: Bei der Planung von Kontrast und Farbe Deiner Schrift solltest Du bedenken: Schwer lesbare Inhalte können unter Umständen dazu führen, dass Menschen mit Sehschwächen (zum Beispiel bei der Farberkennung) diese Inhalte gar nicht mehr wahrnehmen können. 

Responsive Webdesign und Usability

Wir kennen es alle, kaum jemand ist beim Warten auf den Bus oder während der Fahrt in der Straßenbahn nicht in den Tiefen seines Smartphones versunken.

Das Internet wird zunehmend unterwegs genutzt. Kein Wunder, dass auch Google diesem Trend folgt und mit seinem Page Experience Update im Juni 2021 mobile Inhalte für das Ranking bevorzugt.

Deshalb sind Inhalte, die für kleine Bildschirme optimiert sind, inzwischen wichtiger als die Desktop-Variante. Die Anforderungen für das responsive Webdesign sind hoch und verzeihen nur wenige Fehler.

Damit auf kleinen Bildschirmen die gleiche Menge an Informationen aufgenommen werden kann, muss der Nutzer deutlich mehr interagieren (scrollen, scrollen, scrollen).

Überlege Dir deshalb genau, ob Desktop-Elemente, welche die Bequemlichkeit Deines Nutzers mobil beeinträchtigen können, auf dem Smartphone entbehrlich sind.

Tipp: Du kannst Dein “responsive Webdesign” für viele verschiedene Endgeräte anzeigen lassen. Klicke dazu mit der rechten Maustaste auf eine beliebige Stelle der Website und wähle im Menü “Untersuchen” (im englischen Menü “inspect”) aus. Es öffnet sich eine Konsole und Du kannst mobile Geräte auswählen (siehe Screenshot). Die mobile Darstellung Deiner Website wird anschließend im Browser angezeigt.

usability-responsive-webdesign

Die simulierte responsive Ansicht der Website im Browser – stimmt Deine Website-Usability auch auf mobilen Endgeräten?

Nutze interne Links

Das mag nicht nur Google, sondern auch Deine Nutzer werden Dir das Setzen interner Links danken. Du erleichterst ihnen damit die Navigation durch Deine Website. Besonders Smartphone-Nutzer bevorzugen es, im Text einfach auf einen Link zu klicken, anstatt mühevoll im Mini-Menü der mobilen Variante zu suchen.

Zusätzlich erhöht sich die Verweildauer auf Deiner Website, was ebenfalls das Ranking positiv beeinflusst.

Tipp

Du brauchst sogenannte „Stopper“ auf Deiner Website, responsive sogar noch mehr. Der User wischt schnell mit dem Daumen durch die Seite, deshalb musst Du ihn dazu bringen anzuhalten!

Farbflächen oder eine größere Schrift können hier Abhilfe schaffen. Beides solltest Du sparsam einsetzen, damit ein Akzent als solcher wahrgenommen wird.

Responsive WordPress Theme

Mit dem richtigen WordPress-Theme sparst Du Zeit und erleichterst Dir die Arbeit.

Der Umgang mit dem Divi-Theme ist nicht nur schnell zu erlernen, Du kannst Deine Website damit auch spielend einfach mobil optimieren. Außerdem ist ein Premium Theme wie dieses in der Regel besser programmiert, wovon du zusätzlich profitierst.

Lass Deine User nicht warten

Der erste Eindruck zählt, besonders für Deine Website ist das eine wichtige Wahrheit.

Lädt Deine Website nicht schnell und binnen drei Sekunden, ist Dein User weg und Google ebenfalls nicht begeistert.

Bilder

Bilder nehmen den prozentual größten Teil der Ladezeit ein. Wichtig ist, dass Du die Bilder in genau der Größe hochlädst, in der Du sie auch einbinden möchtest. Damit reduzierst Du bereits die Dateigröße und verringerst die Ladezeit.

Zusätzlich gibt es natürlich hilfreiche Plugins, mit denen Du die Dateigröße Deiner Bilder vollautomatisch weiter reduzieren kannst.

suchmaschinenoptimierung-ewww-image

Ich empfehle Dir das WordPress Plugin EWWW Image Optimizer. Damit kannst Du Deine Bilder in das neue Google-Format WebP umwandeln, was die Dateigröße enorm verringert. Damit verbesserst Du nicht nur Deine Website-Usability, sondern auch Deine Suchmaschinenoptimierung (SEO).

Caching

Ein weiterer wichtiger Punkt ist das Caching. Du benötigst kein detailliertes Hintergrundwissen dazu.

Konkret bedeutet das, dass nicht bei jedem Aufruf Deiner Website oder einer Unterseite ein Datenbankaufruf erfolgen soll. Das „Caching“ bewirkt, dass von jeder Seite eine Kopie auf dem Server gespeichert wird, die dadurch viel schneller verfügbar ist, weil nicht erst eine neue Abfrage gestartet werden muss.

Beste Ergebnisse liefern Premium-Plugins wie:

Aber auch mit kostenlosen Alternativen, wie:

kannst Du gute Ergebnisse erzielen.

nutzerfreundlichkeit-plugin-w3-total-cache

Das Plugin W3 Total Cache für WordPress ist kostenlos verfügbar. Es verbessert indirekt die Nutzerfreundlichkeit mit einer verbesserten Ladezeit. Deine Nutzer kommen schneller ans Ziel. (Quelle: wordpress.org)

Tipp

Überprüfe Deinen Page-Speed einfach mit dem Tool „Pingdom Website Speed Test.“

Verwaiste Links oder Informationen

Mit der Zeit kommt einiges zusammen – interne und externe Links in Blogartikeln, Produkt- oder Unterseiten. Keine Sorge Du musst nicht alles manuell überprüfen und aktuell halten. Auch hierfür gibt es natürlich nützliche Plugins.

Mit dem „Broken Link Checker“ werden Dir sofort nach der Aktivierung fehlerhafte Links angezeigt und Du kannst sie direkt im Plugin korrigieren. Aber Achtung, das Plugin verlangsamt Deine Website, deshalb aktiviere es nur zum Testen.

404-Seite für eine geringere Absprungrate

Sollte Dir doch mal ein Link durch die Lappen gehen oder Dein Nutzer vertippt sich einfach nur, landet er auf einer „Fehler 404“-Seite.

Hast Du Deine eigene Fehler-Seite schon mal gesehen?

Sie beginnt mit einem Hinweis, dass die gesuchte Seite nicht existiert und bietet meist noch ein Suchfeld, um Deine User doch noch zu der passenden Seite zu leiten.

Du hast aber auch die Möglichkeit eine individuelle Fehler-Seite zu erstellen. Dort kannst Du persönlicher auf Deine Nutzer eingehen und gezielt Links zu Deinen Angeboten, Deinem Newsletter oder Blogartikeln setzen. Deine 404-Seite darf auch ausgefallen und humorvoll sein, Deine User wird es freuen und Deine Absprungrate wird geringer. Nutze die 404-Seite als Landingpage für verirrte User.

website-benutzerfreundlichkeit-404-seite

Beispiel einer Fehler-404-Seite auf dem Smartphone. Sie erhöht die Benutzerfreundlichkeit und verringert die Absprungrate Deiner User.

Auffindbare Informationen als Qualitätsmerkmal

Achte auch auf gut auffindbare Inhalte, damit Deine Kunden Deine Produkte oder Dienstleistungen finden.

Die folgenden Fragen solltest du mit Ja beantworten können:

  • Sind Menübezeichnungen oder Kategorien verständlich für Deine Zielgruppe?
  • Entspricht Deine Navigationsstruktur der Vorstellung Deiner Zielgruppe?
  • Liegen Deine Inhalte strukturiert für Deine Zielgruppe vor?
  • Sind die Menüpunkte nach den Vorstellungen Deiner Nutzer angeordnet?

Auch doppelter Content ist ein Qualitätskriterium. Zum einen ist er ein No-Go für Google und zum anderen verwirrst Du Deine User unnötig.

Ähnliche Kategorien und Links

Neben fehlerhaften Links sind auch ähnliche Bezeichnungen verwirrend und verschlechtern das Nutzererlebnis.

Sind die Bezeichnungen so gewählt, dass sich Informationen an verschiedenen Stellen auf der Seite befinden könnten, kann der Nutzer nur Vermutungen anstellen. Viele Nutzer haben dazu keine Lust und verlassen Deine Seite genervt.

Es gibt zwei Hauptprobleme:

  • Die Links führen zu unterschiedlichen Inhalten, haben aber so ähnliche Bezeichnungen, so dass dem User der Unterschied nicht klar wird.
  • Ähnliche oder gleiche Inhalte befinden sich auf verschiedenen Seiten und es ist nicht klar warum.

Beide Fälle animieren Deine Nutzer nicht zur Wiederkehr. Eine gute Planung im Vorfeld der Erstellung Deiner Website kann hier schnell Abhilfe schaffen.

Einfache Navigation für bessere Usability

Eine einfache und schnell zu erfassende Navigation schafft auf den ersten Blick Vertrauen. Dein User muss nicht lange suchen, was ihn schneller zufrieden stellt und folglich die Usability Deiner Website verbessert.

Deine Navigation sollte diese drei Punkte erfüllen:

1. Orientierung bieten
Hebe den aktiven Menüpunkt mit einer anderen Schriftfarbe hervor.

2. Zur gewünschten Information leiten
Verwende klare und eindeutige Bezeichnungen für Deine Menüpunkte, damit Deine Nutzer schnell finden, wonach sie suchen.

3. Nicht mehr als sieben Menüpunkte haben
Achte dabei auf die Konsistenz. Deine Navigation dient als Fixpunkt für die Orientierung auf Deiner Website und sollte immer an derselben Stelle zu finden sein.

Auch mit einer Suchfunktion kommen Deine Nutzer schneller ans Ziel und haben ein gutes Nutzererlebnis.

Kurze Website-Formulare

Formulare sind essenziell für Deine Website bzw. Dein Online Marketing. Egal ob ein einfaches Kontaktformular oder das E-Mail Opt-in für Deinen Newsletter, sie sind eine wunderbare Möglichkeit, strukturiert Daten Deiner Nutzer abzufragen.

Übertreibe es nur nicht mit der Abfrage, kurze Formulare sind besser als lange. Je schneller Dein Formular ausgefüllt ist, desto mehr Deiner User werden es nutzen.

Beachte auch den Datenschutz. Du darfst nur Daten erheben, die für die Durchführung der entsprechenden Anfrage notwendig sind. Für das Beispiel Newsletter heißt das, die E-Mailadresse ist als einziges Pflichtfeld erlaubt. Für eine persönlichere Ansprache in Deinen E-Mails empfiehlt es sich den Vornamen optional mit abzufragen.

Mit guten Kontaktformularen zielsicher kommunizieren

Auf ziemlich jeder Webseite im Einsatz, doch von Besuchern oft gemieden – das Kontaktformular. Mal Hand aufs Herz: Wer füllt schon gerne Formulare aus?

Hier findest Du den ganzen Artikel

Gesetze der Gestaltung und Usability

Wahrnehmungs- und Gestaltungsprinzipien helfen Dir dabei, Deine Website zu gestalten.

Unser Gehirn erkennt Unterschiede, Hierarchien oder zusammengehörende Elemente automatisch, wenn es Informationen analysiert.

Eine Website nur optisch hervorzuheben, ist nicht ausreichend, sie muss auch funktional sein.

Das oberste Gesetz lautet: Klarheit für Deine User schaffen.

Hier sind die 6 wichtigsten Gesetze der Gestaltung:

1. Gesetz der Nähe

2. Gesetz des gemeinsamen Schicksals

3. Gesetz der Gleichheit / Ähnlichkeit

4. Gesetz der Geschlossenheit

5. Gesetz der Kontinuität bzw. Fortsetzungserwartung

 6. Das Figur-Grund-Prinzip

1. Gesetz der Nähe

Elemente, die räumlich nah beieinander liegen, werden als zusammengehörig wahrgenommen. Diese Regel ist eine der stärksten, weshalb Du sie bei der Gestaltung immer berücksichtigen solltest.

Überschriften beispielsweise sollten nah zum Haupttext stehen, damit sie unser Gehirn als zusammengehörig wahrnimmt.

Sind Überschrift und Text zu weit voneinander entfernt, würden wir die Überschrift gar nicht mehr als Überschrift für den Text erkennen.

Im Umkehrschluss solltest Du Elemente, die nicht zusammengehören, unbedingt räumlich trennen, um sie klar voneinander differenzieren zu können.

usability-gesetz-der-naehe

Gesetz der Nähe: Elemente, die nah beieinander liegen, werden als zusammengehörig wahrgenommen. Ein wertvoller Aspekt für die Gebrauchstauglichkeit Deiner Website.

2. Gesetz des gemeinsamen Schicksals

Elemente, die sich in dieselbe Richtung bewegen, gleichmäßig verändern oder ähnliche Bewegungseigenschaften zeigen, werden als eine Gruppe erkannt, da sie sozusagen ein gemeinsames Schicksal teilen. Dabei können diese Elemente unterschiedlich aussehen.

Auf Websites können diese Elemente beispielsweise interaktive Grafiken sein, welche den Nutzern weitere Informationen liefern, sobald der User darauf klickt oder mit der Maus darüber fährt.

Auch blinkende oder sich bewegende Banner nutzen das Gesetz, um Aufmerksamkeit auf sich zu ziehen. Am einfachsten funktionieren damit Buttons, welche die Farbe ändern, sobald man mit der Maus darüber fährt.

webdesign-gesetz-gemeinsames-schicksal

Beispiel aus der „Ballon“-Funktion des Divi-Pixel-Plugins – ein Popup mit weiteren Informationen erscheint mit dem Mouseover-Effekt. Die Bedienbarkeit einer einzelenden Website-Sektion wird auch durch die Interaktion erhöht. (Quelle: divi-pixel)

3. Gesetz der Gleichheit/Ähnlichkeit

Objekte, welche die gleiche Form, Größe, Textur oder Farbe haben, werden visuell als zusammengehörig empfunden, auch wenn sie nicht nebeneinander liegen. So solltest Du unterschiedliche Funktionen auch durch unterschiedliches Aussehen kennzeichnen,

z.B. Buttons, Links und verschiedene Aktionselemente.

gebrauchstauglichkeit-gesetz-gleichheit-1

Ähnliche Formen und Größen werden als zusammengehörig wahrgenommen. In der Webentwicklung kann die Usability mit diesem Gestaltungsgesetz einfach verbessert werden.

Auch Icons nutzen oftmals dieses Prinzip. Schließlich nutzen wir diese Symbole, um damit bestimmte Funktionen zu kennzeichnen. Ein bekanntes Beispiel hierfür ist Google. Das Unternehmen gibt allen Produkten ein Icon im selben Stil und erzeugt so einen hohen Wiederkennungswert. Mittlerweile assoziiert jeder diese Icons mit Google.

website-usability-gesetz-gleichheit-2

Die Google Icons als Beispiel für das Gesetz der Gleichheit – in ähnlicher Farbe und Struktur. Google erhöht mit dieser Konsistenz die Nutzererwartung und Usability.

4. Gesetz der Geschlossenheit

Die Wahrnehmung des Menschen ist darauf ausgerichtet, in allem was wir sehen, Zusammenhänge zu entdecken.

Unser Gehirn ist in der Lage beispielsweise einen Kreis als solchen wahrzunehmen, auch wenn Teile davon fehlen. Deshalb können wir komplexe Designs vereinfacht darstellen. Elemente, die wir schon kennen, können wir so leichter identifizieren, ohne dass wir die ganze Form sehen.

onlinemarketing-gesetz-der-geschlossenheit-1

Das Gesetz der Geschlossenheit: Unser Gehirn vervollständigt fehlende Elemente automatisch und macht sie lesbar.

Ein weiterer Aspekt dieses Prinzips ist, dass wir Abgrenzungen bevorzugen. Auf einer Website suchen wir zuerst nach bekannten Mustern. Das kann beispielsweise die Unterscheidung von Header, Body und Sidebar, aber auch die Gruppierung einzelner Informationseinheiten (z. B. Eingabefelder und der Button eines Formulars oder Produkteigenschaften) sein, wie im Bild des Apple-Online-Shops zu sehen. Nutze diese Option, um wichtige Textpassagen oder Objekte vom Rest abzugrenzen.

bedienbarkeit-gesetz-geschlossenheit-2

Textbildkombination des Produkts mit den Produkteigenschaften im Apple-Shop. Apple ist bekannt für konsistentes Onlinemarketing und ein gutes Nutzererlebnis. (Quelle: apple.com)

5. Gesetz der Kontinuität bzw. Fortsetzungserwartung

Das Gesetz der guten Fortsetzung ist dann wirksam, wenn wir viele Elemente auf einer Linie anordnen. Dabei ist es nicht notwendig, einen Strich oder Rahmen um diese Objekte zu ziehen, da hier ergänzend das Gesetz der Geschlossenheit gilt und wir eine einheitliche Linie entlang dieser Objekte “erkennen.”

design-gesetz-kontinuitaet-1

In dieser Beitragsnavigation ist ober- und unterhalb der Verlinkungen keine Linie erforderlich, um zu erkennen, dass die beiden nebeneinanderstehenden Elemente “zusammen” gehören.

Auch Online-Shops greifen gerne auf dieses Prinzip zurück. Beim Check-out-Prozess (siehe Bild unten) ist dies gut zu erkennen. Die Kontinuität wird hier durch die horizontale Anordnung, die Nummerierung und die farbliche Markierung erreicht.

gestaltungs-gesetz-kontinuitaet-2

Das Gesetz der Fortsetzungserwartung im steigert die Zufriedenstellung des Users im Online-Shop von Zalando.

6. Das Figur-Grund-Prinzip

Menschen unterscheiden zwischen Vorder- und Hintergrund. Wir nehmen grafische Objekte entweder als vordergründige Figuren oder als Hintergrund wahr. Elemente im Vordergrund werden als wichtiger wahrgenommen.

Deshalb sollten Buttons einen starken Kontrast zum Rest der Website aufweisen, damit sie auffallen. Sind sie in der Hauptfarbe, werden sie oft nicht als Buttons wahrgenommen und übersehen.

website-design-figur-grund-prinizip-1

Buttons mit Farbakzent werden beim Scannen der Website vom User besser als Handlungsaufforderung und als klickbar erkannt. Eine gute Benutzerfreundlichkeit erhöht auch die Konversionsrate.

Soll eine Emotion im Vordergrund stehen, eignen sich dafür sehr gut große Bilder im oberen Bereich einer Website, sogenannte „Hero Bilder.“ Der Bereich oben wird als erstes wahrgenommen und ist somit ein guter Ort, um die Emotion zu erzeugen. Die Emotion rückt in den Vordergrund, Text und Button werden als zweites wahrgenommen.

website-design-figur-grund-prinzip-2

Eine „Hero“-Sektion eines Divi-Layouts mit einem emotional wirkenden Hintergrundbild. Dank zusätzlichem Suchfeld kommt der Nutzer schneller ans Ziel. (Quelle: elegantthemes.com)

Weitere Aspekte der Gestaltpsychologie für Deine Usability

Neben der Nähe, Geschlossenheit, Kontinuität und dem gemeinsamen Schicksal gibt es noch viele weitere psychologische Effekte der Gestaltpsychologie, die für Dein Design wichtig sind.

Das Hicksche Gesetz und Bedienbarkeit

Oder „weniger ist mehr“ – je mehr Möglichkeiten Du Deinen Nutzern anbietest, umso weniger werden sie sich entscheiden können. Welchen Button sollen sie klicken? Was sollen sie kaufen? Enthält Deine Website zu viele Möglichkeiten, dann ist es ratsam, sie ein bisschen abzuspecken – also auf das Wesentliche zu konzentrieren (Damit Deine User auch das machen, was Du gerne hättest).

Das F-Layout und Nutzererlebnis

Verschiedenen Eyetracking-Studien nach lasen Probanden den Bildschirm in einem „F“-Muster. Alles was oben und links erscheint, wird als wichtig wahrgenommen. Nur gelegentlich geht der Blick in die rechte Seite des Bildschirms.

Deshalb empfehle ich Dir die Anordnung von:

  • Branding,
  • Navigation
  • oder Handlungsaufrufen

auf der linken Seite Deiner Website zu platzieren.

Eyecatcher und Usability

Menschen kaufen von Menschen und Menschen kommunizieren mit Menschen. Je mehr Emotionen Du auf Deiner Website erzeugst, desto besser wird Deine Seite Deine User ansprechen. Mit Emotionalität kannst Du Deine Zielgruppe wirklich erfolgreich erreichen.

Wir sehen beispielsweise auch gerne andere Menschen, sprich Fotos von Dir, auf denen Du am besten lächelst und direkt in die Kamera guckst. Damit erreichst Du nicht nur die Aufmerksamkeit Deiner Website-Nutzer, sondern auch ihr Vertrauen.

Fazit

Jetzt kennst Du die Grundsätze der Website-Usability. Zusammenfassend hängt der Erfolg Deines Contents von seiner Gestaltung ab.

Die Usability sollte bei der Erstellung einer Website immer im Fokus stehen.

Denn egal welche Maßnahmen Du durchführst – werden sie nicht vom Kunden angenommen, sind sie nutzlos.

Schließlich hilft dem Nutzer eine gute Website-Usability dabei, sich schneller zu orientieren. Je einfacher wir dem Nutzer den Zugang zu unserer Website und unserem Content gestalten, desto besser. Was meinst Du?

Teile den Artikel
Wie ist Deine Meinung zu dem Thema? Wir freuen uns über Deinen Kommentar