Do tools really Matter?

Painpoints eines Designers

Wir haben uns als Interaction Designer die Frage gestellt, was denn aktuell im Arbeitsprozess schief läuft. Wir werden euch ein paar davon nennen und sind uns sicher, dass euch das Eine oder Andere bekannt ist. Zum Beispiel fehlt oft die Zeit um elementare Elemente wie Transitions umzusetzen. Die Zeit wird dann eher genutzt um alle Detailpages zu layouten, sodass der Kunde alle Designs gesehen hat. Wenn alle Designs gemacht sind und es in die Umsetzung geht, wird oft nicht genügend kommuniziert und vieles, wie Transitions in der Entwicklung selber bestimmt. Am Ende ist der Designer sowie der Kunde unglücklich weil die Website live nicht so aussieht wie im Hi-Fi Prototypen.

Oft kollidiert es aber auch schon nur am Naming der Elemente und man spricht nicht vom Gleichen. Wir versuchen euch einen Workflow zu beschreiben, in dem wir auf Lösungen zu diesen Problemen eingehen.

Wir sitzen im gleichen Boot

In einem ersten offiziellen Kickoff Meeting werden alle Parteien beim Meeting mit einbezogen. Wichtig ist da, dass der Moderator es schafft, die Mitglieder zu sensibilisieren, dass alle Anwesenden im gleichen Boot sind und in einem Interdisziplinären Team gearbeitet werden muss, um zu einem zufriedenstellenden Resultat zu kommen. In diesem Meeting werden Sprache und Begriffe für die Kommunikation definiert und in diese werden in einem öffentlichen Dokument abgelegt.

Entwicklung Konzept & Design

Bei der Konzepterarbeitung ist Kundennähe elementar. Wichtig ist hier, dass Inhalt vom Design noch getrennt wird. Das heisst, ein UX Designer entwicklelt eine Sitemap und das Wireframe. Im Wireframe werden die verschiedenen Ausgabegeräte angedacht (zum Beispiel Mobile und Desktop). Hier sollte sich der Designer zusammen mit der Entwicklung Gedanken zur technischen Umsetzung machen. Mit welchem CMS wird gearbeitet? Welche Möglichkeiten ergeben sich aus der Wahl?

Parallel dazu sollen verschiedene Designrichtungen in Form eines Moodboards erarbeitet werden. Dabei ist der Inhalt noch nicht wichtig. Es geht in erster Linie um den Look & Feel.

Im gemeinsamen Gespräch haben wir festgestellt, dass jeder ein anderen Tool für Wireframes und UI Design nutzt. Das ist aber auch völlig in Ordnung. Wichtig ist, dass man abschätzt, ob die Arbeit mit diesem Tool gemacht werden kann. Der regelmässige Austausch unter Designern kann da helfen, um eine Übersicht über die Tools zu bekommen.

Zwischenpräsentation halten

In einem erneuten Meeting mit wird beim Kunden Feedback eingeholt – sprich die Seitenarchitektur sowie das Moodboard präsentiert. Da ist es zentral, dass diese beiden Elemente separat von einander angeschaut werden, sodass diese nicht miteinander gemischt werden. In dem Moment, in dem sich der Kunde gleichzeitig mit dem Inhalt und der Farbe des Buttons beschäftigt hast du verloren.

Auch bei Präsentations-Tools gibt es nicht nur eine Hand voll. Wichtig ist, dass man den Inhalt in geeigneter Form präsentiert und daraus ein roter Faden erkennbar ist.

Ausarbeitung Inhalt & Visuell

Nach der Überarbeitung von Inhalt und Design wird aus dem Wireframe ein klickbarer Low-fi Prototyp erarbeitet. Die Entwickler starten mit Hilfe des Wireframes und der Sitemap mit der globalen Logik auf die verschiedenen Ausgabegeräte.

Der UX Designer übermittelt dem UI Designer die Templates der Sitemap damit dieser weiss, welche Seiten im Detail ausgearbeitet werden. Denn der UI Designer muss nur diese Seiten ausgestalten, die sich vom Grundaufbau unterscheiden. Wenn der Kunde mehr als die Templates ausgestaltet haben will, könnte in Zukunft auch eine AI zum Zug kommen, die alle Seiten im Design mit Inhalt generiert.

Design präsentieren

Nach der Erstellung des Low-fi Prototypen und der Ausgestaltung der Templates, werden wieder alle Projektmitglieder inkl. Kunde miteinbezogen und das Design wird präsentiert.

Design Manual

Bei grösseren Projekten kann die Erarbeitung eines Design Manuals sehr wertvoll sein. Vor allem auch dann, wenn das Produkt auf verschiedenen Kanälen verfügbar ist. Auf Print, digital oder mobile gibt es andere Vorgaben. Der Einsatz von einem Tool wie Frontify ist möglich. Wichtig ist, dass das Dokument einfach mit anderen Projektmitgliedern geteilt werden kann und ein Dokument ist, welches nicht fertig ist (living Styleguide).

Und die Transitions?

Diese sollten wenn möglich schon bereits im Lo-Fi Prototypen integriert werden, wenn es das Verständnis unterstützt.

Die Microinteractions sowie Transitions werden mit dem Tool erarbeitet, für welches sich der Designer entscheidet. Wir nennen mit Absicht kein Tool, da es sehr viele geeignete gibt und manchmals ist der Griff zu Papier und Stift immer noch die die beste Lösung um die Idee zu visualieren.

Der Designer sollte für das Gestalten des Verhalten möglichst nah mit dem Frontend-Entwickler zusammen arbeiten, der die UI Elemente gleich im Code umsetzt. Vorzugsweise sitzen die beiden gleich nebeneinander.

Gezeigt werden sollten dem Kunden nur die Animationen, die vorher mit der Entwicklung betreffend Machbarkeit abgesprochen wurden, sodass keine falschen Vorstellungen vermittelt werden.

Was wir daraus ziehen

Mangelnde Kommunikation verhindert oft eine reibungslose Entwicklung eines Projektes im Team. Daraus hat sich für uns ergeben, dass in erster Linie der Prozess auf die verschiedenen Schnittstellen ausgerichtet sein muss. Primär ist nicht entscheidend, welche Tools verwendet werden, sondern dass diese gut ineinader greifen, so dass im Idealfall bei einer Datenübergabe auf bereits bestehenden Arbeiten aufgebaut werden kann.

Natürlich müssen Restriktionen, die sich aus dem Projekt ergeben eingehalten werden. Der Fokus sollte aber darin bestehen, die beste Arbeit zu machen, die man kann und dann spielt die Wahl des Tools keine grosse Rolle. Die grosse Fähigkeit ist es zu wissen wann man das geeignete Tool einsetzen muss und wie man die entstandene Arbeit mit den anderen Projektmitgliedern kommuniziert.