--- title: "Unsere Tools bei der UX-Konzeption" url: "https://www.intersim.ch/insights/intersim-tools-bei-der-ux-konzeption" description: "Von Wireframes, über Prototypen bis zum Visual Design." --- # Unsere Tools bei der UX-Konzeption [Technik & Innovation](/insights/?filter=technology-innovation) ![UX-Designer nutzt Miro](/_astro/miro-ux-design-intersim.lCOh3WqD_ZPD99Y.jpg) Von Wireframes, über Prototypen bis zum Visual Design. Autor:in Oliver Zehnder Veröffentlicht 17\. April 2023 ## Die Herausforderung Das richtige Tool für einen bestimmten Einsatzzweck zu finden ist nicht immer einfach. Umso schwieriger ist es, ein disziplinübergreifendes und handliches Werkzeugset zusammenzustellen, das von der Konzeption bis hin zum Visual Design verwendet werden kann. Bei uns im UX-Kreis haben wir ein solches umfangreiches und bewährtes Werkzeugset bereits im Einsatz. Grundsätzlich besteht die Sammlung aus der Office-Palette, dem Online-Whiteboard Miro, dem Prototyping-Tool Axure RP, der UI-Design-Applikation Adobe XD und dem Design-Tool Canva. Welches Tool wann zum Einsatz kommt und wie unsere Erfahrungen damit sind, lest ihr in den kommenden Abschnitten. ## Microsoft Office Die Applikationen aus der Office-Palette verwenden wir hauptsächlich zum **Kommunizieren** (MS Teams), zum Austauschen von Dateien (MS SharePoint), Erstellen von **Interview-Leitfäden** (MS Word) und **Sammeln von Ergebnissen** (MS Excel) aus z.B. Umfragen oder Interviews. ## Miro Das Online-Whiteboard kommt bei uns schon sehr früh zum Einsatz. So kann es vorkommen, dass wir unsere **Firmenpräsentation** nicht in einer klassischen PowerPoint-Präsentation vorführen, sondern bereits Miro verwenden, um Informationen und Grafiken mit dem Kunden zu teilen. Neben den umfangreichen Gestaltungsmöglichkeiten können auch schon erste Lösungsansätze auf einem Board gezeigt werden. Egal ob beim **Sammeln von Anforderungen oder Ideen** (z.B. als Skizzen, Bilder, Videos oder Links), beim ersten Brainstorming oder auch bei einer Projekt-Retro: mit den passenden Vorlagen und etwas Vorbereitung gelingen unterschiedliche Arten von Kreativ-Workshops. Wozu wir das Online-Whiteboard-Tool ebenfalls sehr häufig einsetzen, ist beim **Erstellen von Wireframes**. Dabei schätzen wir die umfangreiche Wireframe- und Icon-Bibliothek, sowie die kollaborativen Funktionen und Eigenschaften, um mit Projektbeteiligten Lösungen zu gestalten und **schnelles und einfaches Feedback** zu erhalten. Auch Sitemaps und Pageflows sind auf diese Weise rasch erstellt und grundlegend mit Benutzern validiert. Gerade weil die Auswahl an Elementen (Shapes, Post-it’s, Kommentare, etc.) ziemlich gross und beinahe unendlich ist, sollten beim Gebrauch von diesem Tool bestimmte **Regeln definiert werden**. Beispielsweise haben wir uns darauf geeinigt, dass temporäre Infos oder **offene Aufgaben als farbige Post-its** erfasst werden und wiederum Definitionen oder **Entscheidungen als neutrale/graue Textboxen**. So wird mit dem Blick auf ein Board schnell ersichtlich, wo noch offene Punkte sind. Einfache Interaktionsmöglichkeiten kennzeichnen wir mit z.B. einer Farbe und verknüpfen die entsprechenden Elemente mit einer Verbindungslinie. Beim Erstellen des Boards sollte zudem auf die **Schriftgrösse** geachtet werden, ansonsten ist man beim Gestalten von Wireframes mit Textinhalt schnell am Limit. ## Axure RP So praktisch Miro in der UX-Konzeption auch ist, beim Prototyping erreicht das Tool leider seine Grenzen. Damit wir **interaktive Prototypen** erstellen und anschliessend mit Benutzern testen können, greifen wir auf das Prototyping-Tool Axure zurück. Axure bietet uns die nötigen Freiheiten, **komplexe (Klick-) Abfolgen**, System-Bedingungen oder **einfache Animationen** abzubilden und zu prüfen. Auch die Gestaltung von responsiven Ansichten wird im Tool unterstützt. Der erstellte Prototyp wird als HTML/CSS-Konstrukt generiert, was aus unserer Sicht gleich mehrere Vorteile bietet: - Der **Inspektor-Modus** zeigt die Eigenschaften (Grösse, Farbe, CSS-Definitionen, etc.) der Elemente (Buttons, Dropdowns, etc.), was für die Entwickler hilfreich sein kann - Der Prototyp kann in unterschiedlichen Browser geöffnet und bedient werden, was einen **realistischen Eindruck** vermittelt - Da Axure echten HTML-Code generiert, kann man als Benutzer z.B. in einem Texteingabefeld auch Text eintippen oder eine fehlende Eingabe validieren lassen - Als HTML-Export kann der Prototyp auch **offline** durchgeklickt und getestet werden - Feedback zum Prototyp kann direkt bei der integrierten **Kommentarfunktion** gemacht werden, was den Austausch im Projektteam vereinfacht Wo die Sonne scheint, gibt es bekanntlich auch Schatten und Axure ist da keine Ausnahme: - Die gemeinsame Arbeit an einem Axure-Prototyp ist etwas eingeschränkt, da einzelne Seiten ein- und ausgecheckt werden müssen, somit kann man nicht gleichzeitig an was arbeiten - Auch wenn HTML generiert wird, der HTML/CSS-Code kann nicht wirklich weiterverwendet werde, weil die enthaltenen Elemente vielfach seltsame Verschachtelungen/Hierarchien enthalten Wenn’s um pixelgenaues UI-Design geht, wird’s in Axure etwas umständlich, weil der Überblick über alle Seiten fehlt (nur Einzelseiten und keine Artboard-Übersicht), die Gestaltungsmöglichkeiten eingeschränkt sind und auch die Bedienung im Vergleich zu anderen Design-Tools etwas mühsamer ist. Dies führt dazu, dass wir also fürs UI-Design ein anderes Tool einsetzen. ## Adobe XD Als Teil der Adobe Creative Cloud bietet Adobe XD alle Funktionen, um einen **responsiven Hi-Fi-Prototyp**, resp. ein **UI-Design** zu erstellen. Die Bedienung ist intuitiv und die Gestaltungsmöglichkeiten sind so, wie man es sich von einem Design-Tool wünscht. Erweiterungen oder bereits **vorhandene Bibliotheken** von z.B. Bootstrap-Komponenten unterstützen den Designprozess, damit nicht jedes Element von Grund auf neugestaltet werden muss. Mit der **Freigabefunktion** holen wir im Projektteam in regelmässigen Abständen Feedback zu den Designvarianten ein. Auch **Styleguides** erstellen wir gleich in XD, so kommt schlussendlich alles aus einem Guss und Weiterentwicklungen am Produkt sind unter Umständen einfacher vorstellbar, weil die Grundelemente bereits definiert sind. Einen grossen Vorteil bietet Adobe XD zudem bei der Zusammenarbeit: an einem User Interface können mehrere Personen problemlos **gleichzeitig arbeiten**. Und die Designs sind mit wenigen Klicks für die Entwickler freigegeben, damit sie die benötigten **CSS-Styles der verwendeten Elemente auslesen können**. ## Canva Auch Canva hat sich in unserem UX-Team bereits fest etabliert und erweist sich als sehr vielseitiges Werkzeug. Eine Funktion, die wir sehr gerne einsetzen, ist die **Infografik und Datenvisualisierung**. Canva bietet eine breite Palette von Tools, um Daten und Erkenntnisse visuell ansprechend zu präsentieren. Auf diese Weise machen wir komplexe Informationen verständlich und verschaffen uns eine klarere Übersicht über unsere Ergebnisse. Darüber hinaus bietet Canva verschiedene Funktionen im Bereich der **Content-Erstellung für soziale Medien und Marketing**. Mit zahlreichen Vorlagen und Tools gestalten wir schnell und einfach Beiträge, um unsere Erkenntnisse und Designarbeiten auf Social Media Platformen zu präsentieren und zu verbreiten. Weiters hervorzuheben sind die smarten KI-Elemente, die Canva zur Verfügung stellt. Der **Design-Assistent**, die Texterkennung und -generierung, Bildoptimierung und automatische Layouts machen den Designprozess noch effizienter und einfacher. Zusammengefasst bietet Canva eine vielseitige Palette von Tools, die unserem UX- und Marketing-Team dabei helfen, mühelos **professionelle Designs** zu erstellen, Daten ansprechend zu visualisieren und die Projekte erfolgreich umzusetzen. ## Die Schnittstellen Zwischen den einzelnen Werkzeugen gibt es immer wieder (Medien-) Brüche, was jedoch nicht wirklich schlimm ist und teilweise auch von Vorteil sein kann, weil so Grenzen oder neue Abschnitte innerhalb der UX-Konzeption besser sichtbar sind. Es gibt Tools oder Erweiterungen, um zumindest einen Teil dieser Tool-Schnittstellen zu decken, so kann z.B. mit einem entsprechenden Tool ein Axure-Prototyp für Adobe XD exportieren werden. Leider hat uns bis jetzt kein solches Tool überzeugt, weil es doch hin und wieder zu fehlenden oder fehlerhaften Elementen führte. ## Die Zukunft Das beschriebene Werkzeugset ist aus unserer Sicht intuitiv, umfangreich und macht Spass in der Anwendung. Bekanntlich ändern sich im Verlauf der Zeit Funktionsumfang und Auswahl der Applikationen relativ schnell, so dass unser Werkzeugset nicht für alle Ewigkeit gesetzt ist. Dazu untersuchen wir regelmässig und mit Freude neue Möglichkeiten und Trends, um unseren Kunden und schlussendlich deren Benutzern eine optimale User Experience zu bieten. ## Verwandte Themen Weiterführende Projekte und Inhalte zum Thema [Website](/projects/?filter=web) [Coaching](/projects/?filter=coach) ## Quellen [Miro](https://miro.com/) [Axure RP](https://www.axure.com/) [Canva](https://www.canva.com/)