Übersicht (118 Befragte)

Während der Arbeit oder der Schule besuche ich regelmäßig meine Netzwerke.

Du wurdest in einem Netzwerk auf eine Veranstaltung aufmerksam gemacht und bist nur deswegen dort hin gegangen.

Während ich etwas im TV sah, habe ich meine Meinung dazu auf mindestens einem Netzwerk geteilt.

Neben dem / Beim ______ habe ich meine Netzwerke gecheckt oder etwas geteilt.

Du sitzt gemütlich mit einer Freundin / einem Freund in der Bar und bekommst eine Benachrichtigung von eines deiner Netzwerke. Schaust du nach, worum es sich genau handelt, obwohl du dich gerade unterhältst?

Es gab schon einmal die Situation,obwohl ihr am selben Tisch gesessen habt, in der deine Freunde und du auf einem der Netzwerke wart um dort die Neuigkeiten zu checken.

Du hast Fragen?

Dann schick mir eine Mail oder kontaktiere mich über die Netzwerke.

Portfolio

Gestaltung & Entwicklung von Tim Hartmann.

Dokumentation

Inhaltsverzeichnis

  1. Ziel / Idee
  2. Diagrammtyp
  3. Herkunft der Daten
  4. Gestaltung
    1. Farbgestaltung
    2. Anordnung der Medienelemente
    3. Auswahl der Metaphern
  5. Interaktion / Animation / Animationstechnik
    1. Einsatz
    2. Begründung
    3. Technik
  6. Formular
    1. Aufbau
    2. Gestaltung
  7. Browserunterstützung
  8. OpenSource

1. Ziel / Idee

Das Konzept hinter meiner Infografik war es die Antworten der Befragten zu gruppieren und für jede Gruppe einen Themenbereich zu schaffen, in dem man die ausgewerteten Informationen präsentiert.

Durch die Gestaltung und Grafiken soll der Betrachter erahnen können, um welche Art von Informationen er in dem jeweiligen Gebiet erhält. Die Reduzierung war dort auch ein großes Thema - durch interaktive Elemente kann der Benutzer mehr Auswertungen erhalten, bekommt aber nie alle auf einmal.

Der Kopf der Seite bewegt sich immer mit, jedoch wird er mit neuen Inhalten bestückt sobald er in ein neues Themengebiet bekommt - eine kurze prägnante Frage mit Auswertung “Ja” und “Nein”.

2. Diagrammtyp

Ich habe die Fragen meist so gestellt, dass sie kurz und knapp zu beantworten waren - “Ja” oder “Nein”. Aus diesem Grund habe ich mich für ein Ringdiagramm entschieden, da zusätzlich noch die Personenanzahl dargestellt wird. Diese Art der Visualisierung zeigt meiner Meinung nach besonders den Anteil am Gesamten.

3. Herkunft der Daten

Nun geht es um den spannenden Abschnitt, woher ich alle meine Daten bezogen haben. Ich habe ganz am Anfang viel recherchiert, habe allerdings leider nicht wirklich die Informationen gefunden die ich mir erhofft habe. Genau deswegen habe ich mich hingesetzt, mir die Zeit genommen und selber einige Fragen aufgeschrieben, die mich interessieren. Nun musste ich noch schauen, dass der Befragte die Fragen komfortabel und schnell beantworten kann - dafür verwendete ich Typeform.com. Fragen eingetippt, Antworten eingestellt und schnell an alle meine Kontakte in den sozialen Netzwerken geteilt - unglaubliche 118 Personen füllten den Fragebogen aus.

4. Gestaltung

Hierfür habe ich mir etwas anderes überlegt. Ich habe Themenbereiche geschaffen, die eine bestimmte Gruppe von Daten visualisiert, wenn der Benutzer dort hingescrollt ist. Kurz danach starten auch schon die Animationen, die dem Bereich etwas Leben einhauchen soll.

Ich habe mich auch dazu entschlossen, dass ich alles gerne sehr Flat halten möchte. Aktuell sehr im Trend, alles sehr reduziert und es wirkt dadurch nicht so überladen auf den Benutzer. Schließlich stehen die Informationen / Daten im Vordergrund.

4.1. Farbgestaltung

Durch die verschiedenen Themenbereiche hatte ich die Möglichkeit viele Farbwelten zu schaffen. Das Dashboard hat eine “Blueprint”-Optik erhalten, die Nachtszene dominiert von dunklen Farben mit Akzenten und die Naturszene ist sehr farbenfroh gestaltet.

Wenn man sich nun alle Themenbereiche anschaut, wirken sie farblich dennoch sehr harmonisch und schön.

4.2. Anordnung der Medienelemente

Zu meinen Mediaelementen zähle ich die Paginierung auf der linken Seite für die einzelnen Bereiche, die Tooltips und das Dashboard.

Die pulsierenden Kreise für die Tooltips wurden immer dort platziert, wovon sie auch die Daten beinhalten - z.B. die Daten über was der Benutzer neben bestimmten Tätigkeiten macht, sind über dem Tooltip auf dem Fernseher erreichbar.

Das Dashboard ist ganz zu Anfang. Es enthält allgemeine Informationen über die Befragten und soll als Einleitung dienen. Interaktiv kann man sich die Daten mit der Maus holen.

4.3. Auswahl der Metaphern

Themenbereich mit Nacht:

Die Häuser, Sterner und Mond sollen stark daran erinnern, dass der Benutzer gerade aufgestanden ist bzw. es sehr früh am Morgen ist.

Themenbereich mit Zug:

Der Zug soll vor allem die Mobilität mit dem Smartphone darstellen und was wir damit unterwegs erledigen können bzw. wie wir unsere Zeit damit gestalten - abchecken der sozialen Netzwerke

Themenbereich mit Zimmer, Fernseher und Pizza:

Viele Leute konzentrieren sich nicht nur auf eines, sondern haben parallel das Smartphone in der Hand - neben dem Fernsehen und sogar Essen sind wir auf den sozialen Netzen unterwegs.

Themenbereich mit Fenster:

Soll lediglich darstellen wie sich zwei Menschen eigentlich unterhalten sollen, aber einer davon an seinem Smartphone zugange ist und der andere sichtlich genervt ist.

5. Interaktion / Animation / Animationstechnik

5.1. Einsatz

Jeder Themenbereich hat seine eigenen individuellen Animation erhalten, da ich in jedem Bereich unterschiedliche Gestaltungselemente verwende. Zum Beispiel der Zug soll ausschauen, als würde er ins Bild fahren.

Eingesetzt habe ich sie, damit zum Beispiel die Stern in der Nachtszene so ausschauen als würden sie hineinfliegen, was dem Ganzen etwas Leben einhaucht und es spannend macht auf den Betrachter.

5.2. Begründung

Die Animationen starten immer erst dann, wenn der Benutzer auf den richtigen Bereich kommt. Zu Anfang weiß der Benutzer gleich, dass nun die Visualisierung der Daten startet und kann darauf genau eingehen.

Meist wurden die Animationen eingesetzt um den Themenbereich mehr Leben einzuhauchen und das dargestellte visuell zu unterstützen. Ausgenommen die Graphen, die sich oben im fixierten Kopf ändern. Dort ist die Animation dafür gedacht, dass der Benutzer die Veränderung der Daten mitbekommt.

Der pulsierende Kreis eignet sich sehr gut, um zu visualisieren dass hier Interaktion gefragt ist. Das hier weitere Informationen auf den Betrachter warten wird sofort assoziert.

5.3. Technik

Zum Einsatz kamen die neuesten Technologien und zwar HTML5 / CSS3 sowie Javascript mit Hilfe des Frameworks “jQuery”. Dazu verwendete ich noch zwei Plugins für die Diagramme / Charts und eines um das langsame Scrollen zu ermöglichen - OnePageScroll, EasyPieChart und Morris.js.

Alle Animationen, ausgenommen die der Graphen, habe ich mittels CSS3 realisiert. Der große Vorteil hierbei ist, dass Geräte die kein Javascript können bzw. deaktiviert wurde, dennoch die Animationen darstellen. Außerdem haben wir mit CSS3 eine deutliche Performance-Steigerung, da die Rechenleistung auf den GPU ausgelegt werden kann.

6. Formular

6.1. Aufbau

Der Aufbau ist sehr einfach gehalten. Der Benutzer soll nicht überfordert werden oder gebeten werden unnötige Informationen einzutragen - schnelle Kontaktaufnahme im Sinne schnelles Ausfüllen der Daten ist garantiert.

Der Name, eine Email und die persönliche Nachricht können an mich übermittelt werden - das sind die Informationen die mir völlig ausreichen.

Dazu habe ich mir noch überlegt, dass Kontaktformulare sehr unbeliebt sind und die Benutzer eine schnelle Antwort erwarten, was mit einem Formular nicht assoziert wird. Aus diesen Gründen gibt es noch Alternativen und zwar kann der Betrachter mit mir über die sozialen Netzwerke in Kontakt treten - Facebook, Twitter und GooglePlus. Diese Art der Kontaktaufnahme ist immer sehr direkt und in der Regel bekommt der Betrachter schnell Feedback.

6.2. Gestaltung

Insbesondere habe ich darauf geschaut, dass die Proportionen der Felder stimmen. Wenn etwas mehr Platz benötigt, wie zum Beispiel das Feld der persönlichen Nachrichten, dann habe ich es auch größer dargestellt.

Die Fehlermeldungen wurden erfahrungsgemäß in rot dargestellt und direkt unter dem Feld dargestellt, welches Fehlerhaft ist. Zusätzlich werden auch die Felder rot markiert - der Benutzer erkennt sofort wo er noch etwas ausfüllen muss.

Den Absende-Button habe ich grün gestaltet. Grün wird mit etwas positiven verbunden und regt zum Klicken an. Mit sehr viel Abstand habe ich die alternativen Kontaktmöglichkeiten platziert - sie sollen zum Formular Zugehörigkeit zeigen, jedoch auch vom “Absende”-Button getrennt sein. Es sind letztendlich dennoch zwei verschiedene Möglichkeiten, aber mit dem selben Ziel.

7. Browserunterstützung

Aufgrund der Verwendung von neuesten Technologien ist der Support von bestimmten Browsern ausgeschlossen. Ich habe die Infografik im neuesten Chrome (30) und Safari (7.0) getestet - dort verliefen die Animationen flüssig und alles funktionierte wie gewünscht.

8. Open-Source

Sofern man sich den Code anschauen, modifizieren oder verbessern möchte kann man sich die Infografik auch auf Github ansehen. Dort gibt es eine kleine Beschreibung, diverse Versionen und die gesamte Projektstruktur zu sehen.

Github