Visualizing Cultural Collections:
Slide in Time

Visualisierung einer kulturellen Sammlung von 13.000 Dias, die sowohl explorative, als auch praktische Ansätze bietet.
Header Screen der Seite, Darstellung eines Dia-Haufens, der erkundet werden kann
Das Ziel
Peter Feist bereiste in seiner Anfangszeit als Dozent an der HU Berlin viele verschiedene Länder, um die dortigen Sehenswürdigkeiten, sowie Ausstellungsstücke zu dokumentieren.

In seiner Zeit waren Dia-Filme die gängigste Methode, um Studierenden eigenes Lehrmaterial zu zeigen.

Nach seinem Ableben im Juli 2015 hinterließ er als leidenschaftlicher Kunsthistoriker somit eine Sammlung von rund 30.000 Dias.

Im Kurs "Visualizing Cultural Collections" war es nun unsere Aufgabe, eine geeignete Form der Visualisierung für diese kulturelle Sammlung zu finden.
Das Team
Maryna Honcharenko ist ebenfalls Interfacedesign-Studentin und zwei Semester länger an der FH, als ich. Sie ist gemeinsam mit mir für die gestalterische Arbeit verantwortlich, sowie die Umsetzung in einen Klick-Prototypen.

Myriam Hofmaier studiert Kulturarbeit am Fachbereich 2 und ist somit viel an moralischen Fragen, sowie konzeptuellen Diskussionen beteiligt. Zudem hat sie maßgeblich zu unserem wissenschaftlichen Artikel beigetragen.

Giacomo Marinsalta ist Masterstudent in den Europäischen Medienwissenschaften und unterstützt das Projekt ebenfalls von einem konzeptuellen Standpunkt aus. Außerdem hat er zusammen mit Myriam den Großteil des wissenschaftlichen Artikels verfasst, den wir am Anschluss an der HU veröffentlichen durften.

Ich
habe unser Team mit Ideen unterstützt, sowie mit Maryna viele Konzepte visuell umgesetzt, damit wir als Gruppe gemeinsam darüber entscheiden konnten, welche Variante uns besser gefällt. Außerdem habe ich den Code für unsere Python-Skripte geschrieben, die unsere finale Visualisierung ermöglicht haben.
Design Prozess
Anfangs haben wir uns viel mit der Frage beschäftigt wie unsere eine Visualisierung der Dias aussehen soll, wodurch viele Vorschläge gesammelt wurden.

Im Laufe des Projekts und nach Gesprächen mit unserem Sammlungspartner Dr. Schelbert von der HU Berlin, wurde uns klar, dass es weitaus mehr als eine Ansicht geben muss.

Viele der möglichen Anordnungen haben wir vereint und in Screens aufgeteilt, die durch Filter dynamisch anpassbar sind.

Sobald wir einen ersten Prototypen präsentieren konnten, haben wir einen Workshop mit allen Beteiligten des Projekts seitens der HU veranstaltet, um weitere Optionen zu erschließen und erstes Feedback einzusammeln.
Mosaik-artige Anordnung von drei Dias
Eine Idee war, die Bilder wie ein riesiges Mosaic anzuordnen. Je weiter rausgescrollt wird, desto mehr Dias erscheinen, die angeklickt werden können.
Weltkarte mit kleinen Punkten, die einzelne Dias mit deren Herkunft verbinden soll
Naheliegend war es, die Dias geografisch zu verorten und historische Verbindungen anzuzeigen. Die Daten wären dafür verfügbar, leider waren die Orte hauptsächlich in Deutschland und somit zu dicht beisammen.
Tagebuchartige Darstellung von einzelnen Dias auf einem Papierhintergrund
Aus einer erzählerischen Sicht haben wir überlegt die Bilder in einem digitalen Tagebuch anzuordnen und Thematisch zu gruppieren. Der Datensatz war dafür allerdings zu groß.
Dias in einer Box, aneinandergereiht
Der tatsächlichen Lagerart nachempfunden, wollten wir die Dias in eine digitale Box stecken, durch die sich gescrollt werden kann. Mit einem Klick hätte man ein einzelnes Dia aufrufen können.
Schließlich hat uns die Idee begeistert die Bilddaten auf ihre dominante Farbe hin zu untersuchen und somit das Bild an sich zu codieren.

Da die Dias seit langer Zeit gelagert wurden, sind immer wieder alternde Prozesse darauf sichtbar geworden, die dem jeweiligen Foto einen Farbstich bescheren oder sogar kleine Flecken.
Dia mit Beschriftung und Farbflecken
Ein Dia mit eindeutigen Farbflecken.
Dia mit Beschriftung und Farbstich
Beispiel für mögliche Farbstiche im Bild.
Um dieses Vorhaben umzusetzen, habe ich mich mit dem notwendigen Code beschäftigt und habe ein kleines Tool geschrieben, das aus allen 13 000 Bildern die jeweils dominante Farbe errechnet und als einzelnes Bild wieder ablegt.
Screenshot eines Dias mit den daraus extrahierten Farben (dunkle Violetttöne)
Der Output des Algorithmus ist rechts zu sehen mit verschiedenen Einstellungen.
Durch einen Toleranz-Parameter konnten wir die Genauigkeit des Algorithmus festlegen.
User Interface
Im Stil eines explorativen Museumsbesuchs bietet unser Interface Raum für spielerischen Umgang in der ersten Ansicht. Interessierte können dann mit einem Klick auf ein beliebiges Dia näheres erfahren, sowie die verfügbaren Eckdaten erhalten.

In einer Galerie lassen sich die Dias dann ganz wie früher durchwechseln, wodurch das Gefühl vor einem realen Diaprojektor zu sitzen erhalten wird.

Unsere Arbeit zeigt beide Seiten und Ansprüche die es an die Visualisierung gibt: Einerseits möchten Menschen die unbekannte Sammlung erkunden und dabei Spaß haben, andererseits gibt es Mitarbeitende an der HU Berlin, die diesen Datensatz pflegen und häufig spezifische Daten daraus benötigen.
Prototyp
Der Prototyp ist eine durchklickbare Visualisierung unserer verschiedenen Ansichten, die wir bereits mit echten Daten gefüttert haben.

Die Bilder sind tatsächliche Dias von Peter Feist und die einzelnen Farben in manchen Filtern, stammen aus Berechnungen, die mit den Bildern durchgeführt wurden.

Dadurch, dass wir ca. 500 dieser Bilder im Prototypen verwendet haben, können manche Darstellungen etwas Zeit benötigen, da Figma bisher nicht für solche Datenmengen ausgelegt zu sein scheint.
Der Prototyp ist auf Mobilgeräten leider nicht verfügbar
Der Prototyp benötigt manchmal etwas Zeit um alle Bilder zu laden. Durch einen Klick in den geladenen Prototyp kann mit der Taste "F" der Vollbildmodus aktiviert werden.
Das Ergebnis
Nach unserer finalen Präsentation war die HU sehr angetan von unserem Ergebnis, da wir vor allem die gewünschte Dualität zwischen einem Werkzeug und einer erkundbaren Visualisierung verwirklichen konnten.

Aus einer erzählerischen Perspektive gibt es möglicherweise noch Potenzial die Nutzer:innen mehr zu Leiten, im Sinne eines geführten Museumbesuchs.

Insgesamt sind wir als Team jedoch sehr froh dieses aufwändige Projekt gemeistert zu haben und unsere erste Publikation › feiern zu dürfen.
Entstehungszeitraum

4/2020 – 10/2020

Team

Myriam Hofmaier
Maryna Honcharenko
Giacomo Marinsalta
Leon Wolff

Programme

Figma
Sketch
Python 3.8

betreuung

Mark-Jan Bludau
Viktoria Brüggemann

Weitere Projekte
Phone Mockup with example Content
UI/UX Design
Mashup: Socy

Eine App, die Menschen nach Corona hilft soziale Kontakte zu finden und verstärken.

Screenshot of the improved amazon website
Typografie
Digitale Typografie: Amazon

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

Menü