Studienarbeit – Entwicklung und Umsetzung einer topic-orientierten Informationsarchitektur

Titelbild_Wanderlust_1024x460

Zu den bisherigen Vorstellungen aus unserem Masterstudium wollen wir Euch heute wieder eine Studienarbeit vorstellen. Die Umfrage  , welche wir in diesem Zusammenhang durchführten, haben wir hier schon vorgestellt. Jetzt wollen wir Euch das Projekt näher bringen.

 Durch den reichhaltigen Umfang des Projektes können hier nicht alle Teile detailliert dargestellt werden.

Aufgabenstellung

Aufgabe des Mastermoduls Content Strategy und standardisierte Informationsarchitektur mit Schwerpunkt DITA unter Leitung von Prof. Sissi Closs war es, eine themenspezifische Informationsarchitektur zu entwickeln und mit DITA umzusetzen. Die Informationsarchitektur soll dabei der topic-orientierten Strukturierung folgen und das Single-Sourcing-Prinzip unterstützen. Zudem soll das Informationsmodell und der Standard DITA mit seinen Features kennengelernt und angewandt werden.

Projektthema

Thematischer Schwerpunkt der Studienarbeit war die Organisation digitaler Inhalte. Es lag kein spezielles Thema vor, dieses war frei zu wählen. Gemäß des digitalen Zeitalters wählten wir einen digitalen Reiseführer.

Die Motivation des digitalen Reiseführers entstand, da man bei Besuch von Verwandten oder Freunden manchmal gar nicht richtig weiß, welche Sehenswürdigkeiten seiner Stadt man am besten zeigen kann oder soll. Hinzu kommt, dass das auserwählte Objekte möglicherweise zu diesem Zeitpunkt nicht geöffnet hat und man solche Informationen erst mal recherchieren muss. Hier wollten wir eine Informationsarchitektur entwickeln und Informationen für den Nutzer so bereitstellen, dass er dahingehend unterstützt wird.

Ausgangssituation

Es lag kein spezieller vorgefertigter Inhalt vor, der analysiert und überarbeitet werden sollte (Bottom-Up-Prinzip). Die Inhalte wurden recherchiert und zusammengetragen (Top-Down-Prinzip). Dabei lag aber kein Fokus auf der inhaltlichen Gestaltung, vielmehr auf Informationsmodellierung, Strukturierung und auf den Publikationsmöglichkeiten.

Zielsetzung

Der digitale Reiseführer soll es dem Nutzer ernöglichen, eine Stadt und ihre Sehenswürdigkeiten kennenzulernen. Individuell nach dem eigenen Geschmack können Objekte dahingehend gefiltert werden. Wer sich einen ganzen oder halben Tag vergnügen will, kann sich eine Tages- oder Halbtagestour ausgeben lassen. Der Vorteil hierbei ist, dass der Nutzer sich die Informationen nicht selbst zusammenstellen muss, sondern komfortabel zusammengestellt bekommt.

Zielgruppe

Die Zielgruppe eines Reiseführers ist sehr breit gefächert. Die Altersspanne reicht von 14 bis 80 Jahre und ist geschlechtsunspezifisch. Für einen digitalen Reiseführer kristallisiert sich eine Kernzielgruppe im Alter von 14 bis 70 Jahren heraus.

Durch die Kategorisierung von Inhalten (Metadaten) können Präferenzen einzelner Zielgruppen zusammengefasst werden (mögliches Beispiel: jüngere Menschen > Weinfest vs. ältere Menschen > Wanderung).

Projektschwerpunkte

Die Konzeption und Umsetzung der Inhalte umfasste folgende Schwerpunkte:

  • Content Strategy
  • standardisierte topic-orientierte Informationsarchitektur
  • Standardisierungsmethode: Klassenkonzept
  • DITA
  • Publikationen

Vorgehen

Zunächst wurde sich mit der Literatur zum Thema Organisation digitaler Inhalte befasst. Schwerpunkt lag dabei auf dem digitalen Werk Mobile Design Pattern Gallery von Theresa Neil (2012)*.

* Die Print-Auflage von 2014 war inhaltlich sehr gleich, deswegen fokussierten wir uns auf das vorgegebene Werk.
Während und nach der Informationsrecherche zur Organisation digitaler Inhalte, haben wir uns der Entwicklung einer Informationsarchitektur, eines Klassenkonzepts, Linkkonzepts, Metadatenkonzepts und Mapkonzepts gewidmet. Ergänzend haben wir Content zum Thema Reiseführer recherchiert und erstellt. Parallel haben wir von Anfang an verschiedene Ausgaben testweise produziert und diese kontinuierlich weiterentwickelt, auch wenn der gesamte Content noch nicht erstellt war. Innerhalb dieser Zyklen konnten wir unser Gesamtkonzept und die Publikationsideen verifizieren und kontinuierlich verbessern. Abschließend wurde die Informationsarchitektur mithilfe eines Experten-Tests geprüft.

Redaktionelles Konzept

Das Konzept stellt eine Komplettlösung bereit, die es ermöglicht, Informationen unterschiedlicher Art für die Erstellerseite zu handhaben und diese Informationen der Nutzerseite bereitzustellen. Das Gesamtkonzept ist bis auf Wortebene konzipiert und stützt sich auf drei Säulen:

  • Informationsarchitektur
  • Klassenkonzept (inkl. Link- und Metadatenkonzept)
  • Mapkonzept

Informationsarchitektur

Durch die Neukonzeption des Contents wurden zunächst mögliche Inhalte ermittelt. Daraus wurden Inhaltstypen abgeleitet und ihnen der entsprechende DITA-Topic-Typ zugewiesen:

  • Anleitung für Ausflüge | tasks
  • Information zur Stadt | concept
    • Daten & Fakten
    • Geschichte
    • Klima
    • Essen & Trinken
    • Veranstaltungen
  • Erklärung | glossaryentries
  • Sehenswürdigkeiten | concept

Die entwickelte Informationsarchitektur wurde in der Hierarchie bewusst sehr flach gehalten. So bekommt der Nutzer einen schnellen Überblick und verliert sich nicht im Inhalt („Getting-Lost-Syndrom“, vgl. Closs 2007:58). Prinzipiell liegen die Informationen auf einer Ebene, in den Themen Essen und Trinken, Events und Unterhaltung geht der Inhalt auf die zweite Ebene (Web-App). Hier hat der Nutzer jedoch die Möglichkeit über Kategorien die Daten zuvor zu filtern und muss sich so nicht die ganze Liste anschauen, wenn er gezielt Informationen sucht. In der AngularJS-Anwendung kann der Nutzer bereits auf der ersten Ebene filtern.

Für die erste Ebene wird das Organisationsmuster Springboard verwendet, in der zweiten Ebene verwenden wir in der Web-App das List Menu, in der Website ein Pop-up-Fenster (blur), so bleibt der Nutzer immer im Kontext. Das Springboard ist ein guter Startpunkt, um in eine Applikation einzusteigen, da das Navigationsmuster durch eine Landing Page mit Menüoptionen gekennzeichnet ist (vgl. Neil 2008:17).

Informationsarchitektur

Klassenkonzept

Das Klassenkonzept besteht aus 5 Topic-Typen. Die entsprechenden DITA-Topic-Typen wurden bei der Entwicklung gleich zugeordnet, die innere Struktur der Topics passt gut zum Inhalt der Topic-Typen. Diese Topic-Typen sind nicht gleich zu setzen mit den zuvor definierten Informationstypen (siehe Informationsarchitektur ).

  • Anleitung | task
  • Beschreibung | concept
  • Erklärung | glossentry
  • Daten & Fakten | reference
  • Medienelement | topic

Der Topic-Typ „Beschreibung“ kann durch seinen flexiblen Aufbau für mehrere Informationstypen verwendet werden (z.B. Event, Sehenswürdigkeiten). Dadurch wird das Klassenkonzept insgesamt schlank gehalten und kann durch diese geringe Komplexität schneller erfasst und erlernt werden.
Das Medienelement wird als eigenes Topic ausgelagert, da es so einfach zu ersetzen und zu pflegen ist. Gerade ein digitaler Reiseführer lebt von seiner Aktualität, daher muss man Daten auf einfache Weise aktualisieren können.

Exkurs Standardisierungsmethode KLASSENKONZEPT (Closs)
Neben der topic-orientierten Strukturierung und Modularisierung müssen Inhalte gewissen Regeln folgen. 
Sie werden von Closs Topic- und Linkregeln (Closs 2007:113, 2007:124) genannt.
> Topic-Größe: 
Ein Topic soll „nicht zu groß“ sein und maximal eine Bildschirmseite befüllen, dies geht einher mit der Aussage, 
dass der Inhalt für den Nutzer schnell erfassbar sein soll (vgl. Closs 2007:113).
> Kernaussage: 
Das Topic sollte nur eine Kernaussage enthalten, die Vorgabe dafür ist meist die Überschrift (vgl. Closs 2007:37) 
und wird vom Informationsarchitekt im Klassenkonzept festgelegt. 
Inhalte, die die Kernaussage nicht betreffen, werden entfernt oder in ein anderes Topic ausgelagert.
> Nutzergerechte Inhalte: 
Die Inhalte sollen nur für den Nutzer relevante Informationen enthalten (vgl. Closs 2007:113), 
zudem greift hier auch das Minimalismusprinzip, es gilt Füllwörter zu streichen (vgl. Closs 2007:105).

 

Linkkonzept

Folgende Linktypen wurden zur standardisierten Verwendung definiert:

  • Topic-Inhalt:
    Durch Klicken wird der Topic-Inhalt in einem Pop-up-Fenster (AngularJS-Anwendung) oder auf einer separaten Seite (jQM-Anwendung) dargestellt.
  • Erklärung:
    Dialektische Begriffe sind als Link im Text hinterlegt. Beim Klicken auf die Begriffe, werden die Definitionen in einem Pop-up angezeigt.
  • Externe Links:
    Externe Links werden mit der URL am Ende des Topics angegeben.
  • Primäre Navigation:
    Die Topics/Maps werden als Springboard (Kacheln) dargestellt. Sie sind anklickbar und verlinken auf die nächste Ebene oder direkt auf den Topic-Inhalt.
  • Sekundäre Navigation:
    Die Topics werden als List Menu dargestellt. Sie sind anklickbar und verlinken auf den Topic-Inhalt.

 

Metadatenkonzept

Metadaten sind wichtig für eine einheitliche Content Strategy. Damit Informationen gefiltert werden können, müssen sie strukturiert und mit Merkmalen versehen oder ausgestattet werden. Durch die Vergabe von Metadaten können so nach diesen gefiltert werden. Die Filterung von Inhalt ist nicht nur wichtig für die Informationsausgabe für den Nutzer, sie unterstützt auch den Ersteller bei der Handhabung von Informationen.

Die Taxonomie ist ein System, um Informationen (digitale Inhalte) so zu organisieren, dass sie gefunden werden (vgl. Cooper/Manning/Rockley 2009:70). Von Nutzer und Ersteller gleichermaßen. Daher wurden Metadaten in 2 Typen eingeteilt und unterschieden:

  • redaktionell (intern) und
  • filternd (extern)

Redaktionelle Metadaten beziehen sich auf die Ordnung von Topics und Maps, um sie aufgrund ihrer großen Menge übersichtlich verwalten zu können.

Filternde Metadaten dienen zur späteren Filterung (filtering) und farblichen Kennzeichnung (flagging) von digitalen Dokumenten. Durch die Verarbeitung über ditaval-Dateien wird die Filterung nach bestimmten Bedingungen angestoßen. Dabei werden von der ditaval-Datei nur die Topics beachtet, die dem definierten Wert für das spezifische Metadatum entsprechen, z.B. audience = winelover. Alle Topics, die z.B. winelover nicht als audience definiert haben, werden bei der Ausgabe nicht beachtet. Für das Klassenkonzept sind besonders Metadaten im Hinblick auf geeignete Zielgruppen wichtig und werden dem Attribut audience zugeweisen.

Muster-Topics

Muster-Topics werden von Prof. Sissi Closs empfohlen (Closs 2007:110), sie dienen als Vorlage zur Contenterstellung. Alle Festlegungen der verschiedenen Topic-Typen aus dem Klassenkonzept wurden jeweils als Muster-Topics umgesetzt.

Mapkonzept

Für die Umsetzung mit DITA und die Datenverarbeitung wurde ein Mapkonzept entwickelt. Für die Contentzusammenstellung wurden verschiedene Maps als Informationsgerüst definiert. Durch die reguläre Aktualisierung der Inhalte (Veranstaltungen, Preise, Bilder, etc.) muss das Gerüst recht flexibel sein und gut auf solche Gegebenheiten reagieren können.

Es wurden drei Map-Typen definiert*.

  1. MAP.ditamap
    Die erste Map enthält maprefs zu allen vorhandenen Maps des Typen MAP_Stadt.ditamap.
  2. MAP_Stadt.ditamap
    Diese Map besteht aus bestimmten topicrefs sowie maprefs. Als Topics wird der Topic-Typ DAT der entsprechenden Stadt referenziert sowie die Geschichte, die dem Topic-Typ BES angehört. Als Maps werden Maps des Typs MAP_Stadt_BES der jeweiligen Stadt referenziert.
  3. MAP_Stadt_BES.ditamap
    In dieser Map werden die Topic-Typen BES referenziert. Je nach Ausgabemedium wird entweder eine Map mit allen vorhandenen BES-Topics ausgegeben und es können mithilfe der Metadaten die entsprechenden Inhalte gefiltert werden. Es können jedoch auch kategoriespezifische Maps (z.B. Essen und Trinken) erstellt werden.

* Stadt steht als Platzhalter für den Stadtnamen (z.B. Karlsruhe)

In einer DITA-Map werden Content (Referenzierung von Topics), Beziehungen (der Topics untereinander) und Metadaten für Informationsgebilde definiert. Sie ist quasi die strukturelle Hülle des Ausgabeformates. Metadaten können bei der Produktion einer Ausgabe bestimmte Kontexte berücksichtigen und so eine bedingte Verarbeitung forcieren.

Prozess

Prozess_Contenterstellung_zukuenftigDer Redaktionsprozess wurde wie folgt definiert:
Zunächst müssen Informationen zur Contenterstellung recherchiert werden. Vorgaben für den Content sind im Konzept und im digitalen Redaktionsleitfaden  zu finden. Der Content wird in FrameMaker erfasst (Muster-Topics). Je nach Ausgabemedium wird die Ausgabe mit dem OTK oder diversen Batches und Skripten ausgeführt. Danach können die Inhalte bereitgestellt und verteilt werden.

Publikationen

Im Hinblick auf die Resultate aus der an Fachexperten durchgeführten Umfrage , haben sich verschiedene Anforderungen an das Projekt ergeben. Da die Mehrzahl der Probanden für native Apps (76,9%) und Websites bzw. Web-Apps (66,7%) gestimmt haben, sind diese Themen in den Fokus des Publikationsprozesses gerückt.
In Anbetracht verschiedener technologischer Konvertierungsmöglichkeiten ist eine Web-App schnell in eine hybride App konvertiert. Dadurch lag die Konzentration auf die Umsetzung der FrameMaker-Inhalte in eine Web-App und eine Website. Da in der Software kein Export in ein modernes HTML5-Framework möglich war, wurden projekt- und klassenkonzeptspezifische Exportmöglichkeiten gesucht.

Für die Web-App wurde das HTML5-Framework jQueryMobile verwendet,für die Website das HTML5-Framework Bootstrap. Über verschiedene Skripte soll der Ausgangsdatenstamm in Form von Topics für beide Medien automatisiert erzeugt werden.
Der Vorteil der Erstellung externer Transformationen ist, das Daten aus etablierten und bewährten Tools in modernen, digitalen Medien ausgegeben werden können. Wirtschaftlich und arbeitsökonomisch betrachtet, spart das Geld, da bereits eingerichtete DTP-Systeme (wie z.B. FrameMaker) nicht durch modernere Programme ersetzt werden müssen. Die Einarbeitungszeit für Redakteure fällt weg und gewohnte Arbeitsprozesse müssen nicht neu gestaltet werden, sie werden lediglich ergänzt. So können neueste Trends ohne externe Dienstleister oder neuer Software verfolgt und umgesetzt werden.

Web-App (jQM-Anwendung)

Bei der Transformation der Daten zur Web-App handelt es sich um eine klassenkonzeptspezifische Transformation. Das heißt, die Daten können nach Klassenkonzept erstellt, gespeichert und verwaltet sowie ohne Mehraufwand transformiert werden.
Prozess_Publikation_jQM

Zunächst werden Daten ausgelesen (mithilfe mehrerer Skripte) und transformiert. Die XML-Daten werden mittels verschiedener XSLT-Skripte automatisiert in eine mobile Applikation transformiert.
Am Ende ist so aus den XML-Daten ein HTML-Konstrukt entstanden und präsentiert die Inhalte statisch.

Durch die Skripte lassen sich auf diesem Weg neue oder geänderte Inhalte automatisiert generieren. Der Fokus kann damit auf die Contenterstellung gelegt werden. Wie bereits angesprochen, wäre es in einem nächsten Schritt zudem möglich mithilfe von Frameworks wie PhoneGap die Web-App in eine hybride App umzuwandeln und so in den App Stores bereitzustellen.

 

Website (AngularJS-Anwendung)

Auf Basis eines erweiterten Metadatenkonzepts, einiger XSLT-Stylesheets und einem HTML5-Framework ensteht eine dynamische, datenreduzierte Web-Applikation. Bei dieser Publikation wird der Content nicht in das HTML-Konstrukt gerendert (topic-1.html, topic-2.html, topic-3.html, etc.), sondern erst im Moment seiner Verwendung dynamisch erzeugt. Hierbei werden verschiedene Controller-Elemente in einer JavaScript-Datei definiert, die ein bestimmtes Datenmodell in Form von JSON enthalten. Für die Darstellung eines Topics wird dann ein Template für die HTML-Seite definiert, welches lediglich die datenmodellspezifische Verknüpfung enthält.

Prozess_Publikation_AngularJSDatenbestände werden in AngularJS als JSON-Daten gespeichert. Damit die Ursprungsdaten verarbeitet werden können, müssen zunächst alle Topics (XML-Dateien) in ein Gesamt-XML-Dokument zusammengefasst werden. Es werden nur Daten ausgelesen, die für die Web-Applikation wichtig sind. Dieses Dokument wird anhand eines XSLT-Prozessors und einem Stylesheet für die Hauptkomponente des AngularJS-Frameworks (app.js) konvertiert. In dieser Datei sind alle Inhalte vorhanden.

Durch die Transformation von XML zu JSON können so Web-Technologien wie z.B. AngularJS verwendet werden, die nicht mit XML kompatibel sind. Dadurch können die technologischen Möglichkeiten erweitert werden, da sie deutlich mehr Möglichkeiten bieten als z.B. die Verarbeitung von XML mit AJAX.

Durch die Trennung von Datenmodell und Viewer (Browser) wird der Content im Moment seiner Abfrage neu abgerufen und zusammen mit dem definierten HTML-Konstrukt erzeugt. Auch der Filter in der Applikation wird aus den Metadaten dynamisch erzeugt. Dadurch, dass der Content on demand geladen wird, kann eine höhere Performance erreicht werden.

Am Ende ist so aus den XML-Daten ein Model-View-Controller-Modell-Konstrukt entstanden und präsentiert die Inhalte dynamisch.

Verwendete Tools & Technologien

  1. Adobe FrameMaker 12: Erfassung der Quelldateien, Metadaten, Ausgabe (PDF) mithilfe des implementierten Transformationstool OTK
  2. Adobe Photoshop: Bildbearbeitung, Umwandlung in webfähige Bilddateien
  3. Adobe Illustrator: Erstellung von Icons und einem Logo
  4. Saxon XSLT 2.0: Zur Transformation von XML in XML und XML in JSON.
  5. Eigene Batch-Skripte: Zur Generierung eines Dokumentkatalogs der aus FrameMaker erzeugten Skripte, Transformation der XML-Ausgangsdokumente
  6. HTML5/CSS3/JavaScript: Besonders intensiver Gebrauch von jQuery Mobile für eine Web-App und AngularJS für eine dynamisch erzeugte, modulare Website, zur individuellen Gestaltung der Applikationen nach den festgelegten Corporate-Design-Vorgaben, zur Erstellung interaktiver Mechanismen

Ergebnis

Das Ergebnis stellt die Web-App auf der Displaygröße eines Apple iPhone 6 dar. Falls die Web-App im schwarzen Rahmen links nicht gleich angezeigt wird, müsst Ihr die Seite aktualisieren, dann sollte es funktionieren.

qr_code_DITA2Web_WanderlustWer die Web-App am eigenen Smartphone oder Tablet betrachten möchte, kann den QR-Code scannen.

Hier sind die Links zu den Ausgaben:

 Web-App
 AngularJS

Zusammenfassung

Durch eine einfache Struktur und der geringen Komplexität soll es den Nutzern (Nutzerseite) möglich sein, schnell zu Informationen zu gelangen. Die Strukturierung und Standardisierung der Topics ermöglichen es ihm/ihr, sich schnell einen Überblick zu verschaffen und Informationen leicht aufzunehmen.  Weiterhin können im Vorhinein Informationen entsprechend gefiltert werden. Das ermöglicht ihm/ihr einen gezielten Zugang zu gesuchten und gewünschten Informationen. Die Möglichkeit zur Interaktivität durch Zusammenstellen eigener Tagestouren motiviert den Nutzer, die Anwendung immer wieder zu nutzen.

Das entwickelte Informationsmodell soll einfach und verständlich für beide Seiten sein.

Neben der Struktur spielt Design in der Nutzung von digitalen Angeboten eine wichtige Rolle. Daher wurde ein moderner Produktname entwickelt und ein ästhetisches Logo sowie ein Farb- und Schriftkonzept konzipiert.
Wenn es Fragen zur Datenverarbeitung gibt, können diese gerne in den Kommentaren hier gestellt werden. Aufgrund des Umfangs und unserer gewöhnlichen Artikellänge haben wir diesen und andere Teile nicht noch detaillierter beschrieben.

 

Quellen:

  • CLOSS, Sissi (2007): Single Source Publishing – Topicorientierte Strukturierung und DITA. Frankfurt am Main : entwickler.press.
  • NEIL, Theresa (2012): Mobile Design Pattern Gallery. Beijing ; Köln [u.a.] : O’Reilly.
  • COOPER/MANNING/ROCKLEY (2009): DITA 101 – Fundament als of DITA for Authors and Managers. Schomberg, ON : The Rockley Group

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.