Bild-fokussiertes Design: Ist grösser besser?
Grosse Bilder sind optisch ansprechend, aber sie können die User Experience beeinträchtigen, wenn ihnen nicht angemessene Priorität zugewiesen wird.
by Kathryn Whitenton (deutsche Übersetzung) - 28.09.2014
Wie das Sprichwort sagt - Ein Bild sagt mehr als tausend Worte. Wir sind visuelle Wesen und Bilder können ein kraftvolles Mittel sein, die Aufmerksamkeit des Nutzers zu gewinnen und eigene Botschaften zu kommunizieren. Seitdem Netzwerke und Geräte fähig sind grosse Bilder besser darzustellen, integrieren mehr und mehr Webseiten riesige, ins Auge springende Bilder. Oftmals ist es auch so, dass sie sich nicht für ein Bild entscheiden können, sondern mehrere Bilder in einem Karussell darstellen.
Die neue Website der Southwest Airlines veranschaulicht diesen Trend: Der Schwerpunkt der Seite bildet eine schöne Landschaft mit reizvollen Hügeln in Herbstfarben, die den gesamten Hintergrund der Seite ausfüllt.
Die neu gestaltete Homepage der Southwest Airlines weist ein grosses Bild als Seitenhintergrund auf; die Suche nach Flügen befindet sich unten auf der Seite.
Emotionale Reaktion
Die Begründung für diese Vorgehensweise ist, dass überzeugende Bilder die einzigartige Fähigkeit haben, ihr Zielgruppe zu inspirieren und sie für sich zu gewinnen. In seinem Buch Emotional Design (engl.) beschreibt Don Norman die starke, emotionale Reaktion, welche Menschen auf visuelle Erscheinungsbilder haben. Websites können positive emotionale Reaktionen bei Menschen hervorrufen, indem sie ästhetisch ansprechende Bilder darstellen – schöne Landschaften, schnittige Produkte und attraktive Menschen. (Mehr über das Thema emotionales Design erfahren Sie in unserem Kurs The Human Mind and Usability (engl.))
Aber die emotionale Erscheinung ist nicht die einzige Anforderung für eine gute User Experience. Websites müssen den Nutzern auch Inhalte und Funktionen liefern.
Das Bild des neuen Southwest Designs ist ansprechend, aber einem einzelnen Designelement so viel Bedeutung zu widmen, heisst notwendigerweise, dass die anderen Elemente von den Nutzern weniger stark wahrgenommen werden - und dass, obwohl einige wichtigen Zwecken dienen könnten.
Die gesamte Homepage von Southwest ist so gestaltet, dass die volle Aufmerksamkeit auf das Bild gelenkt wird: Die Top-Navigationslinks sind klein und haben keine Hintergrundfarbe; die Suchfunktion wird durch ein Lupen-Icon anstatt eines Suchfeldes dargestellt und selbst der Button Jetzt buchen ist in dezenter Ausführung ohne Hintergrundfarbe gehalten, wodurch er sich nicht vom Hintergrund abhebt. Am allerwichtigsten jedoch ist zu erwähnen, dass die Funktion zur Flugsuche einige Zentimeter weiter unten zu finden ist, um das Bild nicht zu stören. Dies führt dazu, dass viele Nutzer den Button zur Flugsuche gar nicht sehen, ausser wenn sie nach unten scrollen.
Vergleicht man die neue Homepage von Southwest Airlines mit dem früheren Design, so werden die Vor- und Nachteile dieses Ansatzes deutlich. Die Homepage von Southwest war vor ihrer Umgestaltung, genauso wie bei vielen anderen Fluglinien auch, durch viele verschiedene Werbebanner und Aktionsangebote überladen. Der Hintergrund war kaum erkennbar, weil dieser durch Text, Links und Widgets verdeckt war. Jedoch hat die Suchfunktion für Flüge die linke obere Ecke eingenommen - dort wohin viele Nutzer einer Webseite zuerst ihren Blick richten (jedenfalls in den Kulturen, die von links nach rechts lesen).
Vor der jüngsten Umgestaltung war die Homepage der Southwest Airlines überladen, aber die Positionierung der Flugsuche in der oberen linken Ecke ermöglichte ein schnelles Auffinden dieses wichtigen Elementes.
Im Vergleich hierzu macht die mobile Homepage von Southwest ihre wichtigsten Inhalte und Funktionen leichter auffindbar. Das Durcheinander ist verschwunden und die vier wichtigsten Aufgaben sind nur einen Klick entfernt, genauso wie Reisehinweise (obwohl deren Positionierung und Ähnlichkeit mit Werbung das Risiko für sogenannte Banner-Blindheit mit sich bringt). Dieses Design nutzt ebenfalls ein grosses Hintergrundbild, aber die Buttons haben genauso viel optischen Einfluss wie das Bild, welches trotz seiner Grösse die Homepage nicht dominiert.
Die mobile Version der Southwest Airlines Homepage macht es einfacher die Inhalte zu lesen, zu finden und zu nutzen als dies auf der Desktop Version möglich ist.
Wann ist Bild-fokussiertes Design angemessen?
Die Entscheidung, welcher Ansatz der Beste für Ihre Website ist, ist eine Frage der Prioritätensetzung. In den meisten Fällen hat ein Webauftritt unterschiedliche Ziele sowie Zielgruppen. Die Aufmerksamkeit der Betrachter mithilfe ansprechender Bilder zu erregen, lohnt sich sicher, hat aber den Preis, dass andere Elemente schwieriger zu erkennen und zu nutzen sind.
Auch die Apple Homepage legt den Schwerpunkt auf ein einziges grosses Bild - aber dieses Bild zeigt ihre neuesten Produkte und wird durch einen dominanten Navigationsbalken mit Zugang zu allen Bereichen der Seite komplettiert. Das Bild stellt dem Nutzer zudem hilfreiche Informationen bezüglich der relativen Grösse der beiden neuen Telefonmodelle zur Verfügung.
Die Apple Homepage zeigt ein grosses Bild ihrer neuesten Produkte - begleitet von einem Navigationsbalken mit einem starken visuellen Eindruck, da dieser einen deutlichen Kontrast zu dem hellen Seitenhintergrund bildet.
Die Homepage der Microsoft Suchmaschine, Bing, ist ein weiteres Beispiel für eine extreme Fokussierung auf eine Bilderwelt mit ihrem ständig wechselnden Hintergründen. Aber eine Website, die sich ausschliesslich der Suche widmet, unterliegt ganz anderen Designvorgaben als die meisten anderen Websites. Die höchste Priorität dieser Seite liegt darin den Nutzern das Suchfeld zu präsentieren und es besteht kaum Notwendigkeit andere Elemente durch Design hervorzuheben. Diese Seite funktioniert, da sich das grosse weisse Suchfeld klar und deutlich vom Hintergrundbild abhebt.
Die Homepage von Microsofts Suchmaschine Bing zeigt ein grosses Bild als Seitenhintergrund.
Ein ausgewogener Ansatz ist für die meisten Websites am besten
Die meisten Sites fahren am besten mit einem ausgewogenen Ansatz: mit Bildern, welche die Marke unterstützen, ohne andere wichtige Inhalte zu verdecken. Zum Beispiel zeigt die Homepage von StateFarm ein grosses Bild zum Thema Fahren, einem bedeutenden Geschäftsbereich des Unternehmens. Trotzdem erscheint dieses Bild durch starke Navigationselemente und Ausgangspunkte für allgemeine Aufgaben, einschliesslich Einloggen, Angebotsanfragen und Abwicklung von Versicherungsansprüchen ausgewogen.
Die Homepage der State Farm präsentiert ein fesselndes Bild, aber priorisiert auch die Hauptmerkmale.
Wie können Sie sicherstellen, dass Sie Bilder angemessen einsetzen
Befolgen Sie diese Schritte, um sicherzustellen, dass Sie die richtige Balance Ihrer Elemente erzielen:
- Identifizieren und priorisieren (engl.) Sie alle Ziele Ihrer Seite - beide Ziele, sowohl diejenigen des Kunden als auch Ihres Unternehmens (einschliesslich der Markenziele). Ist die Site in erster Linie ein Marketing-Instrument, um Ihre Marke aufzubauen? Oder sind die meisten Besucher bereits mit ihrer Organisation vertraut (oder zumindest mit Ihrer Branche) und brauchen nun konkrete Inhalte oder Funktionen?
- Legen Sie fest, wie jedes Designelement mit diesen Zielen verbunden ist. Normalerweise sind Bilder von dekorativer Natur und unterstützen die Branding Ziele. Steuerung und strukturierte Suche beziehen sich auf spezifische Anwender-Aufgaben.
- Passen sie die Bedeutung Ihrer Bilder der Wichtigkeit der Ziele an. Wenn ein Designelement ein vorrangiges Ziel unterstützen soll, so sollte es mehr visuelle Bedeutung haben; umgekehrt sollten zweitrangigen Zielen weniger bedeutende Designelemente zugesprochen werden. (Diese Vorgabe ist naheliegend, aber wird häufig komplett missachtet oder geht auf dem Weg verloren, eine "modern" aussehende Webseite gestalten zu wollen.)
- Wählen Sie Bilder, die eine starke Beziehung zu ihren Markenzielen aufweisen. Bedenken Sie, der Zweck Ihrer Seite ist nicht ausschliesslich Bilder zu präsentieren (ausser Sie heissen Flickr). Die von Ihnen ausgewählten Bilder sollen stattdessen die Zielsetzung Ihrer Seite verdeutlichen.
- Wählen Sie auffällige Bilder die Aufmerksamkeit erregen. Bestimmen Sie zunächst die Zielsetzung Ihrer Bilder, deren Bedeutung in Bezug auf andere Designelemente und die Bildarten, die auf diese Ziele Bezug nehmen - erst dann sollten Sie ihr Augenmerk darauf legen, das überzeugendste Bild zu finden.
- Seien Sie beim Update Ihrer Seite wählerisch welche Trends Sie folgen wollen. Einer Webseite einen 'modernen' Look zu geben, scheint das wichtigste Ziel der meisten Neu- und Umgestaltungen zu sein. Es gibt jedoch viele Wege dieses Ziel zu erreichen. Typografie, Layout und Unternehmensfarben - um nur einige zu nennen - können alle effektiv genutzt werden, um einen modernen Look und Charakter zu erschaffen, während sie gleichzeitig den wichtigsten Funktionen der Seite ihren angemessenen Stellenwert geben.
Erfahren Sie mehr
Unser Tagesseminar auf Top Web UX Design Guidelines (engl.) untersucht, wie Sie die Ziele für Ihre Webseite identifizieren und priorisieren.
© Deutsche Version. Institut für Software-Ergonomie und Usability AG. Alle Rechte vorbehalten.
Kommentare auf diesen Beitrag