Was ist ein wireframe?

Wireframes sind in der UX design community ein häufig diskutiertes Thema. Sollen sie überhaupt visuelle Elemente enthalten? Müssen wir echte Inhalte haben? Machen wir mehrere Wireframes oder nur eines? Verwenden wir Wireframes auch mit unseren Design-Teams und Stakeholdern?

Sie sollen lächerlich einfach sein, aber es gibt dennoch eine Menge Faktoren, die bei der Erstellung eines Wireframes zu berücksichtigen sind. Deshalb haben wir uns entschlossen, alles, was Sie über Wireframes wissen müssen, in einem einzigen Buch zusammenzufassen. Lesen Sie weiter, um eine vollständige Schritt-für-Schritt-Anleitung zu erhalten, die sowohl die Theorie als auch die Praxis des wireframing abdeckt!

Ein wireframe ist ein visueller Leitfaden, der die Struktur und das Layout einer digitalen Schnittstelle vorschlägt. Stellen Sie sich das wie einen Bauplan für ein Gebäude vor, aber für digitale Produkte. So wie ein Architekt den Grundriss eines Hauses skizziert, bevor er Details wie Farbe und Möbel hinzufügt, skizziert ein UX wireframe das Layout einer Schnittstelle, bevor er visuelle Designelemente wie Farben und Bilder hinzufügt.

Wireframes werden in der Regel mit einfachen Formen, Linien und Platzhaltern gezeichnet. Sie halten sich an Schwarz und Weiß, um die Dinge einfach zu halten und sich auf das Layout und nicht auf das Aussehen zu konzentrieren. Dieser einfache Ansatz ermöglicht es den Designern, sich darauf zu konzentrieren, wo alles hingehört und wie die Benutzer durch die Benutzeroberfläche navigieren werden.

Wireframes gibt es in zwei Haupttypen: Low-Fidelity und High-Fidelity. Low-fidelity UX wireframes sind sehr einfach, oft von Hand gezeichnet oder mit einfachen digitalen Tools erstellt. Sie konzentrieren sich auf die Gesamtstruktur und das Layout, ohne ins Detail zu gehen.

High-fidelity wireframes hingegen sind detaillierter und näher am endgültigen Design. Sie enthalten genauere Platzierungen, Anmerkungen und manchmal sogar Farben zur Kennzeichnung verschiedener Elemente.

Wireframes helfen dabei, Inhalte und Funktionen klar und logisch zu organisieren und sicherzustellen, dass die Benutzeroberfläche leicht zu verstehen und zu benutzen ist. UX wireframes dienen als hervorragende Kommunikationswerkzeughilft Designern, ihre Visionen mit Teammitgliedern, Interessengruppen und Kunden zu teilen und erleichtert die Sammlung von Feedback.

Wireframes eignen sich außerdem hervorragend, um potenzielle Probleme frühzeitig zu erkennen. Sie helfen den Designern, Probleme mit der Navigation, der Platzierung von Inhalten oder der Benutzerfreundlichkeit zu erkennen, bevor die detaillierte Designarbeit beginnt.

Einfach ausgedrückt: Wireframes sind das Rückgrat jedes digitalen Designprojekts. Sie setzen abstrakte Ideen in solide Pläne um und machen das Endprodukt übersichtlich, funktional und benutzerfreundlich.

Wenn Sie sich nicht ganz sicher sind, wo die Grenzen zwischen Wireframes und anderen UX-Materialien liegen, lesen Sie unseren Beitrag über den Unterschied zwischen Wireframes, Prototypen und Mockups.

Da wir nun wissen, was Wireframes sind, wollen wir uns ansehen, warum und wann sie im Designprozess wichtig sind.

Wireframes sind so etwas wie die unbesungenen Helden des Designprozesses. Sie vermitteln Ihnen ein klares Bild von der Struktur Ihres Projekts, bevor Sie sich mit den ausgefallenen Details befassen.

Wireframes helfen Ihnen erstens, Ihre Design-Vision klarer zu erkennen. Indem Sie das grundlegende Layout skizzieren, können Sie visualisieren, wie die verschiedenen Teile zusammenpassen werden. Dies ist entscheidend für die Schaffung einer logischen und benutzerfreundlichen Schnittstelle. Außerdem ist es in diesem Stadium viel einfacher, Änderungen vorzunehmen, als wenn alles bereits ausgefeilt ist.

Wireframes machen es auch einfacher, Ihre Ideen mit anderen zu teilen. Wenn Sie Ihrem Team oder Ihren Kunden einen Wireframe zeigen, können alle das Gleiche sehen und die Richtung des Designs mittragen. Das ist eine fantastische Möglichkeit, um frühzeitig Feedback einzuholen und sicherzustellen, dass alle an einem Strang ziehen. Diese Art der Zusammenarbeit kann viel Zeit sparen und Missverständnissen vorbeugen.

Ein weiterer Vorteil von wireframes ist, dass sie Ihnen helfen, potenzielle Probleme zu erkennen, bevor sie sich zu großen Problemen entwickeln. Durch die Darstellung der Struktur und des Ablaufs können Sie Probleme mit der Navigation, der Platzierung von Inhalten oder der allgemeinen Benutzerfreundlichkeit frühzeitig erkennen. Dieser proaktive Ansatz sorgt dafür, dass das endgültige Design effektiver und benutzerfreundlicher ist.

Sie sollten gleich zu Beginn des Designprozesses mit der Erstellung von Wireframes beginnen. Dies ist ein wichtiger Schritt, der die Grundlage für alles Folgende bildet. Ganz gleich, ob Sie ein neues Projekt beginnen oder etwas Bestehendes umgestalten, Wireframes helfen Ihnen, Ihre Ideen klar und effizient zu planen und zu organisieren.

Kurz und gut, UI wireframes sind ein leistungsstarkes Werkzeug zur Visualisierung, Kommunikation und Verfeinerung Ihrer Design-Ideen. Sie tragen dazu bei, dass Ihr Projekt auf dem richtigen Weg ist und bleibt, was zu einem besseren und benutzerfreundlicheren Endprodukt führt.

Da wir wissen, warum Wireframes so wichtig sind, sollten wir uns ansehen, was Sie tun müssen, bevor Sie mit dem Design Ihres Wireframes beginnen.

Wireframes sind in der Regel nicht sehr detailliert, aber sie enthalten eine Menge berechneter Komponenten. Das bedeutet, dass die Designteams viel Arbeit leisten müssen, bevor sie mit dem wireframing beginnen können, damit jeder Schritt eine Richtung hat. Das ziellose Platzieren von Komponenten auf einer leeren Leinwand ist ein Rezept für ein Desaster.

Lassen Sie uns einen Blick auf einige wichtige Materialien werfen, die Sie zur Hand haben sollten, damit Sie Ihre Ideen zielgerichtet wireframen können.

In der Phase der Anforderungserfassung geht es darum, den Umfang des Produkts und die grundlegenden Dinge, die es tun muss, zu definieren. Oft bedeutet dies, dass man viel Zeit mit dem Kunden verbringt, um zu verstehen, welche Kriterien für die Frage relevant sind: Was braucht das Produkt, um erfolgreich zu sein?

Dies ist eine Liste mit allem, was das Design enthalten muss, von Komponenten bis hin zu Informationen, die wie eine Checkliste wirkt, damit wir nichts Wichtiges vergessen. Ein dummes Beispiel: Wenn ein wireframe für eine App den Verkauf von Artikeln vorsieht, brauchen Sie eine Schaltfläche für die Kasse, die richtigen Formulare und eine Möglichkeit, die Versandinformationen anzugeben.

Wireframing ist eine zielgerichtete Tätigkeit, d. h. wir müssen wissen, was wir entwerfen und für wen. Ihre Endnutzer werden einen großen Einfluss auf das Design haben, von der gewählten Navigation bis hin zur Auswahl der Schaltflächen. Sie möchten, dass das Design auf die Benutzer zugeschnitten ist, was bedeutet, dass Sie eine sehr gute Vorstellung davon haben müssen, wer sie sind und was sie brauchen.

Sobald Sie wissen, was alles in den wireframe einfließen soll, müssen Sie festlegen, wie die einzelnen Elemente zueinander in Beziehung stehen.

Ihre Navigationsmuster müssen in diesem Stadium noch nicht endgültig und präzise sein, aber Sie sollten eine gute Vorstellung von den Hauptwegen haben, die die Benutzer verwenden werden, um sich im Produkt zurechtzufinden – Dinge wie die primäre oder sekundäre Navigation.

Die Informationsarchitektur (IA) des Produkts verwaltet den gesamten Inhalt des Designs sowie den Navigationsaspekt des Produkts. Es geht darum, die Informationen so zu strukturieren, dass sie leicht zu verstehen sind und man mit ihnen interagieren kann.

Ähnlich wie bei anderen Aspekten des UX design gibt es auch bei der IA keine Einheitsgröße, die für alle passt. Sie brauchen ein gutes Organisationssystem, das den Benutzern hilft, das gesamte Design zu verstehen und zu navigieren.

Organisationssysteme: ein struktureller Rahmen, der die Verbindung zwischen verschiedenen Inhalten festlegt, damit sie logisch verstanden werden können.

Die meisten Design-Teams entscheiden sich daher für eine der folgenden Optionen oder eine Mischung daraus:

Hierarchische Strukturen: platziert die großen und wichtigsten Kategorien an die Spitze und präsentiert andere, kleinere Kategorien in einem Trickle-Down-Effekt. Auch bekannt als Baumstrukturen. Dies kann Nutzern helfen, Informationen zu finden, wenn der Inhalt sehr umfangreich ist.

Sequentielle Strukturen: schafft einen engeren Pfad, der die Auswahlmöglichkeiten für die Benutzer einschränkt und die Navigation wesentlich vereinfacht. Dies ist eine kontrolliertere Herangehensweise sowohl an die Informationsarchitektur als auch an das Design der Navigation.

Matrix-Strukturen: schafft Verbindungen zwischen den meisten Funktionen und Inhalten und ermöglicht es dem Benutzer, so zu navigieren, wie es ihm am besten passt. Das Design ist komplex und kann zu einer Überforderung der Benutzer führen, wenn zu viele Optionen angeboten werden. Wenn Sie sich für diesen Weg entscheiden, müssen Sie darauf achten, dass Sie den Benutzern nicht zu wenig Struktur geben, was zu einer verwirrenden Benutzererfahrung führen würde.

Organische Strukturen: verzichten Sie auf eine definierte Vorstellung von „Struktur“ oder „Abschnitten“. Die Verbindungen zwischen den Inhalten werden von Fall zu Fall hergestellt und sind besser geeignet, wenn die Beziehung zwischen den Inhalten nicht klar ist. Dies kann eine unterhaltsame Art der Erkundung sein, bietet dem Benutzer aber keinen Hinweis darauf, wo er sich im Verhältnis zum Rest der Seiten oder Bildschirme befindet. Dies kann zu einem verwirrenden Erlebnis für die Benutzer führen.

Kategorisieren Sie Informationen so früh wie möglich und verfeinern Sie dann Ihre Kategorien. Verschiedene Inhalte blind zu mischen und zu erwarten, dass der Benutzer sie sortieren kann, ist gelinde gesagt eine schlechte Praxis. Testen Sie Ihre Kategorien an echten Nutzern mit Hilfe der Kartensortierung und verfeinern Sie dann Ihr wireframe. Wenn Sie etwas vereinfachen können, tun Sie es. Sie möchten, dass die Benutzer das Gesuchte ohne großen Aufwand finden können, damit sie sich auf die Qualität des Produkts konzentrieren können.

Diese Seite der wireframes ist besonders wichtig, wenn es sich um Produkte handelt, die eine große Menge an Inhalten enthalten. Je mehr Inhalte Sie in das Design einbringen wollen, desto wichtiger wird es, diese richtig zu organisieren. Sie möchten sicherstellen, dass jeder Benutzer unabhängig von der Menge der Informationen das, was er braucht, schnell und einfach finden kann. Sie brauchen eine Hierarchie und Struktur, die Sinn macht.

Oft müssen Designer ein statisches Produkt entwerfen, das nicht allzu viele Informationen enthalten muss, oder Produkte, die sich im Laufe der Zeit nicht verändern werden. Die wahre Herausforderung entsteht jedoch, wenn es sich um ein großes Produkt handelt, das mit der Zeit wachsen wird. Dies ist bei Plattformen wie Amazon oder Medium der Fall, die Tausende von Seiten mit Inhalten haben, die sich von einem Jahr zum nächsten schnell ändern werden.

Dann brauchen Sie eine Struktur, die den Nutzern hilft, sich in diesem Meer von Inhalten zurechtzufinden und die gleichzeitig ein organisches Wachstum der Inhalte ermöglicht – eine Struktur, die sich flexibel anpassen lässt.

Der Grad der Anpassungsfähigkeit oder der Stil der Informationsarchitektur hängt von den Eigenschaften des Projekts ab.

Dies ist eine gute Möglichkeit, Ihre Ideen zu Papier zu bringen, damit Sie sie in der Realität sehen können. Diese Methode ist aus zwei wichtigen Gründen sehr beliebt. Erstens können Sie auf diese Weise viele Ideen zu Papier bringen, um sie zu vergleichen und zu sehen, welche die beste Option ist. Zweitens kostet es Sie nichts, Ihre Ideen auf Papier zu bringen, und doch ist es ein großer Gewinn für das gesamte Projekt.

Eine UI-Skizze auf Papier ist ein guter Schritt. So können Sie viele verschiedene Optionen zeichnen und einfach die beste auswählen. Danach können Sie mit der Erstellung eines digitalen wireframe beginnen, um die Ideen zu verfeinern, die Sie zuerst auf Papier gezeichnet haben.

Bevor Sie sich mit dem wireframing beschäftigen, sollten Sie sich über die Grundlagen des Projekts im Klaren sein. Diese Vorarbeit gibt Ihrem wireframe die Richtung vor. Sammeln Sie wesentliche Elemente wie Benutzerabläufe, user personas, mentale Modelle und eine grobe Karte der Informationsarchitektur. Diese Materialien helfen Ihnen, die wichtigsten Ziele und die Benutzer zu verstehen. Ohne diese Materialien könnte Ihr wireframe das Ziel verfehlen.

Wenn Sie diese Schritte befolgen, können Sie sicher sein, dass Ihre wireframes gut strukturiert sind und sich an den Zielen des Projekts und den Bedürfnissen der Benutzer orientieren. Auf dieser Grundlage können Sie effektive und benutzerfreundliche Wireframes erstellen.

Nachdem Sie Ihre Vorbereitungen getroffen haben, können Sie nun Schritt für Schritt mit dem Design Ihres wireframes beginnen.

Es gibt immer wieder Diskussionen über den visuellen Aspekt von wireframes. Wenn sie Ihnen helfen sollen, Dinge wie Navigation und Informationsarchitektur zu visualisieren, können sie sich nicht auf Themen wie Farben und Typografie konzentrieren.

Vor allem in den ersten Designphasen müssen sich Low-Fidelity-Wireframes auf die wichtigsten strukturellen Elemente des Produkts konzentrieren und nicht viel mehr.

Ihr wireframe ist ein Werkzeug, das Ihnen bei der Navigation hilft, Ihr Design kohärent macht und die grobe Benutzerfreundlichkeit Ihres Designs testet. Dinge wie die Behandlung oder der Filter, der für die Bilder verwendet werden soll, sind Themen für Ihren High-Fidelity-Prototyp.

Unabhängig davon, ob Sie lieber ein echtes Bild für Ihr wireframe verwenden möchten oder einen quadratischen Platzhalter – es gibt eine Seite des visuellen Designs, die von Anfang an auf wireframes angewendet werden muss. Das ist das Layout. Es hat einen großen Einfluss auf die Lesbarkeit und die allgemeine Benutzerfreundlichkeit des Designs und muss sorgfältig durchdacht sein.

Sie können die visuelle Hierarchie in Ihrer Informationsarchitektur heranziehen, um festzulegen, welche Elemente wo angezeigt werden, wobei Sie darauf achten müssen, dass Sie dem ursprünglichen Plan für die Anzeige der Inhalte nicht widersprechen. Berücksichtigen Sie auch andere visuelle design Konzepte wie:

Die Gestalttheorie: Die Nähe zwischen Elementen führt dazu, dass der Benutzer glaubt, diese Elemente seien irgendwie miteinander verbunden. Nutzen Sie die Nähe, um Unterhierarchien von Symbolen und anderen Elementen im wireframe zu erstellen und so die Navigation für den Benutzer zu erleichtern.

Weiße Fläche/negative Fläche: kann ein leistungsfähiges Werkzeug sein, um den Blick des Nutzers auf den Inhalt oder das Element zu lenken, das wirklich wichtig ist, z. B. den CTA. Nutzen Sie den Leerraum zwischen den Elementen, um den Bildschirm zu entrümpeln und stellen Sie sicher, dass Sie den Benutzer zu keinem Zeitpunkt überfordern.

Größe der einzelnen Elemente: Logischerweise müssen Sie bei der Erstellung Ihres Low-Fidelity-Wireframes immer noch berücksichtigen, wie Sie die visuelle Hierarchie Ihrer Inhalte widerspiegeln können oder wie Sie die Lesbarkeit dieses einen Bildschirms verbessern können, indem Sie die Elemente in Größe und Platzierung neu anordnen.

Wiederholung/Vorhersehbarkeit: Ein konsistentes Design kann schwierig sein. Umso mehr sollten Sie von Anfang an darauf achten, dass Ihr Design konsistent ist. Versuchen Sie, in Ihrem wireframe-Entwurf ein bestimmtes Muster für die Darstellung der Elemente zu schaffen und den Grundstein für ein einheitliches Design zu legen – darauf können Sie im weiteren Verlauf aufbauen.

Wenden Sie Ihre Design-Richtlinien oder Ihr System an: Wenn Sie für ein großes Unternehmen arbeiten, haben Sie vielleicht schon einen Leitfaden oder ein Regelwerk, das Ihnen bei der Erstellung eines Produkts hilft, das mit dem Unternehmen kompatibel ist. Das kann Ihnen einen Teil des Drucks nehmen, da Sie nicht bei Null anfangen, sondern auf einer Grundlage aufbauen, die Ihnen vom Designsystem übergeben wurde.

Dies sind einige grundlegende Designregeln, mit denen Sie wahrscheinlich bereits vertraut sind. Wenn Sie diese Regeln jedoch im Hinterkopf behalten, ersparen Sie sich große Änderungen und Anpassungen an Ihrem Design zu einem späteren Zeitpunkt. Es kann nämlich leicht passieren, dass man vergisst, wofür die Kästchen in Ihrem wireframe design stehen und wie das Ganze am Ende zusammenpasst.

Eine Sache, die UX-Designer immer noch überall diskutieren, ist die alte Frage: Was war zuerst da, das Huhn (der Inhalt) oder das Ei (das Layout)? Nun, man kann für beide Seiten ein Argument vorbringen.

Platzhalter und Lorem ipsum beschleunigen den Designprozess, da Sie nicht darauf warten müssen, dass das eigentliche Design und die Texte von anderen Teammitgliedern erstellt werden.

Das Problem mit Lorem ipsum ist, dass es uns zwar eine bessere Vorstellung davon vermittelt, wie das Design aussehen wird, wenn der tatsächliche Inhalt einbezogen wird, aber es kann auch irreführend sein. Wenn Designer anfangen, sich bei ihrem Design auf lorem ipsum zu verlassen, können sie unrealistische Erwartungen an das Produkt haben, wenn der echte Inhalt ins Spiel kommt.

Wenn Sie dasselbe Lorem ipsum kopieren und in alle Slots einfügen, werden sie alle in einer Reihe stehen, die gleiche Länge haben und ein ordentliches und sauberes Design ergeben. Aber Sie können nicht erwarten, dass das so bleibt, wenn Sie den echten Text in diese Felder einfügen.

Hier finden Sie einige wichtige Konzepte, die Sie bei der Erstellung Ihres wireframes in Bezug auf lorem ipsum beachten sollten:

Textüberlauf und Ausrichtung: was Schreiben von Texten führt nicht immer zu einer perfekten Übereinstimmung in Bezug auf den Platzbedarf für Text oder die Textausrichtung. Außerdem ist es unglaublich schwierig, diese Variable ohne den tatsächlichen Inhalt zu berücksichtigen.

Manchmal bleibt der für den Text vorgesehene Platz auf einem bestimmten Bildschirm leer. Dann stellt sich die Frage: Streichen wir diesen Platz ganz oder finden wir einen oberflächlichen Inhalt, der diesen Platz ausfüllt?

Der Einfluss des Inhalts auf das UI-Layout: Die Erstellung eines Bildschirms mit 4 Kästchen mit der gleichen Textmenge scheint einfach zu sein. Aber was passiert, wenn einer der Kästen viel mehr Text enthält als die anderen? Die Sicherstellung von Symmetrie und Konsistenz ist nicht immer einfach, wenn es um schriftliche Inhalte geht.

Das ist der eigentliche Nachteil der Verwendung von Lorem ipsum in Ihrem Wireframe: Sobald Sie den tatsächlichen Inhalt haben, müssen Sie Ihr Design zu einem späteren Zeitpunkt anpassen – und diese Anpassungen werden wahrscheinlich mühsam, teuer und kompliziert sein.

Manche Designer werden erst dann mit diesen Fragen konfrontiert, wenn der größte Teil des Designs fertig ist und den jeweiligen Interessengruppen präsentiert wird.

In dieser Debatte gibt es einen klaren Sieger: echte Inhalte. Der Inhalt spielt eine zentrale Rolle im Produkt, und das muss sich auch in Ihrem wireframe design Prozess widerspiegeln. Es ist viel besser, diese problematischen Bereiche Ihres Designs so früh wie möglich zu erkennen, damit Sie iterieren können, wenn das Projekt noch leicht anpassbar ist.

Leider sind die Dinge nicht immer so einfach. Die Beschaffung der tatsächlichen Inhalte kann schwierig sein, vor allem, wenn Ihr Projekt große Teams umfasst oder Sie für eine Design-Agentur arbeiten – was es fast unmöglich macht, die Inhalte vor der wireframing-Phase zu beschaffen.

Wenn Sie die Informationsarchitektur Ihres Designs definiert haben, haben Sie sich wahrscheinlich schon mit dem Design des Navigationssystems befasst.

Um Ihre Inhalte zu organisieren, müssen Sie Dinge wie die Bezeichnungen der einzelnen Inhalte und deren Einordnung in das wireframe berücksichtigen. Und Sie müssen diese Inhalte auf eine bestimmte Art und Weise präsentieren, wenn Sie wollen, dass das Produkt gut nutzbar ist.

Das ist eine große Herausforderung, denn Navigation um ihrer selbst willen ist nicht das, was sich die Benutzer wünschen.

Wann haben Sie das letzte Mal gerne in einer App herumgesurft, um die eine Information zu finden, die Sie gesucht haben? Die Suche nach Dingen im Produkt macht nie Spaß und kann innerhalb von Sekunden sehr frustrierend werden.

Auch wenn es kein Patentrezept dafür gibt, was eine gute Navigation in Ihrem wireframe ausmacht, gilt die allgemeine Regel, dass Ihre Navigation eine gute Benutzerfreundlichkeit fördern muss. Daraus ergeben sich einige Konsequenzen, die sich in Ihrem Navigationsfluss widerspiegeln sollten:

Menschen können sich in einem virtuellen Produkt verloren fühlen: Sie möchten, dass die Benutzer jederzeit wissen, wo sie sich befinden, selbst wenn Sie ihnen nur den allgemeinen Zweig des Produkts mitteilen, in dem sie sich befinden.

Sie möchten, dass die Navigation konsistent und kohärent ist, so dass die Benutzer anhand des allgemeinen Designs der Benutzeroberfläche erkennen können, wo sich bestimmte Dinge befinden. Dadurch wird Ihr Produkt für neue Benutzer leichter zu erlernen und zu entdecken sein.

Sie wollen klare Ziele: Sie wollen nicht mit möglichst wenigen Klicks von Punkt A nach Punkt B gelangen. Sie wollen auf möglichst flüssige, logische Weise dorthin gelangen – das zeichnet ein wirklich gutes Navigationssystem aus.

Damit sollte klar sein, dass Ihre Homepage oder Ihr Startbildschirm zum Beispiel nicht mit einem Link zu jeder möglichen Seite Ihres Produkts versehen sein sollte. Machen Sie Wege, denen die Benutzer folgen können und konzentrieren Sie sich nicht so sehr auf Abkürzungen.

Haben Sie primäre und sekundäre Navigationsmenüs: Das Design der Navigation ist kompliziert und muss den Benutzer zu jeder Ecke des Produkts führen – was bedeutet, dass umfangreiche Produkte wahrscheinlich zwei Menüs erfordern.

Das Hauptmenü sollte für die meisten Benutzer der Hauptweg sein und alle wichtigen Funktionen und Bereiche berühren. Sekundäre Menüs können zu anderen, weniger zentralen Bereichen des Produkts führen. Die Kartensortierung kann bei der Definition dieser Menüs sehr hilfreich sein.

Einige der am häufigsten verwendeten Muster haben unzähligen UX-Designern geholfen, gute Navigationssysteme für ihre Designs zu erstellen. Sie können als praktische Hilfsmittel angesehen werden, die den Benutzern helfen, sich in einem Produkt zurechtzufinden, so dass sie es optimal nutzen können. Hier sind die Klassiker:

Versuchen Sie, Brotkrümel für die Benutzer zu hinterlassen: nicht ganz so wörtlich wie Hänsel und Gretel, aber immer noch eine Möglichkeit für die Benutzer, ihr Zuhause zu finden oder eine der vorherigen Stationen, die sie auf dem Weg zu ihrem aktuellen Bildschirm gemacht haben.

Diese werden meist von großen Websites verwendet, die eine große Menge an Inhalten in einem hierarchischen System haben. Sie sollten als sekundäres Navigationssystem betrachtet werden, d.h. Sie sollten sich nicht auf sie als primäres Mittel zur Benutzerführung verlassen.

Füttern Sie die Benutzer mit Hamburgern: Hamburger-Menüs sind in Smartphone-Anwendungen recht beliebt, auch wenn sie in der Design-Gemeinschaft viel Kritik einstecken mussten.

Eines der Argumente gegen Hamburger-Menüs ist die Tatsache, dass viele der dort aufgeführten Funktionen vom Benutzer leicht übersehen und nicht genutzt werden können. Das mag zwar stimmen, aber Burger-Menüs sind immer noch eine praktische Möglichkeit, dem Benutzer Optionen anzubieten, ohne zu viel Platz auf dem Bildschirm zu beanspruchen (was für Smartphone-Anwendungen entscheidend ist).

Wenn Hamburger-Menüs nichts für Sie sind, ist die größte Alternative die Registerkartenleiste. Sie befinden sich in der Regel am oberen oder unteren Rand des Bildschirms und sind klassische Leisten mit Symbolen, die manchmal auch Mikrokopien enthalten.

Diese sind skalierbar, insbesondere wenn wir die vertikale Navigation berücksichtigen. Tabs können dem Benutzer helfen, besser zu verstehen, wo er sich befindet oder wohin er gelangen möchte – Facebook kombiniert die Tab-Leiste mit dem Hamburger-Menü, indem es den Burger zu einem der Symbole in der Leiste macht. Clever, oder?

Eine weitere Seite des wireframe design, die in der UX-Gemeinschaft zu Diskussionen führt, und zwar aus einem ähnlichen Grund wie das visuelle Design. Genauso wie es keine eindeutige Antwort auf die Frage gibt, ob Ihr wireframe design High-Fidelity oder Low-Fidelity sein sollte, hängt das richtige Maß an Interaktivität von mehreren Faktoren ab.

Ein Argument, das zunehmend an Popularität gewinnt, ist das Argument für interaktive wireframes als eine Möglichkeit, schnell Fortschritte zu erzielen.

Viele Designer machen den Fehler, Wireframes als zusätzliches Fettnäpfchen abzustempeln, da sie nicht viel beitragen und einen zusätzlichen Schritt darstellen. Sie können diese irrige Annahme jedoch vollständig entkräften, indem Sie Wireframes erstellen, die mehr sind als nur eine weitere statische Datei – hier kommt das Design von Interaktionen ins Spiel.

Selbst bei einem Wireframe mit geringem Realitätsgrad hilft Ihnen die Einbeziehung der grundlegendsten Interaktionen dabei, deren Nützlichkeit bereits in der Anfangsphase durch Tests zu überprüfen. Wenn Sie die meisten Details für später aufheben, ist Ihr wireframe immer noch relativ einfach und schnell zu erstellen – aber Sie können von Anfang an auf Elemente hinweisen, die verbessert werden können.

Wenn Sie sich zwischen mehreren Navigationsoptionen entscheiden müssen, können Sie für jede einzelne Option separate interaktive wireframes erstellen und diese mit echten Benutzern testen.

Auf diese Weise stellen Sie sicher, dass Sie sich für die bestmögliche Richtung entscheiden, wenn es um die Benutzerfreundlichkeit Ihres Produkts geht – bevor Sie an einen Punkt im Projekt kommen, an dem Änderungen an der Navigation massive Zusatzkosten bedeuten würden.

Bei all dem müssen Sie eine Grenze ziehen, wenn es um die Interaktionen geht, die Sie in Ihr wireframe design einbeziehen wollen. Wireframes sind als praktisches und schnelles Hilfsmittel gedacht, nicht als vollwertiger Prototyp.

Sie möchten sich auf die Interaktionen konzentrieren, die für das Produkt entscheidend sind, und alle anderen für einen späteren Zeitpunkt aufheben. Dinge wie Mikrointeraktionen werden später hinzugefügt, wenn Sie bereits eine solide Basis haben, auf der Sie aufbauen können.

Führen Sie Benutzerforschung durch. Dies ist eine Grundregel für jedes Produktentwicklungsprojekt. Zu dem Zeitpunkt, an dem Sie mit der Erstellung von Wireframes beginnen, um eine konzeptionelle Idee in ein greifbares Design zu verwandeln, muss die Forschung abgeschlossen sein und dem gesamten Team zur Verfügung stehen. Trotz der anfänglichen Einfachheit von Wireframes müssen diese auf Ihre Benutzer zugeschnitten sein.

Bauen Sie Navigationsmuster in Ihre allerersten wireframes ein. Es ist wichtig, die Navigation von Anfang an in das Design einzubauen. Die Benutzer müssen finden können, was sie suchen, sie müssen entdecken und erforschen können. Das ist das Letzte, was Sie überstürzen oder vernachlässigen sollten. Außerdem möchten die Benutzer jederzeit wissen, wo sie sich befinden, was die Benutzerfreundlichkeit betrifft.

Arbeiten Sie zusammen und hören Sie zu. Wireframing-Software verbessert die Zusammenarbeit im Team und erleichtert das Einholen von Benutzerfeedback. Verwenden Sie Ihr wireframe tool um gleichzeitig an Online-Wireframes zu arbeiten, sie zu kommentieren und sie auf jedem Browser oder Gerät zu teilen. Hören Sie sich an, was andere zu Ihrer Arbeit sagen, und kehren Sie dann zum wireframe zurück. Die Zusammenarbeit im Hive-Mind ist eine großartige Möglichkeit, das Design schnell zu iterieren und zu verfeinern.

Halten Sie es einfach! Nutzen Sie einen wireframe, um die grundlegende Funktionalität zu überprüfen und sie so stark wie möglich zu machen. Ihr Team kann bessere Ergebnisse erzielen, wenn es sich der Grundlagen des Designs sicher ist, anstatt ständig Änderungen am Layout, der Navigation oder der allgemeinen Benutzeroberfläche vorzunehmen. Mit einem Low-Fidelity-Wireframe sollten Sie eine solide Grundlage schaffen und dann zu den feineren Details übergehen.

Stellen Sie nicht den Stil über die Substanz. Die wireframing-Phase ist nicht der richtige Zeitpunkt, um wertvolle Zeit mit Diskussionen über Farben, Bilder oder andere rein visuelle Dinge zu verschwenden. Überlassen Sie das den letzten Phasen des UI wireframing, wenn Sie das Grundgerüst des Produkts fertiggestellt haben. Wenn Sie die grundlegende Funktionalität vor der Ästhetik prüfen, wird sich Ihr Arbeitsablauf erheblich verbessern, da viel weniger Nacharbeit erforderlich ist.

Knausern Sie nicht mit dem Inhalt. Ja, wireframes sind dazu gedacht, schnell und schmutzig zu sein. Aber die Verwendung echter Inhalte kann verhindern, dass Sie später beim Design umfangreiche Nacharbeiten vornehmen müssen. Es stimmt zwar, dass dies nicht immer möglich ist, aber es ist immer besser als Platzhalterinhalte. Wir werden dieses Thema im weiteren Verlauf dieses Leitfadens behandeln.

Vergessen Sie nicht, die wireframes mit den wichtigsten Benutzern zu testen. Sie mögen zwar recht einfach sein, aber eine Validierung in der Frühphase kann den Designprozess aufbrechen und Licht in dunkle Produktecken bringen. Selbst wenn Sie nur ein statisches wireframe mit den Grundzügen haben, sollten Sie die Benutzer mit dem Produkt konfrontieren und sehen, wie sie reagieren. Die Validierung sollte ständig während der Entwicklung des Wireframes erfolgen, nicht erst, wenn Sie denken, dass das Design fertig ist.

Verwenden Sie keine Wireframes mit geringer Realitätsnähe, um die Beteiligten zu überzeugen. Dies ist besonders in den ersten Phasen des Designs gefährlich, wenn Sie nur Formen und Kästchen haben. Wenn der Stakeholder kein Designer ist, kann es schwierig sein, sich das Wireframe anzusehen und das endgültige Design zu erkennen. Diese Vorstellungskraft fällt dem durchschnittlichen Wirtschaftsanalysten nicht leicht und kann dazu führen, dass er von den bisherigen Fortschritten nicht überzeugt ist.

Wireframes sind für jedes digitale Designprojekt unerlässlich. Sie helfen Ihnen, Inhalte zu organisieren, das Layout zu visualisieren und mögliche Probleme frühzeitig zu erkennen. Wenn Sie strukturiert vorgehen, stellen Sie sicher, dass Ihre Wireframes klar und funktional sind und mit den Zielen Ihres Projekts übereinstimmen.

Beginnen Sie mit den Grundlagen: Erfassen Sie die Projektanforderungen, listen Sie die wesentlichen Komponenten auf, führen Sie eine Nutzerforschung durch und entwerfen Sie die Informationsarchitektur. Skizzieren Sie Ihre Ideen zunächst auf Papier, um verschiedene Optionen einfach zu erkunden. Wenn Sie zum digitalen wireframing übergehen, konzentrieren Sie sich eher auf Layout und Navigation als auf visuelle Details.

Wireframes dienen auch als fantastische Kommunikationsmittel. Sie helfen Teams bei der Zusammenarbeit, sammeln Feedback und stellen sicher, dass alle auf derselben Seite stehen. Verwenden Sie Tools wie Justinmind, um interaktive Wireframes zu erstellen und Ihren Designprozess reibungsloser und effizienter zu gestalten.

Denken Sie an diese wichtigen Tipps: Priorisieren Sie die Benutzerforschung, erstellen Sie von Anfang an Navigationsmuster, arbeiten Sie mit Ihrem Team zusammen und halten Sie Ihre wireframes einfach und konzentriert. Verzetteln Sie sich nicht zu früh in visuellen Details und verwenden Sie nach Möglichkeit reale Inhalte, um spätere größere Nacharbeiten zu vermeiden.

Befolgen Sie diese Grundsätze, um wireframes zu erstellen, die den Grundstein für ein erfolgreiches, benutzerfreundliches Endprodukt legen. Viel Spaß beim wireframing!