Heute ist es das A und O für jedes Unternehmen, von Nutzern gefunden zu werden – das gelingt in erster Linie mit durchdachtem SEO und effektives SEA. Allerdings ist das nur die halbe Miete. Besucher müssen sich auf der Website (oder im Umgang mit der App) wohlfühlen. Ziel ist eine langfristige Bindung durch ein Nutzererlebnis, das Emotionen weckt. Und: Eine längere Verweildauer und starke Website Performance fließen in das Google Ranking ein.
UI-Design (User Interface Design) und UX-Design (User Experience Design) sind verantwortlich für das Schaffen von Benutzererlebnissen, die weit über das Funktionale hinausgehen und Besucher psychologisch positiv beeinflussen. Richtig angewandt, gestalten sie ein nahtloses, nutzerfreundliches Umfeld. Im folgenden Artikel stellen wir Ihnen die Techniken vor, mit denen Sie Nutzer eine angenehme Website-Erfahrung bescheren und dafür sorgen, dass Besucher gern mit Ihrer Online-Präsenz interagieren – was wiederum dazu führt, dass Sie mehr Conversions und bessere Suchergebnisse erzielen.
Inhaltsverzeichnis
Das passende UX-Design: Spaß durch Gewohnheit
Vielleicht ist Ihnen schon aufgefallen, dass besonders erfolgreiche Websites und Apps heute sehr ähnlich aufgebaut sind – ob Netflix, Prime, AirBnb oder Spotify: Sie bieten ein ähnliches Muster im Design. Obwohl sie unterschiedliche Dienste anbieten und andere Markenidentitäten darstellen, haben sie oft einen minimalistischen Hintergrund, große Überschriften und viel Platz zwischen den Textpassagen. Dieses wiederkehrende Prinzip ist kein Zufall.
Das UX-Design und UI-Design will es den Nutzern einfach machen. Menschen neigen dazu, sich an Bekanntes zu halten. Das Unbekannte wirkt herausfordern, Nutzer müssen sich erst Orientierung verschaffen. Erlernte Muster erleichtert es Nutzern, sich schnell zurechtzufinden, da sie bereits mit dem grundlegenden Aufbau vertraut sind. Über die Zeit haben sich bestimmte Designelemente sowie Konzepte durchgesetzt, derer sich Unternehmen bei der Gestaltung bedienen.
Erfolg durch sich wiederholende Muster
Menschen lernen durch Wiederholung. Je öfter wir eine App verwenden, desto besser verstehen wir ihre Funktionsweise. Dies weckt die Erwartung, dass andere Apps ähnlich funktionieren sollten. Unsere Erfahrungen mit einem System übertragen sich also unbewusst auf andere. Gestaltprinzipien und andere Techniken beschreiben, wie Informationen visuell gruppiert werden sollten, um dem menschlichen Gehirn bei der Erkennung von Mustern und Strukturen auf Web-Oberflächen zu helfen.
Diese Gestaltprinzipien sollten Sie im UI-Design, also der Gestaltung des Interfaces, sowie dem UX-Design, also dem Nutzererlebnis als Ganzes, berücksichtigen. Im Folgenden stellen wir Ihnen die wichtigsten gestalterischen und psychologischen Techniken vor, auf die Sie zurückgreifen können.
Pareto Prinzip: Die 80/20 Regel
Das Pareto-Prinzip findet sich in zahlreichen Bereichen wieder, ganz vereinfacht sagt es: 20 Prozent des Aufwands führen zu 80 Prozent des Erfolgs. Es bedeutet, dass einige Bereiche eines Ganzen wichtiger und ereignisführender sind als andere. Die Aufgabe im Design und in der Usability lautet, herauszufinden, welche 20 Prozent es auf der eigenen Website bzw. der App sind, die den Erfolg bestimmen. Natürlich muss man diese Zahlenangaben nicht ganz genau nehmen, sie können auch variieren.
Finden Sie also heraus, welche Funktionen und Bereiche die wichtigsten Ihres Angebots sind bzw. welches am meisten verwendet werden. Priorisieren Sie diese Funktionen und Bereiche und sorgen Sie hier für das beste Nutzererlebnis. Ähnlich funktioniert es im E-Commerce: Konzentrieren Sie sich auf die 20 Prozent der beliebtesten Produkte Ihres Shops und führen Sie diese prominent auf.
Occam’s Razor: Gesetz der Sparsamkeit
Occam’s Razor (Gesetz der Sparsamkeit) legt nahe, dass sich eine Schnittstelle auf das Wesentliche konzentrieren sollte. In der UX-Design-Anwendung bedeutet dies, unnötige Komplexität zu vermeiden und die Benutzeroberfläche so einfach wie möglich zu gestalten. Ein Beispiel hierfür ist die minimalistische Gestaltung von Apple-Geräten wie dem iPhone und dem iPad. Google ist ein weiteres Exempel: Rufen Sie die Website auf, sehen Sie auf dem ersten Blick Logo und Suchzeile. Google legt die Aufmerksamkeit auf seine Hauptfunktion, ohne zusätzlichen Schnickschnack.
Außerdem sagt das Gesetz: Wenn zwei Ansätze dasselbe Ziel erreichen, sollte die einfachere Variante gewählt werde. Im UX-Design bedeutet “einfach” nicht zwangsläufig “minimalistisch”. Die Wahl hängt von den Bedürfnissen der Zielgruppe ab. Zum Beispiel bei der Registrierung bei einem Dienst: Neben herkömmlicher Mailadressen-Eingabe und Passwort-Wahl können Registrierungen via Google- oder Facebook-Account eine attraktive Option für Nutzer sein.
Die 7 Gestalt-Gesetze
Die Gestaltpsychologie bzw. Gestalttheorie geht auf die Berliner Schule für experimentelle Psychologie Anfang des 20. Jahrhunderts zurück. Einfach gesagt erklärt dieses Konzept wahrnehmungspsychologisch, wie unser Gehirn die Umwelt interpretiert und wie es dank Erfahrungen reagiert.
Unser Gehirn erkennt demnach komplexe Zusammenhänge, auch wenn das große Ganze uns vorbehalten bleibt. Beispiel: Eine Katze im Dunkeln. Wir erkennen nur das halbe Gesicht, die andere Gesichtshälfte und der Rest des Körpers bleiben im Dunkeln verborgen. Dennoch wissen wir aufgrund unserer Erfahrung (da wir bereits tausende Katzen gesehen haben), dass es sich um eine Katze handelt – ein Vorteil, den wir gegenüber der KI haben. Es gibt zahlreiche Regeln zur Gestalt, die sich solcher Muster bedient. Die wichtigsten Gesetze sind auf sieben beschränkt (die, je nachdem wo Sie recherchieren, variieren können). Wir stellen Ihnen die für Content Design bzw. UX-Design relevantesten vor.
Gesetz der Nähe
Das Gesetz der Nähe in der Gestaltung besagt, dass Objekte, die räumlich eng beieinander liegen, von unserem Gehirn als zusammengehörige Gruppe wahrgenommen werden. Das gilt auch, wenn sie unterschiedlich aussehen. Nutzer können somit Inhalte leichter erfassen und einen Zusammenhang herstellen.
Beispielsweise gilt das im UX-Design für Bilder und Bildunterschriften. Wenn sich die Unterschrift nah an dem Bild befindet und größeren Abstand aufweist als der Fließtext, werden wir automatisch die Bildunterschrift auch dem Bild zuordnen. Gleiches gilt für Eingabefenster: Befindet sich der Task in unmittelbarer Nähe, wissen wir, was wir einzugeben haben (z.B. den Namen ins Namensfeld, Mailadresse ins E-Mail-Feld usw.).
Gesetz der Geschlossenheit
Das menschliche Gehirn neigt von Natur aus dazu, Muster und Zusammenhänge zu suchen. Dies ermöglicht es, Objekte nicht notwendigerweise via durchgehende Linien miteinander zu verbinden, sondern sie punktuell darzustellen.
Dieses Prinzip können Sie in der Gestaltung nutzen, um ein Bedienelement interessanter wirken zu lassen oder Spannung zu erzeugen. Auch für Labels oder Logos eignet sich das Konzept, da die Aussparung Aufmerksamkeit erregen kann.
Gesetz von Figur und Grund
Das Gesetz von Figur und Grund beinhaltet die klare Abgrenzung von Vorder- und Hintergründen. Werden Elemente nicht voneinander getrennt verwendet, kann das beim Nutzer zu falschen Interpretationen führen.
Dieses Gestaltungselement kann zur Abgrenzung durch den gezielten Einsatz von Farben erfolgen und als Designelement verwendet werden. Beispielsweise können Sie damit klare visuelle Trennlinien zwischen einzelnen Aufgaben oder Elementen schaffen, ohne auf offensichtliche Linienzeichnungen zurückgreifen zu müssen.
Gesetz der Ähnlichkeit
Elemente, die sich zum Beispiel in Farbe oder Größe ähneln, werden von Betrachtern miteinander in Verbindung gebracht. Sich ähnelnde Elemente sollten bei der Gestaltung dementsprechend bewusst eingesetzt werden.
Im folgenden Beispiel macht das Design dem Nutzer klar, dass die runden Eingabefelder zusammengehören. Die farbliche Hervorhebung des unteren Buttons kommuniziert jedoch eine andere Funktion:
Gesetz der Kontinuität
Menschen nehmen Elemente, die einer klaren Bewegung wie einer Linie oder einer Kurve folgen, als zusammenhängend wahr. Auch wenn andere Elemente diese Linie oder Kurve unterbrechen, suchen Nutzer nach der Kontinuität.
Buchungsseiten für Hotels oder Flüge zum Beispiel nutzen oft ein ähnliches Schema. Nutzer sollen ihre Informationen in klarer Abfolge eingeben. Durch das UI-Design erkennen sie die Abfolge der einzugebenden Informationen.
Das Gesetz des Ankerpunkts
Hervorstechende Elemente machen Nutzer auf sich aufmerksam und signalisieren Relevanz. Sie schaffen eine visuelle Hierarchie und bieten Betrachtern Orientierung.
Ankerpunkte lenken den Fokus der Nutzer. Verwenden Sie Ankerpunkte beispielsweise in Tutorials, um durch die einzelnen Schritte zu führen.
Zum Beispiel dieser Button, um ein kostenloses Erstgespräch für ihre (neue) Website zu erhalten
Gesetz der Erfahrung
Symbole und visuelle Codes haben sich über die Zeit tief in unser Gedächtnis eingeprägt. Sie teilen uns Informationen mit, die wir intuitiv erfassen, ohne nachdenken zu müssen. Bei einer grünen Ampel gehen wir über die Straße, bei einem Stoppschild halten wir an.
Diese Erfahrungen vereinfachen das Webdesign. Ohne Text finden Nutzer sofort relevante Funktionen in der App oder auf der Webpage.
Psychologische Effekte
Für die Konzeption der Gestaltung Ihrer Website oder App können Sie zahlreiche psychologische Effekte nutzen bzw. sich an ihnen orientieren. Im Folgenden beschreiben wir Effekte, die sich auf die gesamte Nutzererfahrung beziehen. Sie sind Teil des UX-Designs, das auch Erwartungen und Nachwirkungen der Nutzer während einer Interaktion umfasst.
Zeigarnik Effekt
Der Zeigarnik-Effekt besagt, dass Menschen sich besser an unterbrochene und nicht abgeschlossene Handlungen erinnern und den Drang spüren, sie zu erledigen. Unerledigte Aufgaben bleiben also länger im Gedächtnis als abgeschlossene.
Ein praktisches Beispiel sind Treuepunkte. Nutzer fühlen den Drang, ihre Punkte einzulösen, da sie diese bei bisher getätigten Käufen bereits gesammelt haben. Auch der kostenlose Versand ruft den Zeigarnik Effekt hervor: Dadurch ist bereits ein Teil des Kaufprozesses abgeschlossen, was die Wahrscheinlichkeit erhöht, dass der Nutzer den Kauf auch abschließt.
Cognitive Load Theory, dt. Kognitive Belastung
Die Kognitive Belastung beschreibt den mentalen Aufwand, den eine Person für eine Aufgabe aufbringen muss. Da das menschliche Gedächtnis begrenzt ist, ist es ratsam, Benutzer nicht mit Informationen zu überlasten, die nicht direkt zum Ziel führen.
Im Design bedeutet dies, dass Nutzer nicht mit zu vielen Informationen und Funktionen konfrontiert werden sollten. Bieten Sie Ihren Besuchern ein einfaches Design, ohne zu viele verschiedene Schriftarten, Buttons oder unterschiedliche Farben. Darüber hinaus können Sie Audio- und visuelle Inhalten zur Informationsvermittlung nutzen.
Priming Effekt
Der Priming Effekt verfolgt den Ansatz, dass Nutzer mit der Einführung bestimmter Informationen oder Reize Nutzer positiv beeinflusst werden. Nutzer können somit auf bestimmte Handlungen vorbereitet werden.
Im Design kann dies durch Bilder erreicht werden, die eine positive Stimmung erzeugen (etwa durch Farbgebung und anderer Effekte) und somit das Wohlbefinden der Nutzer steigern. So bleiben Sie länger auf Ihrer Webseite. Zum Priming Effekt zählen auch ein zentriertes oder links ausgerichtetes Menü oder die Verlinkung des Markenlogos mit der Startseite.
Ankereffekt
Der Ankereffekt gibt Nutzern eine Orientierung bei der Bewertung. Er bezieht sich auf die Tendenz von Menschen, ihre Entscheidungen und Einschätzungen auf der Grundlage eines zuvor präsentierten “Ankers” oder Bezugspunkts zu treffen.
Zum Beispiel sollte ein Restaurant, das ein bestimmtes Gericht verkaufen möchte, dieses nicht als teuerstes auf der Karte platzieren. Kunden orientieren sich daran und wählen seltener das teuerste Angebot. In einem Online-Shop können Sie den Ankereffekt nutzen, indem Sie zu Beginn das teurere und anschließend auf das günstigere Produkt verweisen, um den Eindruck eines Schnäppchens zu erzeugen.
Social Proof
Social Proof ist der Effekt, bei dem Menschen ihr Verhalten und ihre Entscheidungen mit denen anderer abgleichen. Sie wollen sich vergewissern, welches Handeln richtig und angemessen ist.
Im UX-Design kann Social Proof genutzt werden, um das Vertrauen der Benutzer zu stärken und sie zu Handlungen zu ermutigen. Nutzen Sie dafür Trust-Elemente wie Sicherheitssiegel, Zertifikate, Kundenbewertungen und Testimonials. Social-Media-Symbole wie „Teilen” und „Gefällt mir” dienen ebenfalls als soziale Beweise, die die Glaubwürdigkeit und Attraktivität einer Website oder App steigern.
Millers Law, dt. Millersche Gesetz
Das Millersche Gesetz, entwickelt vom Psychologen und Namensgeber George A. Miller, besagt, dass die menschliche Fähigkeit zur Informationsverarbeitung begrenzt ist. Die meisten Menschen können etwa sieben (plus oder minus zwei) Informationsstücke gleichzeitig verarbeiten.
Für ein effektives Design sollten Sie diese Begrenzung berücksichtigen, um die Benutzerfreundlichkeit zu erhöhen. Besonders bei Menüs, Formularen oder Dropdown-Listen ist es ratsam, die Auswahlmöglichkeiten auf das Wesentliche zu beschränken, da zu viele Optionen die Nutzer überfordern können.
Hickslaw, Hick’sche Gesetz
Das Hick’sche Gesetz geht in die ähnliche Richtung wie das Millersche Gesetz und bezieht sich auf die beschränkten mentalen Leistungskapazitäten beim Menschen. Es besagt, dass es mehr Zeit und Mühe kostet, eine Entscheidung zu treffen, wenn die Anzahl der verfügbaren Optionen zunimmt.
Um die Handhabung von Websites oder Apps für Nutzer zu erleichtern, sollten Sie kompliziertere Aufgaben in kleinere Schritte aufteilen. Zu viele Auswahlmöglichkeiten können die Benutzer überfordern und zu Frustration führen. Ein anschauliches Beispiel hierfür ist die Auswahl eines Films aus dem umfangreichen Netflix-Katalog. Aus diesem Grund hat der Streamingdienst eine Top 10-Liste aktueller Filme eingeführt, um Nutzern bei der Entscheidungsfindung zu helfen.
Peak End Rule
Die Peak-End-Regel besagt, dass Menschen sich eher an die Emotionen erinnern, die sie zum Ende (und auch zu Beginn) einer Erfahrung hatten. Mit diesen Emotionen bewerten sie das gesamte Erlebnis.
Aus diesem Grund sollten Sie die wichtigsten Punkte Ihres Angebots identifizieren und hervorheben, beispielsweise beim Kaufabschluss. Amazon nutzt diese Methode: Es zeigt nach Kaufabschluss den Nutzern die Liste der gekauften Artikel mit Bildern. Statt die gezahlte Summe zu zeigen und somit ein Gefühl der Käuferreue hervorzurufen („Ich habe schon wieder so viel Geld ausgegeben…“), wird die Vorfreude auf die Produkte gesteigert.
Serieller Positions-Effekt
Der serielle Positions Effekt bezieht sich ebenfalls auf Anfang und Ende einer Erfahrung. Hierbei geht es weniger um die Emotionen, sondern um die Inhalte. Menschen erinnern sich demzufolge besser an erste und letzte Objekte als an andere.
Bei der Interaktion mit Ihrer App oder Website sollten Sie daher die wichtigsten Informationen einer Landing Page strategisch an den Anfang und an das Ende setzen. Das gilt auch für Funktionen – stehen beispielsweise mehrere Funktionen zur Auswahl, können Sie die wichtigsten am linken oder an den rechten Rand platzieren.
Von Restorff Effekt
Der Von Restorff Effekt (auch als Isolationseffekt bezeichnet) besagt, dass sich Menschen an Objekte erinnern, die aus einem homogenen Umfeld hervorstechen. Wichtige und herausragende Informationen sollten also vom Hintergrund getrennt werden.
Bei Ihrem UX-Design sollten Sie daher entscheidende Elemente wie den Call to Action Button, Rabattangebote oder Kaufbuttons klar hervorheben und visuell trennen. Berücksichtigen Sie dabei die Farbe, Position und Form.
Progressive Disclosure, dt. Progressive Enthüllung
Mit der Technik des Progressive Disclosure überfordern Sie Ihre Besucher nicht, indem Sie zu viele Informationen und Funktionen auf einmal preisgeben. Machen sich Nutzer gerade mit Ihrer App vertraut, benötigen Sie noch nicht alle Infos zu Detaileinstellungen.
Enthüllen Sie stattdessen Elemente nach und nach. Richten Sie sich mit den Enthüllungen nach den einzelnen Etappen der Costumer Journey. Die neuen Informationen können somit Nutzer überraschen und begeistern. Apples Produktvorstellungsseiten zum Beispiel stellt ein Feature nach dem anderen dar und führt Nutzer langsam an das Produkt heran.
Goal Gradient Hypothesis, deutsch: Zielgeradenhypothese
Der Effekt der Goal Gradient Hypothesis gibt Menschen das Gefühl, dem Ziel nahezukommen. Das hat einen motivierenden Effekt, da Nutzer den Fortschritt spüren und den Eindruck gewinnen, dass der Prozess fast abgeschlossen ist.
Beispielsweise können Sie bei für langwierige und zeitaufwändige Aufgaben einen Fortschrittsbalken einführen. Auch eine Erinnerung, dass ein Produkt im Warenkorb ist und der Kauf abgeschlossen werden kann, wirken motivierend.
Visuelle Hierarchie
Die visuelle Hierarchie ist ein zentrales Konzept im Bereich des UX-Designs und betrifft die Gestaltung von Benutzeroberflächen und verbessert die Usability. Sie bezieht sich auf die Organisation und Anordnung von visuellen Elementen auf einer Webseite, in einer App oder einem Design, um die Bedeutung und die Beziehung zwischen diesen Elementen zu definieren.
So sollten Apps und Websites logisch strukturiert sein. Designelemente wie Leerräumen, Schriftgrößen, Bilder, Buttons sollten den Nutzer führen, wichtige Elemente hervorheben und Konsistenz schaffen. Ein roter Faden soll somit entstehen. Besonders wichtig ist eine klare visuelle Hierarchie von Landingpages.
Fazit – Durchdachtes UX und UI-Design sind Erfolgsfaktoren für das Nutzererlebnis
Die hier vorgestellten Gestaltungskonzepte und Mittel zum Erzielen psychologischer Effekte sind nur ein Ausschnitt. Betreiber bieten sich im Design noch viele weitere Möglichkeiten, um Nutzer durch ihre Website oder App zu führen und zu bestimmten Handlungen zu motivieren. Letztendlich geht es darum, ein positives Nutzererlebnis herbeizuführen, Conversions zu erzielen und wiederkehrende Nutzer zu gewinnen. Besonders bei Landingpages ist die psychologische Nutzerführung ausschlaggebend.
UX-Design und UI-Design sind dabei oft abhängig von der Zielgruppe und deren Erwartungen. Wenn Sie beispielsweise eine fachspezifische Software anbieten, benötigen Nutzer umfangreichere Informationen und Funktionen als bei einem Entertainment-Angebot für jedermann. Mittels Praktiken wie A/B-Testings verschiedener Designs können Sie herausfinden, welche Konzepte sich für Ihre Nutzer am besten eignen. Denn eine gut durchdachte und zielgruppenspezifische Gestaltung bilden neben dem SEO das Fundament für Ihren Erfolg. Wir stehen Ihnen gern beratend zur Seite. Aufgrund unserer jahrelangen Erfahrung bieten wir umfassende Gestaltungsansätze und eine zielführende Beratung für Ihre Präsenz.