Diese 3 gängigen UX Fehler macht fast jeder auf seiner Website. Ich zeige dir, welche Fehler das sind und wie du sie vermeiden kannst.
Ein Call to Action besteht immer dann, wenn ein User eine bestimmte Handlung ausführen soll. Wenn er z. B. auf einen Button klickt, ein Formular sendet oder sich in einen Newsletter einträgt, ist er einem Call to Action gefolgt.
Das alles ist wahrscheinlich nichts Neues für dich. Nach wie vor machen aber viele Webseiten einige Fehler bei den CTA’s. Ich möchte dir ein paar Tipps zeigen, mit denen du deine Call to Actions verbessern kannst.
Bestimmt hast du schon einmal gehört, dass ein CTA immer „above-the-fold“ zu sehen sein sollte. Bedeutet, man sollte nicht erst scrollen, um den ersten Call to Action zu sehen.
Das ist ein guter Anfang, aber einen Button nur möglichst weit oben zu positionieren ist noch keine Garantie dafür, dass er auch geklickt wird.
User scannen Webseiten. Sie starten links oben, bleiben auf der linken Seite und gehen mit den Augen nach unten, bis etwas ihre Aufmerksamkeit erweckt. Erst dann wandert das Auge nach rechts.
Das bedeutet also, dass User die linke der rechten Seite bevorzugen und ein Call to Action auf der linken Seite besser funktionieren kann.
Du kommst auf eine Seite, ein Pop-Up geht sofort auf und sagt dir, dass du dich in den Newsletter eintragen sollst. Ein Paradebeispiel für schlechtes Timing! Man gibt dem User keinerlei Zeit sich umzusehen und Vertrauen aufzubauen. Sowas führt ganz schnell zu einer geringeren Conversion Rate.
Das Timing für einen Call to Action ist sehr wichtig, setzt du ihn zu früh wirkt er wie aggressive Werbung, setzt du ihn zu spät, übersieht ein User deinen Call to Action.
Ein User hat zu jeder Zeit ein bestimmtes Ziel. Du solltest ihn also immer erst dieses Ziel erfüllen lassen, bevor du ihm ein Call to Action anbietest.
Wenn ein User zum Beispiel auf einen Blogartikel klickt, solltest du nicht gleich im Header einen Call to Action für den Newsletter Signup einfügen. Warum? Der User wird erst deinen Artikel zum Teil lesen und beurteilen, ob ihm dein Schreibstil gefällt und der Inhalt wirklich informativ ist.
Das bedeutet, dass du dem User erst eine Zeit lang lesen lassen solltest und dann einen Call to Action anbietest. Wenn der User fertig gelesen hat, kannst du noch einen Call to Action anbieten, schließlich hat er den kompletten Artikel gelesen und warum sollten weitere Artikel nicht auch für ihn Interessant sein?
Natürlich spricht generell nichts dagegen, einen Call to Action in den Header zu setzen. Es kommt immer darauf an, was du anbietest und wer deine User sind. In unserem Beispiel könnte es ja sein, dass dich die meisten Besucher bereits von Social Media Kanälen kennen und bereits wissen, dass dein Content gut ist. Dann ist ein Call to Action im Header vielleicht sogar hilfreich.
Du solltest dir jederzeit im Klaren darüber sein, wer deine User sind und welche Ziele sie in welchem Moment verfolgen. Anhand dessen, kannst du deine Call to Actions richtig timen und positionieren. Am besten findest du das über User Personas, User Interviews und User Journey Maps heraus.
Willkommen auf meiner Website ist so eine ganz typische, schlechte Einstiegs-Headline. Ich kann nicht erkennen, um was es auf der Website geht, welchen Mehrwert sie mir bietet und für Suchmaschinen ist das auch ein No-Go.
Ich gebe schließlich auf Google nicht „Herzlich willkommen“ ein, sondern suche nach einem bestimmten Begriff und dieser sollte sich auch in deiner Headline wiederspiegeln.
Deine Website verfolgt wahrscheinlich Ziele. Egal ob du Newsletter-Abonnements, den Kauf eines Produkts, den Klick auf einen CTA Button oder eine längere Aufenthaltsdauer auf deiner Seite möchtest, alles steht und fällt mit guten Headlines. Deshalb gibt es einige Dinge, die du in Headlines vermeiden solltest.
Es gibt eine wichtige Sache, die man bei Headlines auf Webseiten bedenken muss:
Die meisten User lesen keine Webseiten, sondern scannen sie. Das bedeutet, dass ein User erst einen Fließtext liest, wenn ihn die dazugehörige Headline anspricht. Damit eine Headline anspricht, sollte sie die Fragen der User beantworten.
Beispiel:
Frage: Kann ich das Produkt testen?
Headline: 30 Tage kostenlos und mit vollem Funktionsumfang testen
Eine gute Headline sollte generell dem User klarmachen, was du ihm bietest und welche Vorteile das für ihn hat. Dementsprechend empfehle ich bei jeder Headline folgende Regeln zu beachten:
Dieser Fehler ist einer der häufigsten, die ich auf Webseiten sehe. Um die Thematik so verständlich wie möglich darzustellen, gebe ich dir eine kleine Aufgabe.
Aufgabe: Finde auf dem Bild den Kerl mit dem rot-weiß gestreiften Shirt/Mütze. Finde Waldo!
Wie lang hast du gebraucht? Wenige Sekunden oder sogar viel länger?
Wiederholen wir das Spiel nochmal mit einem anderen Bild:
Diesmal solltest du erheblich schneller gewesen sein. Das liegt daran, dass ich dem Element (in diesem Fall Waldo) sehr viel Weißraum gegeben habe.
Die kognitive Belastung nimmt ab, dein Auge findet schneller einen Ruhepunkt und du kannst die Information schneller verarbeiten. (mehr zum Thema kongnitive Belastung)
Weißraum oder auch Whitespace gennant, ist der leere Raum zwischen Elementen. Er trägt dazu bei, das Informations-Wirrwarr auf der Seite zu reduzieren. Das hat für den Inhalt nur positive Effekte:
a) Inhalte sind einfacher zu scannen
b) Texte sind enfacher zu lesen
c) Die kognitive Belastung ist geringer
d) Das Auge findet mehr Ruhepunkte
e) Die Website wirkt qualitativ hochwertiger
White Space muss auch nicht unbedingt weiß sein. Es kann ein verschwommener Hintergrund, eine Farbe, ein Bild oder Struktur sein. Wichtig ist nur, dass das Augen nicht zu stark davon abgelenkt werden.
Die Bildzeitung ist ein wunderbares Beispiel für eine Website mit einer hohen kognitiven Belastung und wenig Whitespace:
Auf dem unteren Screen sieht man eine Heatmap.
Man kann erkennen, dass die Aufmerksamkeit sehr flächig verteilt ist und das Auge stark hin und her springt.
Bei diesem Design kämpfen alle Elemente um die Aufmerksamkeit des Lesers und man gibt dem Besucher kaum eine Möglichkeit Informationen in Ruhe zu verarbeiten.
Die Bildzeitung befeuert natürlich absichtlich die kognitive Belastung des Lesers. Bei Besuchern soll ein Unruhegefühl enstehen, das durch das Design noch zusätzlich verstärkt wird.
Im Vergleich dazu, ein Screen mit sehr viel Whitespace.
Hier erkennt man, dass die roten Ruhepunkte viel stärker sind und die Augen kaum hin und her springen. Das bedeutet, mehr Aufmerksamkeit für die wichtigen Elemente der Seite und eine geringe kognitive Belastung.
Durch genügend Weißraum kann sich das Auge auf die wichtigsten Inhalte konzentrieren. Desto mehr White Space um ein Element gesetzt wird, desto länger ist die Verweildauer auf diesem Element.
Diese 3 Punkte sind nur ein kleiner Teil häufiger UX Fehler und das ist noch lange nicht alles. Es gibt viele weitere Fehler, auf die ich in zukünftigen Artikeln eingehen werde.
Ich möchte an dieser Stelle nochmal zusammenfassen, was du tun kannst, um diese 3 Fehler zu beseitigen:
Wenn dir der Artikel gefallen hat, dann teile ihn, like ihn und trage dich auch gerne in meinen Newsletter ein.