Ästhetik und Wahrnehmung – Wie man sich der Bildsprache der Benutzererfahrung nähert

Veröffentlicht: 2022-03-11

Wenn es um UX-Design und Bilder der Benutzererfahrung geht, ob auf Websites, mobilen Anwendungen oder anderen digitalen Produkten, wählen viele Designer Bilder nach ihrem persönlichen ästhetischen Sinn aus und kombinieren sie auf sinnvolle Weise mit Mikrokopien und dem Rest der Benutzeroberfläche in Bezug auf den Produktzweck und das Branding.

Das beliebte Sprichwort „Ein Bild sagt mehr als tausend Worte“ gilt seit dem frühen 19. Jahrhundert und wird im Allgemeinen Fred R. Barnard zugeschrieben, der diesen Satz in einem Artikel schrieb, der die Verwendung von Bildern in Anzeigen förderte, die an den Seiten erschienen von Straßenbahnen. In vielen Zusammenhängen haben Bilder die Kraft, beim Benutzer eine emotionale Reaktion hervorzurufen; Dies kann wertvoll sein, um den Markenzweck zu verdeutlichen, das Wertversprechen des Produkts zu stärken und die Attraktivität der Website oder mobilen App zu steigern.

Ein Bild kann eine Nachricht sofort übermitteln, da das Gehirn sie schneller interpretieren kann als Text, und einer Nachricht Tiefe und Kontext verleiht, wodurch eine immersivere Erfahrung als Text allein ermöglicht wird. Wenn Designer wissen, wie man mit Bildern arbeitet, können sie die emotionalen Reaktionen eines Publikums besser manipulieren. Produktdesigns können mit der Qualität ihrer Bilder zur Benutzererfahrung steigen oder fallen – deshalb ist es wichtig, es richtig zu machen.

Abgesehen von Websites und mobilen Anwendungen sind Bilder in allen Arten von Produktdesigns wichtig. Wie Rachel Krause (User Experience Specialist bei der Nielsen Norman Group) in 6 Rules for Persuasive Storytelling feststellt, können Bilder in relevante Fallstudien, Diagramme und Fotos aus Usability-Tests integriert werden, um dem Publikum etwas zu geben, mit dem es sich jenseits der Worte verbinden kann .

Kim Flaherty (UX-Spezialist bei der Nielsen Norman Group) erklärte auch, dass jüngste Untersuchungen gezeigt haben, dass Newsletter-Empfänger dieselben hochwertigen Bilder erwarten, denen sie im Internet begegnen, und dass sie Bilder bevorzugen, die in einem größeren Maßstab zu sehen sind und Details sehr deutlich zeigen.

Ein tiefgreifendes Verständnis der Verwendung von Bildern und ihrer psychologischen Auswirkungen auf die Benutzerwahrnehmung und Benutzererfahrung ist ein wichtiger Aspekt des Designs, den UX-Designer nicht unterschätzen sollten.

Sunkist verwendet viele sensorische Bilder auf ihrer Website.
Die Sunkist-Website verwendet starke visuelle Bilder, die auch Geschmacks- und Geruchssinne auslösen können.

Sinnesbilder im Design

In jüngster Zeit hat der Bereich des sensorischen Marketings die Aufmerksamkeit der Unternehmenswelt und der akademischen Welt auf sich gezogen, hauptsächlich in den Bereichen Marketing und Psychologie. In dem Buch Sensory Marketing: Research on the Sensuality of Products definiert Aradhna Krishna sensorisches Marketing als „unterbewusste Auslöser, die beeinflussen, wie Menschen Kauf- und Konsumentscheidungen treffen“. Diese Aussage gilt für Produktdesignprojekte genauso wie für das Marketing.

Laut dem Autor können sensorische Bilder das Produktdesign beeinflussen durch:

  • Förderung der mentalen Stimulation durch visuelles Design
  • Menschen mit einer Marke begeistern
  • ihre Einstellung zur Marke beeinflussen
  • Stimulierung anderer Sinne (z. B. Geruch) durch visuelle Gestaltung

Stärkung der mentalen Simulation durch Bilder

Mit Slogans wie „Think different“ (Apple) und „Just do it“ (Nike) ermuntern Marketer und Designer die Verbraucher schon lange, ihrer Fantasie freien Lauf zu lassen. Diese einfachen und einprägsamen Sätze verleiten die Menschen jedoch nicht automatisch dazu, sich vorzustellen, das Produkt zu verwenden, ohne sie ausdrücklich darum zu bitten.

Laut Studien zu Kognition und Wahrnehmung (oben erwähnt) wurde festgestellt, dass die bloße Veränderung der visuellen Präsentation eines Produkts die Menschen dazu anregt, sich vorzustellen, mit dem Produkt zu interagieren, und folglich die Möglichkeit eines Kaufs erhöht.

Bilder zur Benutzererfahrung.
Blue Sky Fibers verwendet Bilder in seiner Kopfzeile, die einen Tastsinn hervorrufen können und die Benutzer dazu einladen, sich vorzustellen, wie sie das Produkt halten.

Sorgfältig ausgewählte Bildsprache kann die Wahrnehmung eines Produkts durch Menschen erheblich beeinflussen, die Markennähe effektiv erhöhen oder sich in Situationen negativ auswirken, in denen Menschen auf Bilder stoßen, die nicht zu ihnen passen.

Wenn beispielsweise eine Immobilien-Website auf mittelständische Kunden abzielt und das folgende Beispiel einer offensichtlich sehr gehobenen, teuren Villa als Hintergrund verwendet, kann dies möglicherweise die Verbindung zwischen den Zielbenutzern und dem Unternehmen beeinträchtigen. Dadurch entsteht eine Lücke zwischen der Marke und der Art und Weise, wie Benutzer sie wahrnehmen.

UX-Bilder.
Bilder übermitteln Nachrichten schneller als Text, aber wenn das Bild nicht zur Marke passt, kann es für Benutzer abschreckend sein.

Aufmerksamkeit, Empfindung und Wahrnehmung

Der Ausgangspunkt für das Verständnis des menschlichen Realitätsbezugs liegt in den psychologischen Prozessen der Aufmerksamkeit, Empfindung und Wahrnehmung.

Aufmerksamkeit ist ein mentaler Prozess, der bestimmte Reize auswählt, auf die man sich konzentrieren soll, und Beziehungen zwischen ihnen herstellt. Bei kluger Anwendung werden diese Reize strategisch platziert, um die Aufmerksamkeit des Betrachters auf bestimmte Informationen zu lenken. Es ist wichtig, die bestmöglichen Bilder für die Benutzererfahrung auszuwählen, da die Augen der Menschen jeden Tag auf Dutzende von Anzeigen und Websites gelenkt werden, und nur wenige werden ihre Aufmerksamkeit erregen.

Lev Semenovitch Vygotsky, ein sowjetischer Psychologe, behauptet, dass die menschliche Psyche Empfindung als einen Prozess besitzt, der direkt auf die subjektive Realitätsbildung einwirkt, der das Subjekt ausgesetzt ist, und eine wichtige Rolle in der Beziehung der Menschen zur Welt spielt. Darüber hinaus gibt es synästhetische Empfindungen, die gekennzeichnet sind, wenn zwei oder mehr Empfindungen zusammen erlebt werden und im Allgemeinen Assoziationen zwischen Objekten und Empfindungen hervorrufen. Zum Beispiel wird Rot oft als „leidenschaftliche“ Farbe angesehen und Coca-Cola verwendet sie häufig in ihrem Branding.

UX-Ästhetik im UX-Design mit sensorischen Bildern.
Coca-Cola verwendet Rot, um den Wert des Markenversprechens und die Markennähe zu erhöhen.

Die menschliche Wahrnehmung bezieht sich auf die Gehirnfunktion, die in der Lage ist, Informationen auszuwählen und Bedeutungen zuzuweisen, die durch Empfindungen erfasst werden, die durch Assoziationen mit Erfahrungen, denen die Person bereits begegnet ist, gemacht wurden. Dies kann auch als mentales Modell bezeichnet werden.

Es ist wichtig zu verstehen, dass Gruppen von Menschen nicht immer gleich denken, insbesondere wenn Sie unterschiedliche Kulturen, soziale Schichten und Altersgruppen berücksichtigen. Das folgende Bild könnte ein großartiges Beispiel für Spaß und Abenteuer sein, solange das Publikum aus jungen Menschen besteht, die gerne reisen – vielleicht nicht so sehr, wenn es sich um Eltern handelt, die den Stress des Reisens mit Kindern und allem, was dazugehört, erlebt haben. In diesem Fall würde eine gründliche Benutzerforschung Erkenntnisse liefern, die Designern helfen würden, die beste Art von Bildsprache für eine bestimmte Zielgruppe auszuwählen.

UX-Bilder im UX-Design.
Eine der besten Möglichkeiten, das perfekte Bild zu finden, ist ein tiefes Verständnis der Zielbenutzer.

User Experience Imagery als Werkzeug zur Steigerung der Usability

In der Forschungsarbeit Designing mobile Interfaces for novice and low literacy users stellen die Autoren fest, dass Bildsprache auch Menschen mit geringer Alphabetisierung unterstützt, die Benutzerfreundlichkeit des Produkts erhöht und die Benutzererfahrung insgesamt verbessert. Da Analphabetismus oft mit Armut zu tun hat, scannen nicht gebildete Benutzer Schnittstellen anders, hauptsächlich basierend auf visuellen Elementen, und konzentrieren sich auf die Mechanik.

Eine von Andrew Thatcher durchgeführte Studie untersuchte das Verhalten von gebildeten und halb gebildeten Menschen bei der Verwendung von Geldautomaten und einer alternativen symbol- und sprachbasierten ATM-Schnittstelle. Laut dem Autor zeigten die Menschen eine Tendenz, eine symbolbasierte ATM-Schnittstelle gegenüber anderen Optionen zu bevorzugen. Dies korreliert möglicherweise nicht speziell mit Bildern, zeigt jedoch, dass visuelle Elemente besser verstanden werden als textbasierte Schnittstellen.

Obwohl sich diese Forschung speziell an Benutzer mit geringer Lesefähigkeit richtete, ist es wichtig zu verstehen, dass Bilder und visuell basierte Schnittstellen sich positiv auf Benutzer im Allgemeinen auswirken, nicht nur auf Menschen mit Leseschwierigkeiten. Zum Beispiel können gut ausgewählte Bilder es den Benutzern ermöglichen, Informationen schneller zu scannen und aufzunehmen, wodurch sie den Zweck des Produkts schneller verstehen. Eine ausgezeichnete Möglichkeit, dies zu überprüfen, ist die Anwendung einer Methode, die als Fünf-Sekunden-Test bekannt ist.

UX-Ästhetik - wie man Bilder verwendet.
Straßenschilder verwenden seit langem Symbole und Bilder, um den Fahrern schnell Bedeutung zu vermitteln, unabhängig von ihrem Alphabetisierungsniveau (oder ihrer Reisegeschwindigkeit).

Ein tieferes Verständnis der angewandten Psychologie in der Produktästhetik

Da optisch ansprechende Designs als einfacher zu verwenden empfunden werden, ist es als Designer wichtig, solche zu erstellen. Außerdem werden ästhetische Designs leichter akzeptiert, häufiger verwendet und fördern kreatives Denken und Problemlösen. Gemäß den Universal Principles of Design fördern ästhetische Designs auch positive Beziehungen zu den Benutzern und machen sie toleranter gegenüber Usability-Problemen innerhalb eines Designs.

Der Ästhetik-Usability-Effekt

Typischerweise haben ästhetische Designs eine höhere Interaktionswahrscheinlichkeit. Bilder haben viel mit visueller Attraktivität zu tun und beeinflussen direkt die Wahrnehmung des Benutzers. Wenn ein Produkt benutzerfreundlicher, aber optisch weniger ansprechend ist, kann es unter einem Mangel an Akzeptanz leiden, der Usability-Probleme hinfällig macht.

Nach diesem psychologischen Phänomen sind ästhetisch ansprechende Designs im Allgemeinen intuitiver als weniger ansprechende, und das gilt insbesondere für Benutzer mit einem geringeren technischen Hintergrund. Wenn ästhetische Designs nicht richtig funktionieren, neigen Benutzer außerdem dazu, sich selbst die Schuld zu geben, anstatt das Produkt zu bemängeln.

In diesem Sinne erfreut ein herausragendes Foto oder Video den Nutzer. Diese positive emotionale Reaktion stärkt die Interaktionen des Benutzers mit dem Produkt und die Beziehung zur Marke selbst weiter, während alle Usability-Nachteile kompensiert werden und der Benutzer toleranter wird.

In einem Artikel für die Nielsen Norman Group zitierte Kate Moran Kurosu und Kashimura, die zu dem Schluss kamen, dass Benutzer stark von der Ästhetik einer bestimmten Schnittstelle beeinflusst werden, selbst wenn sie die zugrunde liegende Funktionalität des Systems bewerten.

Nehmen Sie zum Beispiel die FitBit-Website. Moran berichtete, dass ein Benutzer während des Usability-Tests beim Einkaufen auf der Website auf viele Probleme gestoßen sei, die von geringfügigen Ärgernissen im Interaktionsdesign bis hin zu schwerwiegenden Fehlern in der Navigation reichten. Der Benutzer konnte die Aufgabe mit einigen Schwierigkeiten abschließen.

Der Benutzer bewertete die Website jedoch sehr hoch in Bezug auf die Benutzerfreundlichkeit und sagte, die Website sehe aus wie das Meer (sehr ruhig), mit großartigen Farben und hervorragenden Fotos. Die positive emotionale Reaktion, die durch den ästhetischen Reiz der Website erzeugt wurde, trug dazu bei, ihre Usability-Probleme zu verbergen.

Sinnesbilder
Die Homepage von FitBit, die großartige Farben und ein verspieltes Foto verwendet, das ein Gefühl von Bewegung vermittelt.

Der Priming-Effekt

Die Auswahl geeigneter Bilder für eine Benutzeroberfläche geht über die Ästhetik hinaus. Die ausgewählten Bilder müssen die richtige Botschaft und die richtigen Werte vermitteln. Da das menschliche Gehirn ständig mit Assoziationen zu tun hat, können Bilder als mächtiges Werkzeug für die Arbeit mit Assoziationen verwendet werden. In dem Buch Thinking, Fast and Slow gab Daniel Kahneman ein überzeugendes Beispiel dafür, wie der Verstand unterbewusst Assoziationen herstellt. Er bat den Leser, sich die folgenden zwei Wörter anzusehen:

Bananen-Erbrechen

Beim Betrachten dieser Worte erlebten die Menschen unangenehme Assoziationen. Ihre Gesichter verzogen sich leicht angewidert, ihr Herzschlag beschleunigte sich und die Haare auf ihren Armen stellten sich ein wenig auf. Kurz gesagt, sie reagierten auf „Erbrechen“ mit einer abgeschwächten Version dessen, wie sie auf das tatsächliche Ereignis reagieren würden, ganz automatisch, außerhalb der Kontrolle der Person – rein durch die Assoziation von Ideen. Aber die Auswirkungen können darüber hinausgehen, da Menschen das Wort „Banane“ mit den negativen Konnotationen von „Erbrechen“ in Verbindung bringen.

Priming ist ein impliziter Gedächtniseffekt, bei dem die Exposition gegenüber einem Stimulus die Reaktion auf einen späteren Stimulus beeinflusst. Designer können auch mit Bildern arbeiten, indem sie nicht nur daran denken, wie die Schnittstelle visuell ansprechend wäre, sondern auch in Bezug auf die Nachrichtenübermittlung, Benutzerwahrnehmung, Benutzerinteraktion und Manipulation ihrer Ideen durch gut konstruierte Assoziationen.

In Priming and User Interfaces von der Nielsen Norman Group stellt der Autor fest, dass „Bilder und Seiteninhalte Menschen dazu bringen, Erwartungen an die Website zu bilden. Wenn diese Annahmen weiter bestätigt werden, ist die Gesamterfahrung reibungslos und angenehm. Wenn sich die Annahmen jedoch als falsch erweisen, nehmen die Leute oft wahr, dass die Website eine schlechte Benutzerfreundlichkeit hat.“

In dem Artikel wurde auch das folgende Beispiel vorgestellt, das eine Homepage einer Privatschule zeigt, die Bilder von kleinen Kindern zeigt, die den Eindruck erwecken, dass die Schule eine Vorschule oder nur für die ersten Grundschulklassen ist. In Wirklichkeit umfasst die Schule bis zur 8. Klasse.

Ästhetische Wirkung mit Bildern der Benutzererfahrung.
Die Fotos von kleinen Kindern auf der Website der Challenger School verleiten Benutzer zu der Annahme, dass sie nicht für ältere Schüler geeignet sind.

Zusammenfassung

Bilder können ein mächtiges Werkzeug sein, wenn sie verwendet werden, um die Wahrnehmung und Benutzererfahrung von Menschen zu beeinflussen. Wenn ein effektives Bild für das Design ausgewählt wird, kann es die Attraktivität eines Produkts erhöhen, den Geschäftswert stärken, den Umsatz und die Lead-Generierung steigern, dazu beitragen, das Scannen von Schnittstellen und Informationen zu beschleunigen, das Publikum zu begeistern und die Empathie zwischen Verbrauchern und der Marke zu verbessern.

Sobald Designer die wichtigsten psychologischen Phänomene und die Funktionsweise der Köpfe der Menschen besser verstehen, können sie bessere Produkte schaffen, die für die Menschen wirklich Sinn machen und gleichzeitig das Geschäft selbst positiv beeinflussen.

• • •

Weiterführende Literatur im Toptal Design Blog:

  • Brand Illustration 101: Visualisierung der Erzählung
  • Designpsychologie und die Neurowissenschaft von Awesome UX
  • Überzeugendes Design: Fortgeschrittene Psychologie effektiv nutzen
  • Eine Schritt-für-Schritt-Anleitung zum Entwerfen benutzerdefinierter Illustrationen ohne Zeichenkenntnisse
  • Einfluss durch Design – Ein Leitfaden zu Farbe und Emotionen