Die Winter School widmete sich der Frage, welche Herausforderungen sich hinter den Benutzungsoberflächen digitaler Editionen verbergen. Welche Anforderungen sind zu beachten? Welche Möglichkeiten gibt es, um den Entwicklungs-Workflow und den Design-Prozess zu gestalten? Wo kann auf bereits bestehende Standards oder schon entwickelte Lösungen zurückgegriffen werden? Um diese Fragen gemeinsam zu diskutieren, wurde die School in fünf Sektionen unterteilt, an denen sich der Entwicklungsprozess eines Web Interface nachvollziehen lässt. Im abgestimmten Zusammenspiel zwischen theoretischen und praktischen Einführungen einerseits und Blöcken zur praktischen Arbeit in Gruppen andererseits entstanden so erste Entwürfe für eigene Projekte der Teilnehmer:innen1.
LENA-LUISE STAHN und PATRICK SAHLE (Wuppertal) diskutierten im ersten Vortrag das Interface als Aufgabe, Problem und Herausforderung digitaler Editionen. Das Interface als wesentlicher Bestandteil digitaler Editionen habe durchaus einen innovativen Charakter und solle vor diesem Hintergrund neu gedacht werden. Wie sieht die Weiterentwicklung des Interface einer Edition aus den ursprünglichen Traditionen der Druckkultur heraus aus? Wie kann man die potenziellen Erwartungen der Leser:innen aufnehmen und behutsam modernisieren? Klar ist: Der digitale Raum bietet mehr Möglichkeiten und Flexibilität als das Printmedium. Inhalts- und medienadäquate Strukturen, intuitive Navigationsoptionen sowie neue Formen der Textdarstellung und Inhaltspräsentation können dabei helfen, die spezifischen Beschränkungen der Druckkultur hinter sich zu lassen.
LUIS MOSSBURGER (Regensburg) sprach über das User Experience Design (UX-Design). Vor allem im Blick auf das Bibliothekswesen beschäftigt er sich auch mit Webdesign und ist mit den dort verankerten konzeptionellen und gestalterischen Methoden bestens vertraut. Zu Beginn machte er am Beispiel einer Stellenausschreibung deutlich, dass obwohl UX-Design und User Interface Design (UI-Design) irrtümlich oft synonym verwendet werden, es sich um zwei grundverschiedene Arbeitsschritte in der Entwicklung von Oberflächen handelt. UX umfasst das konzeptionelle, nicht (nur) visuelle Gestalten der User Experience, also der Untersuchung des Nutzererlebnisses der zuvor festgelegten Zielgruppe sowie deren Ansprüche an ein Interface. UI beinhaltet den praktischen Teil, die tatsächliche Umsetzung einer Weboberfläche. Moßburger stellte klar, wie beide Konzepte zusammenspielen und welche Rolle sie im Prozess der Entwicklung von Interfaces spielen.
Anschließend setzten TORSTEN ROEDER (Wuppertal), Lena-Luise Stahn und Patrick Sahle sich kritisch mit dem Thema Oberflächengestaltung für einen anderen Anwendungsbereich auseinander. Ziel dieser Einheit war eine Sensibilisierung für die relevanten Interface-Aspekte von digitalen Editionen. Im anschließenden Praxisteil wurden in Kleingruppen ausgewählte Beispieleditionen hinsichtlich vordefinierter Kriterien (Rahmenbedingungen und Zielgruppe, Inhalte, Benutzerführung, Gesamtstruktur, Ästhetik, Präsentation der Inhalte, weitere, andere Perspektiven) analysiert und die Ergebnisse gesichert. Durch die intensive Auseinandersetzung mit den Beispieleditionen wurde ein Reflexionsprozess angestoßen sowie eine differenzierte und systematische Prüfung der Funktionen und Features durchgeführt. Die aus der Untersuchung hervorgegangenen Ergebnisse wurden in der Abschlussdiskussion im Plenum reflektiert und systematisiert.
Luis Moßburger leitete die zweite Sektion der Winter School ein, in der es um die Konzeptionierung von Oberflächen ging. Im Fokus des Interface Design standen die Prinzipien des UI, die es bei der praktischen Umsetzung von Interfaces zu berücksichtigen gilt. Die fünf bekanntesten Prinzipien sind scale, balance, visual hierarchy, gestalt und contrast. Anhand von abstrakten, auf einfachen Formen basierten Beispielen machte Moßburger deutlich, wie man mit kleinen gestalterischen Modifikationen (beispielsweise dem Hinzufügen oder Weglassen von Abständen, Vergrößerung oder Verkleinerung von Über- oder Unterschriften) im Interface große Effekte erzielen kann.
CHRISTOPHER POLLIN (Graz) stellte in Vorbereitung auf die Hands-on-Session die Anforderungsanalyse vor, bei der Kriterien für die konzeptionelle Entwicklung eines Interface aufgestellt werden sollen, die die spätere praktische Umsetzung erleichtern. Dabei sind technische Infrastrukturen und Technologien sowie menschliches Know-how und eine klare Kommunikation gleichermaßen zu berücksichtigen – stets mit den Wünschen und Bedürfnissen der potenziellen Zielgruppe vor Augen. Eines von vielen Konzepten innerhalb des Requirement Engineering sind User Stories. Sie bilden einen durchaus hilfreichen Zwischenschritt vor der technischen Implementierung. Nach Pollin erlauben sie schnelle Feedback-Loops mit Kund:innen bzw. Stakeholder:innen, helfen Anforderungen zu verstehen und nicht brauchbare (oder redundante) Dinge auszusortieren.
Christopher Pollin übernahm auch den dritten Vortrag über Wireframes. Wireframes sind wie User Stories fester Bestandteil des Requirement Engineering und befinden sich auf der strukturellen Seite des Interface Designs. Sie bieten eine grundlegende, zweidimensionale Darstellung einer Software oder einer Webseite. Wireframes skizzieren die einzelnen views einer Webanwendung sowie die Zusammenhänge und Querverweise zwischen ihnen. Ihr Vorteil liegt laut Pollin darin, dass als Vorstufe vor der praktischen Umsetzung zunächst ein sehr niederschwelliger Draft der Website mit allen strukturellen Elementen, inklusive Querverweisen, entwickelt wird. Im Praxisteil wurden in Gruppenarbeit Wireframes mit Hilfe von Stift, Papier und Schere erstellt. Anschließend wurden die kreativen Entwürfe, die durchaus Potenzial für einen professionellen Mockup mitbrachten, präsentiert.
FRANZ FISCHER (Venedig) stellte Präsentationsformen kritischer Editionen vor. Aus einer philologischen Perspektive betonte er die Notwendigkeit des kritischen Apparats und gab einen kurzen Überblick über dessen historische Entwicklung, insbesondere mit Blick auf die Darstellung von Textvarianz. Im Anschluss wurde diskutiert, inwiefern der klassische kritische Apparat eine Textform ist, die auch in digitalen Settings ihre bisherige Gestalt bewahren sollte. Einerseits sei der typische Charakter des kritischen Apparats vor allem den durch das Medium Buch gesetzten Grenzen geschuldet. Andererseits besäße die so entstandene Textform durchaus einen eigenen Wert.
Lena-Luise Stahn und FABIAN ETLING (Berlin) stellten zu Beginn der dritten Sektion zum Themenkomplex Mockups in ihrem Tool-Survey einschlägige Software vor, die zur Erstellung von Wireframes, Mockups und Prototypen genutzt werden kann. Während Wireframes nur aus groben Skizzen einer geplanten Webanwendung bestehen, beinhalten Mockups schon Elemente visuellen Designs, wie zum Beispiel die Farbgebung der geplanten Webanwendung oder Logos von am Projekt beteiligten Institutionen. Ein Prototyp bietet noch mehr Komplexität, da hier auch funktionale interaktive Elemente (z.B. die Navigationsleiste) integriert werden können, die erste Tests durch Anwender:innen ermöglichen.2 Zu den vorgestellten Tools zählten u.a. Miro3, Adobe XD4, Balsamiq Wireframing5, Sketch6 und figma7. Wichtigste Erkenntnis des Tool-Survey war, dass Funktionalitäten zur Erstellung von Wireframes, Mockups und Prototypes niemals von verschiedener Software gleich gut bereitgestellt werden. Je nach Projekt, Anforderungen und Workflow sollte man also das jeweils am besten geeignete Tool auswählen.
Anschließend erläuterte Fabian Etling die Funktionalitäten von figma. Er führte an, dass Figma vor allem für die Erstellung von Prototypes weit verbreitet sei und viele Möglichkeiten biete. Zunächst demonstrierte er die Nutzung klassischer Funktionen wie das Erstellen und Formatieren von Formen und Textfeldern. Um die Konfiguration interaktiver Elemente zu ermöglichen, müssen Formen und Textfelder nach Bedarf in „Gruppen“ gefasst und in „Komponenten“ und „Instanzen“ umgewandelt werden. Die Zusammenhänge zwischen diesen unterschiedlich definierten Elementen wurden den Teilnehmer:innen der Winter School spätestens in der dem Tutorial folgenden Hands-on-Session klar. In dieser wurden die in Sektion 2 in Gruppenarbeit erstellten Wireframes in figma realisiert, demonstriert und zur Diskussion gestellt.
In der vierten Sektion stellten ANDREAS MERTGENS (Wuppertal) und NADINE SUTOR (Wuppertal) die Grundlagen von HTML und CSS vor. HTML (HyperText Markup Language) ist als Auszeichnungssprache vor allem ein Mittel zur Strukturierung elektronischer Dokumente. CSS (Cascading Style Sheets) wird zur Erstellung von Gestaltungsanweisungen für HTML-Dokumente genutzt. Nadine Sutor gab einen Überblick über den Aufbau und die grundlegenden Elemente von HTML-Dokumenten. Außerdem verwies sie auf die Wichtigkeit einer klaren Unterscheidung zwischen Struktur und Darstellung eines elektronischen Dokuments. Zwar sei es möglich, Anweisungen wie die Darstellung eines Wortes in fettgedruckter Schrift auch über HTML zu geben, jedoch gehöre es zum guten Stil, solche Anweisungen mit CSS umzusetzen, da dies der Ort für Gestaltungsanweisungen sei. Andreas Mertgens stellte die Grundlagen von CSS vor, bevor er auf CSS Grid einging. Mit CSS Grid können Layouts erstellt werden, die eine dynamische Darstellung ermöglichen. Die Vorzüge von CSS Grid konnten die Teilnehmer:innen selbst ausprobieren.
In ihrem Vortrag zu Werkzeugen und Architekturen für digitale Editionen präsentierten Patrick Sahle, Fabian Etling und SEBASTIAN STOFF (Graz) zunächst verschiedene (generische) Architekturen, um dann konkret auf die Entwicklung von Frontends digitaler Editionen mittels React8 einzugehen. Sebastian Stoff gab zu bedenken, dass der Einsatz eines Frontend-Frameworks wie React gut durchdacht werden sollte, da hier viele verschiedene Technologien miteinander verbunden werden, die später nicht mehr leicht voneinander getrennt und in ein anderes Framework übertragen werden können. Somit mache man sich langfristig von dem gewählten Framework sowie den dahinterstehenden Firmen (im Fall von React ist das Facebook) abhängig.
Abgerundet wurde die vierte Sektion durch einen Abendvortrag von MATHIAS GÖBEL (Göttingen), der mit TextAPI9 und TIDO10 eine an der Niedersächsischen Staats- und Universitätsbibliothek Göttingen entwickelte „modulare Infrastruktur für Textobjekte”11 vorstellte. Gemeinsam sollen TextAPI und TIDO die Möglichkeit bieten, die in digitalen Editionsprojekten erarbeiteten Daten FAIR12-konform bereitzustellen und über ein Frontend out-of-the-box zu präsentieren. Als Beispiel führte Göbel die digitale Edition zu den Ahiqar-Texten13 an, die mit Hilfe dieser Tools veröffentlicht worden ist. Als einen entscheidenden Vorteil der TextAPI nannte er die Interoperabilität von Texten ähnlich der von Bildern im IIIF14.
Die fünfte Sektion war den do’s und dont’s des Webdesigns gewidmet. ARJAN DHUPIA (Berlin), STEFAN DUMONT (Berlin), Mathias Göbel, STEPHAN KURZ (Wien) und ELENA SUÁREZ CRONAUER (Mainz) stellten in kurzen Vorträgen ihre Erfahrungen mit dem Interface Design digitaler Editionen vor. Im Anschluss gingen sie auf Fragen der Teilnehmer:innen ein. Das im Laufe der Winter School immer wieder diskutierte Thema der Komplexität von Interfaces digitaler Editionen und die Frage, wo Komplexität notwendig ist, um dem Forschungsgegenstand gerecht zu werden und wo Komplexität vermieden werden kann, wurden hier erneut aufgegriffen und diskutiert. Elena Suárez Cronauer empfahl in diesem Kontext das Buch „Don’t Make Me Think” von Steve Krug, in dem beschrieben wird, wie man sich die von Anwender:innen internalisierten Funktionsweisen von Webseiten im Interface Design zunutze machen kann.
Bei den Teilnehmer:innen der Winter School kam der sehr spezifische Fokus auf das Interface Design digitaler Editionen sehr gut an. Da das Programm den Design-Workflow gut abgebildet habe und die Theorieblöcke an geeigneten Stellen durch praktische (Gruppen-)Arbeitsphasen ergänzt worden seien, wurde der Wissenszuwachs von den Teilnehmer:innen als recht hoch eingeschätzt. Die lebhaften Diskussionen mit den Vortragenden, aber auch der Teilnehmer:innen untereinander, habe für Probleme und Herausforderungen im Interface Design digitaler Editionen, besonders in Bezug auf die UX, sensibilisiert. Angemerkt wurde aber auch, dass die Bedeutung von Typographie und Ästhetik für das Interface Design digitaler Editionen hier nicht thematisiert wurde. Insgesamt ist durch die Winter School deutlich geworden, dass das Interface als wesentlicher Bestandteil digitaler Editionen in Editionsprojekten nicht unterschätzt und keinesfalls zu spät angegangen werden sollte, da sich hinter jedem UI ein komplexer Entwicklungsprozess verbirgt.
Konferenzübersicht:
Sektion 1: Evaluation und Kritik von Editionen
Lena-Luise Stahn (Wuppertal) / Patrick Sahle (Wuppertal): Kontext und Einführung: Zur Visualisierung von Editionen
Luis Moßburger (Regensburg): Grundlagen: User Experience Design
Torsten Roeder (Wuppertal) / Lena-Luise Stahn (Wuppertal) / Patrick Sahle (Wuppertal): Zur Kritik von Oberflächen
Sektion 2: Konzeptionierung von Oberflächen
Luis Moßburger (Regensburg): Grundlagen: Interface Design
Christopher Pollin (Graz): Anforderungsanalyse
Christopher Pollin (Graz): Usability und Konzeptentwicklung
Franz Fischer (Venedig): Was vom Texte übrig bleibt. Präsentationsformen kritischer Editionen.
Sektion 3: Mockups
Fabian Etling (Berlin) / Lena-Luise Stahn (Wuppertal): Tool-Survey
Fabian Etling (Berlin): Prototyping mit figma
Sektion 4: Web-Technologien
Nadine Sutor (Wuppertal) / Andreas Mertgens (Wuppertal): Einführung HTML/CSS
Patrick Sahle (Wuppertal) / Fabian Etling (Berlin) / Sebastian Stoff (Graz): Über- und Ausblick: Werkzeuge und Architekturen für digitale Editionen
Mathias Göbel (Göttingen): Die Edition als Interface für Maschine und Mensch
Sektion 5: Meet the developers
Arjan Dhupia (Berlin) / Stefan Dumont (Berlin), Mathias Göbel (Göttingen), Stephan Kurz (Wien), Elena Suárez Cronauer (Mainz): Wie haben Sie’s gemacht? The Do’s and Don’t’s of Webdesign
Anmerkungen:
1 Hinweis: Die Vortragsfolien, auf die sich der folgende Beitrag unter anderem stützt, sind auf der Website des IDE und dem dort publizierten Programm verlinkt.
2: https://www.aha.io/roadmapping/guide/product-management/wireframe-mockup-prototype (11.04.2022).
3: https://miro.com/ (11.04.2022).
4: https://www.adobe.com/de/products/xd.html (11.04.2022).
5: https://balsamiq.com/, letzter Zugriff (11.04.2022).
6: https://www.sketch.com/, letzter Zugriff (11.04.2022).
7: https://www.figma.com/, letzter Zugriff (11.04.2022).
8: https://reactjs.org/, letzter Zugriff (11.04.2022).
9: https://subugoe.pages.gwdg.de/emo/text-api/ (11.04.2022).
10: https://gitlab.gwdg.de/subugoe/emo/tido (11.04.2022).
11: https://pad.gwdg.de/p/ide-interfaces#/3 (11.04.2022).
12: Wilkinson, M. D. et al.: The FAIR Guiding Principles for scientific data management and stewardship, in: Data 3:160018 (2016), S. 1-9; DOI: 10.1038/sdata.2016.18.
13: https://ahiqar.uni-goettingen.de/syriac/ (11.04.2022).
14: https://iiif.io/, letzter Zugriff (11.04.2022).