Perfektionieren Sie Ihren UX-Designprozess – Ein Leitfaden für das Prototypendesign

Der Prototyping-Prozess – von der Erstellung einfacher Wireframes bis hin zum Testen voll funktionsfähiger Mockups – ist eine der wirkungsvollsten und mächtigsten Fähigkeiten, die ein Designer beherrschen kann. Es ist auch voller Gefahren an Arbeitsplätzen, an denen der Prozess übersprungen wird, anstatt nur einen Prototyp als einfaches Ergebnis zu entwerfen, das er der nächsten Abteilung zum Bauen geben kann. Egal wie gewissenhaft Ihr Unternehmen mit der Prototypenerstellung umgeht, der eigentliche Prozess entscheidet oft über den Erfolg oder Misserfolg Ihres Endprodukts.

Wie und warum man tatsächlich einen Prototyp baut, ist oft ein Rätsel. Fragen Sie viele Designer und sie werden den Kopf wie verwirrte Welpen neigen. "Was meinst du? Du machst es einfach“, werden sie sagen. Und tatsächlich: Wir alle wissen, wie man einen Prototyp erstellt. Wir wissen nur nicht, woher wir das wissen.

Dies ist besonders wichtig, wenn man bedenkt, dass Prototypen oft das wertvollste Ergebnis sind. Kunden und Manager möchten sehen , was Sie gemacht haben, egal ob es sich um eine Website oder ein physisches Produkt handelt. Sie wollen es ausprobieren, die verschiedenen Elemente begutachten und den Arbeitsablauf verstehen. Sie wollen sehen, „wie es funktioniert“.

Einen Prototyp zu bauen ist nicht genug; Wir müssen den Prozess verstehen, der mit der Konstruktion der ersten Produktentwürfe verbunden ist. Dieser Artikel wird ausführlich auf alles eingehen, was ein Designer wissen und tun muss, um dies zu erreichen.

Prototypendesign – wozu Prototypen da sind

Menschen sind sehr visuell. Tatsächlich sind 30 Prozent unserer Großhirnrinde ausschließlich dem Sehen gewidmet. Wenn Sie also einen Prototyp sehen, ist das Wichtigste daran, dass Sie ihn sehen ! Wenn der Kunde es sehen und alle Prozesse verstehen kann, die mit dem Produkt verbunden sind, insbesondere strittige Bereiche für zukünftige Tests, wird dieser Prototyp zum Leben erweckt.

Was ist also ein Prototyp? Ein Prototyp ist ein Werkzeug zur Visualisierung eines Sammelsuriums an interaktiver Designarbeit; Tatsächlich sind Prototypen (in fast jedem Stadium) eine Verschmelzung aller bisherigen Arbeiten zu einem einzigen, sichtbaren, funktionalen Stück. Diese visuelle Darstellung zeigt, was das Produkt zu einem bestimmten Zeitpunkt tut, was die interaktiven Elemente sind und wie das Produkt in der realen Welt funktionieren würde.

Während es viele Mechanismen für die verschiedenen Aspekte des Prototypendesigns gibt (wie das Erstellen von Skizzen), ist es leicht, Dinge zu übersehen und Fehler zu machen.

Dies macht die Arbeit, wie ein Prototyp gebaut wird, enorm wertvoll, da sie in vielerlei Hinsicht beschreibt, wie der Zweck des Produkts verwirklicht wird. Nicht perfekt und die meiste Zeit definitiv nicht genau, aber wie der Name schon sagt, sind Prototypen nicht endgültig.

Sie verlangsamen uns, um uns zu beschleunigen. Indem wir uns die Zeit nehmen, unsere Ideen zu prototypisieren, vermeiden wir kostspielige Fehler, wie z. B. zu früh zu komplex zu werden und zu lange an einer schwachen Idee festzuhalten.

Tim Brown, CEO und Präsident von IDEO

Eine einfache Möglichkeit, sich Prototypen vorzustellen, ist ein Mechanismus zur Demonstration der Funktionalität.

Diese praktische Erklärung, wie etwas funktioniert, hat eine Reihe von wertvollen Vorteilen, darunter:

• Making it real – Bevor Prototypen gebaut werden, ist das Produkt vollständig konzeptionell! Das ist für eine Weile in Ordnung, aber schließlich muss es etwas werden, das Stakeholder und Benutzer schließlich verstehen und schätzen. Ein Prototyp ist der erste Schritt auf dem Weg vom Konzept zur Realität.
• Arbeite an einem Problem – Manchmal haben wir eine Design-Herausforderung ohne Lösung. Als Fähigkeit ist Prototyping eine großartige Möglichkeit, das Problem zu visualisieren und Lösungen schnell einzuführen. Wenn es nicht funktioniert, verwerfen Sie den Prototyp und versuchen Sie es erneut.
• Wiederholen – Das Prototyping erfolgt in Phasen, aber das Ergebnis ist dasselbe: Ihre Ideen weiterzuentwickeln. Von Skizzen bis hin zu Hi-Fi-Anlagen bietet jede neue Iteration eine Fülle von Verhaltensweisen und Funktionen zum Testen. Und mit mehr Daten können wir sowohl schneller als auch intelligenter iterieren.
• Erkennen Sie unbeabsichtigte Szenarien – Sobald etwas sichtbar ist, stehen uns die Einschränkungen unseres Produkts zur Untersuchung zur Verfügung, was auch einen besseren Kontext dafür bietet, was vorhanden sein sollte … und was nicht!
• Usability-Probleme erkennen – Hier leben viele Designer: Sobald ein Produkt einen Prototyp jeglicher Art hat, sind Usability-Probleme plötzlich leicht zu erkennen und zu beheben.
• Präsentation – Prototypen in jeder Phase sind ein Standard für die Präsentation. Unabhängig davon, ob Sie eine Version einer Seite testen oder einem Kunden ein Produkt präsentieren, ein Prototyp in irgendeiner Form sollte vorhanden sein. Und wenn nicht, können Sie darauf wetten, dass jemand fragen wird, wo es ist und warum es nicht enthalten war.

So starten Sie den Prototyping-Prozess

Nach Erhalt eines 50-seitigen Anforderungsdokuments von einem Kunden kann der Blick auf eine leere Leinwand entmutigend sein. Es hilft selten, unorganisierte Gedanken aus Kundengesprächen, Serviettenskizzen und schmutzigen Whiteboard-Fotos zu überprüfen.

Da Prototypen auf so vielen anderen Informationen basieren, ist es wichtig, die notwendigen Details zu sammeln, bevor Sie den Stift zu Papier bringen. Betrachten Sie die folgende Checkliste und überprüfen Sie die von Ihrem Kunden oder Manager bereitgestellten Details:

1. Was sind die Ziele des Projekts?

Beginnen Sie mit dem großen Ganzen. Löst das Produkt ein echtes Bedürfnis? Wie löst es dieses Bedürfnis? Das Verständnis des Nutzens des Produkts ist entscheidend für die Bereitstellung einer praktikablen Lösung.

2. Welche Konkurrenzprodukte werden derzeit verwendet?

Eine starke Wettbewerbsanalyse liefert ein klares Bild der Marktsituation für den Produkttyp und darüber, was die heutigen Benutzer erwarten.

3. Wer ist das Publikum? Was sind ihre Ziele?

Das Verständnis von Demografie und Benutzerbedürfnissen liefert den notwendigen Kontext, um Produkte zu entwickeln, die darauf ausgerichtet sind, diese bestimmten Benutzertypen zu bedienen und ihre Bedürfnisse zu erfüllen.

4. Um was für ein Produkt handelt es sich und für welches (Gerät) ist es?

Bei so vielen verschiedenen Technologien und Lösungen müssen UX-Designer wissen, wie das Produkt verwendet wird (Web-App, responsive Website, mobile App usw.), auf welchen Geräten und wie verschiedene Versionen nebeneinander existieren (wenn überhaupt). ).

5. Gibt es visuelle Präzedenzfälle, denen man folgen kann?

Wenn das Produkt bereits existiert und das Projekt Verbesserungen oder ein Redesign betrifft, sind möglicherweise einige Anforderungen unter Berücksichtigung des aktuellen Benutzerverhaltens mit dem Produkt vorhanden.

6. Was sind die Leistungen?

Das Festlegen von Erwartungen bezüglich der Ergebnisse und des Prozesses ist entscheidend für Ihre Planung und Ihren Arbeitsablauf. Jedes Projekt ist anders, aber wenn die Ergebnisse gut definiert sind, hat der Rest des UX-Designprozesses eine höhere Chance, reibungslos zu verlaufen.

Zeichnen Sie Ihre Prototypen

Wenn unsere Daten verfügbar und organisiert sind, besteht der nächste Schritt darin, mit dem Zeichnen zu beginnen. Viele Designer haben bereits eine Idee für das Layout, die Struktur oder sogar, wo bestimmte Elemente des visuellen Designs hingehören, bevor sie es überhaupt skizzieren. Das ist in Ordnung, aber der Zweck der ersten Skizzen besteht darin, den verfügbaren Platz zu erkunden, um hervorzuheben, was möglich ist – und, was noch wichtiger ist, was nicht.

Stellen Sie Ihre Schreibgeräte Ihrer Wahl zusammen, sei es Bleistift und Papier oder Whiteboard und Marker. Der Skizzenprozess ähnelt dem Freischreiben eines Schriftstellers oder dem Klimpern eines Musikers; Zeichnen Sie, was Sie fühlen, basierend auf all der Arbeit, die Sie im Voraus geleistet haben, und berücksichtigen Sie die folgenden Teile:

01 | Benutzerflüsse – Folgen Sie der Identifizierung von Benutzerflüssen. Sehen Sie, wie die Benutzer ihre Ziele erreichen und wie sie innerhalb des Systems interagieren.

02 | Informationsentitäten – Jeder Benutzerfluss zeigt einige Benutzereingaben und -ausgaben. Identifizieren Sie, was sie sind, wie sie sich auf das Benutzerverhalten und die Erwartungen beziehen, an welchen Interaktionen sie beteiligt sind und wie sie funktionieren.

03 | Erste Skizzen – Nachdem Sie eine Vorstellung davon bekommen haben, wer das System verwenden wird, was sie tun werden und womit, ist es Zeit zu sehen, wie. Skizzieren Sie Ihre Benutzerabläufe – Sie müssen das Layout noch nicht erstellen, sondern nur die Funktionalität lösen.

04 | Skizzieren Sie eine rudimentäre Struktur – Nachdem Sie Ihre Benutzerabläufe skizziert haben, haben Sie eine bessere Vorstellung vom besten Layout für das Produkt. Dazu gehören Inhalte (Text, Fotos, Videos usw.), die als einfache Kästchen oder Kritzeleien angezeigt werden. Wenn sie von Hand geschrieben werden, passen sie nicht in die richtige Größe, daher dienen alle Strukturen und Inhalte nur der Visualisierung, nicht der tatsächlichen Verwendung.

Ein zusätzlicher Tipp ist die Verwendung von Skizzenblöcken, speziell formuliertem Papier oder Werkzeugen, um beim Skizzieren klarere Drahtgitter zu erstellen. Sie liefern das grundlegende Layout für das betreffende Ansichtsfenster, sind relativ kostengünstig und lassen mit der richtigen Schablone auch Skizzen sauberer erscheinen. Diese sind enorm hilfreich, wenn Sie ein unordentlicher Zeichner sind, da sie die richtigen Seitenverhältnisse und Gitternetzlinien für Smartphones und Webbrowser bereitstellen.

Dieser Prozess kann so lange fortgesetzt werden, wie Sie möchten, aber es ist an der Zeit, mit dem nächsten Schritt fortzufahren, sobald ein Benutzerflow abgeschlossen ist und der Prozess zum Abschließen dieses Flows klar ist. Es ist eine gute Idee, zwischen dem Skizzieren und dem Erstellen digitaler Drahtmodelle hin und her zu springen, hauptsächlich um den Prozess kreativ zu halten. Je mehr Flows Sie durchlaufen, desto konkreter wird sich das Produkt anfühlen, und Sie werden ganz natürlich vom Skizzieren wegkommen.

Umstellung auf Digital (Low-to-High-Fidelity-Prototypen)

Sobald genügend vollständige Skizzen vorhanden sind, um fortzufahren, ist es an der Zeit, sie zu digitalisieren. Ob Adobe XD oder Sketch, Framer oder Flinto oder etwas ganz anderes, das Erstellen digitaler Versionen von Skizzen ist der erste Schritt zu ihrer Formalisierung. Der Fokus verlagert sich daher vom kreativen Hinzufügen notwendiger Elemente zum Organisieren von Assets und Strukturen innerhalb der Designs.

Wenn die Prototypen praktischer und die Elemente strukturierter werden, nimmt das Produkt Gestalt an. Bei der Umstellung auf digitale Prototypen wird die Wiedergabetreue durch den Grad der Interaktivität , des visuellen Designs und des Inhalts bestimmt . Ein Prototyp kann in diesen Bereichen individuell Low- oder High-Fidelity sein, obwohl HiFi alle drei auf höchstem Niveau beinhaltet.

Berücksichtigen Sie die Hierarchie in Bezug auf die Erfüllung der Benutzeranforderungen. Jede Skizze ist mit einem Benutzerfluss und einer Geschichte verbunden, und die Skizzen sind ein erster Schritt zur Bestimmung des Layouts und der Struktur eines Produkts. Die heutigen digitalen Tools können vieles davon beschleunigen – zum Beispiel das Festlegen von Master-Elementen, die für alle Seiten und Vorlagen für Seitentypen gelten.

Stellen Sie sich bei jeder neuen Verbindung und Iteration zwei Hauptfragen: Erfüllt diese Seite ihren Zweck im größeren Benutzerfluss? Und ist die Interaktion sinnvoll (d. h. hat der Benutzer verstanden, wie er die Aktion abschließt)? Diese Fragen stellen wir uns oft. Je mehr wir tun, desto wahrscheinlicher ist es, dass jede neue Iteration die Prototypen einem endgültigen Entwurf näher bringt.

Digitale Prototypen sind auch viel einfacher zu testen, da sie nicht nur besser lesbar, sondern auch schneller zu reproduzieren und massenweise zu iterieren sind. Hier sind UX-Prototyping-Tools wie InVision und Proto.io sehr praktisch, um klickbare Prototypen zu erstellen. Wenn es anklickbar ist, wird es einfach, die Benutzerfreundlichkeit verschiedener Aspekte zu testen, von einzelnen Schaltflächen bis hin zu ganzen Abläufen.

Clickable Prototyping ist in den letzten Jahren dank der Benutzerfreundlichkeit von Programmen wie InVision besonders beliebt geworden. Es ist sogar noch wertvoller für mobile Geräte, wo jetzt jedes große Prototyping-Tool eine Möglichkeit bietet, mobile Kabel direkt auf einem Testgerät zu sehen oder zu testen.

Mit etwas Engineering-Know-how oder leistungsfähigeren Tools wie Justinmind oder Axure ist es auch möglich, funktionale Prototypen zu bauen, die über das einfache Klicken hinaus interaktiv sind. Benutzer können Dinge wie das Ausfüllen von Formularen, das Ausführen einfacher oder komplexer Aufgaben und die tatsächliche Verwendung der Anwendung so testen, wie sie verwendet werden soll, ohne sie tatsächlich zu erstellen. Designer mit einer Ausbildung im Design von Mensch-Computer-Interaktion (HCI), darunter viele Toptal-Designer, bauen und testen regelmäßig funktionale Prototypen.

Interaktive Prototypen eignen sich hervorragend zum Testen von Animationen, Benutzervorgängen innerhalb der App und Funktionen auf höherer Ebene, die manchmal nicht ohne eine funktionale Aktion getestet werden können.

Prototyp mit Zweck

Die Schönheit – und Herausforderung – des Prototyping liegt im Prozess. Dasselbe können wir über fast alles sagen, aber Prototypen beginnen und enden mit einem Zweck. Ohne zu wissen, warum sich ein bestimmter Bildschirm auf eine bestimmte Weise verhalten muss, wie eine Funktion funktionieren soll oder ob Benutzer einen Trichter benötigen oder nicht, wird der erstellte Prototyp nicht entwickelt; es wird gezeichnet und dann ad hoc erstellt.

Doch selbst wenn jedes einzelne Wireframe so intelligent erstellt wird, Fragen auf dem Weg dorthin gestellt werden, jede zugehörige User Story berücksichtigt wird und die Informationsarchitektur als Karte verwendet wird, ist es immer noch möglich, Dinge zu übersehen. Das ist die Herausforderung beim Prototypendesign: Kunden, Manager und sogar Designer vergessen, dass Prototypen nicht endgültig sind . Sie sind nur ein Entwurf, eine Iteration bis zur nächsten Version. Das alles ist Teil des UX-Designprozesses.

Denken Sie also beim Bau Ihres nächsten Satzes von Prototypen daran, mindestens eine entscheidende Frage zu stellen: Führt dies zum gewünschten Ergebnis? Wenn nicht, dann ist es eine weitere Gelegenheit, eine neue Version zu entwerfen.

• • •

Weiterführende Literatur im Toptal Design Blog:

• eCommerce UX – Best Practices im Überblick (mit Infografik)
• Die Bedeutung von Human-Centered Design im Produktdesign
• Die besten UX-Designer-Portfolios – inspirierende Fallstudien und Beispiele
• Heuristische Prinzipien für mobile Schnittstellen
• Antizipatorisches Design: Wie man magische Benutzererlebnisse schafft