Conversion Tipp 3: Webdesign Konventionen einhalten

Kategorie: Usability

Menschen orientieren sich gerne an festen Regeln. Egal ob beim Tagesablauf, im Supermarkt oder im Straßenverkehr, Konventionen sorgen für ein Gefühl der Sicherheit und Behaglichkeit. Wer sich an einem Ort wohl fühlt, wird sich längere Zeit dort aufhalten und auch gerne wieder dorthin zurückkehren. Genau darum geht es auch im nutzerorientierten Webdesign, die User sollen sich auf der Seite wohlfühlen, länger auf der Seite verweilen und häufiger wiederkommen. Dadurch steigt das Ranking bei Google und bei guter Conversion-Rate somit auch der Umsatz.

Grundsätzlich gilt: Jede Abweichung von Webkonventionen muss vom Gehirn erstmal verarbeitet werden, dadurch können die relevanten Inhalte auf der Webseite langsamer erfasst werden.

Wenn man sein Leben lang ein Auto mit Schaltgetriebe gefahren hat, kann man die entsprechenden Handgriffe schnell und ohne Nachdenken ausführen. Steigt man dann auf Automatik um, dauert es etwas bis man die nötigen Handgriffe intitutiv beherrscht.

Links eindeutig kennzeichnen

Links sind die Grundlage des Internets, durch sie werden verschiedene Websites oder verschiedene Unterseiten einer Internetseite miteinander verknüpft. Es ist für den Erfolg einer Webpräsenz sehr wichtig, dass auf Anhieb erkannt wird, was ein Link ist und was kein Link ist. Um dies zu gewährleisten müssen einige Regeln befolgt werden.

  • Links können durch Unterstreichung markiert werden
  • alles was unterstrichen ist, sollte ein Link sein, andere Elemente wie Überschriften sollten nicht unterstrichen werden
  • werden Links nicht unterstrichen, sollten sie durch eine andere Farbe vom Inhalt abgehoben werden.

So sollten Links dargestellt werden:

Dies ist ein durch Unterstreichung korrekt ausgezeichneter Link.

Dies ist ein durch eine andere Farbe korrekt markierter Link.

Dieser Link hat eine andere Farbe und ist unterstrichen und ist somit korrekt ausgezeichnet.

Das sollte nicht gemacht werden:

Überschriften und alle andere Elemente sollten auf keinen Fall unterstrichen werden, der User wird unwillkürlich auf diese Elemente klicken und irritiert sein, wenn es sich nicht um einen Link handelt.

Überschrift

Dieser Link ist nicht vom Fließtext zu unterschieden und somit nicht korrekt ausgezeichnet. Erst beim hovern mit der Maus über den Begriff erkennt man, dass es sich um einen Link handelt.

Das Logo richtig platzieren

Das Logo sollte links oben platziert und mit der Startseite verlinkt sein. Diese Anordnung hat sich in den letzten Jahren zum Standard entwickelt und sollte nur in begründeten Fällen und nach reiflicher Überlegung geändert werden. Instinktiv wird der User links oben nach dem Logo suchen und verwundert sein, falls sich das Logo nicht dort befindet und an anderer nach dem Logo suchen. Dadurch wird der wichtige Usability Grundsatz Don’t make me think verletzt, nach dem User in der Lage sein sollten die Elemente einer Webseite ohne lange Überlegung finden und bedienen zu können.

Eyetracking-Studien, die das Blickverhalten der User auf Websites analysieren, haben ergeben, dass zuerst die linke obere Ecke des Layouts wahrgenommen wird, daher ist es sinnvoll das für die Markenbildung und den Wiedererkennungswert wichtige Logo in der linken oberen Ecke zu platzieren.

Standard Icons verwenden

Das Internet ist ein visuelles Medium und daher bietet es sich an auf Bilder oder Grafiken zurückzugreifen, um bestimmte Sachverhalte zu verdeutlichen oder auf Funktionen oder Unterseiten zu verlinken. Bei der Verwendung von Grafiken oder Icons muss vor allem darauf geachtet werden, dass der User versteht, was mit diesen Icons gemeint ist, deshalb sollt man nur dann auf Icons zurückgreifen, wenn diese Icons allgemein verständlich sind, ansonsten sollte man durch zusätzlichen Text die Bedeutung des jeweiligen Icons nochmals betonen, um Mißverständnisse zu vermeiden.

Das Smartphone Icon links ist für den Einsatz als Symbol für die Telefonnummer nur bedingt tauglich. Obwohl die meisten mittlerweile wohl mit einem Smartphone anrufen, ist auf der Mehrheit der Seiten noch ein Icon wie das rechts abgebildete als Zeichen für die telefonische Kontaktaufnahme abgebildet.
Daher empfiehlt sich die Verwendung des Hörer Icons, weil es noch weiter verbeitet ist und daher auf Anhieb korrekt interpretiert wird,
Das links abgebildete @ wird bisweilen als Symbol für die Kontaktaufanhme per Mail verwendet. Es gibt allerdings einige User die nicht so Internet-affin sind und die Bedeutung des Zeichens nicht intuitiv verstehen.

Deshalb sollte man das Brief Icon als Grafik für die schriftliche Kontaktaufnahme verwenden, obwohl die Nachricht in den allermeisten Fällen per Mail geschrieben werden wird. Allerdings wird dieses Symbol von jedem User ohne zusätzliches Nachdenken verstanden.

Sind die verwendeten Icons nicht ganz eindeutig oder wird vom Standard abgewichen kann zur Sicherheit die Bedeutung der Icons durch eine Beschriftung verdeutlicht werden

E-Mail schreiben

Die Kontaktdaten im sichtbaren Bereich platzieren

Die Kontaktdaten des Unternehmens sollten im oberen sichtbaren Bereich der Website, der ohne zu scrollen lesbar ist, platziert werden. Auf dieser Internetseite ist oben rechts der Kontaktbutton eingebaut, der nach einem Klick die wichtigsten Kontaktdaten anzeigt. Muss erst mühsam nach den Kontaktdaten des Unternehmens gesucht werden, sinkt die Wahrscheinlichkeit der Kontaktaufnahme und somit auch die Conversion Rate der Websiite.

Um die Kontaktdaten vom übrigen Inhalt besser abzuheben, kann wie in diesem Beispiel auch eine komplementär Farbe verwendet werden, die die Klickrate tendenziell erhöht.

Inhalte sinnvoll aufbereiten

Damit der User die Inhalte der Website besser verarbeiten und gewünschte Informationen schneller
finden kann, ist es notwendig, dass bestimmte Prinzipien eingehalten werden, die diesen Prozess erleichtern.

Größe: Je größer ein Element auf der Seite dargestellt ist, umso wichtiger sollte es auch sein.
Dieses Prinzip ist uralt, bereits auf Bilder aus dem Mittelalter sind Könige oder Fürsten größer als ihre Untertanen dargestellt, um deren Wichtigkeit zu unterstreichen. Die eigene Webseite sollen daraufhin gründlich untersucht werden. Ist das größer dargestellte Element, wichtiger als ein kleineres oder widerspricht die optische Hierachie der inhaltlichen Bedeutung?

Kontrast: Elemente, die sich vom übrigen Layout optisch unterscheiden werden schneller gefunden. Daher empfiehlt es sich, diese Elemente mit abweichenden Farben hervozuheben.

Nähe: Die optische Nähe sollte mit einer inhaltlichen Nähe einhergehen. Was optisch nebeneinander steht, sollte auch in einem Sinnzusammenhang stehen.

Verwandte Beiträge

Banner Blindness – eine Erklärung

Experten sprechen von Banner Blindness (Banner-Blindheit), wenn die Besucher einer Website Werbebanner nicht wahrnehmen. Browser zeigen im Internet häufig Bannerwerbung an. Die Werbebanner verfügen Standardgrößen und befinden sich an bestimmten

Conversion Tipp 2: positive Emotionen durch Fotos

Die Besucher einer Website sollen sich mit einem positiven Gefühl auf der Seite bewegen und die für sie wichtigen Informationen finden und im Optimalfall Kontakt zum Unternehmen aufnehmen, um die

Conversion Tipp 1: Formular Optimierung

Formulare sind wichtige Bestandteile einer Conversion Optimierung. Durch Formulare haben die User die Möglichkeit direkt Kontakt zum Unternehmen aufzunehmen, ohne eine Telefonnummer wählen oder ihr E-Mail Programm starten zu müssen.

Texte im Internet schreiben

Um Texte für das Internet zu schreiben, muss man zunächst wissen, wie Texte im Internet gelesen werden. Die Antwort auf diese Frage ist ernüchternd. Die meisten User lesen die Texte

Usability Tipps für die Startseite

Die Startseite einer Webseite kann mit der Titelseite einer Zeitung verglichen werden. Die Titelseite muss durch eine ansprechende Gestaltung und griffige Formulierungen dafür sorgen, dass möglichst viele Kunden die Zeitung