Der ultimative Leitfaden für das Prototyping

Aber um diese Vorteile zu nutzen, müssen Sie es richtig machen. In diesem Leitfaden erfahren Sie, was ein Prototyp ist, welche Vorteile er bietet, welche Arten von Prototypen es gibt, wie man einen Prototyp erstellt und worauf Sie bei einem Prototyping-Tool achten sollten.

Prototypen sind eine genaue Nachbildung dessen, wie das Endergebnis eines Produkts aussehen wird, in der Regel ohne Code. Sie enthalten einen Großteil des endgültigen UI-Designs und der Interaktion, die das fertige Produkt haben wird. Das Prototyping ist eines der mächtigsten Werkzeuge im Inventar eines UX-Designers.

Sie eignen sich hervorragend für das Design digitaler Produkte, da sie uns helfen, zu experimentieren und Annahmen zu testen, ohne dass sich diese später als kostspielige Fehler erweisen. Prototypen sind auch ein ideales Mittel, um allen Beteiligten Funktionalität, Interaktion und UI-Design zu vermitteln. Diese Art der Kommunikation führt zu dem, was man den „iterativen Zyklus“ nennt.

Papier-Prototyping ist eine schnelle und einfache Methode, um ein Konzept Ihres Produkts mit nichts anderem als einem Stift und Papier zu illustrieren. Es ist auch die kostengünstigste Methode des Prototyping. Wenn Sie die Kosten für das Papier, den Stift und einen Kaffee für Ihre Benutzer einrechnen, falls diese einen Anreiz brauchen!

Mit dem Papier-Prototyping können Sie das Hauptlayout des Bildschirms skizzieren, zusammen mit grundlegenden Elementen und Formen. Sie können mehrere Papierbögen erstellen, die die verschiedenen Bildschirme darstellen.

Bei Papierprototypen können Sie sich mit dem Benutzer zusammensetzen und ihm Aufgaben geben, die er erledigen soll, wobei er so tut, als sei das, was er auf dem Papier sieht, eine echte Website oder App. Sie können einen Stift als Maus verwenden, wenn es sich um eine Website handelt, oder ihren Finger, wenn es sich um eine mobile App handelt. Wenn er auf eine Schaltfläche tippt, ersetzen Sie das Blatt durch den nächsten Bildschirm, zu dem die Schaltfläche führen würde.

Ein Low-Fidelity-Prototyp besteht im Allgemeinen aus einer Basisversion des Endprodukts. Er enthält in der Regel Folgendes:

• Bildschirm-Layouts
• Einfache Elementumrisse
• Größe, Abstände und Positionierung von Elementen
• Einfache Klickmöglichkeiten und Navigation zwischen Bildschirmen

Der Grund für die Einfachheit in dieser Phase ist, dass die Aufmerksamkeit ausschließlich auf die grundlegenden Bildschirmlayouts, die Informationsarchitektur (IA) und die Navigation gerichtet werden soll. Dies hilft dabei, die grundlegende Funktionalität des Produkts ohne störende Ablenkungen zu konzipieren. Es ist auch nützlich für frühe Benutzertests und um die Zustimmung der Interessengruppen zu erhalten, bevor fortgeschrittene Interaktionen und UI-Designs hinzugefügt werden.

Lesen Sie diesen Beitrag und entdecken Sie die Unterschiede zwischen einem Prototyp und einem MVP.

Bei einem High-Fidelity-Prototyp sollten Sie so gut wie alles entworfen haben, außer dem fertigen Produkt. High Fidelity-Prototypen enthalten alle Layouts, Abstände, Elementpositionen und die Navigation des Lo-Fi-Prototyps, aber mit vielen zusätzlichen Details.

Sie können Hi-Fi-Prototypen in der Regel an folgenden Aspekten erkennen:

• Interaktion
• Fortgeschrittenes UI design
• Echter Inhalt
• Datenvisualisierung

Die grundlegende Navigation des HiFi-Prototyps wird im Laufe der Zeit immer weiter verfeinert, um fortgeschrittenere Interaktionen zu ermöglichen.

Beispiele hierfür sind das Scrollen der Seite, Mikrointeraktionen beim Überfahren mit der Maus bei einem Website-Prototyp oder ein Symbol, das die Farbe ändert, wenn es auf einem mobilen Prototyp angetippt wird. Andere Interaktionen könnten die Navigation auf dem Bildschirm zwischen dynamischen Registerkarten und in Akkordeon-Menüs oder auch das parallaxe Scrollen sein.

Darüber hinaus enthalten High-Fidelity-Prototypen ein fortschrittlicheres Design der Elemente, Farben, einzigartige Schriftarten, hochauflösende Bilder und echte Inhalte. Sie demonstrieren auch eher die Funktionalität der Datenvisualisierung, auf die wir weiter unten näher eingehen werden.

High-Fidelity-Prototypen werden verwendet, um Kunden und anderen Interessengruppen die Funktionalität und das Erscheinungsbild des Produkts zu zeigen, damit sie das Design validieren können, bevor Sie es an die Entwickler übergeben. Es ist wichtig, dass Sie das Feedback der Interessengruppen zum Design einholen, bevor Sie es an die Entwickler weitergeben, denn Nachbesserungen oder Designfehler sind teuer und zeitaufwändig, sobald die Programmierung beginnt.

Das Testen Ihrer Prototypen ist von größter Wichtigkeit, bevor sie an die Entwickler übergeben werden. Schließlich soll der Prototyp nicht nur den Stakeholdern und Entwicklern gezeigt werden, sondern auch Ihren Benutzern. Wenn die Benutzer in der Lage sind, sich gut im Produkt zurechtzufinden und die Aufgaben zu erfüllen, die Sie ihnen gestellt haben, und wenn ihnen das Design gefällt, können Sie es an die Entwickler weitergeben.

Wenn Sie eine Website designen, sollten Sie sich diese tolle Anleitung ansehen, wie Sie in weniger als 10 Minuten einen Prototyp für eine responsive Website erstellen. Alternativ können Sie sich auch einfach eine dieser wunderbaren Vorlagen für Ihr Website-Design aussuchen, um einen Anfang zu machen.

Die Erstellung von Prototypen für Ihre Designs und das frühzeitige Testen Ihrer Annahmen und Ideen ist eine großartige Möglichkeit, Schluckauf zu vermeiden. Wenn Sie direkt zum Code übergehen, ohne Ihre Ideen zu testen, und einen Fehler machen, ist eine Überarbeitung viel kostspieliger, ganz zu schweigen von der zeitaufwändigen Korrektur.

Durch den Einsatz von Rapid Prototyping und der Fail-Fast-Methode tragen Sie dazu bei, die Veröffentlichung Ihres Produkts zu beschleunigen. Denn die Beteiligten können Design-Entscheidungen viel schneller validieren und es gibt weniger Unklarheiten in der Entwicklungsphase.

Es ist inzwischen kein Geheimnis mehr, dass die Entwicklung von pixelgenauen Prototypen, die Sie an Ihren Benutzern testen können, zu einem benutzerfreundlicheren Produkt führt. Das bedeutet auch, dass Sie weitaus weniger Designfehler machen, die erst entdeckt werden, wenn die kostspielige Entwicklungsarbeit bereits begonnen hat.

Es ist auch kein Geheimnis, dass ein benutzerfreundliches Produkt zu viel höheren Akzeptanz- und Aktivierungsraten führt und gleichzeitig das Engagement der Benutzer erhöht.

Darüber hinaus ist das Prototyping auch eine großartige Möglichkeit, Kunden und Interessengruppen die Funktionalität Ihrer App oder Website zu demonstrieren. Indem Sie ihnen einen Prototyp präsentieren, ersparen Sie ihnen stundenlange Besprechungen, umfangreiche technische Dokumente und Missverständnisse.

Manchmal müssen Sie Ihren Standpunkt visuell veranschaulichen, um ihn zu vermitteln und Zustimmung zu erhalten, denn sonst können Dinge in der Übersetzung verloren gehen. Wie diese „Sie müssen es sehen, um es zu verstehen“-Momente. Gibt es einen besseren Weg, ein Produktkonzept zu erklären, als das Produkt selbst zu zeigen?

Das Prototyping hilft Ihnen dabei, Ihre Design-Ideen effizient mit einem Team zu teilen. Angenommen, Sie haben einen Vorschlag für den Kunden, wie sich eine bestimmte Funktion im Produkt verhalten sollte. Wie könnten Sie diese Idee besser demonstrieren als mit einem Prototyp? Dann können Sie diese Funktion an Ihren Benutzern testen und herausfinden, ob sie für sie geeignet ist.

Prototypen werden nie isoliert erstellt – sie sind immer für jemand anderen bestimmt – den Benutzer. Die Durchführung einer angemessenen Nutzerforschung, um herauszufinden, wer die Nutzer sind und wo ihre Probleme liegen, ist nicht nur für einen erfolgreichen Prototyp, sondern auch für ein erfolgreiches Produkt von größter Bedeutung. Die Durchführung von Nutzerforschung hilft Ihnen nicht nur dabei, das Design und die Funktionalität Ihres Produkts zu entwickeln, sondern auch herauszufinden, ob es auf dem Markt einen echten Bedarf für Ihr Produkt gibt.

In der Phase der Anforderungserhebung geht es darum, die Richtung, in die das Produkt gehen soll, sowie seine wichtigsten Funktionen festzulegen. In der Regel bedeutet dies, dass Sie Zeit mit dem Kunden verbringen und sich seine Ideen genau anhören, nachdem Sie ihm Ihre Daten aus der Nutzerforschung vorgelegt haben. So können Sie einstimmig überlegen, wie Sie das Produkt am besten designen.

Die Festlegung der grundlegenden Click-Through-Navigation in einem Lo-Fi-Prototyp und die Schaffung einer soliden Benutzerschnittstelle ermöglichen es uns, zu einem verfeinerten Prototyp überzugehen. In der High-Fidelity-Phase bauen Sie auf dieser Navigation auf und entwickeln komplexere Interaktionen, wie z. B.:

• Blättern
• Registerkarten-Menüs
• Akkordeons
• Dropdowns
• Hamburger Menüs (auf dem Handy)
• Karussells
• Parallaxe-Scroll-Effekte

Wenn Sie dem Endprodukt diesen Grad an Originaltreue verleihen, können Sie die Funktionen, die das Endprodukt haben soll, konzipieren und Stakeholdern und Entwicklern demonstrieren und sie an Benutzern testen. Dies ist auch die Phase, in der Sie versuchen, das Benutzererlebnis zu verbessern, so dass Ihr Endprodukt nicht nur benutzbar ist, sondern auch Ihre Benutzer fesselt.

Ein wireframe ist eine unkomplizierte Darstellung des Designs eines Artikels. Sie sind zu Beginn eines jeden Designprozesses ungemein hilfreich, da sie helfen, Ideen schnell zu konzeptualisieren. Wireframes konzentrieren sich in der Regel auf die zentralen Aspekte wie die Anordnung der Elemente, die Positionierung, das allgemeine Bildschirmlayout und den Benutzerfluss. Sie helfen den Designern, sich auf den eher praktischen Teil des Designs zu konzentrieren, bevor sie sich dem fortgeschrittenen Design und der Interaktion zuwenden.

Bevor wir uns mit den allgemeinen Schritten zur Erstellung eines Prototyps befassen, werfen Sie einen Blick auf einige konkrete Anleitungen, die unser Team im Laufe der Jahre erstellt hat. Diese sind sehr viel spezifischer und eignen sich gut als Übung, bevor Sie Ihre Ideen in einen Prototyp umsetzen. Sehen Sie sie sich an:

• Wie man einen Chatbot entwirft
• Prototyping und Validierung von Formularen
• Wie man einen Prototyp für eine Lebensmittel-App erstellt
• Prototyp für Anmeldeformulare

Sobald Sie mit dem Kunden gesprochen, eine Benutzeranalyse durchgeführt und Ihre Produktanforderungen festgelegt haben, können Sie mit der Erstellung eines einfachen Prototyps beginnen.

Jetzt können Sie damit beginnen, Ihre Bildschirmlayouts sowie die Größe und Positionierung der UI-Elemente festzulegen. Außerdem werden Sie hier einen grundlegenden Navigationsfluss implementieren und ein grundlegendes UI-Design festlegen. Es ist nicht nötig, in dieser Phase zu sehr ins Detail zu gehen. Im Grunde genommen erstellen Sie nur einen grundlegenden Entwurf der Bildschirme Ihres Produkts, durch den sich Kunden, Stakeholder und Benutzer durchklicken und das Produkt testen können.

Wenn Sie zu einem High-Fidelity-Design übergehen, sollte Ihr Prototyp eine tiefer gehende Funktionalität aufweisen. Ein Beispiel hierfür wäre eine Suchleiste, die auf der Grundlage der Eingaben des Benutzers im Prototyp gespeicherte Daten abruft, Akkordeon-Menüs, Dropdown-Listen und andere ähnliche Elemente.

Ein weiterer Aspekt, der Hi-Fi-Prototypen vom unteren Ende des Spektrums unterscheidet, ist, dass sie oft sowohl numerische als auch Textdaten sowie bestimmte Einstellungen, die der Benutzer eingibt, speichern. Diese Einstellungen können gespeichert werden und sich auf andere Elemente des Prototyps auswirken, entweder auf demselben Bildschirm oder auf verschiedenen Bildschirmen.

Stellen Sie sich beispielsweise vor, Sie entwickeln einen Prototyp für ein Anmeldeformular und möchten, dass die E-Mail-Adresse des Benutzers gespeichert wird und auf einem anderen Bildschirm erscheint, z. B. auf der Kontoseite. Die Variable würde dies ermöglichen und die Erfahrung beim Testen aussagekräftiger und realistischer machen.

Mikrointeraktionen sind ein entscheidender Aspekt, wenn es um die Verfeinerung des Designs in der HiFi-Prototyping-Phase geht. Eine Mikrointeraktion besteht in der Regel aus einem Auslöser, der durch den Benutzer oder das System initiiert wird, gefolgt von einer Art von Feedback.

Ein Beispiel hierfür wäre das Hinzufügen von Mouse-Over-Effekten, um den Status verschiedener Elemente wie Schaltflächen, Links und Bilder zu ändern, damit sie anklickbar sind. Ein Menü, das eingeblendet wird, wenn der Hamburger angetippt wird, ist ebenfalls eine Mikrointeraktion.

Diese kleinen, aber wichtigen Interaktionen tragen dazu bei, das Benutzererlebnis zu verbessern und Ihr Produkt intuitiver und benutzerfreundlicher zu machen.

Denken Sie daran, Übergänge einzubauen, wenn neue Bildschirme geladen werden oder Elemente auftauchen/verschwinden. Wir sprechen hier von Einblendungs-/Ausblendungsübergängen und explodierenden Elementen. Diese Arten von Interaktionen verleihen einem UI nicht nur mehr Pep, sondern die kleine Verzögerung, die sie verursachen, hilft den Augen des Benutzers, sich neu zu orientieren.

Wenn Sie die High-Fidelity-Phase erreicht haben, werden die meisten Prototypen ein fortgeschrittenes UI-Design aufweisen. In diesem Stadium sollten Sie die von Ihnen gewählte Farbpalette auf der Grundlage von Markenrichtlinien sowie fortgeschrittene Stile für Elemente wie Töne, Farbverläufe und Schattierungen implementieren.

Stellen Sie sicher, dass die von Ihnen verwendeten Farbkombinationen eine gute Zugänglichkeit und Benutzerfreundlichkeit bieten und gleichzeitig Ihre Marke betonen. Das heißt, ein angemessener Kontrast für sehbehinderte Benutzer, während Sie Farben wie Rot und Grün konsequent für Fehler- und Erfolgsmeldungen reservieren.

Die Wahl der richtigen Schriftart für Ihren Prototyp ist wichtig, da sie das Endergebnis am ehesten widerspiegelt. Daher ist dies ein wichtiges Element, das Sie beim Testen beachten sollten. Und warum? Weil es für die UX und die grundlegende Benutzerfreundlichkeit entscheidend ist. Wenn Benutzer Ihre Schriftart nicht leicht scannen und lesen können, ist die Wahrscheinlichkeit geringer, dass Sie sie aktivieren und behalten.

In der High-Fidelity-Phase schließlich wollen wir auf eine pixelgenaue Darstellung unseres Endprodukts hinarbeiten. Das bedeutet, dass wir die Abstände und die Positionierung aller UI-Elemente auf den Pixel genau festlegen müssen. Wenn Sie diese Art von Informationen in der Prototyping-Phase festlegen, wird es einfacher, wenn es an die Entwicklung des Produkts geht.

Im Stadium des Low-Fidelity-Prototyps werden Sie höchstwahrscheinlich Platzhalter für Bilder verwenden, da der Schwerpunkt einfach auf dem Layout, der Navigation und der Art der auf dem Bildschirm angezeigten Inhalte liegt.

Bei allen High Fidelity-Prototypen werden jedoch hochwertige Bilder mit hoher Auflösung verwendet. Die Verwendung dieser Art von Inhalten in dieser Phase ist aus mehreren Gründen wichtig:

• Es hilft, die Bestätigung des Kunden zu erhalten
• Es bringt Ihren Prototyp näher an das reale Produkt heran
• Es steigert die Intuitivität bei Benutzertests
• Sie können Bild-Assets mit Ihrem Prototyp an Entwickler weitergeben

Das Hinzufügen von qualitativ hochwertigen Bildern zusätzlich zur Interaktion ist eine Möglichkeit, sich in der Treuekette nach oben zu bewegen und sich dem Endprodukt anzunähern.

Platzhaltertext wie Lorem Ipsum ist, wie bereits erwähnt, für wireframes in Ordnung, solange er die Navigation und Orientierung innerhalb der Simulation nicht beeinträchtigt. In Ihrem High-Fidelity-Prototyp sollten Sie jedoch nach Möglichkeit alle echten Texte und Textelemente in Ihr Design einbeziehen, auch Textabschnitte, die nicht mit der Orientierung im Prototyp zu tun haben. Hier ist der Grund dafür:

• Es trägt dazu bei, dem Prototyp mehr Bedeutung zu verleihen.
• Es hilft Ihnen herauszufinden, ob bestimmte Inhalte auf bestimmten Seiten funktionieren
• Wenn Ihr Prototyp entwickelt ist, benötigt Ihr Produkt ein Mindestmaß an echtem Inhalt

Aus diesen Gründen sollten wir immer versuchen, echte Inhalte in unsere Prototypen einzubauen.

Das Design von Formularen ist ein wichtiger Teil der UX eines Produkts. Formulare verursachen Interaktionskosten für den Benutzer. Unnötig lange Formulare oder Formulare, die zu kompliziert, schwer zu verstehen oder fehlerhaft sind, können dazu führen, dass Benutzer Ihr Produkt aufgeben und nie wiederkommen.

Aus diesem Grund sind Prototypen sehr nützlich, um Formulare zu validieren und zu testen. In der High-Fidelity-Phase sollten die Formulare Ihres Prototyps bedingte Interaktionen, Fehlermeldungen und Inline-Validierung enthalten. Ein Beispiel hierfür wäre die Anzeige einer Fehlermeldung, wenn in ein Feld etwas anderes als eine E-Mail eingegeben wird.

Schließlich wird ein High Fidelity Prototyp höchstwahrscheinlich eine echte Datenvisualisierung enthalten, um die Funktionalität des Endprodukts zu simulieren.

Stellen Sie sich vor, Sie erstellen den Prototyp einer Webanwendung zur Verwaltung von Mitarbeiterschichten. Vielleicht möchten Sie eine Liste mit Namen, Aufgaben und Kontaktdaten der Mitarbeiter erstellen.

In der High-Fidelity-Phase sollte es möglich sein, diese Art von Daten in den folgenden Formaten anzuzeigen:

• Verzeichnisse
• Karten
• Gitter

Im Idealfall sollte der Benutzer in der Lage sein, Änderungen vorzunehmen, z. B. Mitarbeiter hinzuzufügen oder zu löschen, Zeiten zu ändern usw. und diese Änderungen im gesamten Prototyp zu wiederholen. Beim Prototyping von Datenvisualisierungen wie diesen sollten Sie immer die folgenden möglichen Interaktionen berücksichtigen:

• Filter anwenden
• Daten sortieren

Die Visualisierung von und die Interaktion mit Daten hilft, Stakeholdern und Entwicklern die Produktfunktionalität zu demonstrieren und bietet gleichzeitig die Möglichkeit zu testen, ob die Interaktionen für den Benutzer sinnvoll sind.

Beim Prototyping einer Website gibt es ein paar wichtige Faktoren, die sich vom Prototyping einer mobilen App unterscheiden. Hier sind einige der wichtigen Faktoren, die Sie berücksichtigen sollten:

Der Unterschied in der Bildschirmauflösung verschiedener Geräte wie Laptops, Desktops, Tablets und Smartphones bedeutet, dass Ihre Website responsive sein muss. Es ist immer besser, bei Ihrem responsiven Design mit dem kleinsten Gerät zu beginnen. Dies wird als „Mobile First Design“ bezeichnet und gilt in der Designwelt als Best Practice. Und warum? Weil die Skalierung eines Designs immer weniger komplex ist als umgekehrt.

Sie sollten daher sicherstellen, dass Ihr Prototyp responsive ist und auf verschiedenen Geräten angezeigt und getestet werden kann. Es gibt verschiedene Möglichkeiten, wie Sie dies erreichen können. Eine dieser Möglichkeiten sind flüssige Layouts.

Für flüssige Layouts können Sie Ereignisse festlegen, damit der Inhalt Ihres Prototyps auf dem Bildschirm verschoben und neu positioniert wird, wenn die Pixelmaße des Browsers geändert werden. In Tools wie Justinmind können Sie Ereignisse festlegen, damit dies automatisch geschieht und der Inhalt auf dem Bildschirm Ihres Prototyps mithilfe von Haltepunkten entsprechend neu angeordnet wird.

Der nächste Teil, den Sie bei der Erstellung eines Website-Prototyps berücksichtigen müssen, ist die Art und Weise, wie Benutzer mit Websites interagieren. Der wichtigste Unterschied besteht darin, dass sie auf dem Desktop eine Maus verwenden, um auf Elemente zu klicken, und dass die Gesten eingeschränkt sind. Sie können eine Website interaktiver gestalten, indem Sie Mikrointeraktionen und Parallaxenscrolling einbauen.

Das Hinzufügen von Mikrointeraktionen kann so einfach sein wie eine Schaltfläche, die beim Überfahren mit der Maus die Farbe ändert, ein Cursor, der seinen Stil ändert, ein Element, das beim Anklicken aufploppt oder explodiert oder ein gleichmäßiges Ausblenden der Seite beim Übergang zu einem anderen.

Schließlich können wir nicht genug betonen, wie wichtig es ist, dass Elemente auf einer Website anklickbar sind. Achten Sie darauf, dass Links einen angemessenen Kontrast zur umgebenden Schrift oder zum Hintergrund haben. Stellen Sie sicher, dass Schaltflächen einen angemessenen Kontrast aufweisen und wie Schaltflächen aussehen. Machen Sie CTAs größer als andere Schaltflächen, um Aufmerksamkeit zu erregen.

Beim Prototyping einer mobilen App für eine native mobile Plattform müssen Sie darauf achten, dass das Design den Designvorgaben von iOS entspricht. Achten Sie zum Beispiel darauf, dass Sie sich an die Human Interface Guidelines von Apple und das Material Design von Android halten.

Stellen Sie bei Android sicher, dass die Navigation Ihrer App auf die angedockte native Navigationsleiste am unteren Rand reagiert. Stellen Sie sicher, dass Sie beim Prototyping einer Android-App dieses native Menü mit einbeziehen, um zu demonstrieren, wie die App vom Benutzer navigiert werden kann.

Für iOS gibt es kein solches Menü, so dass Sie die Navigation in die App einbauen müssen, die den Best Practices von Apple entspricht.

Für ein großartiges Benutzererlebnis sollten Sie auch die anderen nativen Funktionen der Plattform nutzen, wie z.B. native Dropdown-Listen und Menüs. Die herunterladbaren UI-Kits von Justinmind enthalten auch Elemente und Komponenten mit diesen Funktionen sowie die typischen Symbole, die mit den Designsystemen der jeweiligen Plattformen übereinstimmen.

Sie können und sollten auch Funktionen wie die haptische Berührung von Apple nutzen. Auf diese Weise stellen Sie sicher, dass Ihre App für Apple- und Android-Benutzer ein wiedererkennbares Erlebnis bietet, was immer Punkte für die Benutzerfreundlichkeit und UX bringt.

Wenn Sie mit weniger Bildschirmfläche auskommen müssen, müssen Sie noch sorgfältiger darauf achten, welche Inhalte Sie dem Benutzer präsentieren und wie Sie diese präsentieren. Das bedeutet, dass Sie eine gut definierte Inhaltshierarchie haben müssen. Mobile Benutzer sind oft unterwegs und werden Ihre App verlassen, wenn sie die benötigten Informationen nicht finden oder die erforderliche Aktion nicht durchführen können.

Der Umgang mit diesen Einschränkungen bedeutet manchmal, bestimmte Elemente, weniger wichtige Menü- und Navigationsoptionen hinter einem ausziehbaren Hamburger-Menü zu verstecken. Es muss sichergestellt werden, dass der Text lesbar ist und die Absätze auf den Bildschirm passen, während gleichzeitig genügend seitlicher Weißraum bleibt.

Außerdem sollten Sie bei den Tasten bedenken, dass der menschliche Finger nicht die gleiche Präzision wie ein Mauszeiger hat. Daher müssen Sie sicherstellen, dass Ihre Tasten groß genug sind, um von einem durchschnittlichen Zeigefinger mit einem Durchmesser von 15 mm angetippt zu werden.

Rapid Prototyping gehört zu den leistungsfähigsten Techniken, die es in der agilen Methodik gibt. Sie müssen nicht vorsichtig sein: Die Tatsache, dass Sie einen Prototyp erstellen, um ihn an Ihren Benutzern zu testen, bedeutet, dass Sie bereits vorsichtig sind.

Machen Sie also weiter, scheitern Sie schnell, testen Sie alle Ihre Annahmen, behalten Sie die guten Ideen und sortieren Sie die schlechten schnell aus. Schlechte Ideen werden in einer agilen Umgebung nicht bestraft, sondern einfach verworfen. Und jede schlechte Idee hilft dem gesamten Team, sich in die richtige Richtung zu bewegen.

Halten Sie Ihre Prototypen schlank und konzentrieren Sie sich auf eine Funktion nach der anderen. Wenn Sie sich in mehreren verschiedenen Funktionen gleichzeitig verzetteln, kann das chaotisch sein und die Qualität wichtiger Kernfunktionen beeinträchtigen sowie die Testergebnisse verwässern.

Tappen Sie nicht in die Falle, sich Hals über Kopf in ein komplexes Produktdesign zu stürzen. Erstellen Sie stattdessen eine Liste von Produktanforderungen aus Ihrer Nutzerforschung und entscheiden Sie, welche Kernfunktionen Ihr Produkt haben soll. Wenn Sie mit Ihren Benutzern 60 Sekunden lang in einem Aufzug gefangen wären, welche Funktionen würden Sie an Ihrem Produkt aufzählen?

Entwerfen Sie diese zuerst, testen Sie sie und gehen Sie dann zu den sekundären Funktionen über. Stellen Sie sicher, dass das Akzeptanzkriterium für jede Funktion erfüllt ist.

Regelmäßige Tests sollten auf Ihrer Produkt-Roadmap stehen und eines Ihrer wichtigsten Ziele sein, wenn es um das Prototyping geht. Testen Sie jede einzelne Funktion. Sie werden weiter unten sehen, dass dies ein wichtiger Teil des iterativen Prozesses in der agilen Methodik ist. Testen hilft Ihnen, Ideen zu erforschen und Schwachstellen aufzudecken, so dass Sie ausschließen können, was nicht funktioniert, und mit dem weiterarbeiten können, was funktioniert.

Alle Teammitglieder sollten mit einer einzigen Quelle der Wahrheit arbeiten – einem Design-System. Ein gemeinsames Designsystem kann die Form eines Leitfadens mit UI-Stilen und Spezifikationen annehmen, zusätzlich zu Widget-Bibliotheken mit den Elementen, die im gesamten Produkt verwendet werden sollen.

Lorem Ipsum eignet sich hervorragend für Low-Fidelity-Prototypen, wenn Sie grundlegende Funktionen wie das Seitenlayout und die Navigation festlegen und testen möchten. Wenn es jedoch um Schaltflächen, Menüs, Formulare und andere Elemente geht, die Ihre Benutzer zur erfolgreichen Navigation in Ihrem Prototyp benötigen, müssen Sie echte Inhalte verwenden.

Außerdem sollten Sie bei High-Fidelity-Prototypen versuchen, so viel echten Text wie möglich einzubauen, um den Prototyp für Benutzer und Interessengruppen aussagekräftiger zu machen.

Das Schöne an Prototypen ist, dass Sie sie sowohl mit Kunden als auch mit Projektverantwortlichen teilen können, um während des gesamten Designprozesses wichtiges Feedback zu erhalten.

Wenn Sie über einen Prototyp verfügen, ist es einfacher, Ihre Design-Ideen zu vermitteln und die Zustimmung des Kunden und der Stakeholder für die Richtung zu erhalten, in die Ihr Design gehen soll. Prototypen, ob Low Fidelity oder High Fidelity, eignen sich hervorragend, um sie zu Meetings mitzubringen und dem Kunden zu präsentieren. Sie können sie aber auch an den Kunden schicken, damit er sie in die Feedbackschleife einbeziehen kann.

Holen Sie Ihre Entwickler von Anfang an an Bord. Denn bestimmte Designs können komplexe Codierungslösungen erfordern, die mehr Zeit in Anspruch nehmen und ein Projekt über den Zeitplan oder das Budget hinausschieben können. Wenn Sie die Entwickler von Anfang an mit ins Boot holen und ihre Zustimmung einholen, können Sie Reibungsverluste bei der Übergabe des Projekts vermeiden.

Wenn es schließlich um die perfekte Übergabe zwischen Designer und Entwickler geht, ist das Beste, was Sie den Entwicklern geben können, ein detailgetreuer, pixelgenauer, interaktiver Prototyp. Er hilft Ihnen, Folgendes zu vermitteln:

• Beabsichtigte Funktionalität
• Interaktionen zur Definition von Code wie Javascript
• Erforderliche Assets, HTML-Code und CSS-Stile

Es dient als solider Leitfaden für die erforderliche Codierung. Es ist sehr hilfreich, dem Kunden ein solches Dokument zusammen mit den Assets, dem HTML-Code und den CSS-Styles zur Verfügung zu stellen. Es verhindert, dass sie sich beim Design Freiheiten herausnehmen, und vermeidet Fehlinterpretationen. Außerdem verringern Sie das Risiko teurer Nachbesserungen.

Es ist zwar möglich, dass nur ein Profil an einem Prototyp arbeitet, z. B. ein UX-Designer, aber in Wirklichkeit ist es oft ein gemeinschaftlicher Prozess.

UX-Designer sind in der Regel für den Benutzerfluss, das Interaktionsdesign und die IA des Prototyps zuständig, während UI-Designer sich um den visuellen Teil kümmern. Andererseits können auch Produktmanager am Designprozess des Prototyps beteiligt sein, da sie letztendlich dafür verantwortlich sind, dass alle Interaktionen und funktionalen Anforderungen, die in den frühen Phasen gesammelt wurden, umgesetzt werden.

Wie der Name schon sagt, wird bei moderierten Benutzertests ein geschulter Moderator eingesetzt, der Ihnen bei den folgenden Aufgaben hilft:

• Teilnehmer führen
• Aufgaben verwalten
• Zweifel an der Antwort
• Verhaltensweisen registrieren

Unmoderierte Benutzertests sind in der Regel schneller und billiger als moderierte Tests. Er findet in der Umgebung des Benutzers statt und die Sitzung wird oft aufgezeichnet. Es gibt jedoch auch einige Nachteile, z.B. die Tatsache, dass es keine Echtzeit-Hilfe für die Teilnehmer gibt und die Verwendung von Low-Fidelity-Prototypen aufgrund des fehlenden Kontexts nicht möglich ist.

• Eye Tracking: verwendet eine Software, die den Blick des Benutzers über den Bildschirm verfolgt und dabei hilft, Momente von Interesse und Reibung zu identifizieren.
• Website-Heatmaps: sagen Ihnen, welchem Teil der Webseite Ihre Nutzer mehr Zeit und Aufmerksamkeit widmen.
• Kartensortierung: hilft Ihnen, die benutzerfreundlichste IA für neue und bestehende Produkte zu erstellen
• AB-Tests: Es werden zwei Versionen derselben Seite oder desselben Bildschirms getestet, wobei jeweils eine Variable gemessen wird.

Die Idee ist, mit dem Kunden zu kommunizieren und regelmäßig Feedback von ihm einzuholen. Außerdem sollten Sie Benutzertests durchführen und regelmäßig Feedback von Ihren Benutzern einholen. Dies alles fließt dann in den folgenden Zyklus ein:

• Das design
• Test
• Iterieren
• Perfekt

Prototypen können die Zusammenarbeit fördern, insbesondere mit einem Tool wie Justinmind. Denn Sie können Ihre Prototypen mit dem gesamten Team teilen, Kommentare hinterlassen und Feedback einholen. Sie sind auch nützlich für Präsentationen mit dem Kunden und eine gute Möglichkeit zu zeigen, warum sich Ihr Team für bestimmte Designwege entschieden hat.

Ein qualifizierter UX-Designer hilft Ihnen bei der Organisation Ihrer Nutzerforschung und Interviews, um User Personas und Produktanforderungen zu definieren. Sie sind darauf spezialisiert, ein Designsystem zu entwickeln und zu entwerfen und dieses System dann in Prototypen umzusetzen.

Sie sind dann in der Lage, die Prototypen von Experten testen zu lassen, um in moderierten und/oder unmoderierten Sitzungen Nutzerfeedback für weitere Iterationen zu erhalten.

UI-Designer sind diejenigen, die die Bildschirme Ihres Produkts mit dem richtigen Schnickschnack versehen. Sie arbeiten oft Hand in Hand mit UX-Designern, um sicherzustellen, dass das UI-Design des Produkts nicht nur ansprechend, sondern auch markengerecht und für die Benutzer zugänglich ist. In der Welt des Designs gibt es oft Mischformen zwischen UX- und UI-Designern. Dennoch ist es wichtig, zwischen den beiden Konzepten zu unterscheiden.

Die Rolle des Produktmanagers ist der Klebstoff, der alle anderen wichtigen Rollen zusammenhält. Sie sind diejenigen, die einen Fahrplan für das gesamte Produkt entwerfen und entwickeln, von der Idee über das MVP bis hin zum fertigen Produkt. Er plant jede Produktveröffentlichung und sorgt dafür, dass sie so reibungslos wie möglich verläuft.

Idealerweise haben Sie einen technischen Hintergrund, z.B. Informatik, Entwicklung, UX design oder sogar einen geschäftlichen Hintergrund.

Letztendlich liegt der Groschen bei den Produktmanagern, wenn es um die Verantwortung für das Produkt geht. Sie werden also diejenigen sein, die das Heft in die Hand nehmen, wenn ein Problem nicht gelöst wird.

Dieser Punkt ist ein Kinderspiel. Wo immer es einen Prototyp gibt, sollten auch die Benutzer beteiligt sein. Im UX design ist die Erstellung von Prototypen ohne die Einbeziehung der Benutzer wie ein Yin ohne ein Yang. Die Einbeziehung der Benutzer von Beginn des Designs an ist entscheidend für den Erfolg Ihres Produkts. Das bedeutet, dass Sie sie bei jedem Schritt und bei allen Aspekten des Designs des Prototyps einbeziehen müssen. Denken Sie daran: Testen, iterieren und nochmals testen!

Jedes Web- oder App-Entwicklungsteam braucht jemanden, der weiß, wie man intuitive und fesselnde Texte für eine Website schreibt. UX-Autoren und auch Content-Strategen können den Inhalt einer App oder Website planen und Ihnen bei der Festlegung einer Inhaltshierarchie helfen.

Das sind die Leute, an die Sie sich wenden, wenn Ihr Prototyp etwas mehr braucht als Lorem Ipsum.

Es gibt verschiedene Möglichkeiten, Prototypen zu entwerfen, und wenn es darum geht, sich für eine zu entscheiden, gibt es keine Größe, die für alle passt. Sie müssen die Methode finden, die für Ihre Situation oder Ihr Unternehmen am besten geeignet ist.

Prototypen können unterschiedlich detailliert sein, und in Wirklichkeit können Sie in jedem Stadium beginnen. Wir empfehlen Ihnen jedoch, zunächst mit einem wireframe zu beginnen und die Grundlagen festzulegen, bevor Sie zu einem pixelgenauen Design übergehen.

Und schließlich ist der agile Ansatz unschlagbar, wenn es darum geht, ein erfolgreiches Produkt schnell auf den Markt zu bringen. Die besten Ergebnisse erzielen Sie, wenn Sie beim Prototyping iterativ vorgehen, schnell scheitern und häufig testen, bis Sie den richtigen Weg eingeschlagen haben.

Denken Sie daran: Fehler werden bei Agile nicht bestraft, solange sie frühzeitig gemacht werden. Sie werden Ihnen helfen, dorthin zu gelangen, wo Sie sein müssen.