Veröffentlicht am 3. Juni 2019 von Robert Klank

Das Arbeiten mit Konzeptionstools – von der Papierskizze zum interaktiven Klickdummy

Die Konzeptionsphase ist der entscheidende Schritt für den ersten Aufschlag in einer Produktentwicklung. Hier werden die Findings der zuvor geführten Analysen genutzt und in eine Art Skizze überführt. Dies ermöglicht, schnell Änderungen vorzunehmen, was zum frühen Projektzeitpunkt erheblich Zeit und Geld spart. Zudem können die Entwürfe für Tests mit Nutzern genutzt werden und dadurch das iterative Arbeiten vorantreiben. Welche Tools bei uns zum Einsatz kommen, erfahrt Ihr im folgenden Artikel.

Die Auswahl des Tools

Die Auswahl, welches Programm eingesetzt wird, oder ob gar Handzeichnungen die bessere Wahl sind, ist sehr vom jeweiligen Projektvorgehen abhängig. Als Visualisierung helfen bereits Wireframes oder Mockups, um eine Idee zu verdeutlichen. Verknüpft man die einzelnen statischen Ansichten, entstehen klickbare Prototypen. Diese bilden das Interaktionskonzept ab und ermöglichen dadurch Projektbeteiligten und den Entwicklern bereits zu einem frühen Zeitpunkt einen Einblick in die Ideen.

Pen & Paper – der unterschätzte klassische Weg

Die schnellste, weil auch natürlichste, Möglichkeit ist Skizzen per Hand anzufertigen. Für das Ausprobieren initialer Ideen und Aufdecken von Konzeptionslücken braucht man keine komplexen Programme mit ablenkenden Funktionen. Der erste Griff ist daher immer noch der zum Stift, oder zum Whiteboardmarker.

Dabei helfen Skizzen nicht zur zum Ausprobieren erster Ideen. In gemeinsamen Workshops fördern sie die Kommunikation und dienen sie als Diskussionsgrundlage – nicht zuletzt weil auch Fachfremde sich einbringen können. Papierprototypen können zudem feiner ausgearbeitet werden und für erste Nutzertests verwendet werden. Mittels übereinander gelegter Seiten lassen sich so auf einfachem Weg einfache Klickwege simulieren. Vorteilhaft ist hierbei auch, dass der skizzenhafte Charakter allen Beteiligten den vorläufigen Stand klarmacht und vom finalen Produkt eindeutig abgrenzt.

Grenzen zeigt diese haptische Art der Konzeption vor allem bei komplexeren Aufgaben. Detaillierte Reinzeichnungen und Änderungen von wiederholenden Details auf mehreren Ansichten erfordern Zeit. Außerdem kann die Platzaufteilung in einer Zeichnung nur grob eingeschätzt werden, weshalb später detailliertere digitale Ausarbeitungen notwendig sind.

Marvel & InVision – Zeichnung interaktiv nutzen

Die Nutzung von Zeichnungen auf Papier oder Whiteboard endet jedoch nicht in der physischen Welt. Angefertigte Skizzen lassen sich auch mit Programmen wie Marvel oder InVision weiterverwenden. In beiden können aber auch Mockups aus vorgefertigten Komponenten über die Weboberfläche erstellt und zu Prototypen verknüpft werden. Hilfreich ist auch, dass vorgefertigte Entwürfe oder Fotos für die Prototypen hochgeladen werden können. Mit den dazugehörigen Apps lassen sich die Skizzen abfotografieren und direkt auf dem iPad miteinander verknüpfen.

Papierprototyp auf dem iPad

Der Projektpartner erhielt einen funktionalen Prototypen auf Basis von Handzeichnungen. Diese konnten auf dem Tablet getestet werden und vermittelten durch den skizzenhaften Stil keinen „zu fertigen“ Eindruck beim Nutzer.

Vorteil dieser Arbeitsweise ist, dass Änderungen weiterhin schnell und ohne den Computer analog durchgeführt werden können. Die Außenwirkung einer Handskizze bleibt zudem erhalten und wird durch das Tablet in einem modernen Mantel präsentiert. Bei der Umsetzung muss jedoch beachtet werden, dass nur einfache Interaktionen wie Scrollen und das Verlinken der einzelnen Ansichten anwendbar sind. Für komplexe Animationen, Eingaben oder gar Reaktionen auf diese sind andere Tools besser geeignet.

Axure RP – der Alleskönner?

Eine umfassendere Erstellung von Prototypen ist mit Axure möglich. Vom Entwerfen kleinerer Webseiten bis hin zu komplexen Maschinenanwendungen lassen sich Ideen digitalisieren, die schon einen guten Eindruck über Aufbau und der Handhabung vermitteln. Im Programm helfen vorgefertigte Inhalte und seitenübergreifende, dynamische Elemente, es können aber auch eigene Komponenten erstellt werden werden.

Axures Stärke sind jedoch die Interaktionsmöglichkeiten, welche insbesondere in der fortgeschrittenen Phase des Designprozesses interessant werden. Hier lassen sich Ansichten zu Prototypen verknüpfen, Elemente animieren und sogar echte Daten integrieren. Real wirkende Nutzereingaben sind zudem für das Testen mit Bedienern interessant, ohne dass die Software bereits umgesetzt werden muss. Bei entsprechendem Aufwand lassen sich auch entscheidende Funktionsumfänge des finalen Produktes simulieren. Der einzige Nachteil von Axure liegt im fortgeschrittenen Umgang – denn da die Erstellung der Klickdummies recht zeitintensiv ist, lohnt sich häufig eine Kombination mit anderen Tools.

Besonders praktisch hat sich in unserem Workflow auch die Eignung für das Team herausgestellt. Einerseits können Designer parallel am Projekt arbeiten, andererseits erlaubt ein Clouddienst das Teilen der Entwürfe beispielsweise mit den Experten auf Auftraggeberseite, welche über eine Kommentarfunktionen kollaborieren können.

Balsamiq, Sketch und andere Exoten

Abseits der vorgestellten Vorgehensweisen probieren wir aber auch immer wieder andere Tools aus, um unseren Konzeptionsprozess auf dem aktuellen Stand zu halten. Balsamiq Mockups ist ein Kandidat für schnelle, grobe Wireframes mit wenig Interaktion. Die vorgefertigten Komponenten der Software sind an Handzeichnungen angelehnt und lassen sich auch zu einfachen Klickprototypen kombinieren. Nett ist zudem das Easteregg der Hintergrundmusik, welche die Arbeitszeit nach der die Pomodoro Technik einteilt.

Und selbst ein Programm wie Sketch – das primär für die gestalterische Ausarbeitung dient – kann Teile der Konzeption übernehmen. Über den Service von Zeplin.io lassen sich pixelgenaue Styleguides ableiten, welche Entwicklern ein Lächeln auf die Lippen zaubern. Mit dem jüngsten Update lassen sich zudem Verlinkungen realisieren, welche bisher nur über externe Plugins wie Craft oder Anima möglich waren, und dadurch einfache Klickprototypen direkt aus Sketch exportieren.

Neben diesen etablierten Werkzeugen tauchen regelmäßig auch neue Anwerber in der Branche auf. Adobe XD bezeichnet sich als Zukunftstool der Branche und schart beträchtlich Anhänger um sich. Daneben gewinnt das Programm InVision Studio immer stärker an Potential und zeigt vor allem im Bereich Animationen Stärken. Aktuell ist der Umstieg jedoch noch vage – einerseits sind die Ergebnisse noch nicht fehlerfrei und typische Funktionen für das Prototyping nicht vollständig abgedeckt, andererseits ist unklar, wer den UX Thron besteigen wird. Es bleibt also das Testen und Abwarten…

Interfacelemente ohne großen Aufwand mit Animationen versehen – das ist die große Stärke der neuen Tools (hier mit InVision Studio erstellt).

Das Was, Wann und Warum

Stift, einfaches digitales Mockup oder gleich der interaktive Prototyp? Welches Werkzeug für das eigene Vorgehen am besten geeignet ist, lässt sich nicht pauschal beantworten. Per Hand lassen sich die ersten Ideen am schnellsten festhalten sowie direkt im Team, den Nutzer und dem Auftraggeber besprechen. Mockups oder Wireframes verdeutlichen den Aufbau bereits besser, wirken professioneller und lassen sich zu initialen Prototypen kombinieren. Ein höherer Interaktionsgrad wie in einem High Fidelity-Prototyp, ist in Axure zu erreichen, bedeutet aber auch mehr Aufwand in der Erstellung.

Die richtige Wahl ergibt sich aus Projektumfang, Arbeitsphase und Faktoren wie Kollaboration sowie Gestaltungsgrad. Im Rahmen des User Centered Design Prozesses sollte mit dem Ergebnis zudem die Möglichkeit des Testens gegeben sein, um den aktuellen Arbeitsstand kontinuierlich mit Bedürfnissen der Nutzer abzugleichen.