Diese 3 UX Fehler solltest du auf deiner Website vermeiden

1. Kein effektiver Call to Action (CTA)

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.

Die richtige Position für deine CTA’s

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.

Das richtige Timing für einen Call to Action

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.

Beispiel für ein Call to Action Timing

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 und User Journey Maps heraus.

2. Schlechte Headlines

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.

Das solltest du in Headlines vermeiden

• übertriebene Behauptungen bzw. Behauptungen, die dein Produkt oder Service nicht einhalten kann z. B. „Die Software, die Leben verändert“, „In einer Woche zum Millionär“, „Beste Agentur für XYZ“
• nichtssagende Headlines z. B. „Willkommen auf meiner Website“ oder „Wir sind [Name des Unternehmens]“ oder nur „[Name des Unternehmens]“
• Phrasen und Redewendungen z. B. „Sie verstehen nur Bahnhof? Wir klären Sie auf“
• komplizierte Wörter und Fachjargon (auch Bullshit-Bingo genannt) nutzen z. B. „Human-Centered Design und Moonshots nutzen, um die Conversion in deiner Stand-Alone Kampagne zu optimieren“
• zu lange Sätze. Für Google sollte ein SEO-Title z. B. nicht mehr als 65 Zeichen haben. Auf einer Website empfehle ich eine Länge von unter 100 Zeichen.

So schreibst du gute Headlines für deine Website

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

Regeln für gute Headlines

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:

• Mach dem User klar, welche Vorteile dein Produkt/Service für ihn bietet.
• Beantworte in deinen Headlines die Fragen der Besucher.
• Anstatt Zahlen auszuschreiben, z.B. „eins“ und „zwei“, nutze lieber Nummern z. B. „1“ und „2“
• Nutze aktive Sätze. Anstatt „Webseiten die von mir designed werden“ lieber „Ich designe Webseiten“
• Schreibe so, wie du mit einem Kunden sprechen würdest. Oft fehlen Headlines das gewisse Maß an Menschlichkeit. Das kann dann schnell so klingen, als würde man bein einem Roboter einkaufen und nicht bei einer Person, die wirklich an sein Produkt/Service glaubt.

3. Zu wenig Weißraum (Whitespace)

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.

Website mit wenig White Space

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.

• Rote Bereiche stellen eine längere Aufenthaltsdauer der Augen dar
• Gelbe Bereiche eine mittlere Aufenthaltsdauer
• Alles weitere nur eine sehr kurze Aufenthaltsdauer

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.

Umso mehr White Space ein Element hat, umso höher ist die Aufmerksamkeit für das Element

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.

Fazit

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:

• Setze klare Call to Actions und beachte dabei die richtige Position und das richtige Timing. Call to Actions auf der linken Seite können effektiver sein, als auf der rechten. Lass deine User zu erst ihre Ziele erledigen, bevor du einen Call to Action anbietest.
• Schreibe Headlines, die Fragen beantworten und die Vorteile für den User hervorheben.
• Setze genügend Weißraum ein, um die kognitive Belastung für den User so gering wie möglich zu halten und wichtige Bereiche deiner Website hervorzuheben.

Wenn dir der Artikel gefallen hat, dann teile ihn, like ihn und trage dich auch gerne in meinen Newsletter ein.