Wie in der Kunst gibt es auch bei den Wireframes für Anwendungen verschiedene Varianten und Detailstufen.
Einige sind lediglich grobe Skizzen, deren Ausarbeitung wahrscheinlich ein paar Minuten in Anspruch genommen hat. Andere sind hochdetaillierte Meisterwerke, die man mit einem Screenshot der kompletten App verwechseln könnte.
Aber die Entscheidung für die eine oder die andere ist nicht nur eine Frage der Vorliebe.
Es hängt von Ihrer aktuellen Situation ab – wo Sie in der App-Entwicklung stehen, wie viel Zeit Sie dafür aufwenden können und welche Mittel Ihnen zur Verfügung stehen.
In diesem Artikel befassen wir uns mit den Fidelities – dem Detailgrad Ihres Wireframes – und mit der Frage, wie Sie das richtige Wireframe für Ihr Projekt auswählen.
Table of Contents
Was sind Wireframes?
Ein Wireframe ist im Wesentlichen eine Blaupause für Ihre Anwendung. Ein grundlegender 2D-Entwurf, der Ihnen eine Vorstellung von den Elementen und Funktionen gibt, die in der endgültigen App erscheinen werden.
Der Begriff stammt höchstwahrscheinlich aus dem Prozess der Herstellung von Puppen und Pappmaché-Figuren.
Hier wird mit Drähten ein grobes Skelett der Figur erstellt, das als Grundlage dient, auf die dann Farbe und andere Elemente aufgetragen werden.
Wireframe-Apps dienen demselben Zweck. Hier sehen Sie, wie eine davon aussieht:
Bei einem Wireframe geht es vor allem darum, eine App-Idee auf dem Papier zu visualisieren. So können andere Personen Feedback dazu geben. Der Entwickler kann diese Erkenntnisse dann nutzen, um die App-Idee weiter zu verfeinern.
Ein Wireframe muss mindestens die Struktur, die Funktionalität und das Layout der App zeigen. Es sollte den Nutzern die Hauptprämisse und die Funktionen, die dies ermöglichen, vermitteln.
Wireframes veranschaulichen in der Regel auch den Benutzerfluss oder wie jemand von einem Bildschirm zum anderen navigieren würde.
Dies ist wichtig, um unnötige Schritte und Engpässe zu erkennen, die zu Reibungsverlusten und schlechter UX führen könnten.
Wireframes sollten trotz der Menge an Informationen, die sie vermitteln müssen, sehr schnell erstellt werden. Auf diese Weise können Sie Ihre App-Idee mit minimalem Zeit- und Arbeitsaufwand schnell validieren und verfeinern.
Daher sind Wireframes in der Regel eher einfach gehalten. Ein Wireframe enthält in der Regel nur einfache Formen, wie z. B. Kästchen, um UI-Elemente darzustellen.
Farben und Grafiken werden nur dann verwendet, wenn sie eine praktische Funktion erfüllen.
Dieses Wireframe von Anami Chan ist ein gutes Beispiel dafür. Beachten Sie, wie die Farben dazu dienen, den Wetterzustand eines Ortes sofort zu signalisieren und nicht nur zur Dekoration.
Wireframes werden oft digital mit Grafikprogrammen oder speziellen Wireframe-Tools wie Figma erstellt.
Sie können aber auch nur mit Stift und Papier ausgearbeitet werden. Dieser Prozess wird als Papierprototyping bezeichnet.
Solche Skizzen sind vorteilhaft, weil sie einfach und schnell zu erstellen sind und Sie sie überall dort zeichnen können, wo Ihnen die Inspiration kommt. Außerdem müssen Sie dafür keine neue Software oder Tools erlernen.
Nachdem wir nun geklärt haben, was ein Wireframe ist, wollen wir sehen, warum man sich überhaupt damit beschäftigen sollte.
Warum brauchen Sie Wireframes?
Wireframes sind vielleicht das wichtigste Planungsinstrument, das Ihnen zur Verfügung steht. Sie ermöglichen es Ihnen, Ihre App-Idee schnell zu validieren und zu verfeinern, indem Sie Beiträge aus verschiedenen Perspektiven einbringen.
Abgesehen davon, dass Sie am Ende ein qualitativ hochwertiges Produkt erhalten, kann ein Wireframe auch dazu beitragen, Probleme aufzudecken, bevor ein Entwickler eine einzige Zeile Code schreibt.
Die 1-10-100-Regel besagt, dass die Kosten für die Behebung von Problemen exponentiell ansteigen, je später im Prozess sie auftreten. Daher kann das Wireframing Ihre Entwicklungskosten senken.
Wireframes sind auch wichtig, um Ihre App-Idee so zu kommunizieren, dass sie jeder versteht.
Sie verstehen die Idee vielleicht intuitiv in Ihrem Kopf, aber andere vielleicht nicht. Und sie jemandem mündlich zu beschreiben, ist nicht immer ideal oder zuverlässig.
Mit einem Wireframe können Sie Ihren Entwicklern und Teammitgliedern jedoch genau vermitteln, wie die App funktionieren soll.
Außerdem dient es als Referenzpunkt, so dass das gesamte Team immer auf derselben Seite steht.
Das Hinzufügen von Anmerkungen zu einem Wireframe hilft auch dabei, das interaktive Verhalten der App und die gewünschten Aktionen zu skizzieren.
Sie können sogar spezifische Anweisungen geben, damit die Entwickler Ihre Erwartungen nicht in Frage stellen, wie im folgenden Beispiel gezeigt:
Und schließlich sind Wireframes oft die Grundlage für andere Planungswerkzeuge wie Mockups und Prototypen. Dies trägt dazu bei, den Zeit- und Arbeitsaufwand für ihre Erstellung zu minimieren.
Jetzt wäre ein guter Zeitpunkt, um das Konzept der Treue oder des Detailgrads in Ihrem Wireframe einzuführen. Im Allgemeinen gibt es zwei Arten: Low-Fidelity- und High-Fidelity-Wireframes.
Was sind Low-Fidelity-Wireframes?
Ein Low-Fidelity-Wireframe ist eine einfache Skizze, die nur grundlegende Formen und Text zur Darstellung von UI-Elementen verwendet.
Sie dienen als anfängliche Blaupause oder Skelett der Anwendung und zeigen die Kernfunktionen und deren ungefähre Position im UI-Design.
Wenn jemand an ein Wireframe denkt, hat er oft die Low-Fidelity-Variante vor Augen.
Aufgrund ihrer Einfachheit profitieren Low-Fidelity-Wireframes oft von Annotationen. Dabei handelt es sich um Beschriftungen und Anweisungen, die den UI-Elementen im Wireframe weiteren Kontext oder Klarheit verleihen.
Sie sind wichtig, um Missverständnisse und Fehlkommunikation zu vermeiden.
Dank des geringen Umfangs von Low-Fidelity-Wireframes können die meisten von ihnen auf Papier skizziert werden.
Im Vergleich zu digitalen Wireframes lassen sich Papierskizzen im Handumdrehen ausbauen. Und Sie können das Feedback Ihrer Mitarbeiter genauso leicht einbeziehen.
Es ist aber auch wichtig, dass Sie bei einem Low-Fidelity-Wireframe nicht übertreiben . Mit anderen Worten: Er sollte nicht so einfach sein, dass er die Idee nicht richtig vermittelt, wie dieser hier:
Es ist wahrscheinlich, dass der Betrachter nicht weiß, welchen Zweck die einzelnen Bildschirme haben oder worum es bei Ihrer App überhaupt geht. In diesem Fall würden einfache Anmerkungen einen großen Unterschied ausmachen.
Aber auch wenn sie noch so abstrakt sind, können Low-Fidelity-Wireframes im Nachhinein noch viele Vorteile bieten.
Was sind High-Fidelity-Wireframes?
Das genaue Gegenteil einer Low-Fidelity-Skizze ist ein High-Fidelity-Wireframe. Diese Art von Skizze ist sehr viel detaillierter und enthält oft Designelemente wie Farben, Schriftarten und Bilder.
Hier sehen Sie die beiden nebeneinander, um Ihnen eine ungefähre Vorstellung von den Unterschieden im Detailgrad zu geben.
Während sich ein Low-Fidelity-Wireframe mit groben Zügen befasst, geht es bei einem High-Fidelity-Wireframe um genauere Details. Dazu können Layout, Informationsarchitektur und Abstände gehören.
In manchen Fällen erreicht ein High-Fidelity-Wireframe einen Detailgrad, der es wie die endgültige Version der Anwendung aussehen lässt.
Dabei handelt es sich um ein so genanntes Mockup, ein Planungstool, das zur Veranschaulichung des endgültigen UI-Designs der App verwendet wird.
High-Fidelity-Wireframes können interaktive Elemente wie klickbare Links oder Schaltflächen enthalten.
An diesem Punkt wird ein solches Wireframe zu einem Prototyp, der dazu dient, die Benutzerfreundlichkeit einer App mit Endbenutzern zu testen.
Aber auch wenn ein High-Fidelity-Wireframe mehr Details enthält, sollten Sie es nicht übertreiben. Nehmen Sie nur Elemente auf, die für die Vermittlung Ihrer Idee notwendig sind.
Denken Sie daran, dass auch ein High-Fidelity-Wireframe immer noch ein Wireframe ist und Sie es so schnell wie möglich erstellen sollten. Wenn es zu lange dauert, kann es schwierig werden, Ihre App-Idee zu testen und zu optimieren.
Nachdem wir nun die Definition geklärt haben, lassen Sie uns darüber sprechen, wann Sie welche Art von Wireframe verwenden sollten.
Wann Sie Low-Fidelity-Wireframes verwenden sollten
Low-Fidelity-Wireframes eignen sich, wenn Schnelligkeit viel wichtiger ist als Details.
Dies ist immer zu Beginn des Entwicklungsprozesses der Fall. In diesem Stadium versuchen Sie noch, Ihre App-Idee zu verfeinern.
Das geht am besten, indem Sie so viel Feedback wie möglich einholen, diese Erkenntnisse in Ihr App-Design einfließen lassen und den Prozess dann wiederholen.
Low-Fidelity-Wireframes, insbesondere Skizzen, sind für diese Aufgabe bestens geeignet. Wenn Sie sich an einen groben Entwurf halten, können Sie eine App-Idee mit mehreren Iterationen schnell verfeinern.
Es überrascht nicht, dass viele erfolgreiche Apps und Websites – wie z. B. Twitter – in ihrer Anfangszeit auf Low-Fidelity-Wireframes zurückgriffen.
Die Geschwindigkeit von Low-Fidelity-Wireframes macht sie auch zu einem großartigen Werkzeug für die Visualisierung komplexer Anwendungen mit Hunderten von Bildschirmen.
Denn die Erstellung einer detaillierten Skizze für jeden Bildschirm wäre mühsam und zeitaufwändig.
Low-Fidelity-Wireframes sind auch eine hervorragende Grundlage für die App-Entwicklung, weshalb Sie fast immer mit ihnen beginnen werden.
Sie können z. B. mit einer groben Skizze beginnen, um Ihre App-Idee zu präzisieren, und dann nach und nach Elemente hinzufügen, um daraus ein Mockup zu machen.
Fügen Sie einige interaktive Komponenten hinzu, und Sie haben einen Prototyp.
Schließlich ist ein Low-Fidelity-Drahtmodell eine potenzielle Kostenersparnis. Damit können Sie zunächst die genauen Anforderungen an Ihre Anwendung festlegen, bevor Sie Zeit und Ressourcen für ein detaillierteres Mockup aufwenden.
Stellen Sie sich vor, Sie verbringen Tage damit, einen detaillierten Bildschirm auf Ihrem High-Fidelity-Wireframe zu entwickeln, nur um dann festzustellen, dass er gar nicht benötigt wird.
Das ist die Art von Problemen, die Sie mit einem Low-Fidelity-Wireframe vermeiden können.
Wann sollte man High-Fidelity-Wireframes verwenden?
Im Allgemeinen wird ein High-Fidelity-Wireframe erst zu einem späteren Zeitpunkt im Prozess erstellt. Idealerweise sollten Sie es erst in Betracht ziehen, wenn Sie bereits ein fertiges Low-Fidelity-Wireframe haben.
Der Grund dafür liegt auf der Hand: High-Fidelity-Wireframes erfordern mehr Zeit und Ressourcen für ihre Erstellung.
Aber dank der vielen Details in einem High-Fidelity-Wireframe ist es von unschätzbarem Wert für die Bewertung des UI- und UX-Designs Ihrer App. Er wird benötigt, um Nuancen und kleinere Fehler in Ihrem UI-Layout zu erkennen und zu beheben.
Außerdem können Sie damit Ihre Informationsarchitektur, die Inhaltshierarchie und das Navigationsschema optimieren.
High-Fidelity-Wireframes und Prototypen eignen sich auch hervorragend, um Interaktivität relativ schnell zu testen.
Denn im Vergleich zu einer voll funktionsfähigen Anwendung ist die Reaktionszeit selbst des detailliertesten Wireframes immer noch kürzer.
High-Fidelity-Wireframes sind auch wichtig, wenn Sie die Zustimmung von Interessengruppen wie Kunden und Endnutzern benötigen.
Das Problem ist, dass diese Personen möglicherweise nicht über die nötigen Designkenntnisse verfügen, um eine Low-Fidelity-Skizze richtig zu bewerten.
Dies kann dazu führen, dass sie auf die falschen Dinge hinweisen oder unangemessene Änderungen vorschlagen, wodurch sich der Genehmigungsprozess in die Länge zieht.
Ein High-Fidelity-Wireframe ist auch deshalb leichter zu beurteilen, weil es nur eine minimale Vorstellungskraft und mentale Belastung erfordert. Was der Kunde sieht, entspricht in etwa dem, was er von der endgültigen Version der App erwarten wird.
Außerdem hinterlässt ein realitätsnaher Wireframe einen besseren ersten Eindruck. Schließlich wird eine grobe Skizze (wie die untenstehende) bei potenziellen Investoren wahrscheinlich kein Vertrauen erwecken.
Natürlich können Sie auch bei einem High-Fidelity-Wireframe bleiben, wenn Sie die Zeit und die Mittel haben, sich dafür einzusetzen.
Dies ist häufig der Fall, wenn Sie an einem persönlichen Projekt oder einer App für ein großes Unternehmen arbeiten.
Low-Fidelity- vs. High-Fidelity-Wireframes: die Quintessenz
Unterm Strich haben sowohl High-Fidelity- als auch Low-Fidelity-Wireframes ihren Platz in der App-Entwicklung.
Low-Fidelity-Wireframes eignen sich hervorragend, um sofort loszulegen.
Da sie sehr schnell erstellt werden können, eignen sie sich am besten, wenn Sie Ihre App-Idee gerade verfeinern oder wenn Sie nur über begrenzte Zeit und Ressourcen verfügen.
Ihr größter Nachteil ist jedoch, dass sie möglicherweise zu einfach sind. So kann es schwierig sein, bestimmte Informationen mit so wenig Details zu vermitteln.
Im Gegensatz dazu eignet sich ein High-Fidelity-Wireframe, um mehr Informationen und Details zu vermitteln.
Sie ermöglichen es den Leuten, genau zu sehen, wie Ihre App aussehen wird, und machen es den Beteiligten leicht, sie sich mit minimaler mentaler Belastung vorzustellen.
Ein großer Nachteil von High-Fidelity-Wireframes ist natürlich, dass ihre Erstellung mehr Zeit und Geld erfordert.
Ein solches Wireframe ist bei Projekten mit engen Zeitplänen oder begrenzten Mitteln möglicherweise nicht machbar.
Letzten Endes sollten Sie sich jedoch für die richtige Wireframe-Treue entscheiden, die auf Ihrer Situation und dem aktuellen Stadium Ihrer Anwendung basiert. Die Wahrheit ist, dass beide sehr effektiv sind, wenn sie richtig eingesetzt werden.
Wireframes sind nur der Anfang
Wireframes sind unabhängig davon, ob sie eine niedrige oder hohe Auflösung haben, außerordentlich wertvoll für die Entwicklung einer erfolgreichen App.
Wireframes sind jedoch nur eines von mehreren Werkzeugen, die Ihnen zur Verfügung stehen, wie Mockups und Prototypen. Zusammen ermöglichen sie es Ihnen, Ihre App-Idee aus verschiedenen Perspektiven zu bewerten.
Die besten Ergebnisse erzielen Sie, wenn Sie diese Methoden im Tandem einsetzen.
Und wenn Sie keine Ahnung haben, wo Sie anfangen sollen, etwas über diese Methoden zu lernen, haben wir genau die richtigen Ressourcen für Sie.
Petar führt Shake (DECODEs Schwesterunternehmen) als CEO und liefert das Produkt an eine wachsende Zahl zufriedener, innovativer Kunden. Im Alltag sorgt er dafür, dass die Teams in den Bereichen Engineering, Design, Produkt, Marketing und Vertrieb harmonisch zusammenarbeiten. Bevor er zu Shake wechselte, leitete Petar DECODE.
Obwohl er als Ingenieur ausgebildet wurde, zeigte ihm sein natürliches Talent bald, dass er auch im Bereich Marketing, Vertrieb und Branding einen großen Einfluss hatte. Petars Leidenschaften umfassen Architektur, Skifahren, Segeln und ein gutes Glas Rotwein.
Das Entwerfen von Wireframes kann überraschend komplex sein. Um Ihnen dabei zu helfen und Sie zu inspirieren, stellen wir Ihnen in diesem Artikel über 20 Beispiele für Wireframes für mobile Apps vor.
