Im Oktober 2017 hat Adobe mit Adobe XD die erste Beta Version seines als „Komplettlösung für UX/UI-Design“ beworbenen Tools veröffentlicht. Als grafischer Designer habe ich jahrelang im Workflow mit Photoshop und Illustrator gearbeitet und stelle mir die Frage, inwieweit XD die Erwartungen an ein UX Tool bisher erfüllen kann.
Kleiner Ausflug in die Vergangenheit, um den möglichen Impact der Einführung des neuen Tools zu verdeutlichen: Im Printbereich hat Adobe ab InDesign Version 2.0 Anfang der 2000er Jahre die Konkurrenz praktisch verdrängt und im Zusammenspiel mit Photoshop und Illustrator und der reibungslosen Ausgabe von druckfähigen Daten einen Standard gesetzt. Spannend ist, ob XD schon jetzt die verschiedenen Prozesse im UX Kosmos abdecken kann und ob es das Potenzial hat, Tools wie Sketch ähnlich kompromisslos aus der Landschaft zu tilgen, wie es damals InDesign mit QuarkXPress machte.
Zwar ist XD noch in der Beta-Phase, trotzdem kommt das Programm schon mit einigen Features daher, die sich gut anfühlen und einen tollen ersten Eindruck vermitteln. Ein aufgeräumtes Interface mit wenigen Werkzeugen die ähnlich zum Aufbau beim größten Konkurrenzprodukt Sketch im rechten Teil ein passendes Kontextmenü erhalten. Verwendet man beim Einstieg das „Grundlagen-Tutorial“, wird das Programm schnell zugänglich. Darüber hinaus bietet Adobe selbst einige Tutorials an, die weitere Funktionen und Features anhand praxisnaher Beispiele erklären. Das reduzierte Interface macht das Auffinden der wichtigsten Werkzeuge recht einfach. Beim Arbeiten mit Vektorelementen und Schrift haben allerdings die Funktionen nicht ganz so viele Details wie beispielweise in Illustrator oder Photoshop.
Das Gestalten von Screens und Prototypen
XD unterscheidet zwischen dem Design- und dem Prototypemodus. Es bietet zum Arbeiten eine Taskbar mit den wichtigsten Werkzeugen und ein passend agierendes Kontextmenü mit weiteren Funktionen an. In der Taskbar lässt sich unter anderem global zwischen Ebenen und Elementen wechseln. Ebenen und Gruppierungen lassen sich benennen und sperren. Grundlegend schon mal eine gute Voraussetzung um seinen Screen sauber aufzubauen.
Pfade
Die Werkzeuge zum Layouten im Designmodus sind Auswahlwerkzeug, diverse Vektortools (Rechteck, Quadrat, Kreis, Linie und dem Zeichenstift), Text, Zeichenflächen und die Zoomfunktion. Die Möglichkeiten der Vektortools sind recht überschaubar und funktionieren wie bei den bekannten Adobe-Programmen. Im Kontextmenü hat man die Funktionalität des Pathfinders mit eingebunden. Eine praktische Sache, wobei mir beim Umgang mit Pfaden das direkte Auswahlwerkzeug fehlt, gerade um einzelne Ankerpunkte zu entfernen. Auch das lästige Hineinklicken in verschachtelte Gruppen würde es überflüssig machen.
Text
Bei einigen Funktionen hat man das Gefühl, als wäre sich Adobe nicht ganz klar darüber gewesen, bis zu welchem Detailgrad diese integriert werden sollten. So wird beim Erstellen von Texten die Wahl zugelassen, neben dem Standardtextfeld große Textmengen in einem Fließtextfeld zu organisieren – eine Funktion, die für den vernünftigen Umgang mit Texten gebraucht wird. Auf der anderen Seite fehlen dann aber grundlegende Zeichenformate wie „All in Capital“ und weitere. Die Fließtextbox lässt sich nicht auf die letzte Zeile trimmen. Das wird spätestens bei der Ausgabe in der Spezifikation etwas problematisch, da sich Design Engineer nicht die korrekten Abstände an diesen Stellen rausziehen können.
Zeichenflächen
Zeichenflächen hinzuzufügen oder zu ändern ist sehr simpel. Frei Hand lässt sich einfach eine Fläche über das Tool aufziehen. XD erkennt vorhandene Flächen und Ankerpunkte aus bestehenden Elementen und bietet die Möglichkeit, sich daran zu orientieren. Zudem hat man die Möglichkeit, aus Vorlagen für Zeichenflächen zu wählen. Auch lassen sich Zeichenflächen mit diversen Größen in einem Dokument anlegen. Möchte man einen Scrollbereich einer Zeichenfläche definieren, so lässt sich das schnell über das Zeichenflächen-Tool lösen. Beim Arbeiten mit Grafik- oder Text-Items gilt das Gleiche wie beim Umgang mit den Zeichenflächen. Ähnlich den „intelligenten Hilfslinien“, die man aus Illustrator oder InDesign kennt, lassen sich Objekte und Zeichenflächen pixelgenau ausrichten und erstellen.
Bilder
Bei XD hat man sich dafür entschieden, Bilddaten in das Dokument einzubetten. Für die Ausgabe als Prototyp oder bei der Weitergabe der Datei wahrscheinlich der bessere Weg. Die Option, auch PSD Dateien einbinden zu können und diese wie in Illustrator oder InDesign in Echtzeit zu aktualisieren, fände ich aber charmant. Ständiges Erzeugen von Bilddaten und neu Platzieren würde man sich damit ersparen.
Features
Wiederholungsraster
Elemente im einem Raster schnell und easy wiederholen? In der Tat ist dieses Feature toll umgesetzt. Abstände innerhalb der Wiederholung sind sehr simpel anzupassen. Abweichungen bei Farben und Labels sind schnell geändert. Verwendet man Bildboxen, ist das Einsetzen via Drag and Drop von mehreren Bildern toll gelöst. Einfach die Bilder ins Wiederholungsraster ziehen, fallen lassen und die Bilder sitzen in den Bildboxen.
Stilvorlagen und Symbole
Ein weiteres tolles Feature ist der Umgang mit Symbolen und Formaten. Wählt man Objekte auf seinen Zeichenflächen aus, kann man mit einem Klick diese als Symbole oder Formate definieren. XD erkennt Elemente (z.B. Farben und Schrift) auch innerhalb von Gruppen und legt diese in der Vorlagenpalette ab. Diese Elemente lassen sich ganz einfach global wieder anpassen und werden an allen relevanten Stellen im Dokument übernommen. Beim Umgang mit Farben finde ich es schade, dass man Swatches nicht benennen kann.
Live-Preview
Ein weiteres „Awesome” Feature ist die „Live-Preview“ im Device. Per USB USB-Kabel und XD App auf dem Device lässt sich der Prototyp in Originalgröße „in Use“ beurteilen. Man hat somit den direkten Test am Objekt. Schriften, Farben, Größenverhältnisse oder Interaktion lassen sich super beurteilen. Ändert man am Desktop etwas am Screen, wird dies „live“ im Device übernommen. Werden Prototypen im Cloud Ordner abgelegt, so werden diese in der Cloud synchronisiert und sind auch ohne die Kabelverbindung abrufbar. Ein kleiner Haken ist bisher noch das Auslesen von Fonts, wenn man den Prototyp über die Cloud auf der App öffnet. Dabei kann es vorkommen, dass einige verwendete Fonts aus Lizenzgründen nicht angezeigt werden können.
Measurement und Kommentieren, Statechart
Mit der Funktion „Design-Spezifikationen veröffentlichen“ oder „Prototyp freigeben“ gibt man eine Version in der Cloud frei. Einfach über den Browser öffnen und man erhält eine Statechart View und Vermaßungen. Die letzten Änderungen an einem Design lassen sich damit ganz einfach weitergegeben und der Design Engineer dankt es, da er nicht auf veraltete, manuell erstellte Spezifikationen zurückgreifen muss. Genial finde ich in dieser Umsetzung die erweiterten Angaben über Fonts, Farben und Maße, die über das das Kontextmenü angeboten werden.
In der Browseransicht hat Adobe eine Suche integriert, die sich mir nicht ganz erschlossen hat. Warum sich diese nur auf das Durchsuchen von Benennungen der Zeichenflächen beschränkt, ist mir etwas fern. Auch Inhalte oder Labels durchsuchen zu können, wäre eine sinnvolle Ergänzung.
Über das Kommentieren eines veröffentlichten Prototyps lassen sich Anmerkungen schnell austauschen. Das freie Positionieren von Kommentarfeldern wie in Acrobat wäre eine gute Ergänzung, um einen direkten Bezug auf Stellen in den Screens nehmen zu können.
Bisher lässt XD es zu, Grafiken oder Screens als SVG, PDF, JPG und PNG zu exportieren. Praktisch fände ich auch den Export von Statecharts oder Bemaßungen außerhalb der Cloud.
Ist XD als Tool für Interaction Designer geeignet?
Adobe legt Wert darauf, dass man mit XD schnell Wireframes, Wireflows oder Prototypen erstellen kann. Und tatsächlich bietet XD hier einen zügigen Einstieg. Egal, ob man den Umgang mit anderen VD Tools beherrscht oder nicht. Es lassen sich schnell erste vorzeigbare Ergebnisse erzielen. Um wirklich effizient beim Erstellen von Wireframes zu sein kann man auf zahlreiche Kits zurückgreifen die zur kostenlosen Verwendung angeboten werden. Eine gute zusätzliche Option wäre, ein Master für Zeichenflächen zu integrieren. Gerade bei größeren Projekten mit vielen Screens ist es effizienter wenn man nicht immer gleiche Objekte erst kopieren muss um diese auf den gewünschten Zeichenflächen zu erhalten.
Frei wählbare UI-Kits zum Erstellen von Wireframes hören sich zunächst gut an – Ich sehe dies allerdings etwas kritisch. Ein Wireframe sollte visuell auf einer Ideenskizze basieren. Durch die „Stylings“ der Kit-Elemente gibt man dem Designer und dem Kunden eine visuelle Richtung mit, welche man unter Umständen gar nicht einschlagen möchte.
Eine gute Unterstützung für einen reibungsfreien Workflow bietet wie bereits beschrieben das Kommentieren und die Statechart-View. Beim Thema Animation ist XD sehr sparsam und bietet eine Hand voll Übergangsanimationen. Morph-Effekte oder Controls mit diversen States (Mouse Over, Pressed, etc.) sind innerhalb von XD noch nicht möglich.
Eine Spur zu viel Cloud
Dass Adobe jeglichen Austausch sowie Anbindungen über die Cloud regelt, scheint mir auf den ersten Blick logisch – allerdings macht es den Einsatz des Tools beim Arbeiten für Kunden mit strengen Geheimhaltungsvereinbarungen unmöglich. Viele Kern-Features wie die Ausgabe der Spezifikation, Statechart View, das Kommentieren oder die Preview (via Cloud) auf dem Gerät sind ohne die Anbindung nicht nutzbar. All diese Funktionen sind an die Nutzung der Cloud gebunden. So lässt Adobe auch die Prototyp Device-Live-Preview über die XD App nur mit Anmeldung zu. Das finde ich schlichtweg zu restriktiv. Es bleibt abzuwarten, wie Adobe den Weg an dieser Stelle weitergeht und ob es auch erlaubt sein wird, die Dienste zu nutzen ohne die Ablage auf Adobes Cloud Server riskieren zu müssen.
XD fühlt sich einfach gut an!
XD macht Spaß, hat eine gute Performance und liefert schnell tolle Ergebnisse. Das Layouten geht einfach von der Hand. Trotz der teilweise reduzierteren Funktionen hat es eben die Details (z.B. Ausrichten von Objekten mit Pixelangaben, Copy & Paste immer pixelgenau in Place) die einen guten Flow beim Gestalten zu erzeugen. Für ausgereifteres Erstellen und Arbeiten mit Grafiken benötigt es allerdings Illustrator. Für das Erstellen von Icons würde ich Illustrator immer XD vorziehen. Detailarbeiten mit Pfaden ist dort einfach besser organisiert. Der Import als SVG oder das Einfügen aus Illustrator per Zwischenablage (mit Ausnahme von Texten – diese werden in der Regel zerschossen) ist sehr gut umgesetzt.
Das direkte „Switchen in den Prototypmodus“ macht die Verbindung vom visuellen Design zur Interaktion schnell zugänglich. Die Previews in der Originalgröße ermöglichen es, Interaktions- und visuelles Design ebenso schnell und gut zu beurteilen. Um Prototypen zu präsentieren ist XD optimal. Die „Live-Preview“ macht das Design lebendig und ist bei der Präsentation vor dem Kunden eine tolle Sache. Durch das Capturing der Prototypen lassen sich sehr schnell Videos mit den richtigen Interaktionen erzeugen.
Alles in allem ist XD ein gutes Tool für Designer und Interaction Designer. Die Idee der Spezifikationsausgabe ist ein super Kriterium und hat mich begeistert. Aus Sicht des Gestalters sind einige Punkte eingeflossen, die das Tool effektiv machen. Man hat Lust, damit zu arbeiten. Die Tatsache, dass Screens nicht nur statisch gestaltet, sondern direkt im Flow als Prototyp aufgebaut werden können, zeichnet XD enorm aus. Nutzt man die Adobe CC im vollem Umfang, ist das Arbeiten mit XD im Zusammenspiel anderen Programmen wie Photoshop und Illustrator eine schöne Sache. Auch dass XD für Windows (auch wenn nur ab Windows 10) und macOS verfügbar ist, stellt für den Workflow und Austausch in Firmen einen großen Vorteil dar.
Es wird wohl noch etwas dauern bis sich das Tool ausreichend etabliert hat. Dafür fehlen im Moment einige Features und Funktionen die es zu einem ausgereiften UX Tool benötigt. XD ist in der Beta und macht hin und wieder den Eindruck, dass Adobe sich an einigen Stellen nicht ganz klar darüber war, in welcher Tiefe gewisse Funktionalitäten integriert werden sollten. Auch klar ist aber, dass das Unternehmen viel daran setzen wird, XD mit stetigen Verbesserungen und Updates zu versorgen. Dass Adobe „User Requests“ mit in die Entwicklung einbezieht, nährt die Hoffnung, dass im Sinne der Nutzer sinnvolle Ergänzungen eingebunden werden.
