Um den Anwender von sich oder seinen Produkten / Leistungen zu überzeugen, bleiben einer Webseite meistens nur wenige Sekunden. Dieser zweite Eindruck entscheidet, ob der Anwender weiter auf der Webseite bleibt oder sie verlässt. Je nach Literatur / Studie und je nachdem wie eng man den zweiten Eindruck fasst, kann man hier von ca. zwei bis gar zu zehn Sekunden ausgehen. In diesen ersten Sekunden also, will der Anwender unbewusst folgende Fragen beantwortet bekommen:

• Wo bin ich hier?
• Wo kann ich hin?
• Wo finde ich die Information, die ich suche?

Ergänzt durch die unbewussten Überlegungen, ob die Webseite seriös genug ist und ihr zuzutrauen ist, seine Bedürfnisse und Erwartungen zu stillen.

Welche Bedeutung hat der zweiten Eindruck?

Zum einen möchte der Anwender seinen ersten – hoffentlich schon positiven — Eindruck bestätigt bekommen, da wir unbewusst immer die Bestätigung unser Erwartungen suchen. Entscheidend ist dann die Glaubwürdigkeit der Seite. Trauen wir ihr zu, hier die Informationen zu finden, die ich suche und / oder schnell zu ihr zu kommen!

Was kann der User in den ersten Sekunden überhaupt aufnehmen?

Das so genannte Look & Feel – also das Aussehen und die Anmutung – nehmen wir unbewusst in Sekundenbruchteilen auf (siehe der Erste Eindruck).

Drei unterschiedliche Beispiele für das Look & Feel von Webseiten. Die Inhalte lassen werden zu Beginn noch nicht wahrgenommen, der Eindruck entsteht zuerst aufgrund der Gesamtgestaltung

In den ersten Sekunden scannt der Anwender die Seite erstmal ab, er überfliegt sie. Hier nehmen wir dann aber auch schon erste konkrete Inhalte wahr, die optisch besonders hervor stechen. Das sind meistens das Logo, die Hauptnavigation und da evtl. schon erste Menüpunkte, die ersten Headlines, Headerbilder, Werbebanner, erste Teaserbilder und Call-to-Action-Buttons.

Konsequenz für die Umsetzung:

Um die Seite leicht scanbar zu machen, sollten die Inhalte übersichtlich gestaltet sein und optische Schwerpunkte gesetzt werden. Mit Farbkontrasten und Größenunterschieden können gezielt Highlights gesetzt werden. Ergänzt mit dem Einsatz von Leerraum lässt sich so die Aufmerksamkeit des Betrachters lenken.

Werden dann noch Design-Konvention beachtet, wie beispielsweise die Platzierung des Logos und der Hautpnavigation an den Stellen, wo es der Betrachter erwartet, kann dieser die Seite mühelos, sprich intuitiv, überfliegen.

Da das Look & Feel sehr prägend für den Gesamteindruck ist, sollte die Farbgebung angenehm und die Auswahl der Bilder / Grafiken passend zum Thema der Seite und zu den Erwartungen der Betrachter sein.

Der Anwender wird auch schon erste Inhalte lesen, so dass die Hauptnavigation kurze klare Menüpunkte beinhalten sollte. Zu lange Namen, bzw. eine uneindeutige Benennung lassen sich nicht schnell aufnehmen und verwirren eher.

Die ersten Headlines sollten ebenso prägnant und verständlich sein, evtl. ergänzt mit passenden Bildern. Bilder sind für eine schnelle Aufnahme sowieso am besten geeignet (siehe Serie Bilderwelten). Sie sollten aber auch schon eine klare Botschaft vermitteln und nicht nur Selbstzweck sein. Also entweder entscheidend zum Look & Feel beitragen oder die Aufmerksamkeit des Lesers gezielt lenken und dann spannende Inhalte vermitteln.

Call-to-Action-Buttons fallen nicht nur im Vergleich zu „normalen Links“ besser auf, sie beinhalten auch gleich eine eindeutigen Handlungsaufforderung, was für den Anwender sehr angenehm ist.
Und bisher noch gar nicht erwähnt, beeinflusst den Anwender auch schon die Ladezeit der Seite, bzw. einzelner Inhalte. Grundsätzlich lässt sich sagen, je schneller die Inhalte geladen werden, umso positiver ist der Anwender der Seite gegenüber gestimmt.
Last but not least: Immer an die „menschlichen“ Faktoren denken: Der Anwender entscheidet oft schnell, unbewusst ohne nachzudenken. Er hat nicht viel Zeit, bzw. nimmt sich viel, um die Seite erstmal ausgiebig zu studieren, sondern trifft meistens die erstbeste Entscheidung!

Beispiel zweiter Eindruck — MailChimp

Logo und Hauptnavigation sitzen da, wo der Anwender es erwartet und sind optisch klar hervorgehoben. Großes ungewöhnliches Teaserbild, große Headline mit klarer Aussage, dazu ein markanter Call-to-Action-Button. Darunter eine Headline mit Teaserbildern. Die Elemente für den zweiten Eindruck sind eindeutig optisch hervorgehoben und der Anwender wird nicht überfordert mit Inhalten. Vorbildlich!

Beispiel zweiter Eindruck — web://contact

 Logo und Hauptnavigation sind auch hier wie im ersten Beispiel schnell zu finden — interessant zu sehen, dass das Logo hier rechts steht, beim ersten Beispiel links. Funktioniert also beides! Eine Headline bestehend aus einem einzigen Wort — weniger geht nicht. Auf den Punkt gebracht, nennt man das dann wohl. Großes Teaserbild, die erste Referenz. Diese Elemente — alle in einer grünen Fläche — heben sich somit vom Rest ab. Dann folgt die Subline von viel Weißraum umgeben und ein markanter (Kreis-)Button. Insgesamt sehr übersichtlich und klar strukturiert und die Inhalte lassen sich schnell aufnehmen. Es wird keine Zeit durch unnötige Bilder oder Texte veschwendet. Kompliment!

Beispiel zweiter Eindruck — Versions

Navigation oben, ein rießiges Logo samt kurzer selbsterklärender Wortmarke. Dazu zwei Call-to-Action-Buttons. Fertig ist alles für einen schnellen zweiten Eindruck. Ergänzt noch durch eine Subline, Screenshot und zwei Teasern. Kurz und klar!

Beispiel zweiter Eindruck — cubedroute

Logo und Navigation im roten Balken mit viel Platz klar abgetrennt vom Content. Eine große Headline. Kurz und aussagekräftig. Dann zwei Reihen Headline und Teaserbilder. Wer sich hier nicht schnell einen zweiten Eindruck verschaffen kann… Sehr schön!

Fazit:

Der zweite Eindruck entscheidet, ob sich der Anwender weiter auf der Seite aufhält oder zur nächsten Seite weitergeht, die nur einen Klick entfernt ist. Daher ist seine Bedeutung nicht zu unterschätzen.

Denn bevor der Anwender überhaupt zum groß propagierten „Content is king“ kommt, muss er erstmal überzeugt werden, dass da „königliche“ Inhalte auf ihn warten könnten! Dies geht in erster Linie über optische Gestaltungsmittel in Ergänzung der ersten redaktionellen Inhalte (Navigationspunkte, Headlines, Bildauswahl etc.).

Bilder bei Großunternehmen

Zuerst ein Blick auf einige Großunternehmen. Aufgrund ihrer Präsenz in den verschiedensten Medien (Printanzeigen, Fernsehwerbung etc.) sind ihre Kommunikationsauftritte bekannt, da allgegenwärtig. Die Kampagne „Print wirkt“ des Verbandes Deutscher Zeitschriftenverleger führt seit Jahren vor, wie einprägsam markante Bilderwelten sein können. Voraussetzung dafür ist aber ein entsprechend häufiger Kontakt mit den Motiven durch Werbung (Print und TV), oft sogar über viele Jahre hinweg. Mal schauen, wie es bei den Online-Auftritten ausschaut:

Wempe

Großformatige Bilder, die die Atmosphäre der Wempe-Kommunikation nahtlos aufnimmt, aber auch ohne Kenntnisse der Werbeanzeigen einwandfrei funktioniert. Die Webseite ansonsten wirkt zwar nicht mehr ganz taufrisch, aber darum geht es hier ja heute nicht!
Wempe

Ratiopharm

Rationpharm, gute Preise, gute Webseite? Auf jeden Fall keine guten Bilder! Die Klischee-Zwillinge tauchen nur im Content pixelweise auf. Was ja nicht weiter schlimm wäre, wären die anderen im Header eingesetzten Bilder auch nur ansatzweise markant oder individuell. Aber hier wurde wohl eher Wert darauf gelegt, dass eine Flash-Animation drin ist… Chance verpasst!
Ratiopharm

Ergo

Nein, bei den eingesetzten Bildwelten geht es weder um die in der Werbung vielbeworbene Zahnzusatzversicherung, noch um die zweifelhaften Vertriebsausflüge des Ergo-Vorgängers Hamburg-Mannheimer. Es sind zwar nette Fotos, der Bezug zu Ergo findet aber alleine durch die organischen Formen statt. Immerhin…
Ergo

Jever

Die Umsetzung der Webseite überzeugt zwar nicht, aber das Jever-Land ist sofort zu erkennen. Und das noch in verschiedenen Varianten. Bildwelt top!
Jever

Lufthansa

Ich muss zugeben, die Lufthansa-Anzeigen waren mir erstmal nicht geläufig, obwohl doch irgendwie schon oft gesehen. Aber die Prinzenrolle in Indien auf der Startseite machts da auch nicht besser. Schade!
Lufthansa

Telekom

Da wurde schon der seit Jahren durchs Netz geisternde und immer wieder begeisternde Tilt-Shift-Effekt für die Werbung ausgenutzt, aber auf der Website ist davon leider nichts zu finden. Überhaupt scheint man den Einsatz von Bildwelten anderen zu überlassen. Schade!
Telekom

Edeka

Die Schiefertafeln hat sich Edeka ja zu eigen gemacht, der Rest ist dann ein Potpourri an bunten Bildern. Warum eigentlich?
Edeka

Krombacher

Ich weiß auch nicht warum, aber immer wenn ich die Aggertalsperre sehe, muss ich immer an „Rot vor Silber“ denken. Egal. Die Bilderwelt erscheint zwar irgendwie unscharf, aber wiedererkennbar. So sollte es sein!
Krombacher

Hermes

Hat Hermes eine Bilderwelt? Schaltet Hermes überhaupt Anzeigen? Zumindest das Image könnte besser sein! Egal, das blaue Paket funktioniert super. Sehr hohe Wiederkennung und vielseitig einsetzbar. Geht doch!
Hermes

Postbank

Ein Haufen moderner Bilder, keines mit Wiedererkennungsfaktor. Wenigstens die Farben zeigen einem, mit wem man es hier zu tun hat!
Postbank

Deutsche Bahn

Die Bahn kommt — mit Klischeebildern. Leider nichts eigenes. Schade!
Deutsche Bahn

Fazit Bilderwelten Großunternehmen

Dieser nicht repräsentative Überblick zeigt, dass die Thematik & Bedeutung einheitlicher Bidlerwelten noch nicht wirklich bei den Unternehmen angekommen ist. Offline-Kommunikation und Webseite spielen da noch zu selten Ping-Pong. Ich würde meinen: verschenktes Potential!

Austauschbare Bilderwelten – Fluch & Segen der Bildkataloge

Allgemeine Unternehmensbilder auf Webseiten sind zu oft austauschbar, gerade wenn — oder besser weil — sie aus Bildkatalogen stammen. Für geringe Kosten bekommt man hier professionelle Fotos ohne groß eingeschränkte Nutzungsrechte. Im Vergleich zu früheren Jahren als gedruckte Bildkataloge stundenlang gewälzt wurden, um dann erst die Nutzungsrechte und damit die Kosten zu klären, ein Segen. Als Folge tauchen die ausgewählten Bilder dann aber nicht nur auf der eigenen Seite auf, sondern gleich auf mehreren. Denn fast jedes Unternehmen hat die Idee / Vorstellung von Bildern „mit jungen fröhlichen gutaussehenden Menschen, die nett zuammen vor dem Laptop sitzen und gemeinsam surfen oder ein entspanntes Meeting halten“ oder ähnliches. Man könnte fast meinen, fernab jeglicher Realität! Aber egal, hier wird es eh zum Fluch, denn mit Eigenständigkeit & Wiedererkennungeffekt haben diese Bilder auch selten was zu tun.

Unterscheiden sollte man dann hier das Einsatzgebiet dieser austauschbaren Bilderwelten. Im Header als Erkennungsmerkmal finde ich solche Bilder deplatziert. Hier sind sie in meinen Augen Fluch, zwar kann sicher je nach Motiv eine hohe Emotionalisierung erreicht werden, aber eben keine hohe Wiedererkennung oder Differenzierung. Siehe den Abschnitt oben „Großunternehmen“
Anders sieht das bei den austauschbaren Bilderwelten als Orientierungs-Elemente aus. Als kleine Teaser für Unterseiten oder Artikel, als Ergänzung bei viel Fließtext haben sie durchaus ihre Berechtigung. Aber bitte nur dort!

Beispiele für austauschbare Bilderwelten

(Klick aufs Bild enttarnt die Unternehmen):

Wow, zirkusreife Nummer dieser Fisch. Blöderweise hätte bald jeder Zirkus diese Nummer, da das Bild entsprechend häufig im Einsatz ist!

Gleich sechs glückliche brave Menschen am Meeting-Tisch. Wie realistisch…

Warum nur ein Klischee-Bild einsetzen, wenn sich gleich eine ganze Montage aus 10 Klischee-Bildern bauen läßt? Business-Woman und Business-Man par excellence.

Und da ist sie dann auch schon wieder! Glückwunsch.

Etwas moderner ist schon der Scribbler. Ob er weiß, dass er spiegelverkehrt zeichnen muss, damit es der Anwender lesen kann?

Mh, ist es nicht so, dass sie genau genommen in die falsche Richtung schreibt?

Zwar selten gesehen, muss man aber auch nicht öfters. Denn was will das Bild uns sagen? Ich weiß es nicht!

Für eine „Consulting Group“. Aha!

Wir sehen nicht nur verdammt gut aus! Wir wissen das auch! Auch in Kassel und Kleve!

Strahlend weißes Lachen. Oben und unten. Gestellter und unrealistischer geht es kaum.

Auch ein Klassiker: Die vierköpfige Familie, die immer gut drauf ist.

Bemüht zeigt sich die Commerzbank. Zwar austauschbare Bilderwelt, aber geschickt das eigene Logo eingebaut und so doch eine Eigenständigkeit hinbekommen!

Austauschbare Bilderwelten als Orientierungselemente:

Ratiopharm zeigt wie Bilder das Augenmerk auf die einzelnen Teaser werfen können. Und hier mögen die austauschbaren Bilderwelten auch durchaus ihre Berechtigung haben!

Trends

Slider

Es gibt ja immer wieder verschiedene Trends im Webdesign. Einer davon ist aktuell große Bilder-Slider im Header einzusetzen. Das hat den Vorteil, dass man sich nicht auf ein Thema / Bild beschränken muss und gleich für Abwechslung auf der Seite gesorgt ist.  Andererseits besteht die Gefahr, dass inhaltliche Aussagen verwaschen werden durch Quantität. Der Slider-Aufbau ist fast immer gleich: Rechtecke Bilder, die meistens über die ganze Inhaltsspalte gehen, fahren nach links oder rechts raus und der nächste Content kommt rein:

http://www.hurcoind.com/

http://www.thinkfa.com/

Es gibt auch tolle Varianten, die nicht ganz diesem klassischem Slider-Layout folgen:

http://www.ad60.com/

http://www.hjelle.no/

http://www.helmandafgn.com/

http://rickardsund.com/new-styleby/1/

Weitere Slider-Galerien

http://www.onextrapixel.com/2009/05/25/18-inspirational-image-content-sliders-design-showcases/

http://www.elmastudio.de/inspiration/webdesign-trends-grose-bilder-slider/

Große Hintergundfotos

In der letzten Folge ging es auch um die Ladegeschwindigkeit von Webseiten, aber seit sich DSL weit verbreitet hat, werden vermehrt auch großflächig Bilder eingesetzt. Was vorher nur aus Printanzeigen oder logischerweise dem Fernsehen bekannt war, läßt sich nun auch als Gestalungselement im Web einsetzen Die emotionale Wirkung ist enorm, die Wiedererkennung und Prägnanz auch, wie diese Exemplare sehr schön  zeigen:

http://www.eastvillageeatery.de/

http://esbueno.noahstokes.com/

http://www.ernesthemingwaycollection.com/

http://www.alley-pfannekuchen.de/feste.htm

http://www.bowvalleyclub.com/dining

http://www.thinkmoto.de/

Ausblick: In der nächste Folge dieser Serie zeige ich einige tolle Beispiele von Unternehmen / Webseiten, die es geschafft haben (be)merkenswerte Bilderwelten zu kreieren.

1. Weniger ist mehr

Platz lassen, Inhalt atmen lassen. Den sogenannten Weißraum gezielt einsetzen (Weißraum darf übrigens auch gerne farbig sein!) Den Inhalt auch mal Raum geben, sich sprichwörtlich zu entfalten. Mal nur das „Wirklich-Wichtige“ sagen! Faustregel, die auf unserer Aufnahmefähigkeit beruht: 7 Wörter pro Zeile und 7 Zeilen pro Folie (+/-2 Wörter bzw. Zeilen). Aus der Erfahrung heraus würde ich statt 7 aber besser nur 4 nehmen! Also:

• 4 Wörter pro Zeile
• 4 Zeilen pro Folie

Und ganz wichtig: Schlüsselwörter statt ganzer Sätze benutzen.

2. Bilder & Grafiken einsetzen

Bilder nehmen wir als Erstes wahr, sie sind emotional und bleiben besser in Erinnerung als Texte. Originelle, spannende, den Inhalt unterstützende Bilder einzusetzen ist Gold wert. Quellen gibt es genug für günstig zu erwerbende Bilder: istockphoto.com und fotolia.de oder auch kostenfreie: flickr.com (CC beachten!)

3. Farben: 2 Farben, verschiedene Helligkeiten

Mit Farben lassen sich schön Highlights setzen und die Inhalte strukturieren, aber nicht alles farbig machen. Zwei bis drei Farben reichen. Ansonsten mit verschiedenen Helligkeiten einer Farbe arbeiten.

4. Typografie: 2 Schriften, 2 Schriftgrößen

Auf zwei Schriftarten beschränken. Und damit meine ich nicht Arial und Times! Wenn es keine vorgegebene Schriftarten gibt, warum nicht mal nach schönen frei benutzbaren Schriften suchen (und auch einsetzen):
http://webdesignfan.com/fonts-for-effective-headlines/
http://sixrevisions.com/graphics-design/45-beautiful-free-fonts-for-modern-design-trends/
http://creativenerds.co.uk/freebies/40-beautiful-free-fonts-for-creating-attractive-typography-headlines/
http://rocketgraphs.net/2011/04/29-beautiful-awesome-fonts/

Und auf zwei bis drei Schriftgrößen beschränken! Headlines und Fließtext haben eine klare Größe, die sich über die Folien konsequent durchzieht (Ja, Ausnahmen besätigen die Regel) und die man auch aus größerer Entfernung noch gut lesen kann Evtl. noch Schriftgrößen definieren für Randnotizen, Fußnoten etc.

5. Logo weglassen

Das Logo rauslassen. Natürlich nicht auf der Startseite und abschließender Folie. Aber bitte nicht auf JEDER Folie das Logo wiederholen. 50mal braucht das nun wirklich keiner zu sehen. Und wer nach der ersten Folie nicht weiß, welches Unternehmen hier präsentiert, der sollte es auch nicht nach der 38. erfahren!

Ein schönes Beispiel für eine Powerpoint-Neugestaltung und die Wirkung ist diese Clinton-Präsentation:

Und Anregungen für spannende, extrem gut gestaltete Präsentationen:
http://noteandpoint.com/

Der Einsatz von Bildern unterscheidet sich zwischen Fernsehen, Print und Web sehr stark. Wobei sich das Internet in der Unternehmenskommunikation eine zentrale Rolle erobert hat, welche sich auch auf die eigesetzten Bilder auswirkt.

TV und Print

Das Fernsehen ist ein bilddominantes Medium und bewirkt durch seine Attraktivität und leichte Konsumierbarkeit eine immer größere und breitere Nachfrage nach bildhafter Kommunikation auch in anderen Medien. Das Fernsehen ist als Leitmedium der Werbung zu sehen, aber eben auch nur für Großnunternehmen interessant.

Erfolgreiche Printkommunikationsmaßnahmen sind immer das Zusammenspiel zwischen Bild und Text. Die Kampagne „Print wirkt“ der Publikumszeitschriften im „Verband Deutscher Zeitschriftenverleger“ verdeutlichte anhand einiger Werbekampagnen in beeindruckender Weise die Wiedererkennung von kontinuierlich in verschiedenen Medien eingesetzten Bildwelten ist. Sie zeigen auch, dass eine einzelne Anzeige, wenn sie nach dem Kommunikationsmuster des Unternehmens gestaltet ist, sich leichter in das vertraute Bild einfügt, das der Konsument von ihr hat.

Die zentrale Rolle des Internets

Dem Internet – das zentrale Medium der vielbeschworenen Informationsgesellschaft und damit auch der Informationsökonomie – kommt eine besondere Rolle zu. Aufgrund seiner vielfältigen Einsatzmöglichkeiten im Rahmen der kommunikationspolitischen Maßnahmen (Werbung, Public Relations, Verkauf, Direkt-Marketing etc.) kann ein Internet-Auftritt eine Vernetzung aller eingesetzten Instrumente ermöglichen. Das heißt einheitliche Bilderwelten sollten hier je nach Maßnahme eingesetzt werden. Ein Werbebanner verlangt vermutlich einen anderen Bildeinsatz als die Unterseiten einer Corporate Website.

Push statt Pull

Das Internet ist ein Pull-Medium, d.h. im Vergleich zum Fernsehen sucht der Anwender (mehr oder weniger) gezielt Informationen, bzw. muss mit einer bewussten Entscheidung eine von ihm gewählte Seite aufrufen. Der Informationsfluss wird vom Anwender gesteuert. Ein passives Wahrnehmen / Erleben ist hier so gut wie gar nicht gegeben. Der Anwender braucht dementsprechend für fast jede Entscheidung auch sachliche Informationen, sprich Texte. Selten wird eine Klick-Entscheidung alleine aufgrund eines Bilder getroffen, sondern meistens im Zusammenhang mit ergänzenden Texten.

Für das Surfverhalten können Bilder eine wesentliche Rolle spielen. Der Anwender scannt erst eine Webseite bevor er sich Inhalten detaillierter zuwendet. Da Bilder unsere Aufmerksamkeit auf sich ziehen, sind sie ein gutes Mittel um den „Scanablauf“ zu unterstützen oder zu beinflussen. Sie können hier als Informationsanker dienen und die Übersichtlichkeit der Webseite erhöhen. Und die in der vorherigen Folge dieser Serie gennanten Aspekte bezüglich Emotionalisierung und Wiedererkennbarkeit gelten natürlich auch im Web.
Aber allen Geschwindigkeitsentwicklungen zum Trotz ist die Ladezeit von Bildern immer noch zu beachten. Das Warten auf Inhalte, die geladen werden, gehört zu den unerwünschtesten Ereignissen beim Surfen.  Viele Untersuchungen haben gezeigt, dass die Ladezeit für User eines der wichtigsten Kriterien beim Besuch einer Website ist. Der benötigte Speicherplatz und die damit verbundene Ladezeit hat zur Folge, dass Bilder auf Internetauftritten sehr bewusst eingesetzt werden sollten. Werden Bilder aber lediglich als schmückendes Element eingesetzt, von dem keine tiefere Bedeutung ausgeht, sollte ihr Einsatz gut überlegt sein.

Bilder im Einsatz

Bilder auf Webseiten können verschiedene Aufgaben erfüllen. Zum einen können sie als Layout-Elemente dienen, die dem Screendesign seine Look & Feel, seine Anmutung geben. Diese Bildelemente schaffen in erster Linie Stimmungen.

Layout-Elemente

Klassische Beispiele für solche reinen Layoutbilder sind Webseitenhintergründe oder –muster wie folgende Beispiele:

Ohne diese könnte die Webseite immer noch genauso gut bedient werden, inhaltlich würde nichts fehlen, für die visuelle Stimmung sind sie aber unentbehrlich.

Anders sieht es beim Header aus. Dieser ist der wichtigste Bereich einer Webseite, da der User optisch und inhatlich abgeholt, bzw. überzeugt werden muss, dass er auf dieser Seite richtig ist. Headerbilder sind also nicht nur reine Layoutelemente, sondern meistens auch sehr bedeutende Inhaltselemente. Folgende Beispiele zeigen schön, die inhaltliche und optische Bedeutung:

Orientierungs-Elemente

Gerade auf Newsseiten und Blogs kommen Bilder als Informationsanker zum Einsatz. Sie markieren oft den Beginn einer neuen Informationseinheit, wie bspw. einen neuen Blogeintrag und erleichtern dem Anwender so das schnelle Überfliegen der Seite. Und nicht zu unterschätzen der „Lockerheitsfaktor“. Reine Textseiten – vor allem sehr lange – schrecken den Leser eher ab. Bilder lockern auf und nehmen den „Schrecken“ vor der Bleiwüste. Weitere Orientierungselemente sind beispielsweise ausgestaltete Trennstriche oder Listenpunkte, die dadurch oft markanter sind als reine CSS-Gestaltung.

Inhalts-Elemente

Bilder sind oft genug aber auch als  Informationsträger unersetzlich. Mal ergänzen die inhaltlich den Artikel oder zeigen, was mit vielen Wörtern nicht ausreichend beschrieben werden könnte:

Emotionale-Elemente

Bilder sind… vor allem emotional! Also ideal dafür geeignet Stimmungen zu schaffen, Gefühle hervorzurufen, eine Webseite interessant, markant, unverwechselbar zu machen und so für eine hohe Wiedererkennbarkeit zu sorgen. Darum geht’s ja auch vor allem hier in dieser Artikel-Serie. Folgende Beispiele demonstieren die hohe Emotionalität, die Bilder auf Webseiten erzeugen können:

Fazit

Bilder sind ein großartiges Gestaltungselement. Besonders auf Webseiten. Sie können eine enorme Emotionalität erzeugen, Aufmerksamkeit lenken, das Design veschönern und Inhalte schnell vermitteln. Kurz: Sie sind vielseitig und unentbehrlich für das Webdesign!

Ausblick: In der nächsten Folge der Serie Bilderwelten im Web geht es um aktuelle Bildtrends, austauschbare Bilderwelten und die Bildwelten der Großunternehmen.

Von Märkten und „Austauschbarkeiten“

(Quelle: flickr, two gypsy hearts)

Die Kosumgesellschaft und die freie Marktwirtschaft haben u.a. als (zwischenzeitliches) Resultat — was von Marketing-Experten seit vielen Jahren gerne gebetsmühlenartig wiederholt wird — dass „die Märkte gesättigt sind“ und „Produkte und Dienstleistungen austauschbar“ geworden sind. Die Folge ist, dass die Konsumenten (also wir alle) immer weniger an sachlichen Informationen interessiert sind.

Hinzu kommt, dass das Angebot an Produkten und Dienstleistungen stark zugenommen hat und für viele undurchschaubar geworden ist. Auch der Aufwand sich mit allen Angeboten ausreichend auseinander zu setzen, um dann eine rationale Entscheidung zu treffen, wäre häufig viel zu groß.

So findet eine Veränderung vom Produktwettbewerb hin zum Kommunikationswettbewerb statt, d.h. bei vergleichbaren Produkten erfolgt eine Unterscheidung von Angeboten bei den Konsumenten im wesentlichen nur noch über kommunikative Maßnahmen. Auf gesättigten Märkten wird die Kommunikation damit zu einem wesentlichen Erfolgsfaktor.

Informationsüberflutung der Konsumenten

Durch den nun enorm gestiegenen Kommunikationsaufwand der Unternehmen und das enorm gestiegene Medienaufgebot kommt es allerdings zu einer Reiz– / Informations-überflutung der Konsumenten. So haben wir unser Informationsverhalten verändert / angepasst. Die angebotenen Informationen werden flüchtiger und selektiver aufgenommen. Eine Schutzreaktion, wir können gar nicht alle Informationen unserer Umwelt aufnehmen, weder bei einem ruhigen Waldspaziergang und erst recht nicht in belebten Einkaufsstrassen deutscher Großstädte, genau wie beim täglichen Surfen über unzählige Webseiten. Durch die Informationsüberflutung wird es für Unternehmen daher immer schwerer, für die gewünschte Aufmerksamkeit für sich und ihre Marken zu sorgen.

Werteveränderung in der Gesellschaft

(Quelle: flickr, Steve Keys)

Und dann kommt noch eine Werteveränderung in der Gesellschaft hinzu. Disziplin, Gehorsam, Selbstbeherrschung, Enthaltsamkeit und Geduld sind Werte, die nicht sehr zeitgemäß klingen. Heute zählen eher Genuss, Kreativität, Individualität, Selbstentfaltung und Gemeinschaftserlebnisse. Die Erlebnisorientierung steht ganz oben und als Folge sind Emotionen, bzw. deren Vermittlung sehr wichtig geworden. Ob diese Emotionen wirklich selbst gefühlte oder eher passiv wahrgenommene sind, ist dabei oft egal.

Das menschliche Gehirn & die Realität

(Quelle: flickr, skippyjon)

Um zu verstehen wie Emotionen auf uns / in uns wirken, ein Blick auf unseren Kopf: Das menschliche Gehirn ist ja durchaus sehr komplex, grob läßt es sich aber aufteilen in eine linke und rechte Hälfte. Der linken Seite werden Funktionen wie logisches, analytisches Denken und Sprache zugeordnet, der rechten Seite Kreativität, Emotionalität und räumliches Vorstellungsvermögen. Die rechte Seite bearbeitet alle Sinneseindrücke, sie denkt in Bildern. D.h. Bilder werden da aufgenommen, wo auch unsere Emotionen sitzen, während Texte meist sachlich verarbeitet werden, also vor allem in der linken Hälfte.

Der Mensch denkt, träumt, redet und erinnert sich in Bildern. Unsere Umwelt nehmen wir vor allem durch visuelle Eindrücke wahr. Als Folge produziert jeder Mensch in jeder Situation einen Vergleich zwischen dem inneren Gedächtnisbild und dem äußeren Wahrnehmungsbild („Ich nehme wahr, ich habe ein Bild“). Dieser Bildvergleich ist ein Prozess, der nicht bewußt abstellbar ist. Zwischen dem inneren Bild und der Realität besteht somit eine „magische Verwandtschaft“ (Schuster und Woschek, Nonverbale Kommunikation durch Bilder). Bilder werden wie die Realität wahrgenommen, obwohl sie nur einige Eigenschaften der Realität besitzen. Bilder können die Wirklichkeit sehr genau und objektiv wiedergeben; ein Abbild der Wirklichkeit schaffen.

Eigenschaften von Bildern

Als Folge unserer Wahrnehmung besitzen Bilder folgende Eigenschaften für uns:

• Hohe Kommunikationsgeschwindigkeit: Bilder sind das Erste, was wir – beispielweise bei einer Anzeige — wahrnehmen. In Bruchteilen von Sekunden haben wir Bildinhalte erfasst und sie für uns eingeordnet, Texte müssen erst gelesen und verstanden werden.
• Hohe Anschaulichkeit & Verständlichkeit: „Ein Bild sagt mehr als tausend Worte“ – Bilder wirken als Ganzes und werden parallel verarbeitet. Sie gelten als eine Form analoger Kommunikation. Dagegen läuft die Verarbeitung sprachlicher Information sequentiell ab. Hier wird die Botschaft linear vermittelt, und erst mit ihrem Abschluss fügen sich die Elemente zu einem Ganzen. Daher wirken Bilder im Vergleich zu Text sehr anschaulich und verständlich.
• Hohe Erinnerungsrate: An einmal gesehene Bilder erinnern wir uns oft noch Jahre später. Aufgrund ihrer emotionalen Wirkung bleiben sie im Vergleich zu Texten länger und besser im Gedächtnis haften.
• Subtile Übermittlung von Einstellungen & Gefühlen: Bilder haben einen großen Erlebnis– und Unterhaltungswert. Das bedeutet auch, dass Bilder automatisch und unkontrollierbar emotionale Haltungen hervorrufen können. Bilder eignen sich somit besser als Texte zur Vermittlung emotionaler Erlebnisse.
• Hohe Glaubwürdigkeit: Bilder erscheinen als besonders objektiv und manipulationsunverdächtig, insbesondere dann, wenn sie nur flüchtig wahrgenommen werden.

„Bilder sind schnelle Schüsse ins Gehirn!“
(Kroeber-Riel, Bildkommunikation)

Sehen statt Lesen

(Quelle: flickr, Ali Smiles )

Das Informationsverhalten hat sich geändert: Die Konsumenten bevorzugen solche Informationen, die sich auf den ersten Blick aus der Informationsflut abheben und besonders schnell aufgenommen und gedanklich verarbeitet werden können. Das sind in erster Linie Bildinformationen.

Und der Kreislauf wird durch die bevorzugte Bildkommunikation in den Medien weiter angetrieben: Wir sehen mehr als dass wir lesen. In der Werbung wird nur noch selten sprachlich argumentiert, vielmehr werden die Produkte bildlich und unterhaltsam in Szene gesetzt. Die Sprache übernimmt in zunehmenden Maße nur noch Hilfsfunktion. Diese Vorherrschaft der Bildkommunikation wirkt sich auch auf die sprachliche Informationsvermittlung aus. Diese sind entsprechend den Strickmustern der Bildkommunikation in kleinen und handlichen Brocken darzubieten, aufreizend und unterhaltsam verpackt, schnell und leicht verständlich.

Grundsätzlich werden medienübergreifend Bilder bevorzugt, sowohl von wenig als auch von stark involvierten Konsumenten.

„Werbeprofessionalität ist deswegen vor allem Professionalität bei der Auswahl, Gestaltung und Verwendung von Bildern.“
(Kroeber-Riel, Bildkommunikation)

Konsequenzen

Austauschbare Produkte und Leistungen, Informationsüberflutung und Emotionalisierung sind alles Gründe, die die Bedeutung von Bildern als Teil der Unternehmenskommunikation begünstigen, bzw. geradezu verlangen. Und die Eigenschaften von Bildern uns schnell und emotional anzusprechen tun ihr übriges.

Für Unternehmen bedeutet das, dass sich die angebotenen Leistungen nicht mehr hauptsächlich aufgrund von objektiven Eigenschaften auseinanderhalten lassen, sondern die Konsumenten sich sprichwörtlich „ein Bild“ machen.
Aufgrund der Eigenschaften von Bildern Emotionen zu wecken und ihrer hohen Erinnerungsrate sind sie bestens dafür geeignet um die Unternehmensidentität zu vermitteln und das Image zu beeinflussen.
Die durch die Kommunikation enstandenen inneren Marken– und Firmenbilder sorgen vermehrt für die Angebotsdifferenzierung.

Für Großunternehmen bedeutet es Bilder(welten) zu finden, die durchgängig in allen Medien konsistent eingesetzt werden, um für eine hohe Wiedererkennung zu sorgen, wichtige emotionale Inhalte schnell zu transportieren und das Fremdbild entsprechend zu beeinflussen. Gelungene Beispiele sind der rauchende Cowboy, das Segelschiff mit den grünen Segeln oder lila Kuh. Ohne den Namen zu sehen, wissen wir (durch jahrelanges Training), welche Firmen dahinter stecken. Hier sollte der Einsatz von gleichartigen Bildern in der Unternehmenskommunikation strategisch geplant sein.

Bei klein– und mittelständischen Unternehmen, die nicht eine solch penetrante Werbestrategie einsetzen (können), sind passende Bilder aber auch ein wichtiges Element der Unternehmenskommunikation. Auch sie haben die Herausforderung mit Informationen überlastete Konsumenten anzusprechen und – ich pauschalisiere mal bewusst – auch für sie wird es wichtiger eine Gefühlswelt aufzubauen und zu entwickeln, die mit dem Unternehmen verbunden wird. Diese Gefühlswelt stellt sich zunehmend als vielleicht nicht einziges, aber zumindest mitentscheidendes Unterscheidungskriterium und damit entscheidender Wettbewerbsfaktor heraus.

Die emotionale Ansprache der Bezugsgruppen der Unternehmen gewinnt immer mehr an Bedeutung. Zur Erzeugung einer Gefühlswelt und Vermittlung emotionaler Konsumerlebnisse sind Bilder geradezu prädestiniert, da sie zum einen Emotionen wecken, als auch ein unzähliges Repertoire an Motiven zur Verfügung steht.

Ausblick: Im nächsten Artikel der Serie geht um die Eigenschaften und Besonderheiten von Bildern auf Webseiten.

Cold War Kids

Mein Highlight in dieser Aufzähung gleich als Erstes. Vier Musiker, vier Einstellungen, ein toller Song und immer wieder neue Arrangements!
http://www.coldwarkids.com/iveseenenough/

Whale Song

Faszinierend!!! Es lassen sich Walgesänge mit Hilfe eines Orchesters erzeugen. Und der Wal reagiert darauf…
Zwar eine Werbewebseite, aber extrem beeindruckend umgesetzt!
http://www.optuswhalesong.com.au/

Incredibox

Lustige kurzweilige Jukebox. Verschiedene Instrumente, Effekte und Stimmen lassen sich immer wieder bunt zusammen mischen — Beatbox trifft a capella Band!
http://www.incredibox.fr/

80ies still alive

Wer die 80er musikalisch mag, wird diese Jukebox mögen. Seinen eigenen 80er Jahre Hit remixen. Einzig ein paar mehr Soundstücke häten es sein können.
http://www.arte.tv/makeme80s/?lang=de

Sound of Hamburg

„Millionen Talente, Drei Bühnen, Ein Komponist: Sie“, so weit der Einleitungstext. Hamburger Passanten „spielen“ die Musik, der User wählt die Instumente und das Stück aus. Eine besondere spannende Art der Interaktion.
http://www.sounds-of-hamburg.de/

MTVNHD Experience

Einmal DJ, Hip-Hoper und Metaller sein? Hier gehts! Witzig
http://experience.mtvnhd.com/
Und als Bonbon: http://experience.mtvnhd.com/a6a445

Klangfarbe wörtlich genommen

Außer Konkurrenz. Hier läßt sich der Farbton sprichwörtlich erzeugen und ansehen. „Ein synästhetisches Experiment“ nennt sich das Ganze. Anders und spannend, informativ und lehrreich. Mehr davon bitte!
http://www.klangfarbe.jot-pe.de/

Der Klassiker: Kraftwerk

Ja, was wäre die Musikgeschichte ohne Kraftwerk? Keine Ahnung, ist auch egal, solange es diese Webseite gibt. Einfach, minimalistisch wie die Sounds. „Boing Boom Tschak“ , „The Robots“ und der „Pocketcalculator“ lassen jedes elektronische Herz höher schlagen… Must see
http://kraftwerk.com/ (-> Music/Video)

Viel Spaß beim ausprobieren!

Eric Schmidt (bis April 2011 Chief Executive Officer von Google)

Ein „No-Go“ auf Webseiten ist eigentlich seit Anbeginn des Webdesigns eine horizontale Scrollleiste. Verachtende Blicke seitens des Kundens, der Vorgesetzten, Kollegen waren sicher, wenn bei der HTML-Umsetzung eine Scrolleiste an der falschen Stelle auftauchte. Geschweige denn, wenn bei der Konzeption oder beim Design ein bewusstes hoizontales Scrollen eingeplant wurde.

Dieses Prinzip rührt historisch zum einen auf der Tatsache, dass Mäuse (lange) keine Möglichkeit anboten horizontal zu scrollen. Zum anderen geht es gegen die im Laufe der (Internet-)Jahre vom Anwender gelernten Leserichtung, die auf fast 100% der Webseiten nach unten führt und auch ein akzeptiertes und schnell verinnerlichtes vertikales Scrollen mit sich brachte.

Dagegen stehen die klassichen Printpublikationen, bei denen das horizontale Scrollen, sprich „Blättern“, auch intuitiv ist und keiner auf die Idee käme Magazine vertikal blätternd zu produzieren (obwohl es es mal eine pfiffige Idee wäre..).

So aber sind horizontale Scrolleisten bis heute verpönt. Fast überall, denn die ungeschriebene Regel hat natürlich ihre Ausnahmen. Die genau da liegen, wo das horizontale Scrollen nicht nervig oder mühselig ist, weil vielleicht nur wenige Wörter nicht zu lesen sind oder es einfach auf schlechter HTML-/CSS-Umsetzung beruht. Die Ausnahmen sind da, wo es als Stilmittel eingesetzt wird, wo bewusst eine andere Art der Benutzerführung gesucht wurde, wo sich die Seite bewusst auch durch die Benutzerführung unterscheiden soll und eben nicht nur durch das Design und die Inhalte.

Case Studies:

Un.titled

Portfolio-Präsentationen sind eine Paradebeispiel für den Einsatz von horizontalen Scrollleisten. Bei Un.tittled werden die Projekte ansprechend nebeneinander angeordnet. Optisch ist die Seite sowieso ein Leckerbissen. Leider aber in Flash umgesetzt, so dass mein Trackpad schon nicht mehr will… Also tolle Idee, Umsetzung mit Spielraum nach oben.

http://un.titled.co.uk/

Peter Pearson

Auch ein Portfolio, also gleiches Prinzip wie bei Un.titled. Allerdings ist die Umsetzung und damit Benutzerführung eine ganz andere. Mein Trackpad erlaubt das horizontale Scrollen und bei jedem Menüpunkt erlauben ein Vor– und Zurück-Pfeil das automatische nett animierte Scrollen zum nächsten Inhalt — jQuery machts möglich, ist also schon lange kein Hexenwerk mehr. Adäquat umgesetzt!

http://www.peter-pearson.com/

We shoot Bottles

Kurz und knackig, optisch frisch und inhaltlich kurzweilig zeigt sich diese Präsentation. Dazu noch einfach zu bedienen, was will der Anwender mehr.

http://www.weshootbottles.com/

Imaginista

Ähnliche Aufmachung wie „We shoot Bottles“. Die Inhalte werden in einem — optisch sehr ansprechenden — langen Schlauch präsentiert mit einfachem Scrollbalken.

http://imaginista.ca/

Fashion Photographer

Schöne Umsetzung der Fotografen-Seite, die die möglichen Vorteile des horizontalen Scrollens top umsetzt. Formatfüllende Fotos, die sich bei Veränderung der Bildschirmgröße anpassen und dazu die Scrollanimation. Einfach und gut.

http://www.fashionphotographer.it/editorial.html

Here Design

Diese Seite steht etwas außer der Reihe, denn obwohl sich der Inhalt horizontal fortbewegt, fehlt die Scrolleiste, so dass es sich nur über die Navigation fortbewegen läßt. Sicherlich bewusstes Stilmittel, was aber die Benutzbarkeit und meinen Schnelldurchscrollentdeckerdrang stark einschränkt.

http://www.heredesign.co.uk/

Fazit:

Als Nische für Webseiten, die bewusst eine andere Art gehen wollen und dessen Zielpublikum diese Art der Benutzerführung auch zulässt, sind horizontal zu scrollende Webseiten sicherlich ein Alternative, ohne gleich als Außenseiter zu gelten! Für eine Webseite eines klassischen Unternehmens sicherlich nicht.
Allerdings sollte sich dabei noch stärker über die Benutzbarkeit und Möglichkeiten der Bedienung Gedanken gemacht werden. Einschließlich eines noch ausführlicheren Testens der Seite.

Weiterführende Links

Noch mehr horizontale Scrollseiten zum Stöbern gibts hier:
http://dzineblog.com/2009/07/web-design-ideas-27-horizontal-scrolling-websites.html
http://webdesignledger.com/inspiration/40-of-the-best-horizontal-scrolling-websites
http://naldzgraphics.net/inspirations/40-examples-of-horizontal-scrolling-websites/

Und ein Tutorial für eine CSS-Umsetzung:
http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

Arc90

1. Gutes Design ist innovativ.
2. Gutes Design macht ein Produkt verständlich.
3. Gutes Design ist ästhetisch.
4. Gutes Design macht ein Produkt brauchbar.
5. Gutes Design ist unaufdringlich.
6. Gutes Design ist ehrlich.
7. Gutes Design ist langlebig.
8. Gutes Design ist konsequent bis ins letzte Detail.
9. Gutes Design ist umweltfreundlich.
10. Gutes Design ist sowenig Design wie möglich.

Wikipedia Eintrag Dieter Rams