Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

Psychologie im Design: Diese 5 Tipps helfen dir bei besserem Interaction-Design

(Foto: Shutterstock)

Mit jedem Tag wird es wichtiger, dass du dich durch deine Designs mehr mit deinen Nutzern verbindest und ein „menschliches Element“ integrierst. Das Website- und User-Experience-Design-Erlebnis sollte sich echt anfühlen, von der Ästhetik über die Interaktionen, die Bewegungen (die empfundenen und echten) bis hin zur emotionalen Verbindung. 

Das Problem, auf das Designer meistens stoßen, wenn sie über ihre Nutzer nachdenken, ist, dass sie nicht als wirkliche Menschen denken. Das klingt ein bisschen verrückt, oder? Aber wir reden hier nicht über des Designen von Robotern.  Gutes Design sollte Nutzer physisch und emotional ansprechen. Wir haben ein paar Tipps gesammelt.

1. Dein Mantra: „Menschen zuerst“

Der erste Schritt ist, es laut auszusprechen: „Menschen zuerst.“ Jetzt wiederhol es, bis du das Echo dieses Satzes in deinem Kopf hörst, vor und während der Design- und Planungsphasen von jedem Projekt. Und der Weg, das zu erreichen, ist, einfach menschlicher zu sein. Sei dir dessen bewusst – bei Aktionen, Interaktionen und Design. Fühl dich vor allem in deine Nutzer ein.

psycho01
(Screenshot: Reebok)

Ein Weg, sicherzustellen, dass du für Menschen designst, ist es, eine User-Persona zu schaffen. Du kannst fiktionale Identitäten nutzen, die du aufgrund deiner Nutzerforschung erstellst. Das hilft dir dabei, dem Rätselraten um deine Nutzer ein Ende zu setzen und dich in die Lage versetzen, beim Designen ihre Bedürfnisse im Hinterkopf zu haben.

Der Persona-Prozess, den wir in unserem Unternehmen bei Projekten zugrunde lege, sieht zum Beispiel so aus:

  • Auswertung der Nutzerdaten in unserer App, Sortierung der Nutzer basierend auf ihrem allgemeinen Engagement. Diese Gruppen können beispielsweise Leute enthalten, die eine Testversion geladen haben und anschließend nicht zu Bezahlversion wechseln wollten usw. Nachdem die Gruppen festgelegt sind, schauen wir uns das Verhalten anhand von Events an, die wir mit KISSmetrics erstellt haben.
  • Für qualitative Daten befragen wir etwa 30 Nutzer aus allen Gruppen, um das „Warum“ hinter den Daten zu verstehen.
  • Basierend auf den quantitativen Daten und den Interviews können wir anfangen, Muster herauszulesen, die schlussendlich unsere Personas formen.
psycho02
(Grafik: UXPin)

Du musst Dinge schaffen, die die Menschen auch haben wollen. Geh einen Schritt zurück und überprüfe jede Website, die du regelmäßig aufsuchst. Hast du das Gefühl, dass du ins Design mit einbezogen bist? Ist es persönlich? Intuitiv und einfach? Dann ist es menschlich.

2. Designe für Komfort und Vorhersehbarkeit

Es gibt wenig Elemente im Design-Prozess, die du schlichtweg nicht verändern kannst, wie den Gerätetyp und die Bildschirmgröße. Aber du kannst Einfluss darauf nehmen, wie Dinge wiedergegeben werden und wie komfortabel sich deine Designs in unterschiedlichen Umgebungen nutzen lassen.

Damit sich ein Design „richtig anfühlt“, muss es komfortabel in der Nutzung sein.

psycho03
(Grafik: Rosenfeld Media, Lizenz: Creative Commons 2.0)
  • Elemente müssen auf mobilen Geräten zugänglich sein. Denk an verschiedene Telefone und Hände, wenn du Elemente wie Buttons oder Swipe-Actions ins Auge fasst.
  • Denk über die Schriftgröße nach. Nutzer sollten nicht die Augen zusammenkneifen müssen, um den Text zu lesen.
  • Biete einen Kontrast, der unter verschiedenen Voraussetzungen erhalten bleibt. Während Desktop-Nutzer eine Website am ehesten in Innenräumen anschauen, werden Nutzer mit ihren verschiedenen Geräten in anderen Lichtverhältnissen auf ihre Bildschirme sehen.

    psycho04
    (Screenshot: Bugaboo Buggys)
  • Bewegungen sollten das echte Leben widerspiegeln. (Schau dir die 360-Grad-Rotation des Buggys oben an). Denk an die Physik eines rollenden Balls. Und jetzt stell dir diesen Ball auf einem Bildschirm eines mobilen Telefons vor: in welche Richtung sollte er rollen? (Immer zum tiefsten Punkt, wenn das Telefon bewegt wird, weil Bälle immer bergab rollen.) Es ist viel Wert, diese Mikrointeraktionen zu perfektionieren, um ein schönes Erlebnis zu schaffen.

Je komfortabler es sich für die Nutzer anfühlt, desto eher werden sie weiter mit deinem Produkt interagieren.

3. Verbinde dich emotional

Konzentriere dich auf eine Emotion, die dein Produkt transportieren soll. Reib dich nicht auf in dem Versuch, verschiedene emotionale Erlebnisse zu erschaffen. Setze eine besonders gut um.

Die emotionale Verbindung hat zwei Seiten:

  1. Dein Design sollte eine Beziehung zwischen den Nutzern und deinem Produkt herstellen.
  2. Dein Design sollte Verbindungen zwischen deinen Nutzern schaffen.
psycho05
Verschiedene Farben haben verschiedene emotionale Wirkungen. (Grafik: Jerry Cao)

Es gibt eine Menge Möglichkeiten, eine emotionale Verbindung mit deinen Nutzern herzustellen. Farbe ist ein gutes Mittel, um Gefühle in Menschen hervorzurufen. Kontrast, komplementäre Farben und Lebendigkeit rühren alle auf verschiedene Art an unsere Gefühle. Farben wecken auch unterschiedliche Stimmungen in Menschen. Zum Beispiel:

  • Rot: Ruft Leidenschaft hervor und bringt unser Blut vor Aufregung in Wallung.
  • Orange: Verleiht einem Design eine gut gelaunte Unbeschwertheit.
  • Grün: Fördert Reichtum, sowohl physischen als auch finanziellen.
  • Lila: Transportiert das Gefühl von Luxus.
psycho06
(Screenshot: Felt Apps)

Aber Farbe ist nur ein Aspekt, der zu einer emotionalen Bindung beiträgt. Texte und Bildsprache spielen auch eine Rolle. Felt Apps zum Beispiel hat fluffige Texte im Plauderton. Alle Fotos zeigen Momente, die man selbst vielleicht im Leben erfährt – Erinnerungen an die Vergangenheit. Die Farben sind Erdtöne, fast immer braun mit einem Spritzer rot beim Umschlag. All diese Elemente schaffen alleine noch keine Emotion, aber zusammen zaubern sie ein Gefühl von Nostalgie.

Emotionale Verbindungen bauen sich auf vielfältige Weisen auf. Markentreue zum Beispiel rührt von einer emotionalen Verbindung her. Die Art der Emotion wird durch den Ton, die Message und die Designentscheidungen bestimmt, die du machst. Ein Foto von Menschen, die schreien, kann zum Beispiel den Nutzer in Sorge versetzen – warum sind die Menschen auf dem Foto so aufgebracht und wie kann man ihnen helfen?

4. Designe mit mentalen Triggern

Wenn man ein bisschen was von menschlicher Psychologie versteht, kann das eine Menge bewirken, wenn es ans Designen geht. Aber du musst dich nicht wieder am College einschreiben, um diese Verfahren zu verwenden. Spencer Lanoue hat „Psychological Triggers That Make UX Design Persuasive“ aus einem akademischen Studien-Standpunkt für dich übersetzt.

psycho07
(Screenshot: Laerepenger)

Das Konzept sieht so aus (und verhält sich so zum Design):

  1. Tue etwas für andere Leute. Alt Antwort darauf werden auch sie dir einen Gefallen tun. Schau dir das obige Beispiel an, nimm am Quiz teil und du wirst Geld sparen.
  2. Leute schauen auf das Verhalten anderer. Vor allem, wenn sie nicht sicher sind, wie sie sich verhalten sollten. Füg einen Social Stream in dein Design ein, um den Leuten das Gefühl zu geben, Teil einer größeren Gruppe zu sein.
  3. Nutzer wollen das, was sie nicht haben können. Das Mangelprinzip ist der Grund, warum zeitlich begrenzte Angebote so gut funktionieren.
  4. Nutzer neigen dazu, sich in der Mitte einzuordnen, wenn sie sich entscheiden sollen. Die meisten werden von der Mitte angezogen. Wie Hicks Law empfiehlt, sollte man sorgfältig auswählen, da zu viele Wahlmöglichkeiten zu Entscheidungshemmungen führen.
  5. Menschen sind von dem angezogen, was ihnen gerade jetzt relevant vorkommt. Denk über Beacons, Benachrichtigungen oder Check-in-Tools nach, um im richtigen Moment da zu sein.
  6. Menschen erinnern sich an Elemente, die herausstechen. Verwende Kontrast, um in den Fokus zu gelangen.
  7. Menschen benötigen rechtzeitiges Feedback. Verinnerliche die „Power of 10“, wenn es ans Interaction-Design geht. Wie Jakob Nielsen sagte, brauchen Nutzer innerhalb von 0,1 Sekunden Feedback, damit sie das Gefühl bekommen, dass sie ihr Erlebnis noch kontrollieren. Wenn es länger dauert als eine Sekunde, bis dein Interface reagiert, verschwindet das Gefühl von Kontrolle schnell. Ob das Feedback nun rein visuell oder textbasiert ist (wie ein Dialogfenster), stelle sicher, dass es klar verstanden wird und einen Gesprächston verwendet.
psycho08
(Screenshot: Bose)

Bose ist ein gutes Beispiel dafür. Die Site braucht ein paar Minuten zum Laden, aber die geschmeidige Lade-Animationen machen das Warten weniger öde. Wenn du über eins der Produkte mit der Maus fährst, geben die elegant getriggerten Animationen dem User ein Gefühl, als würden sie spielerisch durch einen Rolodex blättern. Das Interface bietet auch kontrastierende Farbflächen, um die Aufmerksamkeit des Nutzers zu erhalten und sie sofort auf die Produkte zu lenken.

Schau dir mal den animierten Prototypen unten an, den wir gebaut haben. Achte darauf, wie das Menü direkt nach dem Tippen lädt, aber sich ein wenig langsamer verändert (so dass es nicht ruckelt). Und wieder haben wir helle Farben verwendet, um schnell die Aufmerksamkeit des Nutzers zu erhalten.

uxpin7
(Grafik: UXPin)

Auch wenn es sich manipulativ anfühlt, der Einsatz von psychologischen Triggern ermöglicht dir, deine Fähigkeit, den Mensch am anderen Ende des Bildschirms zu erreichen, weiterzuentwickeln.

5. Designe schlicht

Ein weiser Mann hat einmal gesagt „das Design liegt in den Details“. Schlichtheit verstärkt immer die Details. Websites wie Facebook, Twitter und Instagram gedeihen auf diesem menschlichen Moment. Menschen teilen ihr Leben mit anderen Menschen. Das Design und Interface ist einfach nur das Transportmittel, das sie dorthin bringt. Jetzt denk mal an das Design von jeder dieser Websites. All diese Plattformen haben mit einfachen Tools fürs Sharing angefangen, und obwohl sie über die Jahre an Komplexität zunahmen, ist die Kernfunktion immer noch leicht zu erlernen.

psycho09
(Screenshot: The University of Sydney)

Fang mit einfachen visuellen Elementen an:

  • Farbe: Bleib bei ein oder zwei Farben, die sich stark kontrastieren. Behalte kulturelle Gesichtspunkte im Hinterkopf, vor allem, wenn deine Website für ein internationales Publikum designt wird.
  • Typografie: Die erste Regel für Typografie ist, dass sie leserlich sein muss (Buchstaben sollten leicht zu erkennen sein) und lesbar (Worte und Sätze sollten leicht verständlich sein). Alle Texte im Body sollten in einer Schriftgröße gesetzt sein, die komfortabel fürs Auge ist. Fang mit einem Sans-serif-Stil an und lass viel Platz zwischen den Zeilen. Für den besten visuellen Komfort achte auf die Größe und die Anzahl der Buchstaben pro Zeile.
  • Raum: Mehr Raum macht ein Design offen und einladend. Beengtes Lettering und Elemente, die zu nah beieinander stehen, fühlen sich chaotisch und störend an. Es ist dennoch ein schwieriger Balanceakt, weil große Weißräume manchmal das Gefühl vermitteln, dass etwas fehlt. Ein guter Ansatz ist, Elemente von deinem Design zu entfernen bis es wegbricht, und sich dann bis zur Schwelle zurückzuarbeiten.
  • Microinteractions: Design-Interaktionen und Benachrichtigungen funktionieren auf eine fast unsichtbare Weise. Wie eine einfache Hover-Animation fügen sie visuellen Glanz hinzu, während sie gleichzeitig dem Nutzer sofortiges Feedback geben. Folge den 12 Prinzipien der Animation.

Ein Vorentwurf für dein Design ist eine gute Art zu sehen, ob diese visuellen Elemente funktionieren oder nicht. Während du das tust, schau wo du etwas weglassen kannst, denn wie das alte Sprichwort sagt: „Weniger ist mehr“.

Fazit

Designs mit menschlichem Touch fühlen sich einfach richtig an. Es ist vielleicht schwer zu erklären, aber es ist unbestreitbar mächtig. Denk an Interaktionen zwischen Menschen. Die meiste Kommunikation passiert unter Verwendung von gebräuchlichen Sprachen, wie etwa Reden oder Körperhaltung und Gesten. Es ist nutzbare Kommunikation.

Und es ist genau das gleiche, wenn es um das Designen einer Website oder App geht. Im Grunde liegt der Zweck darin, dem Nutzer etwas zu kommunizieren. Eine einfach, leicht verständliche Methode für diese Kommunikation zu entwickeln, ist der schnellste Weg zum Erfolg.

Dieser Artikel erschien zuerst auf englischer Sprache auf The Next Web, Übersetzung: Anja Braun.

Über den Autor:

17da04fbbc1d65f0beefecc1a1a9517fJerry Cao ist UX-Content-Stratege bei der Wireframing- und Prototyping-App UXPin. Um mehr über die Techniken zu Perfektionierung der Kunst und Wissenschaft des Webdesigns zu lernen, empfiehlt er sein kostenloses E-Book „Web Design Best Practises“.

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen