Funktionserweiterung «Bilder vergleichen» im Cranach Digital Archive


Emre Bulut & David Grimmeisen

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

Die Ausgangsbasis des Auftrags war es im Team gemeinsam eine Lösung für die geforderten Aufträge des Cranach Digital Archives zu erarbeiten. Dabei war es uns besonders wichtig die von uns konzipierten Designelemente so umzusetzen, dass diese in die bereits vorhandene Webseite fließend übergehen. Der Umfang der Funktionen sollte weiter ausgebaut werden und die Wünsche des Kunden decken. Die Lösungen sollen sofort erkenntlich machen, um was es geht und wie die einzelnen Funktionen anzuwenden sind. Der User soll sich nicht lange mit der Umgebung vertraut machen müssen, um zu verstehen, wie die Seite funktioniert, sondern direkt durch eine intuitive Gestaltung erkenntlich sein. Dabei haben wir uns hauptsächlich an den aktuellen Prototypen (https://lucascranach.org/graphics) orientiert, im Gegensatz zur bereitgestellten Figma-Datei.

Um die Projektaufgabe zu erfüllen, muss der Nutzer zunächst in der Lage sein, Bilder zu sammeln und zu speichern sowie diese Sammlung aufzurufen. Es muss für den Nutzer darüber hinaus klar erkennbar sein, ob sich ein Bild schon in der Sammlung befindet oder nicht. Zudem sollen die Bilder in der Sammlung nach bestimmten Kriterien sortiert werden können.

Möchte man bei unserem Konzept wissen, ob ein Bild der Sammlung angehört oder nicht, kann man dies leicht an einem kleinen Lesezeichen, platziert in der oberen Ecke rechts, erkennen. Ist dieses weiß gehört jenes Bild nicht der Sammlung an, ist das Lesezeichen jedoch gelb, ist das Bild Teil der Sammlung.
In beiden Fällen sind die Lesezeichen zum Teil durchsichtig (Fülle von 60%). Wenn man allerdings mit der Maus über jenes Symbol schwebt (hover) dann erscheinen diese undurchsichtig (Fülle von 100%). Zum Entfernen oder Hinzufügen eines Bildes zur Sammlung klickt man einfach auf das Lesezeichen.

In einer mittleren Leiste, direkt unter der oberen Menüleiste, findet sich die Option ‘Sortieren nach‘, welche es dem Nutzer erlaubt Bilder nach bestimmten Kriterien zu sortieren. Wählt man diese Option aus, kann der Nutzer alphabetisch nach dem Titel, sowie nach der Datierung, beginnend mit dem ältesten bzw. neusten Bild, sortieren.

Um zur eigentlichen Sammlung zu gelangen, klickt man einfach auf den neuen Menüpunkt „Sammlungen“ in der oberen Leiste.
Innerhalb dieser Sammlung hat man die Möglichkeit mehrere Bilder miteinander zu vergleichen. Dazu wählt man einfach die Option „Vergleichen“ aus, welcher dem Nutzer die Möglichkeit gibt mehrere Bilder, welche nachher vergleicht werden sollen, mit Hilfe von Checkboxen auszuwählen. Bei der Auswahl der zu vergleichenden Bilder hat man auch die Möglichkeit den Vorgang jederzeit wieder abzubrechen.

Die entwickelten Elemente der Aufgaben „Bilder Vergleichen“ setzen sich wie folgt zusammen: Dem User sollen eine Option gegeben werden, bereits selektierte Bilder die in seiner eigens erstellten Sammlung miteinander zu vergleichen. Bei dieser Umsetzten entschieden wir uns dazu diese so simpel wie möglich umzusetzen und uns an bereits vertraute Umsetzungsvarianten anzulehnen. Somit kann der Nutzer einfach seine Bilder anklicken und mit einer Tickbox selektieren. Die selektierten Bilder können nun durch ein Dropdown Menü der vorhandenen Vergleichsfunktionen miteinander verglichen werden. Anstelle der Tickboxes implementierten wir eine Alternative in der der Nutzer die vorhandenen Bilder in seiner Sammlung einfach per Drag and Drop die 2 Kästchen ziehen kann um diese miteinander zu vergleichen. Dem Nutzer soll die Möglichkeit gegeben werden 2 Bilder optisch miteinander zu vergleichen. Dies erfolgt über das „Hovern“ mit der Maus über ein Bild, welches dann vergrößert dargestellt wird. Wir entschieden uns für diese Methode sodass die Feinheiten der Gemälde genauer miteinander verglichen werden können. Der Nutzer soll ebenfalls die Möglichkeit haben mehr als nur 2 Gemälde miteinander vergleichen zu können. Diese Funktion basiert allerdings nicht auf einem visuellen Vergleich. Die Metadaten der Gemälde werden hier in den Fokus gestellt. So können Details wie Name, Datierung, Maße etc. direkt miteinander verglichen werden.

Style-Guide

Styleguide für das Projekt von Emre Bulut & David Grimmeisen