Conceptual Structures

Anfang der 2000er dienten Informationsarchitekturen zur strukturellen Beschreibung von Websites. In den darauffolgenden Jahren haben sich diese als fester Bestandteil im Gestaltungsprozess grafischer Benutzeroberflächen und bei der Sicherstellung einer gelungenen User Experience etabliert. Zugleich wird ihr Potenzial meist nicht vollkommen ausgeschöpft. Dies liegt unter anderem daran, dass sich der Anforderungskontext verschoben hat: Der heutige Fokus liegt weniger auf inhaltlich aufgeladenen Websites als vielmehr auf funktionalen, komplexen Tools. Aus diesem Grund untersuchten wir in unserer Arbeit Conceptual Structures neue Darstellungsformen zur strukturellen Beschreibung digitaler Produkte. Wir betrachteten eine Vielzahl an Methoden und Darstellungsformen, um die Hierarchie, Navigation, Funktion und Interaktion digitaler Produkte ganzheitlich abzubilden. Unsere Thesis soll ein Konzept repräsentieren, welches Gestalter:innen beim strukturellen Aufbau von Software unterstützt sowie die parallele Erarbeitung von Task Flows und Wireframes ermöglicht.

»There are reasons it makes sense to wait to cook until after you know what you‘re making. For these same reasons, we all know not to construct a building without a plan. […] When we jump into a task without thinking about what we‘re trying to accomplish, we can end up with solutions to the wrong problem. We can waste energy that would be better spent determining which direction to take.«

Abby Covert, How to Make Sense of Any Mess (2014)

Kernkonzept

Conceptual Structures ist ein Lösungsansatz in drei Teilschritten. Fokus lag hierbei auf der Entwicklung einer Darstellungsmethode [1] zur strukturellen Beschreibung von Softwareprodukten. Die Integration dieser in der Desktop Applikation »splice« [2] ermöglicht einen effizienten und ressourcenschonenden Aufbau. Zuletzt wurden beide holistisch im GUI-Gestaltungsprozess [3] verortet, um eine dynamische Einbindung der Struktur zu gewährleisten.

Darstellungsmethode [1]

Die Methode besteht im Kern aus einer Vielzahl an Elementen, welche sich in ihrem Typ unterscheiden. Diese werden im Folgenden genauer beschrieben.

Desktop Applikation – splice [2]

Die entworfene Desktop Applikation »splice« soll den interdisziplinären Product Teams bei der Entwicklung und Konzeption von Endnutzeranwendungen dienen. Die canvas-basierte Software lässt sich vornehmlich in die beiden Arbeitsbereiche »Structure« und »Wireframe« aufteilen. Zudem besitzen beide Umgebungen sowohl einen Bearbeitungs- als auch einen Präsentationsmodus, in welchem eine Betrachtung des Werkstücks durch eine interaktive Ansicht möglich ist. Über Tabs besteht eine allgegenwärtige Verbindung zwischen beiden Bereichen. Die entworfenen Strukturelemente werden ebenfalls in der Wireframeumgebung abgebildet und können durch den Link-Mode logisch miteinander verbunden werden.

»splice« ist so konzipiert, dass ein Wechsel zwischen beiden Arbeitsbereichen zu jedem Zeitpunkt möglich und sogar erwünscht ist. Die Mitglieder des Product Teams haben auf diese Weise die Möglichkeit, flexibel zwischen den einzelnen Prozessschritten zu springen. Auf diese Weise werden individuelle Arbeitsweisen unterstützt.

Des Weiteren lassen sich in einem in »splice« angelegten Projekt mehrere Umgebungen in sogenannten Pages (z.B. Mobile und Desktop) definieren. So können miteinander kommunizierende Softwareapplikationen leichter parallel zueinander entworfen und in Verbindung gesetzt werden.

Prozess [3]

Ziel war es, die Methode so zu entwickeln, dass sie sich individuell an den Gestaltungsprozess der jeweiligen Product Teams anpassen lässt. Dennoch kann diese in einzelne, voneinander abgrenzbare Schritte aufgeteilt werden.

No. 01

Zu Beginn verfassen alle beteiligten Stakeholder eines Product Teams, wie beispielsweise Product Owner, Designer:innen und Programmierer:innen, gemeinsam einen Anforderungstext. Dieser soll kurz und knapp die Hauptfeatures der geplanten Software beschreiben und dient als ein gemeinsamer Konsens, auf welchen man sich jederzeit berufen kann. Auf diese Weise wird Unklarheiten und unterschiedlichen Vorstellungen gleich zu Beginn des Projektes vorgebeugt.

No. 02

Anschließend können einzelne für die Software wichtige Wörter aus besagtem Text in ungelabelte Elemente umwandelt und anschließend sortiert werden. Nach und nach soll sich daraus eine Struktur aus verschiedenen Objekten ergeben, welche durch weitere Elemente ergänzt werden kann.

No. 03

Daraufhin lassen sich die erstellten Elemente ineinander verschachteln sowie Verknüpfungen zwischen diesen erstellen. Ebenfalls lassen sich Lokale sowie Kontext-Menüs erzeugen.

No. 04

Später erstellen Nutzer:innen zudem Hauptbereiche, welche die Gesamtheit aller auf einem späteren Screen abgebildeten Elemente umfassen.

No. 05

Optional lassen sich die im Laufe des GUI-Prozesses basierend auf der Struktur entwickelten Scribbles dieser anfügen.

No. 06

Ebenfalls optional können vor der Erstellung von Wireframes auch Task-Flows erstellt werden. Diese sollen bei der schrittweisen Ausgestaltung von Wireframes helfen, die Kernanforderungen im Auge zu behalten.

No. 07

Sobald Wireframes angefertigt werden, können diese mit der Struktur verknüpft werden. Somit passt sich die Struktur auch bei Änderungen in den Wireframes an und entwickelt sich dynamisch mit. Andersherum sollen auch die im Zuge der Wireframes entwickelten Elemente einfach in die Struktur übernommen werden.

Features

UI Library

Sobald UI-Elemente mit der Struktur verknüpft wurden, sind diese automatisch in einer übergeordneten Library erreichbar und lassen sich per Drag-and-drop Interaktion aus der Seitenleiste auf einzelne Frames ziehen.

Descriptions

Um Designentscheidungen für Teammitglieder nachvollziehbar zu dokumentieren, können die Gestaltenden neben einem Titel die Beweggründe für die Bereichserstellung festhalten. Zudem können Tags und Assignments vergeben werden.

Tags & Filter

Um das Finden einzelner Elementkarten auf dem Canvas zu erleichtern, ist es Teams möglich, die Elementkarten nach den zuvor erstellten Tags und Assignments zu filtern.

Pins setzen

Um eine bessere Übersicht über die Struktur zu gewinnen, haben Gestaltende die Möglichkeit, einzelne Elementcluster bzw. Bereiche in der linken Seitenleiste zu fixieren. Dies geschieht über das Pin-Werkzeug der Werkzeugleiste.

Kommentieren

Für eine bessere Abstimmung innerhalb des Teams können sowohl Kommentare in der Struktur als auch in der Wireframeumgebung gesetzt werden. Diese sind dabei an einzelne Elemente gekoppelt.