Zeitmaschine: HELINA

Soziale Medien in einem Tool plattformübergreifend visualisiert, um kulturelle Phänomene besser verfolgen und beobachten zu können.
Bild mit Kreisartiger Anordnung in blau und orange
Das Problem
In einer Welt voller schnelllebigen sozialen Medien ereignet sich der nächste Skandal bevor man den vorigen überhaupt verstehen konnte. Digitale Inhalte haben eine abnehmende Halbwertszeit und verfliegen rapide.

Um diese Phänomene über verschiedene Anbieter hinweg verfolgen zu können, haben wir das folgende Interface erarbeitet.
Design Prozess
Während unserer Erkundungsphase kamen uns viele Ideen und Funktionen in den Sinn, die unser Tool in der Endfassung enthalten könnte.

Über einfache Graphen, die Aktualitäten zwischen verschiedenen sozialen Plattformen vergleicht, bis hin zu Zeitleisten über die Entstehung unterschiedlicher Anbieter.

Sobald wir uns darauf festgelegt hatten einen Vergleich im Interface zu visualisieren, haben wir versucht diesen Ansatz mit Python zu realisieren. Anfangs waren Twitter, Reddit und Facebook unsere Wunschplattformen, mit denen wir das zeitliche Aufkommen von Themen verdeutlichen wollten.

Da Facebook und Twitter leider seit einiger Zeit ihre APIs, sprich die Schnittstellen für solche Datenanfragen, geschlossen hatten, war es uns nicht möglich diese Daten zu sammeln.

Insofern blieb uns lediglich der Reddit-Datensatz den wir mithilfe von Jan Meissner beliebig nach Themen durchsuchen konnten.
User Interface
Die Benutzeroberfläche zielt auf die Nutzung im Browser ab und bietet eine klassische Ansicht mit Navigationsleiste.

Mittig wird die aktuelle Datenansicht je nach Auswahl dargestellt, welche über die Filter links in der Navigation angepasst werden kann, um bestimmte Websites ein- oder auszuschalten.

Hinzu kommen Ansichten für verschiedene Zeiträume, wie beispielsweise unsere Jahresansicht, die populäre oder kontroverse Themen hervorhebt.

Für einen Blick in die Details bieten wir ebenfalls eine Darstellung, wobei einzelne Postings oder Artikel ausgewählt werden können und die wichtigsten Informationen inklusive Kommentaren anzeigen.
Bild mit Kreisartiger Anordnung in blau und orange
Unsere Jahresübersicht zeigt Ereignisse in einem Kreis an, wobei große Kreise wichtigen Ereignissen entsprechen. Twitter wird mit Blau repräsentiert, Reddit ist orange.
Kreisartige Anordnung mit markiertem Ereignis: "Trump visits London"
Mit einem Klick auf große Kreise können Details über dieses Ereignis angezeigt werden inklusive Ursprung.
Ansicht mit vielen Kreisen, die einen Graphen formen
In der losen Graphansicht werden die Gesamtposts auf der jeweiligen Plattform dargestellt, große Kreise zeigen erneut wichtige, sowie große Themen an.
Ansicht mit sauberem Graphen und einzelnen, hervorgehobenen Ereignissen
Für eine möglichst exakte Darstellung lässt sich das Gesamtaufkommen ebenfalls mithilfe eines Graphen darstellen, der einzelne Aktivitäten hervorhebt.
Ansicht von Kommentaren, die als Kreise neben dem Artikel dargestellt werden
Die Diskussionsansicht zeigt einen Post mit der darunter verfügbaren Kommtentarstruktur, sowie einer zeitlichen Einordnung. War ein Post beispielsweise in den ersten 24h sehr populär, hat danach aber stark abgenommen, werden viele große Kugeln vor der 24h-Linie angezeigt.

Kleinere Kreise verdeutlichen die Ebenen der Kommentare, da im spezifischen Fall von Reddit Kommentare aufeinander Bezug nehmen können.
Prototyp
Hierunter befindet sich unser interaktiver Prototyp, der im Browser getestet werden kann. Nachdem man den Banner von Adobe verscheucht hat, lässt sich mehr erkennen und gegebenenfalls in den Vollbildmodus wechseln.

Möglicherweise verhalten sich manche Inhalte noch nicht, wie es Nutzer:innen erwarten würden, da es sich zur Zeit um eine statische Reihe von Screens handelt, die wir verbunden und animiert haben.

Insofern bitten wir um Verständnis, sollten während der Nutzung unerwartete Interaktionen stattfinden.

Mit einem Klick auf die dunkle Hintergrundfläche werden interaktive Oberflächen angezeigt.
Die Trackingabfrage in dem Fenster hier drüber stammt von Adobe, nicht von mir.
Der Prototyp ist auf Mobilgeräten leider nicht verfügbar
Entstehungszeitraum

10/2020 – 03/2021

Team

Vanessa Schmitt
Leon Wolff
Mit Dank an Jan Meissner

Programme

Adobe XD
Sketch
Python 3.8

betreuung

Prof. Boris Müller

Weitere Projekte
Screenshot of the improved amazon website
Typografie
Digitale Typografie: Amazon

Ein behutsames Redesign der Amazon Shop-Ansicht mit besonderem Blick für Typografie.

UI/UX Design
VIKUS: Slide in Time

Eine Visualisierung von mehren tausend Dias, mit der Möglichkeit zur Sortierung.

Menü