Funktionserweiterung «Bilder vergleichen» im Cranach Digital Archive


Lennard Häring & Marius Hammer

Kontext
Cranach Digital Archive (CDA)
Modul
Screendesign
Semester
Wintersemester 2020/21
Studiengang
Medieninformatik Ba.

Das diesjährige Projekt dreht sich um das Cranach Digital Archive (CDA), eine Initiative der Stiftung Museum Kunstpalast, Düsseldorf und der Technischen Hochschule Köln in Zusammenarbeit mit über 270 Museen, Forschungseinrichtungen und Kirchgemeinden in 30 Ländern, gefördert durch die Andrew W. Mellon Foundation. Die Aufgabe besteht darin, das Archiv so zu erweitern, dass Bilder gesammelt und verglichen werden können. Bei den Endgeräten wurde sich für Touchdevices ab 9 Zoll und WIMP-Geräte entschieden. WIMP-Geräte haben wir noch einmal in “mittel” große und FullHD Geräte unterteilt. Bei der Zielgruppe handelt es sich um Experten. Vorgegebene Kommunikationsziele für das Design sind: professionell, klar, möglichst einfach, reduziert, akzentuiert und zeitlos, während Schriftgrößen und Abstände der Renard 10 Serie folgen. Als Basis für das Projekt wurden Figma-Dateien mit z.B. Komponenten und Ähnliches bereitgestellt. Da sich diese teilweise von der aktuellen Internetseite des CDA unterscheiden, haben wir uns an der aktuellen Seite orientiert, um das Design konsistent zu halten.

Bilder sammeln: Um Bilder miteinander vergleichen zu können, müssen diese vorerst zu einer Sammlung hinzugefügt werden. Durch hovern über den gewünschten Abzug auf der Detailseite , kann man den Abzug der Sammlung hinzuzufügen, wieder entfernen oder es einzeln betrachten. Bilder, welche in der Sammlung sind, werden mit einem Indikator versehen. Dieser wurde möglichst einfach, klar und akzentuiert gestaltet, um den Überblick auch bei vielen ausgewählten Bildern zu behalten. Sollte es mehrere Bilder für einen Zustand geben, kann der Nutzer über einen aktzentuierten und an das bestehende Design angepassten Button, alle Bilder des gewünschten Zustands auf einmal hinzufügen oder ggf. wieder entfernen.

Sammlung anzeigen: Sollten sich mindestens zwei Bilder in der Sammlung befinden, wird die Navigationsleiste um den Reiter “Sammlung anzeigen” erweitert. Im Sinne der Konsistenz haben wir uns für das selbe Layout wie auf der Hauptseite entschieden. Der einzige Unterschied ist, dass die Cards ohne Indikator und jeder Abzug einzeln dargestellt wird, um das Design möglichst einfach und klar zu halten.

Vergleich starten: Die Seite ist über einen akzentuierten Button erreichbar, welcher sich ebenfalls in der Navigationsleiste befindet, damit beide Navigationselemente für die Sammlung Nähe zueinander haben.

Vergleichen: Hier finden sich die wichtigsten Funktionen wieder. Der Screen setzt sich aus den einzelnen Views und einem globalen Menü zusammen. Ein View besteht aus einem eigenen Menü und einem Bild. Standardmäßig startet man in den Screen mit zwei Views, welche im Hochformat nebeneinander liegen. Die Views sind so entworfen, dass so viel Fläche wie möglich für die Bilder zur Verfügung steht und die Bilder gut erkennbar sind. Um Experten alle Möglichkeiten zu bieten, kann jeder View horizontal und vertikal geteilt werden. Jede Trennlinie bietet zudem die Möglichkeit die Größe der Views zu verändern oder andere Views zu löschen. Alle Funktionen sind in Buttongroups eingeteilt. Eine Gruppe für individuelle Funktionen eines Views, wie z.B. das Tauschen eines Bildes und eine Gruppe für globale Funktionen, wie z.B. der Fullscreen Modus. Die Icons sind konsistent, reduziert und möglichst einfach, was dem Nutzer helfen soll, ihre Funktion schnell zu erkennen. Die Gruppierung und Positionierung der Icons sind so gewählt, dass die Icons schnell gefunden werden und funktionale Zusammenhänge erkennbar sind.

Style-Guide

Styleguide für das Projekt von Lennard Häring & Marius Hammer