7 UX-Tipps für visuellen Content: Bilder & Co. auf Webseiten optimal einsetzen
Ob Conversions, Seitenaufrufe oder Verweildauer: Ein gutes Nutzererlebnis (User Experience, UX) ist maßgeblich, wenn ihr eure Website-Ziele erreichen wollt. Dazu gehört auch der Einsatz von Bildern, Fotos, Infografiken & Co: Dieser visuelle Content wird oft als "schmückendes Beiwerk" unterschätzt. Wie ihr ihn aus UX-Sicht bestmöglich nutzt, schildert ein englischsprachiger Artikel der Nielsen Norman Group. Hier kommt meine angereicherte Zusammenfassung.
|
| 7+1 UX-Tipps für visuellen Content auf Webseiten |
Die Nielsen Norman Group betont, dass bereits wenige aussagekräftige visuelle
Inhalte die Website-UX unterstützen. Sieben Tipps auf einen Blick:
7 UX-Tipps für visuellen Webseiten-Content
1. Nutzt visuellen Content mit klarem Mehrwert ↓
Ob Bilder, Fotos, Infografiken, Illustrationen, Videos oder Diagramme: Studien der Nielsen Norman Group zeigen, dass User*innen visuelle Inhalte auf einer Webseite eher fokussieren, wenn diese die textlichen Inhalte verstärken.
Nutzt deshalb visuellen Content, der aussagekräftig die Hauptbotschaften eures textlichen Contents begleitet und unterstützt.
➤ Hinderlich sind rein dekorativ-visuelle Inhalte, die nichts aussagen.
➤ Ein wahrer "Negativ-Klassiker" sind Bilder beliebig austauschbarer schöner Menschen, die substanzlos durch die Gegend grinsen. Diese sogenannten Stock-Fotos sehen User*innen gefühlt auf jeder dritten Seite im Web – zu völlig unterschiedlichen Themen.
Weil diese "Stock-Content-Pandemie" im World Wide Web so gruselig ist, hier
nochmal mit Nachdruck als separater Tipp:
2. Vermeidet Stock-Content ↓
Das englische Wort "stock" bedeutet "Vorrat" oder "Lager". Es steht auch für das Präfix "Standard-" (wie zum Beispiel in "Standard-Lösung").
Stock-Fotos, -Illustrationen und -Videos werden massenhaft auf Vorrat produziert. Bekannte Portale sind unter anderem Shutterstock, iStock, Pixabay oder Unsplash.
Dieses Bildmaterial ist beliebig austauschbar und unterstreicht in den seltensten Fällen den textlichen Inhalt eurer Webseiten. Mehr noch: Euer Online-Auftritt unterscheidet sich auf den ersten Blick so nicht von denen eurer Mitbewerber, wenn diese ebenfalls Stock-Material nutzen.
Eselsbrücke: "stock" bedeutet im Englischen auch "abgedroschen" – was den Charakter von Stock-Content treffend beschreibt.
Auch euer Blogger ist seit einigen Wochen dazu übergegangen, auf nichtssagende
dekorative Bilder zu verzichten und stattdessen informative Schaubilder zu
nutzen (Tool-Tipp: Piktochart).
3. Produkte in realistischem Kontext zeigen ↓
Für herstellende Unternehmen gilt: Zeigt eure Produkte auf der Website in einem
realistischen Nutzungskontext. Dies macht sie für Website-Besucher*innen
deutlich selbsterklärender und einprägsamer.
4. Platziert euer Bildmaterial nah bei relevantem Text ↓
Je besser visueller und textlicher Content inhaltlich harmonieren, desto
positiver die User Experience eures Online-Auftritts. Was nah beieinander
erscheint, sollte auch inhaltlich zusammengehören – und das auf allen
Bildschirmgrößen (Stichwort Responsive Design).
5. Vermeidet zu viel Bildmaterial ↓
Die Nielsen Norman Group betont: Zu viel visueller Content lenkt User*innen ab
und entwertet die einzelne visuelle Information. Weniger ist mehr.
6. Nutzt hochauflösende Fotografien ↓
Eigentlich selbstverständlich, oder? Und dennoch begegnen einem auf Websites
teils verschwommene und/oder pixelige Fotografien. Auch hier: Checkt die
Qualität eurer Website-Fotos auf Endgeräten aller Größen.
7. Bedenkt kulturelle Unterschiede ↓
Wenn es um die Interpretation von visuellem Content geht, ticken User*innen aus verschiedenen Kulturbereichen sehr unterschiedlich. Je internationaler euer Online-Auftritt ausgerichtet ist, desto stärker solltet ihr dies beachten.
Es gibt die Legende eines Waschmaschinen-Herstellers, der eine weltweite Werbekampagne mit folgendem visuellen Content fuhr:
- links das Foto eines Haufens schmutziger Wäsche,
- in der Mitte das Foto der zu bewerbenden Waschmaschine,
- rechts das Foto eines Haufens sauberer Wäsche.
Problem dieses Bildmotivs: Es gibt weltweit mindestens 25 Länder, in denen von rechts nach links geschrieben und folglich auch gelesen wird.
Weitere sensible Bereiche, wenn es um kulturelle Missverständnisse bezogen auf visuellen Content geht:
- Körpersprache / Gestik
- Religiöse Symbole
- Farbe
Visueller Content auf Websites: Arbeitet mit User-Tests
Bilder, Fotos, Infografiken, Illustrationen, Videos: Ob die visuellen Elemente auf eurer Website verständlich und hilfreich sind, sagen euch die Menschen, die euren Online-Auftritt nutzen sollen – eure Zielgruppe.
User-Tests sind schnell auf- und umgesetzt. Gute kostenlose Vorlagen findet ihr zum Beispiel auf benutzerfreund.de, der Website es deutschen UX-Experten Jens Jacobsen.
Wichtig: Zeigt den Testpersonen die visuellen Elemente nicht isoliert, sondern stets im Gesamtkontext der Seite.
Die Nielsen Norman Group empfiehlt, bei entsprechenden Tests die Testpersonen nicht direkt zu den visuellen Elementen zu befragen. Stattdessen sollen sie auf der Website eine realistische Aufgabe erledigen, die sie auf die Seite mit den zu testenden visuellen Elementen führt.
Eine realistische Aufgabe wäre zum Beispiel, eine Conversion auf der Website durchzuführen:
- etwas kaufen (Online-Shop)
- etwas herunterladen
- sich anmelden (zu einem Event)
- Newsletter abonnieren
- Kontaktdaten abgeben
- sich bewerben
Während des Tests solltet ihr darauf achten, ob die User*innen von sich aus die visuellen Elemente erwähnen. Falls nicht, solltet ihr Anschlussfragen zur untersuchten Seite stellen – erneut, ohne die visuellen Elemente ausdrücklich zu nennen. Ziel ist es, indirekt herauszufinden, ob die visuellen Elemente der Seite den User*innen halfen, ihre Aufgabe zu lösen.
Die Nielsen Norman Group empfiehlt unter anderem folgende weitere User-Testing-Methoden:
➤ 5-Sekunden-Tests: Hierbei zeigt ihr der Testperson fünf Sekunden lang eine Webseite mit dem zu testenden visuellen Element. Anschließend bittet ihr die Person zu beschreiben, was sie gesehen hat.
➤ A/B-Tests: Ihr erstellt zwei Varianten derselben Seite mit derselben
Conversion (zum Beispiel Kaufabschluss, Download, Anmeldung,
Kontaktdaten-Abgabe oder Bewerbung). Beide Varianten der Webseite
unterscheiden sich einzig in einem visuellen Element (Version A, Version B).
50 Prozent eurer Website-Besucher*innen spielt ihr Version A aus, den anderen
50 Prozent Version B. Anhand der Conversion-Rate könnt ihr ablesen, welches
visuelle Element den Conversion-Prozess besser unterstützte.
Visueller Content auf Webseiten: Definitiv mehr als nur schmückendes Beiwerk
Hohle Stock-Fotos, nichtssagende dekorative Bilder, ablenkende Bewegtbilder ohne klare Aussage: Macht es besser als viele andere Websites und bietet visuelle Elemente mit echtem Mehrwert für eure Besucher*innen.
Bitte immer bedenken: Niemand surft im Web, um Online-Auftritte zu bestaunen wie Kunstwerke im Museum. User*innen surfen flüchtig. Sie wollen schnell Antworten finden oder Aktionen durchführen. Intelligent ausgewählte visuelle Elemente machen euren Online-Auftritt selbsterklärender und aktivierender.
Quelle:
-
nngroup.com:
7 Tips for Memorable and Easy-to-Understand Imagery
Link-Tipps:
Kommentare