High-Fidelity & Low-Fidelity Prototyping: Was, wie und warum?

Tatsächlich wurden die Begriffe „High Fidelity“ und „Low Fidelity“erstmals Ende der 1980er Jahre in der Rockmusik verwendet, um den Sound und die Spielfähigkeiten des Rock’n’Roll zu beschreiben. Im Laufe der Jahre werden sie auch im Web- / App-Design angewendet, um sich auf die verschiedenen Detail- und Funktionsebenen zu beziehen, die in einen Prototyp eingebaut sind.

Was sind jedoch die tatsächlichen Unterschiede zwischen ihnen, wie und warum sollten wir den High- oder Low-Fidelity-Prototyp für ein besseres Design oder eine bessere Benutzerforschung auswählen?

Im Folgenden werde ich Sie durch die Grundlagen und Unterschiede führen, die in der High Fidelity und Low Fidelity liegen, und erklären, warum und wie man sie auswählt, um hervorragende Prototypen für ein besseres Design oder eine bessere Benutzerforschung zu erstellen.

Inhaltsverzeichnis:

• Erstens, was ist ein Prototyp
• Was ist ein Low-Fidelity-Prototyp
• Was ist ein High-Fidelity-Prototyp
• Unterschied zwischen High-Fidelity- und Low-Fidelity-Prototyp
• Wie und warum wählen Sie Hi-Fi oder Low-Fi-Prototyp für ein besseres Design
• Bestes Prototyping-Tool für web/app design

Was ist ein Prototyp?

„Ein Prototyp ist ein frühes Muster, Modell oder Release eines Produkts, das zum Testen eines Konzepts oder Prozesses entwickelt wurde. Es ist ein Begriff, der in einer Vielzahl von Kontexten verwendet wird, einschließlich Semantik, Design, Elektronik und Softwareprogrammierung.“ —- aus Wikipedia.

Wenn es um UI / UX-Design geht, hilft ein Prototyp Designern, ihre Designideen in ein digitales und greifbares Modell zu übersetzen. Sie können Teile oder alle Benutzeroberflächen, Interaktionen und UX-Flows direkt testen, um festzustellen, ob sie funktionsfähig und entschuldbar sind.

Da die Bedürfnisse der Teams variieren, stellen sie außerdem den Low-Fidelity-Prototyp oder den High-Fidelity-Prototyp her, um ihre Designideen für verschiedene Zwecke zu testen.

Was ist ein Low-Fidelity-Prototyp?

Der Low-Fidelity-Prototyp – bekannt als Low-Tech-, Low-Fi- oder Lo-Fi-Prototyp – ist ein halbfertiger Prototyp, der sich auf Funktion, Struktur, Prozess konzentriert und das einfachste Framework und die Elemente einer Web / App bereitstellt. Es wird häufig verwendet, um Designideen in testbare und greifbare Artefakte zu übersetzen, um die Benutzeranforderungen frühzeitig zu erfassen und zu analysieren.

Was ist dann ein High-Fidelity-Prototyp?

Der High-Fidelity-Prototyp – bekannt als High-Tech-, High-Fi- oder Hi-Fi-Prototyp – ist ein umfassender und interaktiver Prototyp, der mit vielen Funktionen, Interaktionen und Details dem Endprodukt sehr nahe kommt. Es wird häufig in der späteren Usability-Bewertung verwendet, um die potenziellen Probleme zu ermitteln, die ein Web- / App-Design möglicherweise noch aufweist.

Unterschied zwischen High-Fidelity- und Low-Fidelity-Prototyp

Sie kennen die Unterschiede zwischen Low-Fidelity- und High-Fidelity-Prototypen immer noch nicht? Keine Sorge! Hier sind 3 Beispiele für echte Low-Fidelity-Prototypen, die Ihnen helfen, mehr über Low-Fi-Prototypen zu erfahren:

1. Beispiel für einen Low-Fidelity-Bewegungsprototyp

Dieser Low-Fi-Prototyp zeigt die Bewegungen des zweiten Menüs deutlich, ohne sich zu sehr auf die Details der Benutzeroberfläche zu konzentrieren.

2. Low Fidelity UX Prototyp Beispiel für einen Website Builder

Dieser Low-Fidelity-UX-Prototyp präsentiert die Seitenlayouts, Navigationssysteme und Benutzerinteraktionsflüsse klar und ohne zu viele UI-Details. Es hilft Designern, Annahmen zu testen und unsichtbare UX-Probleme schnell zu finden.

3.Lo-Fi Prototyp Beispiel Ausschreibung

Dies ist ein weiteres gutes Beispiel (erstellt in Mockplus, einem einfacheren, schnelleren und intelligenteren Prototyping-Tool), um die Hauptlayouts und Elementplatzierungen einer App anzuzeigen. Auch ohne Elementdetails hilft es Designern, potenzielle Probleme frühzeitig zu erkennen und anzugehen.

Sehen Sie es? Auch ohne UI-Details hilft der Low-Fi-Prototyp dabei, Designideen zu vermitteln und die wichtigsten Funktionen, Strukturen, Abläufe und Interaktionen einer Web / App einfach darzustellen. Es bringt Designern viele Vorteile.

Vorteile von Low Fidelity Prototypen:

• Niedrige Kosten. Die Kosten für einen Low-Fidelity-Prototyp sind extrem niedrig.
• Schnell. Ohne sich auf jedes Schnittstellendetail zu konzentrieren, können Designer einfach ihren Designideen folgen und innerhalb weniger Minuten einen einfachen und testbaren Prototyp erstellen.
• Einfach zu demonstrieren, zusammenzuarbeiten und zu iterieren. Ohne zu viele UI-Details erfordert ein Low-Fi-Prototyp nicht viele professionelle Fähigkeiten. Und mehr Menschen können am selben Projekt teilnehmen und zusammenarbeiten. Es ist auch einfach für Designer, Änderungen vorzunehmen und den Prototyp während der Zusammenarbeit zu iterieren.
• Einfach Feedback zu erhalten. Da ein Low-Fidelity-Prototyp einfach zu transportieren und zu demonstrieren ist, können Designer ihn auch direkt mit anderen Personen (einschließlich Teammitgliedern und Stakeholdern) teilen, um Design-Feedback zu sammeln.
• Leicht zu erkennen und mögliche Probleme anzugehen. Ein Low-Fidelity-Prototyp ermöglicht es Designern auch, Benutzerflüsse, Interaktionen und Navigationsmenüs eines Webs / einer App einfach zu testen. Es ist gut für Designer, potenzielle UI / UX-Probleme schnell zu erkennen und anzugehen.

Nachteile von Low-Fidelity-Prototypen:

• Begrenzte UI Details / Animationen / Interaktionen. Um Ideen schnell zu vermitteln, wird häufig ein Low-Fidelity-Prototyp mit begrenzten UI-Details, Funktionen, Animationen und Interaktionen usw. erstellt. Daher ist es für andere Designer oder Teammitglieder nicht gut, das Web- / App-Design vollständig zu verstehen.
• Die Testergebnisse sind begrenzt und ungenau. Ohne genügend Designdetails kann ein Low-Fidelity-Prototyp die realen Benutzerszenarien bis zu einem gewissen Grad nicht genau simulieren. Die Testergebnisse sind auch zwangsläufig betroffen und ungenau. Unnötig zu sagen, wenn der Prototyp zu einem späteren Zeitpunkt dramatisch modifiziert wird, können die Testergebnisse völlig unterschiedlich sein.

Wenn Sie also nur einige Designideen haben, diese mit einem einfachen Prototyp präsentieren, mit anderen Designern oder Teammitgliedern diskutieren und zusammenarbeiten möchten, bevor Sie sich einarbeiten, ist ein Low-Fidelity-Prototyp perfekt für Sie.

Und dann sind hier 3 echte High-Fidelity-Prototyp-Beispiele, die Ihnen helfen, mehr über High-Fi-Prototypen zu erfahren:

1. Jobliste High-Fidelity-Prototyp Beispiel

Dieser High-Fidelity-Prototyp zeigt nicht nur die UI-Details, sondern zeigt auch Benutzerströme und Interaktionen deutlich an. Designer können sehr kleine Details leicht überprüfen und testen, um festzustellen, ob es noch einige UI / UX-Probleme gibt.

2. High Fidelity Prototyp Beispiel

3. Produkt Design High Fidelity Prototyp Beispiel

Mit einem High-Fidelity-Prototyp können Sie Designideen mit satten Farben, Schaltflächen, Fotos, Symbolen, Animationen, Interaktionen und weiteren Details vermitteln.

Vorteile von High-Fidelity-Prototypen:

• Reiche design details. Die High-Fidelity-Prototypen werden mit mehr HQ-Fotos, Farben, Animationen, Symbolen, Schaltflächen und anderen Elementen erstellt. Jedes Element ist genau so gestaltet, als wäre es in einer echten Website / App.
• Bessere visuelle Wirkung. Mit einem großartigen Farbschema, lebendigen Animationen, Layouts und vielem mehr hat ein High-Fidelity-Prototyp oft auch bessere visuelle Effekte als ein Low-Fidelity-Prototyp.
• Mehr genaue prüfung ergebnisse. Mit reichen Details sieht ein High-Fidelity-Prototyp wie eine echte Web / App aus. Für Designer ist es einfach, die realen Benutzerszenarien zu simulieren und das Produkt unter allen möglichen Aspekten zu testen, einschließlich der Interaktionen, Benutzerflüsse, Elementeffekte und Farbschemata sowie der UX. Die Testergebnisse sind auch viel genauer.
• Mehr effektive feedback. Natürlich ist das erhaltene Feedback, nachdem es mit anderen Designern und Teammitgliedern geteilt wurde, auch effektiver, um die bestehenden Probleme anzugehen.
• Attraktiver für Kunden und Stakeholder. Es ist auch gut für Designer, klar zu präsentieren, wie das endgültige Web / die App funktionieren soll, und mehr Kunden, Stakeholder und Investoren anzuziehen.

Nachteile von High-Fidelity-Prototypen:

• Höhere Kosten. Ein High-Fidelity-Prototyp muss oft mit einem professionellen Prototyping-Tool erstellt werden. Im Vergleich zum Low-Fidelity-Prototyp sind die Kosten sicherlich viel höher.
• Schwer zu ändern und zu iterieren. Wenn einige Änderungen vorgenommen werden, müssen auch eine Reihe von Seiten oder Elementen in einem High-Fidelity-Prototyp gleichzeitig geändert werden. Dies kann mühsam und zeitaufwendig sein.

Ein High-Fidelity-Prototyp ist also hochfunktional und interaktiv für Sie und Ihr Team, um einige winzige UI / UX-Probleme zu finden und anzugehen sowie mehr Aktionäre und Kunden in der Endphase des Designs zu gewinnen.

Wie und warum wählt man Hi-Fi oder Low-Fi für ein besseres Design?

Da High Fidelity und Low Fidelity bei der Erstellung erfolgreicher Designs eine sehr unterschiedliche Rolle spielen, sollten Sie sie besser auch für verschiedene Einkäufe oder in verschiedenen Entwurfsphasen verwenden:

1.Warum ist ein Low-Fidelity-Prototyp in der frühen Designphase besser für Sie?

Offensichtlich konzentriert sich der Low-Fidelity-Prototyp mehr auf High-Level-Konzepte der Endprodukte und hilft, die potenziellen Probleme zu entdecken und sie in einem sehr frühen Stadium zu lösen.

Es hilft sicherzustellen, dass Sie und Ihr Team das richtige Designthema und die richtige Richtung gewählt und befolgt haben, bevor Sie sich einarbeiten.

Wenn Sie und Ihr Team in der frühen Entwurfsphase Ideen schnell in visualisierte Prototypen umsetzen, Iterationen verkürzen und Benutzerfeedback sammeln möchten, ist ein Low-Fidelity-Prototyp eine viel bessere Wahl.

Kurz gesagt, wann ist der richtige Zeitpunkt, um einen Low-Fi-Prototyp zu verwenden?

• Wenn eine Designidee in Ihrem Kopf aufblitzt und Sie diese schnell in ein greifbares Modell umwandeln möchten
• Wenn Sie Ihre Designideen so schnell wie möglich mit Ihren Partnern besprechen möchten
• Wenn Sie testen möchten, ob die Designideen realisierbar sind und die Bedürfnisse der Benutzer erfüllen
• Wenn Sie Feedback von anderen Teammitgliedern erhalten möchten

Warum ist High Fidelity Prototyping für Sie in der Endphase des Designs besser?

Und dann, da die High-Fidelity-Prototyp zahlt oft viel Aufmerksamkeit auf die Details und Funktionen eines Web / App, ist es oft besser für Designer, die Machbarkeit von Web / App-Designs zu testen und mehr Nutzer / Stakeholder in der Endphase des Designs zu gewinnen.

Kurz gesagt, wann ist die beste Zeit, um einen High-Fi-Prototyp zu verwenden?

• Wenn das visuelle Design Ihres Produkts erstellt wurde
• Wenn Sie Ihre Web- / App-Details wie UI-Elemente, Farbschemata und Seitenkopien usw. testen möchten
• Wenn Sie eine Interaktion, einen Workflow, einen Benutzerfluss, eine Übergangsanimation, visuelle Effekte oder ähnliche Designideen mit vollständigen UI-Details testen möchten
• Wenn Sie das Feedback von anderen Designern und Designern wissen möchten benutzer

Wie wählt man das richtige Prototyping-Tool für ein besseres Design?

Egal, ob Sie sich für einen High-Fidelity- oder einen Low-Fidelity-Prototyp entscheiden, der einzige Zweck besteht darin, Ihre fantastischen Designideen lebendiger zu präsentieren und hervorragende Web- / App-Prototypen zu erstellen, oder? Wenn Ihre Antwort „Ja“ lautet, besteht der nächste Schritt für Sie darin, ein geeignetes Prototyping-Tool auszuwählen.

Aber Sie wissen immer noch nicht wie? Hier sind einige Tipps für Ihre Referenzen:

• Preis. Der Preis ist immer der wichtigste Faktor für Sie, um ein Low-Fi- oder High-Fi-Prototyping-Tool zu wählen. Dies ist jedoch nicht der einzige Faktor, den Sie berücksichtigen sollten. Ein billiger oder teurer Preis zeigt nichts an. Was Sie brauchen, ist nur das, was am besten zu Ihnen passt.
• Lernkurve. Wie lange es dauert, bis Sie und Ihr Team ein neues Tool erlernen, ist bei der Auswahl eines richtigen Prototyping-Tools immer wichtig. Wenn Sie also keine Zeit damit verschwenden möchten, neue Funktionen eines Tools zu erkunden, sollten Sie sich für ein einfacheres entscheiden.
• Verwendung. Heutzutage gibt es viele Prototyping-Tools, die völlig unterschiedliche Funktionen bieten. Um die für Sie und Ihr Team am besten geeignete auszuwählen, sollten Sie wissen, welche Funktionen Sie in Ihrem Produktdesignprozess genau benötigen. Daher ist es notwendig, dass Sie die tatsächlichen Bedürfnisse Ihrer Teammitglieder aus verschiedenen Abteilungen im Voraus herausfinden.
• Teamarbeit. Um Designideen zu diskutieren und zeitnah Feedback von anderen Teammitgliedern zu erhalten, bevorzugen die meisten Designer / Designteams ein Prototyping-Tool, das die Teamarbeit unterstützt. Brauchst du das auch? Wenn Sie dies tun, ist ein Tool, mit dem Sie und Ihr Team frei online kommunizieren und zusammenarbeiten können, eine bessere Option.
• Treue. Nun, bei der Auswahl eines Prototyping-Tools ist es auch notwendig, die Wiedergabetreue zu berücksichtigen.
• Integration. Ein weiterer Faktor, den Sie berücksichtigen sollten, ist zu sehen, wie gut das Prototyping-Tool zu Ihrem Designprozess passt. Wenn Benutzer beim Entwerfen häufig die Tools wechseln müssen, sind heutzutage viele Prototyping-Tools in andere Tools wie Sketch, PS, Facebook, Slack und mehr integriert.

Insgesamt hoffe ich, dass diese Tipps Ihnen bei der Auswahl des richtigen Werkzeugs helfen können.

3 beste Low-Fidelity-Prototyping-Tools

Hier sind 3 beste Low-Fidelity-Prototyping-Tools für Ihre Referenzen:

Papier und Stifte

Mit dem schnellsten und einfachsten Tool zeichnen Stifte und Papier Ihre Ideen einfach und schnell und erleichtern auch die interne Diskussion zwischen den Teammitgliedern. Auch wenn ich manchmal Prototyping-Software zum Zeichnen verwenden muss, verwende ich normalerweise lieber Stifte und Papier, um meine Ideen zuerst zu klären.

Vorteile:

• Völlig kostenlos
• Schnell
• Einfach zu starten

Nachteile:

• Keine intelligenten Interaktionen und Animationen
• Sie können nicht alle Ihre Ideen klar zeigen
• Sie können nicht jedes Detail diskutieren und testen

Mockplus

Mockplus ist ein leistungsstarkes Low-Fidelity-Prototyping-Tool, das in den letzten Jahren viel Aufmerksamkeit erregt hat. Es ermöglicht Ihnen, Designideen in interaktive Prototypen zu übersetzen, zu testen, zu teilen und sie mit Leichtigkeit zu iterieren. Seine Teamzusammenarbeit und Management-Funktion hilft auch, Ihre Arbeitseffizienz mühelos zu verbessern.

Vorteile:

• Stellen Sie über 200 vorgefertigte Komponenten und 3000 vorgefertigte Symbole bereit
• Erstellen Sie Interaktionen mit einfachem Drag-and-Drop
• Bieten Sie viele Optionen zum Exportieren von Seiten und Prototypen
• Stellen Sie zahlreiche Beispiele und Projekte bereit
• Bieten Sie viele Möglichkeiten, einen Prototyp online oder mobil zu teilen und zu testen
• Kommunizieren, kommentieren und >
• Integration mit Sketch

Nachteile:

• Nicht völlig kostenlos

Balsamiq Mockups

Basamiq ist ein einfaches Low-Fidelity-Prototyping-Tool, mit dem Sie Ihre Designideen direkt auf einem Whiteboard skizzieren können. Es ist wirklich nützlich, wenn Sie sich nur auf die Strukturen und das Gesamtkonzept Ihres Designs konzentrieren.

Nachteile:

• Stellen Sie eine integrierte handgemalte UI-Bibliothek bereit
• Exportieren Sie Designs direkt in PNG / PDF-Bilder

Nachteile:

• Es fehlen grundlegende Interaktionen beim Prototyping von Designs

2 Beste High-Fidelity-Prototyping-Tools

Marvel App

Marvel App ist ein leistungsstarkes High-Fidelity-Prototyping-Tool, mit dem Wireframes, Prototypen und Modelle gemeinsam online erstellt werden können. Sie können Bilder (einschließlich JPF, GIF und PSD) direkt hochladen und Animationen hinzufügen, um schnell interaktive Prototypen zu erstellen.

Mockplus Cloud

Mockplus Cloud ist ein professionelles Online-Design-Collaboration-Tool, mit dem Produktmanager, Designer und Entwickler online mit Auto-Spezifikationen, Assets und Code-Snippets zusammenarbeiten können.

Es wird auch als All-in-One-High-Fidelity-Prototyping-Tool verwendet. Sie können ganz einfach Designs mit Assets und Spezifikationsdetails aus Sketch / PS / Adobe XD hochladen und umfangreiche Interaktionsbefehle hinzufügen, um interaktive und High-Fidelity-Prototypen zu erstellen.

Für ein Produktteam kann der neu erstellte Prototyp auch mit einem Link geteilt werden und Feedback in Echtzeit erhalten.

Kurz gesagt, um heutzutage weit mehr Benutzer anzulocken, werden viele Prototyping-Tools erstellt, um die Bedürfnisse der Benutzer so weit wie möglich zu erfüllen. Es scheint keine klare Grenze zwischen einem Low-Fi- und High-Fi-Prototyping-Tool zu geben.

Um ein geeignetes Prototyping-Tool auszuwählen, ist es für Sie und Ihr Team am besten, mehr Tooloptionen zum Testen zu verwenden.

Einpacken

Egal, was die Unterschiede zwischen Low Fidelity und High Fidelity Prototyping sind, wie und warum Sie Low Fidelity oder High Fidelity Prototyping für ein besseres Design oder eine bessere Benutzerforschung wählen, ein gutes Prototyping-Tool, wie das einfachere und schnellere, Mockplus, bedeutet oft viel für Sie, um ein exzellentes Web / App mit schönen Schnittstellen und guten Benutzererfahrungen zu erstellen. Ich hoffe, dieser Artikel kann Sie trotzdem inspirieren.

Das könnte Ihnen auch gefallen:

Welche Prototyping-Tools benötigen Sie für das UX-Design?

Was sind die Vorteile von Prototyping? Wie kann man das Beste daraus machen?

Teamzusammenarbeit von Prototyping-Tools: Axure VS. Mockplus

Wireframe vs. Mockup vs. Prototyp & Auswahl von Prototyping-Tools