Das Bilder von Menschen, speziell von Gesichtern eine höhere Aufmerksamkeit des Betrachters bekommen, ist bekannt. Auch bekannt ist, das die abgebildeten Emotionen mehr oder weniger “ansteckend” auf den Betrachter wirken. Was weniger bekannt ist, ist das die Blickrichtung der Personen auf Fotos maßgeblich bewirkt, wohin der Betrachter des Bildes folgend schauen wird. Dieses Wissen lässt sich gut nutzen, um die Aufmerksamkeit des Betrachters entsprechend zu lenken.

Wie man mit der Blickrichtung auf Bildern den Blick der Besucher lenkt

Du verwendest keine Bilder von Menschen?

Solltest du aber! Ob auf deiner Website, deinen Informationsprodukten oder auch in deinem Google Authorship. Wenn du das konsequent ablehnst, tust du deiner Website und deinem Traffic nichts Gutes. Spätestens nach diesem Artikel wirst du verstehen, warum du vermehrt Bilder mit Menschen bzw. Gesichtern einsetzen solltest – mindestens im Rahmen des Google Authorship – und warum du dabei auch auf die Blickrichtung der abgebildeten Person(en) achten solltest.

Aber Achtung!

Was ich hier nur kurz anreißen will, aber in einem späteren Artikel nochmals gesondert behandele: Du musst aber auch vorsichtig mit der Verwendung von Menschen sein. Leicht kann es Dir passieren, das wenndu ein Gesicht, “schlimmer” noch ein Person abbildest, welche sehr attraktiv ist, du den Leser völlig aus dem Lese-, Gedanken- und Verarbeitungsfluss raushaust. Noch schlimmer wird dies, wenn die Person auf dem Bild Dich frontal anschaut. Wenn sie dann noch lächelt… Dazu aber in einem anderen Artikel mehr.

Das psychologische Phänomen:

Du siehst eine Person, welche in den Himmel start und fragst Dich “Was gibt es dort zu sehen?” und schaust mit hoher Wahrscheinlichkeit auch. Du siehst, wie jemand erstaunt etwas betrachtet und willst selbst entdecken, was da so faszinierend ist. Bla bla bla, du verstehst welcher Mechanismus hier beschrieben ist und man könnte noch viele weitere Beispiele für diesen Mechanismus aufzählen. Du warst Dir dessen wahrscheinlich bloß noch nicht bewusst.

Der Mensch ist von Natur aus neugierig und wenn Dir jemand ein Interesse vorspiegelt, dann hast auch du Interesse, ja Neugier, um was es sich dabei handeln mag. Da schaut jemand nach links? Ja was gibt es denn da? Klingt irgendwie zu simple, funktioniert aber. Das dein Gehirn von Menschen auf Fotos animiert wird, ist dem Gehirn eigentlich völlig egal. Und auch wenn die Person in einer Grafik eingebettet ist, die Person in einem solchen Zusammenhang erkennbar nie Interesse auf Objekt daneben legen könnte – dem Gehirn ist das völlig egal. Das Gehirn hat sich innerhalb von tausenden Jahren geformt – um zu lernen das es auf digitale Bildmanipulationen nicht reagieren braucht, dazu hat es noch nicht genug Zeit gehabt.

Du glaubst mir nicht?

Kannst du aber. Was wir meist intuitiv als richtig bewerten, weil wir den Prozess einfach unterbewusst kennen, kann auch leicht durch die Nutzung von Eyetracking in Kombination mit einer Heatmap visualisiert werden.

Eyetracking

Ist eine Technologie um die Augenbewegung eines Mensch zu analysieren. Dabei werden Blickrichtung, Bewegungsgeschwindigkeit der Augen und die Verweildauer auf einzelnen Objekten analysiert. Diese Technik ist nicht ganz billig, wird aber mittlerweile umfassend eingesetzt, zum Beispiel eben im Bereich Marketing. Unternehmen wollen wissen was Aufmerksamkeit auf sich zieht, wie Einkaufsläden, Cockpits in Fahr- oder Flugzeugen, Werbeanzeigen oder eben Internetseiten gestaltet werden müssen, damit der Betrachter eben nicht zu sehr abgelenkt wird bzw. um die Aufmerksamkeit gezielt zu steuern.

Heatmaps

Heatmaps (frei übersetzt mit Hitzekarten) bilden eine sehr gute Möglichkeit die Ergebnisse des Eyetracking (aber auch des Clicktracking) abzubilden. Die Grundlage der Karte ist die zu betrachtende Grafik, ein Bild oder ein Video. Umso mehr bzw. umso länger eine bestimmte Stelle des Bildes betrachtet wird, umso mehr “Hitze” entsteht und der betreffende Bereich wird eingefärbt. Das Farbspektrum reicht dabei meist von Grün (wenig Aufmerksamkeit) bis zu Rot (viel Aufmerksamkeit).

Und beides in Kombination

In Kombination mit beiden Techniken lässt sich schnell feststellen, welche Elemente wie viel Aufmerksamkeit bekommen. Schon allein dies ist sehr interessant. Noch viel interessanter wird es allerdings, wenn mit Hilfe von Eyetracking und Heatmaps Bilder von Menschen analysiert werden. Was man somit feststellen konnte: wo die Menschen auf den Bildern hinschauen, da schaust folglich auch du hin.

Du glaubst mir immernoch nicht?

Bevor ich jetzt massenweise Urheberrechtsverletzungen tätige, weil ich hier alle möglichen Bilder aus Studien abbilde (muss ich recherchieren: ist das in Paraguay überhaupt wichtig?), kannst du selbst nach Beweisen dafür schauen. Beobachte Dich doch einmal selbst, wenn du Werbung mit Menschen oder nur Menschen siehst. Du wirst bestätigen können, was ich Dir sage. Du wirst den Blicken der abgebildeten Person folgen. Und du wirst die somit unterstrichene Werbebotschaft schnell anschauen.

Hat dir der Artikel geholfen?

Kannst du mir und der Neurowissenschaft zustimmen oder glaubst du, das du komplett anders funktionierst? Nutzt du bereits dieses Wissen? In wie weit hat dies bei dir Auswirkungen gezeigt? Fragen über Fragen – ich freue mich über deine Antworten!

Manch einer kennt es: man bindet einen Videoplayer von YouTube auf einer Website ein und dieser legt sich scheinbar willkürlich über andere Elemente, obwohl diese Elemente per z-index (und/oder per position:absolute oder position:relative) korrekt angeordnet sind. Dieses oder ähnliche Probleme treten häufig bei inkludierten Inhalten auf. Hier die Lösung für den YouTube-Player.

Youtube & z-index: die finale Lösung

Das “Problem”

Der YouTube-Player kommt meist in einem iframe daher und ist zudem oftmals noch ein Flashelement. Diese lassen sich manchmal nur schwer in Ihrer Ebene bestimmen. Bevor ich hier nun aber zu weit ins Detail gehe, ganz einfach mal die Lösung, wie man seinen YouTube-Player korrekt positioniert bekommt.

Kurz zeige ich noch den Code, welcher seitens YouTube erzeugt wird, sofern man einen Player auf einer Website einbindet. Er kann von Eurem Code eventuell leicht abweichen, was jedoch nicht tragisch ist. Wichtig ist die URl im Player – beachtet mal diese und vergleicht sie in beiden folgenden Beispielen – dann erkennt Ihr den Unterschied und sogleich die Lösung des “Problems”.

<iframe width="640" height="360" src="http://www.youtube.com/embed/crCtD9cUEs0?feature=oembed" frameborder="0" allowfullscreen=""></iframe>

Die Lösung:

Nun der Code, wie er aussehen muss, damit sich das “Problem” erledigt. Der Code unterscheidet sich in nur einer einzigen Gegenbenheit, der URl. Hier wird das Attribut wmode=transparent angefügt. Sonnst ist alles gleich.

<iframe width="640" height="360" src="http://www.youtube.com/embed/crCtD9cUEs0?feature=oembed&wmode=transparent" frameborder="0" allowfullscreen=""></iframe>

Manuell oder automatisch?

Nun kann man also wmode=transparent manuell in jeden Player integrieren. Wer wie ich, den Player automatisch einbindet (jahahaha, ich liebe automatisch), der kann auch die Ergänzung um das wmode=transparent automatisiert vornehmen lassen. Dazu dient der folgende JavaScript. Am besten wird er im head-Bereich der Website eingefügt. Ich zeige zwei Codes, welche nach dem Prinzip entweder/oder verwendet werden müssen.

Entweder/oder? Geht mal in den Quelltext der Website und schaut, wie die URl im Player aussieht. Wird dort bereits ein Parameter angehängt, muss der folgende Code verwendet werden. Wird in der URl noch kein Parameter übergeben, muss der zweite Codeschnipsel verwendet werden.

Codeschnipsel 1:

$(document).ready(function () {
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"?wmode=transparent");
});
});

Codeschnipsel 2:

$(document).ready(function () {
$('iframe').each(function(){
var url = $(this).attr("src");
$(this).attr("src",url+"&wmode=transparent");
});
});

Voila!

Nun klebt der YouTube-Player auf jener Ebene, wo er auch sein soll. Man kann nun genüsslich weiterarbeiten. Hat alles geklappt oder brauchst Du Hilfestellung? Du findest den Tipp gut? Ich freue mich auf dein Kommentar!

Pinterest. Bekannt, geliebt, teilweise vergöttert. Pinterest bietet auf seiner Website auch einen Generator für den wohl bekannten “Pin-It-Button”. Schön und gut ist dieser Generator aber nicht gerade. Individualisierungswünsche lassen sich damit nicht realisieren. Dieses kleine Tutorial zeigt, wie man den “Pin-It-Button” anpasst bzw. individualisieren kann.

Individuelle Pinterest-Button ohne Plugin

Pin-It-Button anpassen – garnicht so schwer

Zuvor sollte man sich die Frage stellen: was will ich eigentlich? Wie soll der Button angepasst werden und aussehen? Um nicht auf hunderte, gar tausende Individuallösungen eingehen zu müssen, zeige ich das Grundgerüst jener gewollten Individualität. Zuerst zeige ich den “Pin-It-Button”, wie er vom Generator auf Pinterest ausgegeben wird. Dies ist die Variante ohne Zähler.

Zuerst der Code, welcher im Code dort positioniert wird, wo der Button erscheinen soll.

<a href="//pinterest.com/pin/create/button/" data-pin-do="buttonBookmark" ><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

Zuzüglich muss noch eine kleiner Code auf der Website zwischen <body> und </body> eingefügt werden, welcher eine JavaScript-Datei einbindet. Diese Datei liegt auf dem Server von Pinterest. Generell ist es ja zu bevorzugen, wenn man möglichst wenige Dinge von externen Servern einbindet – aber das ist eine andere Geschichte.

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"></script>

Obige Beispiele sehen auf den ersten Blick so aus, als könne man einfach das Bild, welches vom Link umschlossen wird, austauschen und somit frei wählen, welches Element den Pinterest-Link erhalten soll. Falsch. Funktioniert nicht. Viel mehr wird die Grafik auch von JavaScript bestimmt, welche im body eingebunden wird. Lässt man die JavaScript-Datei einfach weg, funktioniert die Funktion nicht…

Pin-It-Button für Individualisten

Wir erkennen also: Einerseits benötigen wir die Funktion der JavaScript-Datei, andererseits müssen wir den Code umschreiben. Nun könnte man den Code aus der Datei extrahieren und in eine eigene externe Datei auslagern. Könnte man. Um mein Beispiel zu veranschaulichen, habe ich den benötigten JavaScript einfach direkt im von uns benötigten Link integriert. Somit steht es mir frei, welches Element ich wie zum Pin-It-Button umwandeln will.

<a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'>

Hier nun der zu verlinkende Inhalt. Ob Bild, Text, Container – was auch immer.

</a>

Da nun der benötigte JavaScript schon im Link enthalten ist, kann auf die Einbindung der externen JavaScript-Datei von Pinterest verzichtet werden.

Eigentlich ganz einfach, oder? Wenn man weiß, wie… Du schneidest das nicht ganz mit oder hast Fragen? Schreibe ruhig einen Kommentar.