Bottom Tab Bar, Side Drawer und Floating Action Button (FAB) sind die am häufigsten verwendeten Muster für die mobile Navigation auf oberster Ebene. Wenn Sie klare und einfache Navigationspfade entwerfen wollen, verwenden Sie eines dieser Muster in Ihrer App.
Echte Texte einfügen
Wenn Sie mit Ihrer visuellen Hierarchie zufrieden sind, beginnen Sie damit, Platzhalter und Dummy-Text durch echte Inhalte zu ersetzen (echte Texte oder solche, die für den Nutzer relevant sind). Es gibt einen wichtigen Grund, warum wir in dieser Phase Dummy-Text vermeiden sollten – Lorem Ipsum vermittelt nicht, wie die Seite den Benutzer bei der Erreichung seiner Ziele unterstützt. Außerdem basieren viele der visuellen Elemente, die wir erstellen, auf den Inhalten unserer Produkte. Wenn Sie beginnen, tatsächliche Inhalte hinzuzufügen, werden Sie feststellen, dass einige UI-Elemente (oder sogar UI-Abschnitte) für Ihr Produkt nicht notwendig sind.
Manchmal, wenn Sie Ihre Wireframes mit echten Details füllen, werden Sie feststellen, dass das vorhandene Layout nicht gut funktioniert. In diesem Fall ist es wichtig, das Layout zu überarbeiten und einen besseren Weg zu finden, um die Informationen, die Sie vermitteln wollen, darzustellen.
Nachdem Sie die Seite mit echten Texten gefüllt haben, testen Sie, ob die Seite für den Benutzer flüssig ist. Einige Inhalte auf Ihrer Seite könnten nicht in der richtigen Reihenfolge sein. Dies ist der perfekte Moment, um die Inhalte auf der Seite neu zu ordnen und die Komposition zu verbessern.
Unten sehen Sie ein Beispiel für unser Wireframe für unseren Startbildschirm, der echte Daten enthält. Verschiedene Schriftgrößen werden verwendet, um einige UI-Blöcke zu priorisieren (z. B. Lebensmittelkategorien).
Stellen Sie sicher, dass Ihr Inhalt gut skaliert
Wenn Ihr Design auf einem mittelgroßen Telefonbildschirm wie dem iPhone XS großartig aussieht, bedeutet das nicht, dass die Nutzer des iPhone 5 und des iPhone XS Max die gleiche großartige Erfahrung haben werden. Es ist zwar absolut in Ordnung, beim Wireframing von einem mittelgroßen Bildschirm auszugehen, aber es ist auch wichtig, zu prüfen, wie der Inhalt auf verschiedenen Bildschirmgrößen (sowohl kleineren als auch größeren) aussieht, und ihn bei Bedarf anzupassen.
Verbinden Sie die Seiten miteinander, um einen Flow zu erstellen
Es ist zwar möglich, Ihr Design als eine Sammlung einzelner Bildschirme auszuliefern, aber es ist besser, daraus einen Flow zu erstellen. UX-Flows machen es dem Team leicht, die Details von Interaktionsszenarien zu verstehen – sie vermitteln, wie Menschen mit einem Produkt interagieren sollen.
UX-Flows bringen Sie auch dazu, über die App-Funktionalität als Ganzes nachzudenken. Nachdem Sie den UX-Flow visualisiert haben, könnte Ihnen zum Beispiel auffallen, dass Sie einen zusätzlichen Status zwischen dem Startbildschirm und einer Seite mit Suchergebnissen einführen müssen (weil das Backend Ihres Systems einige Sekunden braucht, um die Ergebnisse zurückzugeben).
Es ist auch eine gute Idee, jedem Bildschirm eine Referenznummer zu geben. Referenznummern erleichtern Ihnen das Leben, wenn Sie das Projekt mit anderen Teammitgliedern oder Interessengruppen besprechen.
Testen Sie Ihre Designentscheidungen
Das Testen ist der letzte (und einer der wichtigsten) Schritte beim Wireframing. Testen impliziert Benutzerinteraktionen, weshalb dieser Begriff oft im Zusammenhang mit Prototypen verwendet wird. Es ist jedoch auch möglich, einfache Tests für einen aus Wireframes erstellten Ablauf durchzuführen. Mit Balsamiq ist es möglich, einfache klickbare Prototypen zu erstellen, indem Wireframes miteinander verbunden werden. Das Ziel solcher Tests ist es, zu sehen, ob die Bildschirme zusammen funktionieren.
Schlussfolgerung
Das ultimative Ziel des Wireframings ist es, die Umrisse des Inhalts zu identifizieren und eine solide Grundlage für zukünftige Schritte des Designprozesses zu schaffen. Gut gestaltete Wireframes erleichtern das visuelle und interaktive Design erheblich.
Wie bei allen Design-Aktivitäten sollten Sie genügend Zeit damit verbringen, mit verschiedenen Tools und Prozessen zu experimentieren, und Sie werden Ihren eigenen Stil für das Wireframing finden. Übung macht den Meister.
Worte von Nick Babich
Ursprünglich veröffentlicht auf der UI Education Site von Balsamiq