Funktionserweiterung «Bilder vergleichen» im Cranach Digital Archive


Enrico Caltabiano & Domenic Wolf

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

Hiermit präsentieren wir ihnen unser Ergebnis zum Projekt: „Funktionserweiterung im Cranach Digital Archive“. Der Arbeitsauftrag, der uns erteilt wurde, beinhaltet mehrere Funktionserweiterungen der Cranach Digital Archive Website. Um dies zu verwirklichen verwendeten wir das Farbschema der Webseite, sowie die Renard-Serie zur Bestimmung der Abstände. Zunächst galt es die bestehende Webseite für diese Vorgänge zu analysieren und ein passendes Konzept zu entwickeln. Hierfür iterierten wir verschiedene Wireframes und passten somit die Navigationsbar an, worauf wir diese um den Punkt „Sammlungen“, sowie die Implementierung des filter Buttons erweiterten. Darauffolgend wurden die angezeigten Bildobjekte ihren Maßen und Positionen abgeändert, um eine übersichtlichere Darstellung zu gewährleisten. Um den Benutzer mit kleinstmöglichem Aufwand die größtmöglichen Informationen zu liefern, wurde Desktop-konform, eine hover Funktion einzufügen. Damit der Nutzer nun die Möglichkeit besitzt, mehrere Objekte in einer Sammlung zusammenzufassen, wurden nun entsprechende Icons illustriert und für den Nutzer leicht zugänglich platziert. Der Nutzer hat daraufhin die Möglichkeit seine Sammlung zu verwalten. Zu diesem Zweck wurde ein Bildschirmoverlay designt welches ihm alle Optionen hierzu anzeigt. Zuletzt erhält der Nutzer einen ersichtlichen Indikator als Bestätigung zur Abspeicherung seines Objekts. Unter der Kategorie Sammlung wird dem Nutzer nun seine angelegten Sammlungen angezeigt, wobei hier für die Übersicht nicht nur der Name des jeweiligen Ordners angezeigt wird, sondern ebenso die Letzen drei hinzugefügten Objekte. Innerhalb einer Sammlung besitzt nun der Nutzer die Möglichkeit die Objekte zu sortieren. Dies wird mithilfe eines Indikators im drop down Menü ermöglicht. Um nun weitere Funktionserweiterungen zu realisieren, wurde innerhalb der Sammlung eine ausklappbare Menü-bar erstellt, um den Nutzer verschiedene Optionen zum Weiterarbeiten zu bieten. Möchte der Nutzer nun die „Vergleich“ Optionen auswählen, besitzt der die Möglichkeit mehrere Objekte seiner Sammlung auszuwählen und dann den Vergleich zu starten. Zu diesem Punkt wurden von uns Auswahlindikatoren erstellt, welche dem Nutzer optisch einwandfrei darstellen welche Objekte er ausgewählt hat. Ebenso wurde der Button zum Starten des Vergleiches im Optionsmenü verankert. Nachdem der Nutzer nun den Vergleich startet, werden ihm die ausgewählten Objekte sowie eine „Tool-bar“ angezeigt. Um den Blick des Nutzers nun ausschließlich auf die wesentlichen Bestandteile seiner Arbeit zu leiten, wurden dementsprechend die Größen seiner ausgewählten Objekte hervorgehoben. Zusätzlich wurde darauf geachtet, dass die Tool-bar sowie weitere Indikatoren wie z.B. „Beenden“ nicht zu sehr in den Fokus rücken. Mit Hilfe der Tool-bar stehen dem Nutzer folgende Vergleichstools zur Verfügung: die Lock Funktion, die Move Funktion, die Zoom Funktion und die Panning Funktion. Unter anderem besteht durchgehend die Möglichkeit die Objekte nach Belieben zu skalieren. Da die Panning Funktion besonders durch die Auswahl von ausschnitten brilliert, wurde hierzu ein passendes Grid designt, welches den Nutzer ermöglicht präzise ausschnitte auszuwählen. Zu guter Letzt wurde die Stapelansicht hinzugefügt, welche dem Nutzer ermöglicht ein Objekt mit einer Reihe anderer Objekte zu vergleichen. Hierfür wurde ein neues UI-Element designt, dieses zeigt das nachfolgende Objekt an, kann mithilfe von Navigationsbuttons gesteuert werden und zeigt mittels nummerischer anzeige die Objekten Anzahl an. Somit wurden nun alle in Auftrag gegebenen Funktionen von uns designt und implementiert.

Style-Guide

Styleguide für das Projekt von Enrico Caltabiano & Domenic Wolf