Wie erfolgreich ein Produkt oder Service ankommt, ist abhängig davon, wie gut man seine Zielgruppe versteht

Um eine hohe Usability zu erreichen, muss das Layout in erster Linie dem Benutzer gefallen, nicht dir selbst. Es muss leicht zu bedienen sein und der Besucher muss ohne viel nachzudenken von A nach B kommen.

Wenn wir wissen, wer der User ist und was er möchte, fällt es uns auch leichter, Emotionen zu bewirken. Dazu muss man verstehen, wie bestimmte Dinge von Menschen empfunden werden und warum sie tun, wie sie es tun. Im besten Fall ist ein Layout so intuitiv gestaltet, dass der User Aufgabe ohne Unterbrechungen lösen kann. Eine Aufgabe kann eine Navigation sein, aber auch ein Bestellprozess in einem Online Shop.

Sobald ein Nutzer anfängt, länger nachdenken zu müssen, fängt er auch an Aufgaben nicht mehr intuitiv zu lösen. Dann strengen sie ihn an. Je mehr davon aufeinandertreffen, desto frustrierender wird seine Verbindung zum Produkt und deshalb auch zur Website.

Als Designer haben wir es in der Hand, einen Besucher an Aufgaben heranzuführen oder ihn bewusst in eine Richtung zu lenken. Dafür muss man wissen, wie sich User verhalten und dementsprechend mit vertrauten Dingen arbeiten. Die breite Masse weiß, wie eine Website oder App funktioniert. Trotzdem gibt es noch eine Vielzahl an Menschen, die keine Ahnung haben, wie eine Benutzeroberfläche aussieht oder wie man sie bedient. Die Zielgruppe zu kennen, ist deshalb unbedingt notwendig!

Design-Entscheidungen zu treffen, die nicht nur für die Breite Masse gelten, sondern individuell für jeden User gleich empfunden werden, ist sehr schwer.

Wie bekommt man aber einen User dazu, eine Seite zu verstehen, obwohl er noch nie vorher Erfahrungen in dieser Richtung gemach hat?

Eine grafische Benutzeroberfläche (User Interface) wird von unterschiedlichen Menschen bedient. Nehmen wir an, es handelt sich um einen Online-Shop. Viele wissen, wie man im Internet einkauft, andere vielleicht noch nicht. Wie bekommt man jetzt aber alle dazu, die Seite schnell und einfach zu verstehen?

Du musst versuchen, sie an die nächstmögliche Erfahrung heranzuführen, die sie aus ihrem Leben kennen. Auch wenn sie nicht wissen, wie man online Produkte einkauft, haben sie eine Ahnung, wie es im realen leben funktioniert. Dieses Wissen musst du dir zu nutzen machen. Deshalb ist es gut, die Erlebnisse, die ein Käufer im echten leben macht, auch auf die Website zu übertragen.
Wir sind es Beispielsweise gewohnt, einen Einkauf in den Einkaufskorb zu legen. Deshalb sollten wir ähnliches auch in einem Online Shop verwenden. Für den Nutzer ist dies eine vertraute Verbindung die er gleich versteht.

Wie du das menschliche Verhalten durch Design beeinflussen kannst

Hier sind einige Beispiele, wie du mit Hilfe von Gestaltung Elemente so beeinflussen kannst, dass sie der User auf die gewollte Weise versteht.

Die richtigen Farben verwenden

Farben helfen dem Besucher sich auf der Website zu orientieren. Gerade wenn wir zu einer Handlung auffordern wollen, sind sie perfekt um Aufmerksamkeit zu erregen. Wir können mit ihnen Aktionen auslösen und Blicke bewusst in eine Richtung lenken.

Folgendes Beispiel zeigt dir, wie bewusst man einen Betrachter dazu drängen kann, sich für einen Button zu entscheiden.

Nur durch das Verwenden einer Farbfläche, können wir einen von zwei Button intensiv in den Vordergrund holen. Die farblose Schaltfläche mit grauem Rahmen wirkt dadurch unscheinbar und zweitrangig. Sicherlich können wir diese Variante nutzen, um Benutzern eine Entscheidung zu erleichtern.

Meistens möchte wir, dass klickbare Schaltfläche auch entdeckt und betätigt werden. Nur so haben wir die Möglichkeit, den User zum nächsten Schritt zu führen oder eine Funktion auszulösen. Um überhaupt wahrgenommen zu werden, muss der Button deshalb Aufmerksamkeit erregen und sich von anderen Objekten unterscheiden. Dabei hilft es, den Kontrast zu umliegenden Elementen zu erhöhen. Im folgenden Fall erledigt das die Farbe rot.

Die Farbe rot springt ins Auge, ist für uns eine Warnfarbe und ist deshalb nur schwer zu ignorieren. Das können wir uns zu nutzen machen, um bewusst eine Aktion in den Vordergrund zu stellen:

Nehmen wir das Ampelprinzip, bei dem wir bei rot stehen und bei grün gehen dürfen. Dieses Prinzip haben viele Menschen schon verinnerlicht. In diesem Fall wissen wir, dass Leute bei grün den nächsten Schritt machen. Dieses Gefühl können wir auch auf eine Schaltfläche übertragen, bei der wir wollen, dass eine Handlung positiv ausgeführt wird.

Auch das User Interface eines Telefonanrufs zeigt ähnliches Verhalten. Rot visualisiert auflegen und grün dient zum Annehmen. Aber trifft diese Aufmerksamkeit bei jedem zu?

Die Zielgruppe ist entscheidend!

Auch wenn die zwei oberen Beispiele für uns plausibel klingen, gelten sie nicht allgemein. Eine Ampel-Farb-Funktion könnte in Deutschland funktionieren, trotzdem gibt es viele Menschen aus anderen Kulturen, die Farben unterschiedlich wahrnehmen. In China z. B. sind Webseiten total bunt. Würden wir dort einen Online-Shop bedienen, würde das unser Surf-Verhalten vermutlich total negativ beeinflussen.

Um die Verhaltensweisen der Besucher bewusst zu lenken, muss das Layout an der Zielgruppe getestet werden. Nur durch Analysen kann man auch wirklich sagen, ob eine bestimmte Farb-Entscheidung zu mehr Erfolg geführt hat.

Update:

Interessanterweise habe ich kurz nachdem ich diesen Artikel geschrieben habe, einen Beitrag gelesen, in dem HubSpot genau diese beiden Farben bei einem Usertest untersucht hat. Es ging darum, ob ein roter oder grüner Button mehr Conversions-Rate verursacht. Das gesamte Layout war gleich, nur ein Button unterscheidet sich. Überraschenderweise hat rot mit 21% mehr Klicks gewonnen. Dabei ging es aber eher um eine Art „kauf mich“ Button, der durch die Farbe rot einfach mehr Aufmerksamkeit erregt hat.

Für Farben gilt allgemein

Es entsteht dann mehr Aufmerksamkeit und dementsprechend mehr Aktion, wenn der Kontrast zu umliegenden Elementen erhöht wird. Nicht nur bei Menschen, die Farben wahrnehmen können, sondern auch bei denen, die farbenblind sind.

Chancen erhöhen und zwei Wege zum Ziel anbieten

Du hast die Aufgabe, den Besucher genau eine bestimmte Aktion ausführen zu lassen? Dann verdopple deine Chancen!

Jeder betrachtet eine Website unterschiedlich, weshalb die für dich prominent platzierten Elemente anderen vielleicht erst auf den zweiten Blick auffallen. Sorge dafür, dass bestimmte Aufforderungen mehr als nur einmal erscheinen und erhöhe damit die Chance auf den gewollten Effekt.

Die Lesbarkeit von Texten

Es gibt menschliches Verhalten, dass wir schon von klein auf lernen und das sich deshalb in unser Leben eingeprägt hat. Als wir angefangen habe, Buchstaben zu verbinden und Wörter als Sätze zu lesen, haben wir das von Anfang an von links nach rechts getan. Dieses Verhalten auf einer Website zu ändern, wäre fatal. Keiner könnte Absätze richtig lesen und man würde nicht von einer angenehmen User Experience reden. Dieses Argument gilt zumindest für die meisten Regionen (manche lesen auch von rechts nach links).

Aber nicht nur die Leserichtung spielt eine Rolle. Für uns ist ein Text auch dann einfacher zu lesen, wenn die Breite der Absätze nicht zu groß ist. Damit helfen wir dem Auge, bei einem Zeilenwechsel nicht zu verrutschen, was einen angenehmen Lesefluss bewirkt.

Bei einem Taschenbuch ist diese Methode gut sichtbar. Damit nicht zu viele Wörter nebeneinander stehen, hat jede Seite eine bestimmte Breite und ist durch den Bund getrennt. So entstehen zwei Bereiche, die beide gleich Breit sind.

Übernehmen wir dieses Prinzip aus unserem realen Leben auf eine Website, könnte man sagen, dass Textblöcke nicht breiter als 700px - 800px sein sollten. Je breiter das Textfeld wird und je kleiner die Schrift, desto schwieriger wird es für uns, einen angenehmen Lesefluss zu finden. Reicht einem diese Breite nicht, kann man seinen Text auch in kleineren Textblöcken nebeneinander platzieren.

Ein definitiv negatives Beispiel dafür ist Wikipedia. Schaut man hier einen Artikel auf einem größere Bildschirm an, wird es beinahe unmöglich, in die nächste Zeile zu wechseln. Jeder Zeilenwechsel wird zu einer Anstrengung.

Die richtige Platzierung von wichtigen Informationen

Wenn wir wollen, dass wichtige Informationen auch gesehen werden, dann spielt die Platzierung eine entscheidende Rolle. Wichtiges an letzter Stelle zu zeigen, macht keinen Sinn. Wir wissen, dass eine Website von oben nach unten angeschaut wird. Erst wenn jemand mehr Informationen möchte, taucht er tiefer in die Seite ein.

Deshalb sind die Informationen, die ganz oben stehen, wichtiger als die unteren, da sie, nachdem die Seite geladen hat, zuerst in das Blickfeld gelangen. Diese Methode finden wir auch in anderen Bereichen wieder:

• Eine Chart Tabelle zeigt den beliebtesten Künstler an erster Stelle, nicht in der Mitte oder als letztes
• Die relevantesten Suchergebnisse kommen immer als erstes
• Ein Logo oder Name einer Website wird in der Regel oben links platziert

Das scheint für manche vielleicht nicht wirklich neues Wissen zu sein, trotzdem solltest du dir klar machen, dass wenn du Informationen hast, die der Besucher auch auf jeden Fall sehen sollte, du sie auch weiter oben platzierst. Nur so kann er davon überzeugt werden. Je nachdem welche Viewport ein Gerät hat, kann dieses sichtbare Feld natürlich unterschiedlich sein!

Aufmerksamkeit durch Bewegung auslösen

Animationen machen ein User Interface lebendig. Alles, was sich bewegt, zieht auch automatisch unsere Aufmerksamkeit auf sich. Aber Vorsicht! Es wird schnell zu viel!

Wenn Animationen gekonnt eingesetzt werden, machen sie ein Layout lebendig und auch verständlich. Dann kannst du gezielt Verhältnisse zeigen und Hierarchien bestimmen.

Design effektiv einsetzen

Ein verständliches und angenehmes Layout zu gestalten, ist nicht einfach. Es gehört viel Erfahrung, Recherche und Wissen dazu.

Wenn du Design effektiv einsetzen willst, ist es wichtig, die Grundlagen zu verstehen und anzuwenden. Die oberen Beispiele helfen dir dabei. Falls du mehr davon wissen möchtest, kannst du dich hier in meinen Newsletter eintragen. Ich benachrichtige dich dann über einen neuen Beitrag.