20 UX-Design-Tools: Wireframes und Prototypen mit UXPin und Co.

UX-Design-ToolsDer Markt der UX-Design-Tools für Wireframing und Prototyping scheint in den letzten Jahren geradezu zu explodieren. Gefühlt jeden Monat gibt es eine neue, heiße Software um Websites und Apps zu entwerfen. Gerade 2014 boomten besonders Tools, die responsive Design unterstützen und Kollaborationsfeatures bieten. Fast schon ein alter Hase ist da UXPin – bereits seit 2011 gibt es das webbasierte Prototyping-Tool, welches häufig gelobt wird. Grund genug, es mir einmal wieder anzuschauen. Neben einem kleinen Einblick in UXPin gibt es aber auch einen kurzen Marktüberblick mit allen 20 UX-Design-Tools, die mir so bekannt sind.

UXPin: Hilfreiche Vorlagen, einfache Interaktivität und Kollaboration im Team

„UX-Design-Tools built by UX Designers“ – dieser Slogan zeigt, womit UXPin wirbt: Features und Workflows, die den Prozess des UX Designs wirklich abbilden und ein intuitives User Interface. Mir sind bei der Nutzung folgende interessante Aspekte aufgefallen:

  • Das Interface ist rein webbasiert und wirkt sehr clean und stylisch. Genau wie bei anderen Prototyping Tools braucht es aber schon etwas Einarbeitungszeit: Optionen zu einem Element sind teilweise direkt als Buttons sichtbar, verbergen sich teilweise aber auch hinter einem Rechtsklick oder Doppelklick.
  • Es gibt sehr viele Vorlagen, insbesondere basierend auf bekannten Web-Frameworks wie Bootstrap und Foundation. Auch für mobile UIs wie Android und iOS gibt es vorgefertigte Widgets.
  • Zudem gibt es eine Pattern Library, die häufig genutzte Design- und Interaktionspattern zeigt, teilweise von bekannten Websites. Diese dienen der Inspiration, lassen sich aber auch ganz einfach in eigene Prototypen importieren.
  • Ein sehr praktisches Feature: Photoshop-Files können importiert werden und stehen dann inklusive aller Layer zur Verfügung und können direkt in UXPin bearbeitet werden.
  • Wie in Axure gibt es Master, die wiederverwendbar sind. In UXPin heißen sie „Smart Elements“.
  • Responsives Verhalten wird unterstützt, aber eher rudimentär: Stadien zwischen den Breakpoints gibt es nicht. Zudem müssen alle Änderungen an einem Breakpoint in allen anderen manuell nachgezogen werden. Dies ist etwa im Vergleich zu Axure ein Nachteil.
  • Interaktionen lassen sich sehr schnell einbinden und reichen von einfachen Seitenwechseln bis zum Ein-/Ausblenden und Verschieben von Elementen. Auch visuelle Effekte für solche Animationen werden angeboten.
  • Wirklich komplexe Interaktionen sind jedoch nicht möglich, da es keine Variablen und keine Verzweigungen (If/Else) gibt. Damit ist es für Usability-Tests nicht optimal geeignet, bei denen eine freiere Nutzung erforderlich ist.
  • Sehr stark sind die Kollaborationsfunktionen: Eingebaute Versionierung, sehr gute Kommentarfunktion mit frei platzierbaren Notizen und einfache Preview-Funktion.

Interface von UXPin

Insgesamt gesehen erscheint mir UXPin als sehr ausgereiftes Tool. Geeignet dürfte es vor Allem für Inhouse-UXler sein, die in enger Zusammenarbeit mit einem festen Team arbeiten und auf agile Entwicklung setzen.

UX-Design-Tools im Überblick: Von Antetype bis Wireframe.cc

Die folgende Liste umfasst alle mir bekannten UX-Design-Tools, erhebt aber keinen Anspruch auf Vollständigkeit. Ich habe auch nicht alle Tools selbst ausprobiert, zumindest aber von Kollegen, auf Konferenzen oder anderen UX-Events sowie über Artikel in Blogs und Magazinen davon erfahren:

  • Antetype: High-fi Design, Apps, responsive, interaktive Prototypen
  • Axure: Sketchy bis high-fi, responsive, auch komplexe Interaktivität, Spezifikationen generieren
  • Balsamiq: Desktop oder webbasiert, sketchy Wireframes, Verlinken von Screens, Kollaboration
  • FlairBuilder: Sketchy und low-fi Wireframes, interaktive Prototypen (Danke an Jörg Dittmann für den Hinweis)
  • Flinto: Apps, Verlinken von Screens, Animationen
  • Fluid UI:  Apps, vorgefertigte Widgets, Verlinken von Screens, visualisierte Screenflows
  • HotGloo: Webbasiert, high-fi, responsive, interaktive Prototypen
  • Invision: Verlinken von Screens, starke Kollaborations-Features: LIve-Sharing mit Whiteboard, Kommentare und Versionierung
  • iRise: Sehr umfangreiche Prototyping-Software mit Datenbankanbindung, ausgerichtet auf große Unternehmen
  • Justinmind: Web und Apps, high-fi, interaktive Prototypen, Spezifikationen
  • Mockingbird: Webbasiert, low-fi Wireframes, Verlinken von Screens, Kollaboration
  • Moqups: Webbasiert, low-fi Wireframes, Verlinken von Screens, Versionierung und Kommentare (Danke an Johannes Dornisch für den Hinweis)
  • OmniGraffle: Statische Wireframes, ähnlich Visio, nur für Mac
  • Pencil: Low-fi Wireframes, Verlinken von Screens, Diagramme, Open-Source (Danke an Jens Jacobsen für den Hinweis)
  • Pentotype: Zeichnen auf iPad oder Grafiktablet, Verlinken von Screens, Kommentarfunktion
  • Pidoco: Deutsche Sprache, Sketchy Wireframes und interaktive Prototypen, Kollaboration
  • Pixate: Apps, high-fi, aufwändige Animationen, nativer Prototyp
  • PowerMockup: PowerPoint-Plugin, Wireframes, vorgefertigte und eigene Widgets
  • Proto.io: Apps, Wireframes, Interaktionen und Animationen, Kommentarfunktion
  • Solidify: Verlinken von Screens, Kommentarfunktion, integriertes Remote Testing mit Analyse
  • UXPin: Interaktive Prototypen, Vorlagen und Patterns, Kollaboration
  • Visio: Statische Wireframes, Teil von MS Office
  • Wireframe.cc: Statische Wireframes, webbasiert, minimales Interface, günstig

Interessant ist in diesem Zusammenhang vielleicht auch die Tool-Liste der German UPA. Diese hat auch Reiter für Wireframing- und Prototyping-Tools. Noch ist sie ziemlich leer, kann aber von jedem gefüllt werden. Vielleicht komme ich demnächst ja auch einmal dazu…

Auswahl des passenden Tools: Anforderungen im Blick behalten und gut durchdenken

Es ist leicht zu erkennen, dass der Markt für UX-Design-Tools inzwischen sehr unübersichtlich geworden ist. Die Übergänge zwischen sketchy, low-fi und high-fi sowie zwischen statischen und interaktiven Designs sind fließend und alle Tools überlappen sich in vielen Bereichen, haben aber auch Unterschiede. Zudem entwickeln sich viele der Tools rasant weiter und bieten häufig neue Features.

Umso wichtiger ist es, bei der Einführung eines UX-Design-Tools besonnen vorzugehen. Es sollten unbedingt verschiedene Tools ausprobiert werden. Glücklicherweise bieten fast alle auch eine Trial-Version an. Die Anforderungen sollten vor allem in Bezug auf folgende Kriterien erhoben und spezifiziert werden:

  • Sollen Entwürfe direkt im Tool erstellt oder nur als Screens importiert werden?
  • Geht es eher um einfache und schnelle low-fi-Entwürfe oder soll das Tool quasi Photoshop ersetzen?
  • Wie weitreichend sollen die Möglichkeiten für Interaktionen und Animationen sein?
  • Wer soll mit dem Tool zusammenarbeiten und welche Kollaborationsfunktionen sind somit notwendig?

Ein wichtiger Faktor ist auch immer die Usability des Tools. Mehr Features bringen immer eine erhöhte Komplexität mit sich. Somit macht es keinen Sinn, ein unnötig aufgeblähtes Tool zu verwenden. Das merken wir auch selber bei unserer Wahl, Axure. Dieses ist inzwischen zwar sehr umfangreich, aber auch nicht trivial zu bedienen. Tatsächlich gibt es für bestimmte Einsatzzwecke inzwischen bessere UX-Design-Tools als Axure – keines aber bietet wirklich alle Funktionen, die wir in Projekten brauchen. Zudem haben wir damit einfach schon Erfahrung und müssen nichts komplett Neues lernen.

Liste der UX-Design-Tools: Ihre Ergänzungen sind gefragt

Kennen Sie noch weitere UX-Design-Tools, die in meiner Liste fehlen? Oder haben Sie vielleicht praktische Erfahrungen mit den aufgeführten Tools gemacht? Ich freue mich über Ihre Hinweise und werde die Liste entsprechend updaten.

Portraitfoto: Jan Pohlmann

Jan Pohlmann

UX Designer

BMW AG

Bisher veröffentlichte Beiträge: 60

9 Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.