Das richtige Tool für den Job: Auswahl der besten Prototyping-Software für Ihr Projekt

Prototyping-Tools sind zu einer wichtigen Ressource für uns Designer geworden – sie ermöglichen es uns, mehrere Zustände eines einzelnen Bildschirms zu dokumentieren, einschließlich Animationen, Übergängen und Mikrointeraktionen, die in statischer Dokumentation schwer darzustellen sind.

Unternehmen, die auf diesen Trend achten, haben begonnen, Prototyping-Tools zu entwickeln, um diesen Bedarf zu decken; und heute sehen wir regelmäßig eine Fülle von Tools auftauchen. Aber welche sollten Sie wählen? Noch wichtiger, welche Fragen sollten Sie sich und Ihrem Team stellen, um sicherzustellen, dass Sie die richtige auswählen?

Weiterführende Literatur zu SmashingMag:

• 12 Faktoren bei der Auswahl eines mobilen Prototyping-Tools
• Der Leitfaden für Skeptiker zum Low-Fidelity-Prototyping
• Verwenden von Sketch für Responsive Webdesign
• Den Sketch-Workflow richtig machen: Das Sketch-Handbuch

„Welches Tool soll ich verwenden?“ ist zu einer der häufigsten Fragen in Online-Foren, Design-Meetups und Blogs geworden. Es ist zu einer ziemlich leidenschaftlichen Debatte geworden – und Designer neigen dazu, schnell für ein bestimmtes Tool oder eine bestimmte Anwendung zu argumentieren.

Die Wahrheit ist, dass es keine Lösung gibt, die für alle passt . Designer müssen immer mehr über eine Reihe von Tools verfügen, um die Vor- und Nachteile der einzelnen Tools zu verstehen und sich schnell für den am besten geeigneten Workflow für den jeweiligen Kontext entscheiden zu können.

Der Bewertungsprozess umfasst mehrere Schritte. Erfahrene Fachleute und Teammanager können ziemlich schnell das richtige Tool für die Aufgabe auswählen – sobald sie über ein neues Projekt informiert wurden und verstehen, wo der Prototyp verwendet werden soll.

Im Folgenden werden wir fünf Schritte untersuchen, um das richtige Prototyping-Tool für Ihr Projekt zu finden: von der Definition der Ziele über das Verständnis der Anforderungen und des Kontexts bis hin zur Bewertung der verfügbaren Optionen. Ziel ist es, Designer anzuleiten, die diese Entscheidung zum ersten Mal treffen oder die mit einem Projekt mit einzigartigen Anforderungen und Einschränkungen konfrontiert sind.

Bevor wir uns mit dem Bau des Prototyps die Hände schmutzig machen, müssen wir darüber nachdenken, warum wir das tun. Welches Problem versucht der Prototyp zu lösen? Warum glauben wir, dass es dem Projekt in diesem bestimmten Moment helfen wird?

1. Brauchen Sie wirklich ein Prototyping-Tool?

In der Lage zu sein, greifbar zu zeigen, wie ein Produkt funktionieren soll, während es noch entworfen wird, hat unbestreitbare Vorteile für das Projekt und ermöglicht Designern, Interaktionen so dynamisch und real wie möglich zu betrachten. Wir leben in einer Welt lebendiger, interaktiver Schnittstellen, die außerhalb ihrer Live-Umgebung nur schwer zu replizieren sind – und interaktive Prototypen leisten wirklich hervorragende Arbeit, um diese Erfahrung nachzuahmen.

Aber in einigen Fällen ist ein Prototyping-Tool nicht wirklich notwendig. Wenn sich das Projekt in den Anfängen befindet und Sie nur ein Konzept validieren möchten, ist ein Papierprototyp oft effektiver, um darzustellen, wie das Produkt funktionieren soll. Papierprototypen machen es unnötig, Zeit mit Software zu verbringen (und in einigen Fällen zu lernen, wie man sie benutzt), während sie schnelle Iterationen des Designs mit geringer Genauigkeit ermöglichen, die sich mehr auf das Testen eines Konzepts als auf die Validierung bestimmter Usability-Probleme konzentrieren .

In anderen Fällen ist es am besten, mit der Erstellung des Produkts in der endgültigen Programmiersprache zu beginnen, anstatt einen eigenständigen Prototyp mit dedizierter Software zu erstellen. Beim Erstellen einer Website beginnen einige Leute sofort mit einem HTML-Prototypen. Frameworks wie Bootstrap können Ihnen dabei helfen, schnell eine responsive Website zu erstellen, und in einigen Fällen sind keine fortgeschrittenen technischen Kenntnisse erforderlich. Denken Sie daran, dass der Codetyp, der für einen HTML-Prototyp geschrieben wird, fast immer verworfen wird, da er schnell und möglicherweise von Laien geschrieben wird.

Bevor Sie Energie darauf verwenden, die richtige Software für die Aufgabe auszuwählen, besprechen Sie mit dem Team, ob ein interaktiver Prototyp wirklich die beste Lösung ist und welche Art von Prototyp die besonderen Anforderungen dieses Projekts am besten erfüllt.

2. Definieren Sie die Ziele

Das Definieren des Ziels des Prototyps kann Ihnen helfen, das erforderliche Maß an Genauigkeit und Funktionalität zu überdenken – was sich direkt auf die Wahl des Prototyping-Tools auswirkt.

Die folgende Tabelle gibt einen Überblick über einige häufige Gründe für die Erstellung eines Prototyps in der Designphase. Diese Kategorien sind nicht vollständig, und in einigen Fällen kann derselbe Prototyp verschiedenen Bereichen dienen, aber das Framework kann als Ausgangspunkt verwendet werden, um die Ziele des Prototyps zu priorisieren.

Welches der folgenden Ziele ist Ihr Hauptziel?

• Eine Idee in einer Kundenpräsentation verkaufen . Prototypen sind unglaublich hilfreich, um Konzepte zum Leben zu erwecken. Sie sind auch ein großartiges Verkaufsinstrument, um Kunden und wichtigen Stakeholdern Ideen vorzustellen. Die Visualisierung einer Idee in interaktiver Form kann ihnen helfen, „große Träume zu haben“. In solchen Fällen ist die Funktionalität des Prototyps tendenziell flacher und stellt nur die Kernfunktionen und Benutzerströme dar, die zum Verkauf der Idee beitragen. Der Umfang des Produkts muss im Prototypen nicht vollständig dargestellt werden, aber etwas optischer Feinschliff wird eine große Wirkung erzielen. Denken Sie daran, dass ein verkaufsorientierter Prototyp oft weggeworfen werden muss, wenn die eigentliche Phase des benutzerzentrierten Designs beginnt.
• Um die Erfahrung mit Benutzern zu testen . Prototypen den Benutzern vorzustellen, ist ein wichtiger Teil dessen, was wir als Designer tun, wenn wir uns für die bestmögliche Benutzererfahrung einsetzen. Je früher Sie Feedback zum richtigen Kurs sammeln können, desto besser. Prototypen für Benutzertests sind in der Regel etwas ausgefeilter – obwohl Papierprototypen auch gut funktionieren, wenn sich das Produkt in einem frühen Stadium befindet. Der Prototyp muss so robust sein wie die Komplexität der Aufgaben, die Sie den Benutzern während der Testsitzung zuweisen.
• Um ein Konzept intern zu beweisen . Manchmal wird ein Prototyp nur als interner Machbarkeitsnachweis verwendet – Sie haben eine Idee und möchten sicherstellen, dass sie wirklich funktioniert oder sich richtig anfühlt. Ein schneller Prototyp hilft Ihnen, die Idee mit mehreren Interessengruppen zu prüfen, bevor Sie Zeit und Mühe in die Entwicklung des gesamten Produkts oder der gesamten Funktion investieren.
• Logik und Machbarkeit testen . In einigen Fällen muss das Team wirklich testen, ob eine Funktion machbar ist, bevor es in die Entwicklung geht. Der Prototyp kann als lebendes Dokument fungieren, das in Diskussionen zwischen Designern und Entwicklern verwendet werden kann, sowie als Sandbox-Umgebung zum Testen von Ideen und zur Integration von Funktionen.

Das obige Diagramm kann Ihnen einen Vorsprung bei der Definition der Ziele für Ihren Prototyp geben. Beachten Sie jedoch, dass der Grad der Wiedergabetreue je nach Kontext variiert. Benutzern und Kunden einen Low-Fidelity-Prototyp zu präsentieren, ist völlig normal, insbesondere wenn Sie nach frühem Feedback zu einem Konzept suchen.

3. Verstehen Sie die Anforderungen

Sobald das übergeordnete Ziel des Prototyps definiert ist, ist es an der Zeit, spezifischere Aspekte zu untersuchen, die Ihre Entscheidung beeinflussen, z. B. in Bezug auf Software, Hardware, Timing und Ressourcen.

Ein häufiger Fehler, den Designer zu Beginn eines Projekts machen, besteht darin, direkt in ihr bevorzugtes Prototyping-Tool zu springen, ohne sich die Zeit zu nehmen, sich mit dem Team zu treffen und den Kontext zu besprechen, in dem dieser Prototyp gebaut, geteilt und visualisiert wird. Es wird schwierig sein, Ihre Meinung zu ändern, wenn Sie viele Stunden in den Bau einer ersten Version des Prototyps investiert haben.

Treffen Sie sich mit Ihrem Team und gehen Sie einige der folgenden Fragen durch. Beziehen Sie Projektmanager, Designer und Entwickler in die Diskussion ein – die Gruppe als Ganzes muss die meisten Fragen in der Liste beantworten und dabei Anforderungen wie Zeitplan, Budget, Fähigkeiten und technische Kompatibilität berücksichtigen.

Je nachdem, wie verschiedene Faktoren konfiguriert sind, kann ein Prototyp unterschiedliche Formen annehmen. Sie können beispielsweise mit Handskizzen und Drahtmodellen davonkommen. In einigen Fällen reicht eine unpolierte, gehackte HTML- und CSS-Kombination aus. In anderen Fällen müssen Sie einen reichhaltigeren, ausgefeilteren Prototyp erstellen, um wirklich zu verstehen, ob und wie eine bestimmte Interaktion funktionieren wird.

Geltungsbereich: Prototyping Flows vs. Interaktionen

Häufige Fragen:

• Versuchen Sie, einen Ablauf mit einer Reihe von Schritten zu demonstrieren, oder stellen Sie eine eher zurückhaltende Interaktion dar?
• Was ist der wichtigste Teil des Ablaufs oder der Interaktion, den Sie als Prototyp erstellen müssen, um die Idee zu vermitteln? Wie groß ist der Bildschirm, auf dem dieses Erlebnis stattfinden wird?

Die Welt der Prototyping-Tools lässt sich ziemlich einfach in zwei Gruppen unterteilen: Tools, mit denen Sie Benutzerabläufe emulieren können, und Tools, die sich mehr auf die Darstellung bestimmter Interaktionen konzentrieren.

Wenn Sie versuchen , eine Geschichte über Ihr Produkt zu erzählen oder darüber, wie Benutzer es erleben werden, ist das Prototyping eines Flows möglicherweise ein besserer Ansatz. In diesem Fall sind Tools wie InVision, Axure und Keynote äußerst leistungsfähig, um die Effizienz zu steigern und dem Prototyp das Gefühl zu geben, mit der Geschichte verbunden zu sein, die Sie zu erzählen versuchen.

Wenn Sie versuchen, eine einzigartige, tiefgreifende Interaktion darzustellen und den Prototyp als konkrete Möglichkeit nutzen möchten, um sein Verhalten Stakeholdern und Teammitgliedern zu erklären, sollten Sie sich vielleicht auf eine andere Gruppe von Tools konzentrieren. Framer, Principle, Pixate und Origami führen diese Liste an.

Überlegungen:

• Fähigkeit, einen Fluss zu emulieren
• Maß an Wiedergabetreue und Interaktivität, das vom Tool zugelassen wird
• Geräte unterstützt

Treue: Arbeitsablauf definieren und visuell aufpolieren

Häufige Fragen:

• Planen Sie, Wireframes oder visuelle Mockups als Ausgangspunkt zu verwenden?
• Müssen die Bildschirme noch gestaltet werden?
• Ist dieselbe Person für Design und Prototyping verantwortlich?
• Wird Ihr Team den Prototyp irgendwann an ein anderes Team übergeben müssen?
• Was ist das erwartete Look-and-Feel des endgültigen Prototyps?

Einige Prototyping-Tools ermöglichen es Ihnen, gleichzeitig zu entwerfen und zu bauen, während andere sich mehr auf das Importieren vorhandener Assets – wie Drahtgitter oder visuelle Boards – in die Zeichenfläche konzentrieren.

Nehmen Sie sich etwas Zeit, um mit Ihrem Team über den erwarteten Designprozess zu sprechen. In einigen Fällen muss der Prototyp auf der Grundlage vorhandener Assets erstellt werden (z. B. hat das Team möglicherweise bereits visuelle Kompositionen für die Benutzeroberfläche erstellt) – und der Designer muss lediglich die Modelle zu einem kohärenten Fluss zusammenfügen oder Erzählung. Mehrere Tools da draußen konzentrieren sich mehr auf das Verknüpfen von Bildschirmen und das Emulieren von Interaktionen, während der Benutzer den Flow durchläuft. InVision und Keynote sind gute Beispiele dafür.

In anderen Fällen muss dasselbe Teammitglied gleichzeitig die Benutzeroberfläche entwerfen und den Prototyp erstellen . Die Möglichkeit, diese beiden Designaspekte gleichzeitig zu durchlaufen, wird am Ende der Prototyping-Phase ein verfeinertes und interaktiveres Ergebnis ermöglichen. Wenn dies der Fall ist, suchen Sie nach einem Tool, das über das bloße Verlinken hinausgeht und mit dem Sie auch die Benutzeroberfläche gestalten können.

Berücksichtigen Sie auch das erforderliche Maß an visueller Verfeinerung. Ein Tool wie Axure oder UXPin lässt das Ergebnis möglicherweise wie ein Drahtmodell aussehen und sich anfühlen, während andere ein pixelgenaueres, optisch ausgefeiltes Endprodukt ermöglichen. Einige Designteams entscheiden sich dafür, Tools zu kombinieren, die nahtlos zusammenarbeiten, um dasselbe Ergebnis zu erzielen (z. B. Sketch für das Design und InVision für das Prototyping). Stellen Sie sicher, dass die von Ihnen ausgewählten Tools eine automatische Integration bieten, um Ihnen jedes Mal Zeit und Laufarbeit zu sparen, wenn der Prototyp aktualisiert werden muss.

Überlegungen:

• Kollaborationsfunktionen (Teilen, Live-Teilen, Kommentieren und Feedback)
• Integration mit anderer Software in Ihren Workflow (z. B. Photoshop, Sketch)
• erforderliche Genauigkeit (Drahtmodell versus pixelgenaues Design)

Ressourcen: Kartierung der erforderlichen Fähigkeiten

Häufige Fragen:

• Wer erstellt den Prototyp?
• Welche Softwarekenntnisse hat die Person und wie schnell kann sie arbeiten?
• Wenn sie nicht wissen, wie man ein bestimmtes Tool benutzt, wie schnell können sie es lernen? Sind sie dazu bereit?
• Wie viele Designer werden an dem Prototypen mitarbeiten?

Die Nutzung der Softwarekenntnisse Ihres Teams wird viel Zeit sparen – aber stellen Sie sicher, dass dies Ihr Unternehmen nicht daran hindert, neue Tools zu testen und sie in den Designprozess einzubeziehen. Prototyping-Tools werden immer einfacher zu erlernen und zu bedienen; Designer können sich weniger Gedanken über die Lernkurve machen, als vielmehr darüber, ob das Tool für den Job geeignet ist.

Planen Sie mit Ihrem Team, welche Tools sie bereits verwenden können, und recherchieren Sie online, um herauszufinden, welche Tools am einfachsten zu erlernen sind. Ermutigen Sie Ihr Team, mit so vielen Prototyping-Tools wie möglich zu lernen und zu spielen – die Vielfalt der Auswahlmöglichkeiten und die Flexibilität in den Fähigkeiten Ihres Teams werden sich als nützlich erweisen, wenn Sie das beste Tool für Ihr nächstes Projekt auswählen müssen.

Überlegungen:

• Lernkurve
• Benutzerfreundlichkeit
• Geschwindigkeit

Kontext: Zielgruppe und Nutzung definieren

Häufige Fragen:

• Wer ist das Publikum Ihres Prototyps? Wer muss in der Lage sein, damit zu interagieren und Feedback zu geben?
• In welchem ​​Medium soll der Prototyp visualisiert werden? Auf welchem ​​Gerät? In welchem ​​Zusammenhang?
• Werden Sie das Publikum durch den Prototyp führen oder einfach einen Link per E-Mail versenden? Wenn ersteres der Fall ist, wird die exemplarische Vorgehensweise persönlich stattfinden, wird sie online per Bildschirmfreigabe durchgeführt oder wird sie selbst gesteuert?

Wenn Sie einen mobilen Prototyp zusammenstellen und beabsichtigen, in einem Meeting neben einem Stakeholder zu sitzen, um die Idee zu erklären, dann benötigen Sie die richtige Kombination aus Software (ein Tool, das mobile Prototypen ermöglicht) und Hardware (ein Telefon, das entspricht Ihren Vorgaben). Eine besser kontrollierte Umgebung wie diese erfordert nicht, dass der gesamte Ablauf konkretisiert wird – das spart Ihnen Zeit und Mühe.

Die Kombination könnte jedoch völlig anders sein, wenn Sie planen, denselben Prototyp zu verwenden, um entfernte, asynchrone Usability-Tests mit Benutzern im ganzen Land durchzuführen, die keine Ahnung haben, was das Produkt tut oder wie es aussieht. In diesem Fall benötigen Sie möglicherweise einen funktionaleren, kugelsicheren Prototypen, der eine selbstgesteuerte Erfahrung ermöglicht.

Überlegungen:

• Geräte unterstützt
• selbstgesteuertes Clickthrough-Erlebnis
• Einfaches Teilen und Erfassen von Feedback

Die Beantwortung der obigen Fragen hilft Ihnen, den Nutzungskontext zu verstehen und einige grundlegende Anforderungen für den Prototyp zu definieren. Erstellen Sie eine Liste und stellen Sie sicher, dass Sie Anforderungen für alle vier oben identifizierten Gruppen enthalten: Umfang, Genauigkeit, Ressourcen und Kontext . Als Nächstes sollten Sie überprüfen, ob die Tools, die Sie in Betracht ziehen, die von Ihnen benötigte Funktionalität bieten.

4. Bewerten Sie die Tools

Jeden Monat kommen neue Anwendungen heraus, von denen jede verspricht, alle Probleme zu lösen, die vorherige nicht lösen konnten. Die Realität ist, dass sich diese Geschichte nach mehr als 10-jähriger Tätigkeit in dieser Branche wiederholt und Sie beginnen, das Muster in diesen Ankündigungen zu erkennen.

Nachdem Sie mit Ihrem Team den ersten Fragenkatalog durchgegangen sind, ist es an der Zeit, nach möglichen Tools zu suchen. Indem Sie einfach die Fragen in Schritt 3 beantworten, können Sie schnell einige Optionen ausschließen und eine Auswahlliste für eine genauere Analyse erstellen.

Bewerten Sie für jedes Tool in Ihrer Auswahlliste Folgendes:

• Plattform und Kanäle . Entwerfen Sie eine Website oder eine App? Handelt es sich um ein Desktop- oder mobiles Erlebnis? Benötigen Sie eine reaktionsschnelle Benutzeroberfläche und wie wird sie sich bei unterschiedlichen Bildschirmgrößen verhalten? Einige Tools geben Ihnen mehr Flexibilität bei der Bereitstellung eines Erlebnisses über alle Kanäle hinweg, während andere fokussierter sind.
• Treue . Welchen Poliergrad erlaubt das Werkzeug? Lässt Sie das Tool schnelle, unpolierte Wireframe-basierte Prototypen erstellen? Können Sie visuelle Modelle importieren und animieren?
• Teilen und Zusammenarbeiten . Bietet das Tool das Maß an Zusammenarbeit, das Sie benötigen? Lässt es sich nahtlos in die anderen Design- und Kommunikationstools integrieren, die Ihr Team verwendet? Können Sie laufende Arbeiten einfach online teilen?
• Lernkurve . Weiß jemand in Ihrem Team, wie man das Tool bedient? Wie kompetent müssen sie sein, um den Prototypen zu erstellen, den Sie benötigen? Wie intuitiv ist das Tool? Sind Programmierkenntnisse oder Codierung erforderlich?
• Preis . Besitzen Sie eine Lizenz für die Software? Wie viel sind Sie bereit zu zahlen? Wenn das Tool in abgestuften Plänen verkauft wird, welches ist das Richtige für Ihr Projekt?

5. Machen wir das!

An diesem Punkt haben Sie die Optionen wahrscheinlich auf ein oder zwei eingegrenzt. Der nächste Schritt besteht darin, sich mit Ihrem Team neu zu gruppieren, eine endgültige Entscheidung zu treffen und mit der Arbeit zu beginnen. Normalerweise basiert der letzte Anruf auf dem Zeitrahmen und den Kosten, aber das Durchlaufen des hier aufgeführten Prozesses stellt sicher, dass alle Kriterien berücksichtigt werden.

Die Diskussion, die Ihr Team über das beste Prototyping-Tool führt, wird Sie auf Themen ausrichten, die weit über das eigentliche Ergebnis hinausgehen – wie Arbeitsablauf, Prozesse, Rollen und Verantwortlichkeiten.

Führen Sie nach dem Projekt auch eine kurze Post-Mortem-Übung durch. Besprechen Sie mit Ihrem Team, was mit dem von Ihnen ausgewählten Tool funktioniert hat und was nicht. Bei Ihrem nächsten Projekt können Sie bei der Auswahl des richtigen Werkzeugs sicherlich einige Schritte überspringen.

Bringen wir das „U“ zurück in UX

Ein letzter Ratschlag: Gehen Sie nicht in die Falle, all die neuesten und besten Prototyping-Tools zu lernen, die es gibt. Es gibt einfach zu viele Möglichkeiten. Überlege dir genau, welche du auswählst, und achte darauf, wie du deine Zeit investierst, um zu lernen, wie man sie benutzt.

In einer Zeit, in der Produkte danach beurteilt werden, wie genau sie die Bedürfnisse der Benutzer erfüllen, kann es sein, dass Sie zu viel Zeit und Energie auf das Prototyping-Tool selbst verwenden, um Sie von dem abzulenken, was bei Ihrer Arbeit wirklich wichtig ist. Schließlich ist es nutzlos, Stunden damit zu verbringen, eine bestimmte Interaktion zu erstellen und zu optimieren, wenn die Funktion, die Sie zu erstellen versuchen, kein legitimes, forschungserprobtes Benutzerbedürfnis erfüllt.

Eine umfassende Liste von Prototyping-Tools finden Sie im Abschnitt UX-Tools von UX Design.

Danke an Greg Siegal, Eugene Ahn und Caio Braga für ihren Beitrag zu diesem Artikel.