So erstellen Sie hochauflösende Wireframes: Ein kompletter Leitfaden
Das "Wireframing" von Produkten, um Feedback einzuholen, bevor man in eine vollständige Entwicklung investiert, ist eine weitaus ältere Praxis, als die meisten von uns glauben. Bereits im Mittelalter fertigten Ingenieure (sofern sie damals so genannt wurden) Prototypen von Werkzeugen und Gegenständen an und präsentierten diese ihren Auftraggebern, bevor sie mit der Massenproduktion begannen.
Auch die moderne Softwarewelt hat dieses Vorgehen selbstverständlich übernommen. Im Gegensatz zum Bau eines physischen Prototyps ermöglichen uns moderne Wireframing- und Prototyping-Tools, Prototypen bereits in einer noch früheren Phase zu testen – nämlich während sie noch entworfen werden.
Im heutigen Beitrag geht es um den wichtigsten Teil beim Erstellen von Softwareprototypen – das High-Fidelity-Wireframe, das Interaktivität ermöglicht und ein Konzept zum Leben erweckt.
Want more from The CPO Club?
Sign up for a free membership to complete reading this article:
Have an account? Log In
Was sind High-Fidelity-Wireframes?
Bevor ich erkläre, was High-Fidelity-Wireframes sind, möchte ich zuerst auf das Konzept der Wireframe-Fidelity selbst eingehen.
Fidelity bezieht sich auf den Detaillierungsgrad, den du beim Erstellen deines Produkt-Wireframes einbringst. Das können visuelle Details wie die Farben von UI-Elementen sein, die dein Branding repräsentieren, oder Bilder, die auf einem bestimmten Bildschirm erscheinen sollen (z. B. Produktfotos in den Suchergebnissen eines E-Commerce-Shops).
Neben den visuellen Aspekten gibt es auch die inhaltliche Ausgestaltung. Hierbei wird entweder Platzhaltertext bzw. -inhalt (z. B. Lorem ipsum) oder echter Inhalt (Produktnamen und Beschreibungen) verwendet.
Je nach Detailgrad deines Wireframes verwendest du entweder visuelle Elemente in Graustufen mit generischem Aussehen und Platzhalterinhalt (Low-Fidelity) oder ein gebrandetes Farbschema mit Elementen aus deinem Designsystem sowie echten Inhalten (High-Fidelity).
So sehen diese im direkten Vergleich aus.
Obwohl man vielleicht denkt, dass High-Fidelity-Wireframes beim Vergleich der beiden die offensichtliche Wahl sind, ist dies nicht immer der Fall. Der Vorteil von Low-Fidelity-Mockups liegt in der Geschwindigkeit, mit der du sie entwerfen, testen und überarbeiten kannst.
Gerade in den ersten Phasen des Designs macht man meist mehrere Iterationen mit Low-Fidelity-Wireframes, bevor man auf ein High-Fidelity-Modell umschwenkt.
Vorteile von High-Fidelity-Wireframes
High-Fidelity-Wireframes sind zwar aufwändiger zu erstellen, bieten aber zahlreiche wertvolle Vorteile für dein Designprojekt. Hier einige davon:
- Bessere Kommunikation: Menschen sind visuelle Wesen und verstehen Designs besser, wenn die richtigen Farben, Elemente und Inhalte verwendet werden. Es ist deshalb sehr wahrscheinlich, dass eine Person deinem Low-Fidelity-Wireframe zustimmt, aber beim ersten Betrachten des High-Fidelity-Modells Probleme und Feedback äußert.
- Besseres Usability-Testing: Das Nutzerfeedback ist qualitativ hochwertiger, wenn du echten Inhalt zeigst, wie er im finalen Design erscheinen wird. Eine Suchergebnisseite sieht in einem Low-Fidelity-Wireframe wie eine Liste grauer Boxen aus. Ob die Seite gut scanbar ist, zeigt sich erst mit echten Bildern und Texten.
- Prototyping: Klickbare Prototypen funktionieren auf Basis von Low-Fidelity-Wireframes schlecht. High-Fidelity-Prototypen hingegen ähneln dem endgültigen Design und sind realistisch genug, um sie mit deinen ersten Nutzern zu teilen.
- Kommunikation zwischen Design- und Entwicklungsteam: Mit High-Fidelity-Wireframes kannst du dein Entwicklungsteam frühzeitig einbinden und von ihnen wertvolles Feedback bezüglich Umsetzbarkeit und möglicher Herausforderungen erhalten. Sie liefern die Details, die Entwickler benötigen, um zu verstehen, wie sie etwas umsetzen und auf welche Probleme sie dabei stoßen könnten.
Abschließend lässt sich sagen: High-Fidelity-Wireframes vermitteln dir und deinen Design-Kollegen einen Eindruck vom finalen Look-and-Feel deines Produkts und helfen dabei, Inkonsistenzen im Design oder andere visuelle Unstimmigkeiten zu erkennen, bevor das User Interface weiter getestet wird.
Werkzeuge und Software für High-Fidelity-Wireframes
Während man Low-Fidelity-Wireframes technisch gesehen auf Papier oder Whiteboard anfertigen kann, bleibt für High-Fidelity-Wireframes keine andere Wahl, als auf ein spezielles Produktdesign-Tool zurückzugreifen.
Sehen wir uns nun einige beliebte Tools an und schauen, welche Möglichkeiten sie bieten.
Figma
Figma ist Marktführer im Bereich digitales Produktdesign – mehr als 40 % aller UX-Designer setzen es für Prototyping, User Flows und Wireframes ein.
Plattform: Web, Desktop (MacOS, Windows)
Wo es glänzt: Echtzeit-Zusammenarbeit zwischen Designern, Managern und Entwicklern sowie Unterstützung für mehrere Plattformen.
Was die Funktionen betrifft, möchte ich Folgendes bei Figma hervorheben:
Zusammenarbeit: In Figma können mehrere Teammitglieder gleichzeitig an derselben Datei arbeiten. Du kannst die Cursors aller Personen sehen, die die Design-Datei durchsuchen oder bearbeiten, Kommentare hinterlassen sowie in Echtzeit mit einer kleinen Nachrichtenbox neben deinem Cursor chatten.
Designsystem- & Komponentenunterstützung: In Figma lassen sich wiederverwendbare Komponenten erstellen (inklusive verschiedener Zustände für diese) und ein komplettes Designsystem mit eigenen Richtlinien und Komponenten definieren.
Prototyping: Deine Designs können in klickbare Prototypen umgewandelt werden, durch die Nutzer browsen können, um zu verstehen, wie sich dein Produkt anfühlen würde. Auch wenn es nicht das fortschrittlichste Prototyping-System ist, ist es dennoch sehr leistungsfähig.
Sketch
Sketch war das bevorzugte Design-Tool, bevor Figma auf den Markt kam, und ist eine beliebte Alternative zu Framer und anderen bekannten Design-Tools. Manche vermuten, dass die ausschließliche Verfügbarkeit für Mac einer der Gründe war, warum dieses ansonsten großartige Tool seinen Platz eingebüßt hat.
Plattformen: macOS
Wo es glänzt: Sketch ist durch seine umfangreiche Plugin-Unterstützung besonders anpassbar und somit bestens geeignet für individuelle Designanforderungen.
Schauen wir uns nun die wichtigsten Funktionen von Sketch an.
Vektorbearbeitung: Im Vergleich zu anderen bietet Sketch wohl das leistungsstärkste Vektor-Bearbeitungstool am Markt, inklusive Unterstützung von Booleschen Operatoren und Match-Operatoren zur Definition von Formen.
Web-Vorschau: Auch wenn Sketch kein vollwertiger Editor im Web ist, gibt es eine Web-App zum Überprüfen von Designs, Übergabe von Assets an Entwickler und Testen von Prototypen.
Prototyping: Die Prototyping-Fähigkeiten von Sketch sind mit denen von Figma vergleichbar. Auch hier lassen sich Zeichenflächen verbinden, Elemente klickbar machen und mehr.
Adobe XD
Dies ist die Antwort des Kreativsoftware-Riesen Adobe auf den harten Wettbewerb im Wireframe- und UI/UX-Designmarkt.
Plattformen: macOS, Windows
Wo es glänzt: Adobe XD ist vollständig in die Creative Cloud integriert, sodass sich Designs und Assets aus anderen Adobe-Tools nahtlos importieren lassen – und noch mehr.
Nachdem ich mit den Möglichkeiten dieses Tools herumgespielt habe, finde ich noch Folgendes erwähnenswert:
Prototyping: Adobe XD hebt sich mit der Möglichkeit zur Prototyp-Erstellung von Mikro-Interaktionen hervor – zusätzlich zur klassischen Prototyping-Suite.
Animationen: Als Teil des Unternehmens, welches After Effects geschaffen hat, überrascht es nicht, dass Adobe XD fortschrittlichere Animationen für UI-Elemente ermöglicht.
Zusammenarbeit: Zwar nicht so fortgeschritten wie Figma, aber auch in Adobe XD können mehrere Personen gleichzeitig am Design arbeiten.
Axure RP
Während die anderen generell UI/UX-Design-Tools sind, die auch Wireframes und Prototypen erstellen, ist dieses Tool speziell auf die letzten beiden spezialisiert.
Plattformen: macOS, Windows
Wo es glänzt: Als spezialisierte Software ist Axure RP in der Lage, komplexe Interaktionen und Nutzerreisen beim Prototyping umzusetzen.
Schauen wir uns nun die Funktionen an, die dieses Tool bietet:
Erweiterte Logik: Statt einfacher "Klicken, um das nächste Artboard zu öffnen", kann Axure RP komplexe Logik in Prototypen integrieren. Das bedeutet, dass Sie Menüs öffnen und Elemente auswählen können – Design und Inhalte verändern sich dabei dynamisch je nach Auswahl oder ähnlichen Handlungen.
Übergabedokumentation: Während fast alle hier genannten Produkte eine Entwickler-Übergabe bieten, ist Axure RP die einzige Option, bei der Sie äußerst detaillierte Dokumentationen erstellen können, die Ihr Design und die Logik beschreiben.
Flow-Diagramme: Neben dem Entwurf des High-Fidelity-Wireframes können Sie mit Axure RP auch Flow-Diagramme erstellen, die die User Journey sowie die zugrundeliegende Logik Ihres Designs beschreiben.
Zusammenfassend gibt es keinen eindeutigen Gewinner beim „besten High-Fidelity-Wireframing-Tool“. Die hier aufgeführten Tools sowie die in unserem kuratierten Überblick zu UX-Design-Tools haben jeweils ihre Stärken und Schwächen. Letztendlich ist es eine Frage der Präferenz, welche Aspekte für Sie und Ihr Team am wichtigsten sind.
Best Practices für das Erstellen von High-Fidelity-Wireframes
Wenn Sie im Designprozess endlich an dem Punkt angekommen sind, an dem Sie diesen Wireframe-Typ entwickeln sollen, befolgen Sie diese Tipps, um den maximalen Nutzen aus Ihrem High-Fidelity-Mockup zu ziehen.
Best Practices im Wireframing-Prozess
- Stellen Sie sicher, dass Ihre User Persona aktuell ist. Sie haben bereits eine Persona-Version verwendet, um Ihr erstes Low-Fidelity-Design zu erstellen. Diese Persona ist jedoch vermutlich mittlerweile veraltet, da Sie bereits mehrere Testiterationen durchgeführt und dabei viele neue Facetten ihrer Persönlichkeit und Bedürfnisse entdeckt haben.
- Überprüfen Sie sämtliches bisheriges Nutzerfeedback, bevor Sie mit dem High-Fidelity-Wireframe beginnen. Wahrscheinlich haben Sie Rückmeldungen zu Ihrer Low-Fidelity-Version erhalten, die damals unwichtig schienen, jetzt aber sehr relevant sein können.
- Es gibt keine „finale Version“ eines Wireframes. Verlieren Sie sich nicht in Details. Anstatt wochenlang an einem Detail-Wireframe zu feilen, nehmen Sie ein paar Änderungen vor und testen Sie diese. Je kürzer die Zyklen sind, in denen Ihr Team neue Design-Ideen hinzufügt und Nutzer diese testet, desto schneller erreichen Sie den Punkt, an dem Ihr Wireframe zum finalen Design werden kann.
- Nutzen Sie die Komponenten und Templates Ihres Designsystems. Es gibt keinen Preis dafür, von Grund auf neu zu beginnen! Mit diesen Vorlagen sparen Sie viel Zeit, und das Ergebnis wirkt so nah wie möglich am finalen Design.
Tipps für das Wireframe-Design
Zusätzlich zu den oben genannten Empfehlungen für einen effizienten Designprozess finden Sie hier weitere Tipps rund ums Design selbst.
- Halten Sie Ihr Design konsistent. Auch wenn es sich um einen Wireframe und nicht um das finale Design handelt, empfehle ich Ihnen dennoch, überall Konsistenz zu wahren – egal ob Farben, Typografie oder Leerraum. So stellen Sie sicher, dass Testpersonen keine unnötigen Usability-Probleme erleben oder Ihnen dadurch verzerrte Rückmeldungen geben.
- Erhalten Sie die visuelle Hierarchie. Technisch gesehen sollte diese bereits in der Low-Fidelity-Variante vorhanden gewesen sein. Falls nicht, fügen Sie sie hier hinzu. Mit Ihren High-Fidelity-Wireframes können Sie dann die Wirksamkeit Ihrer Hierarchie testen.
- Integrieren Sie Barrierefreiheit in Ihr Design. High-Fidelity-Wireframes eignen sich auch hervorragend, um die Barrierefreiheit Ihres Designs zu testen. Achten Sie also auf ausreichende Kontraste zwischen übereinanderliegenden Elementen und denken Sie an weitere Aspekte der Zugänglichkeit.
Abschließend: Vergessen Sie nicht, Testpersonen optische Hilfen bereitzustellen. Dies ist besonders wichtig, wenn Sie nur einen Teil Ihres Produkt-Designs testen und einzelne Bildschirme oder Schritte fehlen. Um Verwirrung zu vermeiden, zeigen Sie Hinweise an, die erklären, wo sich die Person innerhalb der Journey befindet und was von ihr erwartet wird.
Fortgeschrittene Techniken für High-Fidelity-Wireframes
Die oben beschriebenen Best Practices helfen Ihnen dabei, eine „gute genug“-Version Ihres High-Fidelity-Wireframes zu erstellen. Wenn Sie aber wirklich etwas Beeindruckendes schaffen möchten, sollten Sie folgende fortgeschrittene Techniken in Betracht ziehen.
Interaktive Wireframes
Einige beliebte Wireframing-Tools verfügen über eingebaute Prototyping-Funktionen. Warum also nicht diese Möglichkeiten nutzen und Ihr Wireframe zum Leben erwecken? Sie können Ihre UI-Elemente klickbar gestalten und den Nutzern das Wechseln von einem Bildschirm zum nächsten ermöglichen – so wird der Ablauf der realen App simuliert. Ich empfehle, animierte Übergänge hinzuzufügen, damit der Wechsel von einer Seite oder einem Bildschirm für die Nutzer deutlicher sichtbar wird.
Sie können auch Animationen und Übergänge zu verschiedenen Elementen Ihrer Mobile-App oder Ihres Webdesigns hinzufügen und testen, ob dies den Nutzern hilft, ein bestimmtes Element auf dem Bildschirm besser wahrzunehmen oder es wie beabsichtigt zu nutzen.
Visuelle Designelemente
Damit Ihr Hi-Fi-Wireframe Ihr Produkt und Ihre Marke richtig repräsentiert, können Sie außerdem Folgendes berücksichtigen:
- Typografie: Die Schriftarten, Abstände und Textfarben entsprechend Ihren Designrichtlinien.
- Branding: Ihr Logo, Markenfarben und visuelle Elemente, die Ihre Marke repräsentieren.
- Echte Inhalte: Statt an den Stellen, an denen in Ihrem E-Commerce-App-Design eine Produktbeschreibung stehen sollte, einfach nur Lorem Ipsum zu verwenden, schreiben Sie direkt eine echte Produktbeschreibung.
- Echte visuelle Elemente: Wenn Sie Illustrationen oder Bilder für Ihre Bildschirme geplant haben, fügen Sie diese ebenfalls hinzu.
- Farbverläufe und Schatten: Diese lassen Ihr Wireframe realistischer wirken und helfen Ihnen, eine visuelle Hierarchie oder Interaktionen zu gestalten.
Hinweis: Was das Hervorheben von Interaktionen mit Schatten betrifft, ist das Material Design von Google das Beste. Es verwendet Schatten, um Höhenunterschiede darzustellen und den Nutzern mitzuteilen, ob ein Element überfahren, angeklickt oder nicht aktiv ist.
Tipps zur Teamzusammenarbeit
Sowohl Prototyping als auch Wireframing sind niemals Aufgaben für eine Einzelperson. Sie erstellen es entweder gemeinsam mit Ihrem Designteam, brainstormen mit Ihrem Produktmanager oder besprechen sich mit den Stakeholdern.
Ich empfehle Ihnen daher, Folgendes zu tun, um die Zusammenarbeit und den Entwicklungsprozess Ihrer Designs zu fördern:
- Regelmäßige Brainstorming-Sitzungen organisieren. Laden Sie Ihren Produktmanager und andere Designer ein, vielleicht auch einen Entwickler – sie helfen Ihnen, das technisch sinnvollste Design zu wählen. Der entscheidende Punkt ist die Regelmäßigkeit: einmal pro Woche, alle zwei Wochen oder seltener. Aber führen Sie diese Treffen immer durch, denn Sie werden dabei auf neue Lösungen für Ihre Designprobleme kommen.
- Regelmäßige Design-Reviews durchführen. Wenn Sie im Team arbeiten, geben Sie Ihr Design zur Überprüfung an Kollegen – so erhalten Sie frische Perspektiven und finden Probleme, die Sie selbst übersehen hätten. Dieser Vorgang verbessert die Designqualität deutlich und sorgt für Konsistenz.
- Gedanken und Kommentare dokumentieren. Fügen Sie Anmerkungen und Kommentare am Design hinzu, um bestimmte Designentscheidungen zu erläutern oder Ihren Kollegen den Kontext zu erklären.
Stellen Sie zum Schluss sicher, dass alles, was Sie erstellen, mit der Unternehmensstrategie und Produktvision übereinstimmt. Konsultieren Sie dazu Ihr Produktteam und die Führungsebene.
Testen Sie Ihr Design, als wäre es das Original.
Der wahrscheinlich wichtigste Vorteil hochauflösender Wireframes ist ihre Fähigkeit, das Produkt möglichst nah an der finalen Version darzustellen. So können Nutzer das visuelle Erscheinungsbild Ihres Produkts testen, ohne dass Sie das echte Produkt bauen müssen.
Daher empfehle ich Ihnen dringend, den Wireframing-Prozess zu übernehmen und für Tests Ihrer Designs und Hypothesen im Arbeitsablauf zu nutzen. Ich hoffe, ich habe Ihnen dazu genügend Kontext und hilfreiche Tipps mitgegeben, damit Sie das Maximum herausholen können.
Wenn Sie noch tiefer in dieses Thema einsteigen wollen, empfehle ich Ihnen den vollständigen Leitfaden zum Wireframing. Darüber hinaus können Sie auch unseren Newsletter abonnieren, um weitere Ressourcen und Anleitungen zum Produktmanagement zu erhalten.
