Grafik von Matt Rae
Beim App-Design empfiehlt es sich, im ersten Schritt Wireframes des gesamten Ablaufs oder Ausschnitten davon zu erstellen, bevor es an das Design detaillierter Mockups geht. Wireframes helfen dir, Defizite oder Reibungspunkte bei der Benutzerführung zu erkennen, bevor du mehr Zeit in die Details der Benutzeroberfläche investierst.
In diesem Tutorial lernst du, Wireframes für den Anmelde-Flow einer App zu erstellen. Mit Standardformen und einer Graustufen-Palette gestaltest du einen Flow mit mehreren Bildschirmen, sodass du die Benutzerführung testen kannst, bevor Details wie Farbe, Grafiken und Typografie hinzukommen.
Grundlegende Elemente erstellen
Ein Wireframe besteht aus einfachen Elementen in Graustufen oder gedeckten Farben sowie einfachen Formen wie Rechtecken und Ellipsen. Da viele dieser Objekte mehrfach verwendet werden, kann eine Bibliothek mit wiederverwendbaren Elementen erstellt werden.
Wir beginnen mit einem einfachen Button. Dazu zeichnest du zunächst ein Rechteck und formatierst es nach Belieben. Je nach gewünschtem Detailgrad kannst du dem Button noch einen Textplatzhalter hinzufügen. Da die Buttons in einem Anmelde-Flow verwendet werden, um zum nächsten Schritt zu gelangen, fügen wir ein Textfeld hinzu und zentrieren es mithilfe der Ausrichtungswerkzeuge in der Button-Form.
Als Nächstes kombinierst du die Elemente zu einer Gruppe und erstellst mithilfe des Kontextmenüs eine Komponente. Anschließend kannst das Element herausziehen und mehrfach verwenden, sodass du nicht bei jedem Button von Neuem anfangen musst.
Wiederhole diesen Vorgang mit anderen gängigen Elementen wie Navigationsleisten, Bildplatzhaltern und allgemeinen Bausteinen. Indem du vorab alle Standardelemente erstellst, sparst du am Ende jede Menge Zeit. Außerdem kannst du diese Komponenten verwenden, um das Design später im Detail auszuarbeiten.
Alternativ kannst du auch Plug-ins und UI-Kits zum Erstellen dieser Elemente nutzen. Plug-ins wie Quick Mockup enthalten eine Sammlung von Wireframe-Elementen, die sich in Komponenten umwandeln oder sofort verwenden lassen.
Wichtige Schritte im Anmelde-Flow
Für den Registrierungs-Flow erstellst du zuerst für jeden Bildschirm bzw. Prozessschritt eine eigene Zeichenfläche. Ein typischer Registrierungs-Flow umfasst Folgendes:
Startseite: Diese Seite enthält oft eine Begrüßungsnachricht oder ein App-Logo sowie Optionen für die Anmeldung oder Registrierung.
Anmeldeseite: Dabei kann es sich um eine einzelne Seite oder mehrere Seiten zum Erfassen von Informationen wie E-Mail-Adresse, Name und anderen Informationen handeln, die für die Kontoerstellung erforderlich sind.
Seiten mit Erfolgs- und Fehlermeldungen: Diese Seiten sind wichtig, um dem Benutzer Feedback zum Status der Kontoerstellung, zur erfolgreichen Kontoerstellung oder zu einer fehlgeschlagenen Kontoerstellung und Tipps zur Fehlerbehebung zu geben.
Dieses Tutorial konzentriert sich auf den Anmelde-Flow, mit dem sich neue Kunden für ein Konto registrieren. Mit dem hier beschriebenen Ablauf kann genauso eine Anmelde-Seite für Benutzer mit vorhandenem Konto erstellt werden. Anstelle der Informationen zum Erstellen des Kontos würden die Benutzer eben ihren Benutzernamen und ihr Kennwort zur Anmeldung eingeben.
Layout der Startseite
Die Startseite bzw. der Startbildschirm enthält einige wichtige Elemente. Welche das genau sind, hängt natürlich von der Anwendung und dem beabsichtigten Zweck ab. Diese sollte dein Design jeweils widerspiegeln. In der Regel ist Folgendes enthalten:
• App-Logo
• Begrüßungsnachricht
• Anmeldeoptionen oder ein Link auf die Anmeldeseite
• Anmeldeoptionen oder ein Link auf eine Anmeldeseite
Auf dieser Seite werden in der Regel entweder die Anmelde- oder die Registrierungsoptionen mehr hervorgehoben. In unserem Beispiel-Workflow werden wir die Registrierungsoptionen für neue Benutzer betonen, wobei die Anmeldeoptionen verfügbar bleiben, jedoch weiter unten auf der Seite angeordnet sind.
Ziehe dafür zunächst eine zuvor erstellte allgemeine Blockkomponente nach unten, und erweitere sie über den oberen Bildschirmrand, um einen Platzhalter für die Uhr, das WLAN-Signal und andere Betriebssystemelemente zu schaffen. Zeichne dann mittig auf dem Bildschirm ein einfaches Rechteck oder einen Bildplatzhalter für ein Logo.
Als Nächstes fügst du einen Platzhalter für eine Begrüßungsnachricht hinzu. Dieser Text kann entweder mit dem Textwerkzeug geschrieben oder mit abgerundeten Rechtecken dargestellt werden. In den frühen Designphasen ist es vielleicht einfacher, den Text mit Formen nachzustellen, anstatt richtigen Text zu schreiben.
Der untere Rand der Seite wird die Optionen zum Anmelden (Erstellen eines Kontos) oder zum Einloggen enthalten, wenn der Benutzer bereits über ein Konto verfügt. In einem späteren Design möchtest du vielleicht Optionen für Drittanbieter-Authentifizierungsdienste einfügen, z. B. Über Google anmelden oder Über Facebook anmelden. In diesem Fall wird dein Design mehrere Buttons für die Anmeldung mit diesen Optionen enthalten.
Für unser Tutorial genügt ein einzelner Button namens Create an Account (Konto erstellen). Über diesen Button gelangen Benutzer zum nächsten Bildschirm, auf dem sie ihre Daten eingeben können, um ein Konto zu erstellen.
Platziere das Button-Element im unteren Drittel der Seite, horizontal zentriert unter der Begrüßungsnachricht. Zeichne darunter eine horizontale Linie quer über die Seite in der Breite des Buttons. Füge dann unterhalb der Linie einen weiteren Button mit dem Text Log in (Einloggen) hinzu. Dieser Button ist eine zweite Option, sodass du sein Aussehen ändern kannst, um dies widerzuspiegeln.
Erstellen des Registrierungsformulars
Nachdem die Hauptseite fertig ist, machen wir uns an die nächste Ansicht im Flow. Benutzer navigieren zu dieser Seite, nachdem sie auf den Button Create an account (Konto erstellen) geklickt haben, die im vorherigen Bildschirm erstellt wurde. Auf dieser Seite geben sie verschiedene Informationen zur Kontoerstellung ein, wie z. B. ihren Namen, ihre E-Mail-Adresse und ihr Kennwort.
In dieser Ansicht werden wir einige Textelemente hinzufügen, um die verschiedenen Felder zu kennzeichnen, ähnlich wie die Beschriftung bei den Buttons auf dem Bildschirm davor. Du kannst Text für den Seitentitel hinzufügen oder den Textplatzhalter duplizieren und ihn an den Anfang der Seite setzen.
Unter dem Titel befinden sich verschiedene Formularelemente. Der Einfachheit halber kannst du das Standard-Blockelement verwenden oder aber ein Eingabefeld-Element mit Rahmen erstellen. Platziere eines mittig auf der Seite. Füge dann mit dem Textwerkzeug links oben die Beschriftung Name hinzu. Das ist die Beschriftung für dieses Eingabefeld. Der Text sollte klein genug sein, um nicht wie ein Titel auszusehen.
Kopiere dann die Eingabefeld-Elemente mehrmals, um weitere Felder für E-Mail, Kennwort und alle anderen Daten zu erstellen, die du bei der Anmeldung erfassen möchtest. Dieser Schritt ist einfacher, wenn du die Elemente gruppierst. Füge am unteren Rand ein Button-Element hinzu, das zum Senden des Formulars am Ende der Formulareingabe verwendet wird.
Beachte bei einem Registrierungs-Flow, dass lange Formulare und viele Fragen Benutzer davon abhalten können, sich anzumelden, was die Konversionsrate reduzieren kann. Das Formular sollte daher auf das Wesentliche beschränkt sein. Alternativ kannst du die einzelnen Formulare auf mehrere Ansichten aufteilen und den Benutzer Schritt für Schritt durch den Prozess führen. In diesem Fall erstellen wir ein einzelnes Eingabefeld und einen Button mit der Beschriftung Continue oder Next (Weiter). Am besten probierst du beide Methoden aus und schaust, welcher Flow die besten Ergebnisse in deiner Zielgruppe liefert.
Verknüpfen mit Prototyplinks
Einer der vielen Vorteile von Wireframes in Adobe XD ist, dass die erstellten Flows in Echtzeit in Prototypen umgewandelt werden können, ohne die Designs in eine andere Anwendung exportieren zu müssen.
Um einen Prototyplink einzurichten, wechselst du mithilfe der Registerkarten oben auf dem Bildschirm zum Modus Prototyp. Wenn du im Prototypmodus auf eine Zeichenfläche oder ein Element klickst, wird ein blauer Pfeil angezeigt, den du an ein Ziel deiner Wahl ziehen kannst.
Probiere das mal mit den bisher erstellten Ansichten aus. Verwende den Trigger Antippen und experimentiere mit den verschiedenen Aktionen. Für ein Wireframe-Design ist ein einfacher Übergang wie Ausblenden oder Hineinbewegen ausreichend. Komplexere Animationen lenken nur davon ab, was du in dieser Designphase testen möchtest.
Abschließen des Flows
Der Registrierungs-Flow ist fast fertig. Es fehlen aber noch ein paar Bildschirme, um dem Benutzer mitzuteilen, ob die Registrierung erfolgreich war oder nicht. Erfolgs- und Fehlermeldungen sind für ein gutes Benutzererlebnis von entscheidender Bedeutung und dürfen auch in Wireframes nicht fehlen.
Die Erfolgsmeldung platzierst du am besten auf einer eigenen Seite, die angezeigt wird, wenn auf den Button Submit (Senden) geklickt wird. Zuerst wird die Verarbeitung der Anfrage angezeigt und dann folgt die Erfolgsmeldung. Die Fehlermeldung funktioniert ähnlich, sollte aber wenn möglich im Kontext angezeigt werden. Liegt zum Beispiel ein Problem mit der E-Mail-Adresse oder dem Kennwort vor, sollte das Eingabefeld markiert und eine Meldung mit Informationen zur Fehlerbehebung angezeigt werden.
Erstellen des Erfolgsbildschirms
Für den Bildschirm mit der Erfolgsmeldung kopierst du einfach den ersten Bildschirm und entfernst den Registrierungs-Button und die horizontale Linie. Dann ersetzen wir den quadratischen Platzhalter durch ein Häkchensymbol, um auf die erfolgreiche Anmeldung hinzuweisen. Du kannst die Textplatzhalter auch durch eine Textmeldung wie „Erfolg, Registrierung ist abgeschlossen“ ersetzen.
Erstellen des Fehlerbildschirms
Für den Fehlerbildschirm duplizierst du die Formularseite. Da Fehler im Kontext angezeigt werden sollen, kann diese Seite bearbeitet werden, um den jeweiligen Fehler anzuzeigen. In diesem Beispiel ist das E-Mail-Feld der Übeltäter. Wähle diesen Block aus, und formatiere das Eingabefeld, um einen dunkelgrauen Rahmen einzufügen (dieser wird im endgültigen Design wahrscheinlich rot sein). Füge mithilfe des Textwerkzeugs ein Textfeld unter dem Eingabefeld ein, das die Meldung „Fehler: ungültiges E-Mail-Format“ oder eine entsprechende Meldung enthält, die den zu testenden Fehler widerspiegelt.
Du kannst auch andere Elemente auf der Seite, wie z. B. den „Submit“-Button, ändern, um den Fehler anzuzeigen, oder den nächsten Schritt blockieren, bis der Fehler behoben ist.
Du kannst den Fehler- bzw. Erfolgsbildschirm entweder einzeln mit dem Prototyp verknüpfen oder die anderen Bildschirme aus dem Flow duplizieren und zwei separate Flows erstellen, einen für die Fehlermeldung und einen für die Erfolgsmeldung. Auf diese Weise kannst du beide Workflows mit Benutzern testen und davon ausgehend dein Design iterieren.
Alternativ kannst du auch transparente Rechtecke als Zielpunkte über dem „Submit“-Button einfügen, wobei eines auf den Erfolgsbildschirm, das andere auf den Fehlerbildschirm verweist. Das macht den Test weniger vorhersehbar.
Ein Wireframe ist absichtlich schlicht gehalten, denn er soll lediglich darstellen, welche verschiedenen Bildschirme und Ansichten die User Journey umfasst. Zu Komponenten gruppierte Standardelemente lassen sich wiederverwenden und vereinfachen den Übergang zum detaillierten Design. Komponenten können für jede Phase des Projekts neu gestaltet und im gesamten Design wiederverwendet werden, sodass du deine Projekte effizienter iterieren kannst.
Freigeben des Wireframes, um Feedback zu erhalten
Verwende abschließend den Freigeben-Modus von Adobe XD, um Remote-Benutzertests durchzuführen oder allgemeines Feedback zu deinem Design einzuholen. Aktiviere den Flow und wähle aus der Dropdown-Liste für den Linktyp entweder Design-Review oder Benutzertest aus. Du kannst diesen Link weitergeben und mit einem Klick aktualisieren, wenn du eine Iteration fertiggestellt hast.
Herzlichen Glückwunsch! Du hast gerade einen Wireframe eines Registrierungs-Flows in Adobe XD erstellt. Nutze deine neu erworbenen Kenntnisse und erstelle als Nächstes den Anmelde-Flow für dieses App-Design.
