Einleitung

Die ausgebildete Sprachfähigkeit gibt es nach wissenschaftlichen Schätzungen erst 35.000 Jahre, die deutsche Sprache gar erst knapp 1.200 Jahre. Die stille Sprache von Mimik und Körper gibt es hingegen seit Menschengedenken. Sie hat damit einen Vorsprung von mehreren Millionen Jahren gegenüber dem gesprochenen Wort. Entsprechend groß ist noch heute die Wirkung dieser stillen Sprache auf unsere Gefühle und Beziehungen. Mimik, Gestik, Tonfall, Haltung, Gang hinterlassen einen bleibenden Eindruck, sie prägen Sympathie und Antipathie deutlicher als alles, was wir sagen. In Sekundenschnelle bilden sie ihr Urteil über andere – im Zweifelsfall vertrauen sie der Körpersprache mehr als dem gesprochenen Wort. Auch winzige Signale des Körpers werden von anderen – und sei es nur unbewusst – ganz genau registriert. Im Grunde benötigen wir nur 150 Millisekunden für eine erste Einschätzung des Gegenübers.

7% Worte

38% Artikulation

55% Körpersprache


Mimik und Gestik

Wut: Die Augenbrauen sind heruntergezogen, die Augen zusammengekniffen, die Nasenflügel stehen weit auseinander, die Lippen werden mit Druck geschlossen.
Zufriedenheit: Die Stirn ist entspannt, es bilden sich Lachfältchen, die Wangen sind angehoben, die Nasenflügel auseinandergezogen, die Mundwinkel gehen nach oben.
Die Oberlider, Mundwinkel, sowie Augenbrauen zeigen nach unten, der Blick ist starr, die Wangen schlaff. Häufig begleitet durch Tränenfluss.

Distanzzone

In Mitteleuropa beginnt die Intimzone zirka 50 Zentimeter vor und endet 50 Zentimeter hinter einer Person – an der Seite ist die Intimzone etwas kleiner. In diese Zone dürfen nur Personen mit einer besonderen Erlaubnis eindringen. Die persönliche Distanzzone beginnt am Rande der Intimzone und reicht etwa einen bis 1,5 Meter nach vorne und hinten. Zur Seite ist die Distanz wiederum etwas geringer. In diesem Bereich führen wir persönliche Gespräche, ohne uns bedrängt zu fühlen. Von der Grenze der persönlichen Distanzzone bis zu einer Entfernung von zirka drei Metern nach vorne und hinten erstreckt sich die öffentliche Distanzzone. In diesem Bereich nehmen wir andere Personen wahr. Wenn wir sie ablehnen und nicht mit ihnen in Kontakt treten wollen, fordern wir sie auf, diesen Bereich wieder zu verlassen. Andernfalls gewähren wir ihnen Zutritt in die persönliche Distanzzone.

Aktuell dargestellt ist die europäische Distanzzone. Mit Klick auf den Button wird die Intimzone visualisiert.


Dokumentation

Gestaltung / Diagrammtypen / Animation

Zur Darstellung der Infografik habe ich mich für ein schlichtes Design entschieden, welches auf der neutralen Hauptfarbe grau mit roten Akzenten setzt. Die Animationen sind simpel, aber dennoch effektiv und leicht nutzbar. Dem Nutzer werden verschiedene Interaktionen geboten, sei es durch Klick auf die Ankernavigation, um zwischen den Inhaltsbereichen zu wechseln, Akkordeons, oder mittels Tooltip, um mehr Informationen zu erhalten. Als Diagrammtyp wird ein Kuchendiagramm verwendet, um die Mengenverteilung zu verdeutlichen. Somit enthält diese Infografik vornämlich Hovereffekte, Akkordeons, Tooltips sowie Ankernavigationen als CSS-Animationen. Auch ein Script kam zum Einsatz und zwar "piechart.js" zur Animation der Kuchenhälften, sobald man das Element auf der Seite beim Scrollen erreicht. Mein persönliches Highlight stellt die CSS-Animation "transform cubic-bezier" dar, welche die Annäherung verschiedener Elemente ermöglicht. Die Distanz kann mittels eines Buttons variiert werden. Hierfür habe ich mich zum ersten Mal mit der CSS Eigenschaft tranform: translateX auseinandergesetzt und angewandt.

Ziel / Idee

Die Infografik soll den Nutzer auf einfache und gezielte Art und Weise die Arten der Körpersprache vermitteln. Aufgrund meiner mangelnden technischen Erfahrung in der Umsetzung von HTML Protoypen und CSS-Animationen, habe ich den Fokus auf einfach umsetzbare Animationen gelegt. Ich persönlich hätte mir mehr Spielerein und animierte Elemente gewünscht, aber aufgrund der mangelnden technischen Erfahrung mehr auf das ganzheitliche Konzept gesetzt: Sprich, dass die Infografik responsiv nutzbar ist und, dass die Infografik als Ganzes visuell ansprechend bleibt.

Quellen

https://www.neuronation.de/science/koerpersprache-wie-unser-koerper-unser-denken-beeinflusst
https://www.soft-skills.com/55-38-7-regel-nach-mehrabian/
http://www.prisma.ag/fileadmin/thinkfirst/download/studiensammlung/Studiensammlung_NR12.pdf
http://www.wiwo.de/erfolg/management/mimik-und-gestik-das-sagt-die-koerpersprache-der-maechtigen/10886848.html
http://www.focus.de/finanzen/karriere/management/koerpersprache/
http://www.koerpersprache.me/koerpersprache/