Interface-Tutorial
Ein praktischer Weg, das Gestalten des UI einer App zu lernen
Beginnen Sie mit einer einzelnen Nutzeraufgabe und machen Sie daraus anschließend eine kleine Gruppe miteinander verbundener Bildschirme. Dieses App-Design-Tutorial bietet Ihnen eine Abfolge, der Sie im Browser folgen können, sowie wichtige Prüfungen, bevor Sie einen Entwurf teilen.
Voraussetzungen
Wählen Sie eine bestimmte Zielgruppe, ein Gerät und eine Aufgabe aus, bevor Sie Bildschirme zeichnen. Notieren Sie, was der Nutzer erreichen muss, welche Informationen er benötigt und woran Sie einen erfolgreichen Versuch erkennen.
- App-Design vs. UI-Design Klären Sie, welche Entscheidungen zur Benutzeroberfläche gehören und welche zum umfassenderen Produkterlebnis.
- Kostenlose Vorlagen für mobiles App-Design Verwenden Sie eine mobile Vorlage als Ausgangspunkt und prüfen Sie dabei, ob ihr Layout zu Ihrer Aufgabe passt.
- App-Design-Software Vergleichen Sie die Funktionen, auf die Sie bei der Auswahl einer Umgebung zum Entwickeln Ihrer Bildschirm-Entwürfe achten sollten.
Nummerierte Schritte
Arbeiten Sie sich vom Verhalten über die Struktur bis zu den visuellen Details vor. Sie können diese Schritte jedes Mal wiederholen, wenn ein Test eine verwirrende Entscheidung offenlegt.
-
1
Definieren Sie die zentrale Nutzerreise
Wählen Sie ein Ergebnis aus, etwa das Erfassen einer Ausgabe oder das Finden eines gespeicherten Artikels. Listen Sie den Ausgangspunkt des Nutzers, die von ihm ausgeführte Aktion und die erwartete Bestätigung auf. Ermitteln Sie notwendige Informationen und lassen Sie sekundäre Funktionen außerhalb der ersten Nutzerreise. So bleibt das App-Design fokussiert: Wenn ein Bildschirm niemandem hilft, sich dem Ergebnis zu nähern, gehört er möglicherweise nicht in diesen Entwurf.
-
2
Bildschirme und Entscheidungen abbilden
Skizzieren Sie die kleinste Gruppe von Bildschirmen, die die Nutzerreise abdeckt. Zeichnen Sie Pfeile für die Navigation ein, einschließlich eines Wegs zurück und einer Möglichkeit, einen Fehler zu beheben. Vermerken Sie Entscheidungspunkte, etwa die Auswahl einer Kategorie oder die Bestätigung einer Änderung. Verfolgen Sie die Pfeile selbst, bevor Sie die UI ausarbeiten: Kann jemand das Ergebnis erreichen, ohne erraten zu müssen, wohin er als Nächstes tippen soll?
-
3
Ein Layout mit wenigen Details erstellen
Platzieren Sie Überschriften, Steuerelemente, Inhalte und Navigation in groben Blöcken. Geben Sie der primären Aktion eine einheitliche Position und eine klare Bezeichnung; gruppieren Sie zusammengehörige Felder und platzieren Sie Hilfe in der Nähe der Auswahl, die sie erklärt. Erstellen Sie den Entwurf in der Größe des von Ihnen gewählten Geräts, prüfen Sie aber auch überfüllte Zustände. Im App-Design ist ein ordentliches leeres Display weniger nützlich als ein Layout, das auch mit realistischen Inhalten funktioniert.
-
4
Ein visuelles System anwenden
Wählen Sie eine kleine Gruppe von Schriftgrößen, Abständen und Farben mit klar voneinander abgegrenzten Bedeutungen. Verwenden Sie für wiederkehrende Aktionen und Zustände dieselbe Gestaltung, damit Nutzer Muster auf verschiedenen Bildschirmen erkennen können. Prüfen Sie Kontrast, gut lesbaren Text, ausreichende Abstände zwischen Berührungszielen und ob die Bedeutung auch ohne Farbe allein erhalten bleibt. Visuelle Konsistenz erleichtert das Erfassen der UI, kann aber keine unklare Nutzerreise beheben.
-
5
Mit einer Aufgabe überprüfen
Zeigen Sie den verbundenen Entwurf jemandem, der Ihren Plan noch nicht gesehen hat. Bitten Sie die Person, die ursprüngliche Aufgabe ohne Anleitung zu erledigen, und notieren Sie anschließend, wo sie innehält, einen falschen Weg einschlägt oder Rückmeldungen übersieht. Überarbeiten Sie die Bezeichnungen oder den Ablauf, die das Problem verursacht haben, und führen Sie die Aufgabe erneut durch. Betrachten Sie jede Überprüfung als Grundlage für die nächste App-Design-Entscheidung, nicht als Abstimmung über Farben.
Häufige Fehler und Lösungen
Ein Bildschirm kann fertig aussehen, obwohl wesentliches Verhalten noch ungeklärt ist. Mit diesen Prüfungen erkennen Sie Lücken, bevor Sie mehr Zeit in den visuellen Feinschliff investieren.
Nur den Idealfall gestalten
Ein ausgefeilter Entwurf zeigt nicht, was passiert, wenn ein Feld leer bleibt, eine Suche keine Ergebnisse liefert oder eine Anfrage fehlschlägt. Ohne diese Zustände kann die scheinbar reibungslose Nutzung schon bei der ersten Unterbrechung scheitern.
Was Sie stattdessen tun können
Ergänzen Sie für die Kernaufgabe einen Leer-, Fehler- und Erfolgszustand. Legen Sie fest, welche nächste Aktion jeder Zustand anbietet, und prüfen Sie, wie Nutzende zur Aufgabe zurückkehren können.
Annehmen, dass das Layout überall funktioniert
Ein Browserentwurf kann nicht zeigen, wie die Oberfläche auf jedem Gerät, in jeder Ausrichtung, mit jeder Tastatur oder mit unterstützenden Technologien dargestellt wird und funktioniert. Text kann anders umbrechen, und Bedienelemente, die ausreichend Abstand zu haben scheinen, können schwer zu bedienen sein.
Was Sie stattdessen tun können
Prüfen Sie schmale und breite Layouts mit realistischen Texten. Überprüfen Sie die Fokusreihenfolge, Beschriftungen und Interaktionen auf den Plattformen, die Sie tatsächlich unterstützen möchten.
Einen Entwurf mit einem funktionierenden Produkt verwechseln
Bildschirme zeigen das beabsichtigte Verhalten; sie implementieren weder Datenspeicherung noch Authentifizierung, Benachrichtigungen oder plattformspezifische Interaktionen. App-Design allein kann nicht bestätigen, dass eine technische Anforderung umsetzbar ist.
Was Sie stattdessen tun können
Vermerken Sie Annahmen neben den betroffenen Bildschirmen und besprechen Sie sie mit einer Entwicklungskraft, bevor Sie den Ablauf als Implementierungsplan betrachten.
Visuelle Vorlieben statt Benutzerfreundlichkeit testen
Die Frage, ob Menschen die Benutzeroberfläche mögen, zeigt selten, warum sie eine Aufgabe nicht abschließen können. Vertrautheit und Farbvorlieben können von einer fehlenden Beschriftung oder einem unerwarteten Navigationsschritt ablenken.
Was Sie stattdessen tun können
Geben Sie Testpersonen ein Ziel vor, beobachten Sie ihr Vorgehen und halten Sie fest, wo Verwirrung auftritt, bevor Sie nach Meinungen fragen. Ändern Sie jeweils nur einen Punkt und testen Sie erneut.
Tipps für Fortgeschrittene
Wenn der Hauptablauf funktioniert, prüfen Sie ihn auch mit längeren Texten, unterbrochenen Aufgaben und wiederkehrenden Nutzenden. Achten Sie darauf, ob dieselbe Aktion auf jedem Bildschirm gleich benannt ist, ob sich eine folgenreiche Entscheidung rückgängig machen lässt und ob eine Bestätigung erklärt, was geschehen ist. Halten Sie Entscheidungen und offene Annahmen bei Ihrer App-Design-Arbeit kurz fest. App Design führt zu einem browserbasierten Workflow, in dem Sie den nächsten Schritt erkunden können. Prüfen Sie dort die verfügbaren Tools und Zugangsbedingungen, bevor Sie sich auf eine bestimmte Funktion verlassen.
Überführen Sie Ihren Bildschirmentwurf in einen Browser-Workflow
- Nehmen Sie eine klar definierte Nutzeraufgabe in den nächsten Entwurf mit.
- Prüfen Sie alternative Zustände, bevor Sie weitere Bildschirme hinzufügen.
- Überprüfen Sie das Verhalten auf dem vorgesehenen Gerät.
Tutorial-FAQ
Wähle eine Zielgruppe und eine Aufgabe aus und skizziere dann die Bildschirme, die für deren Erledigung nötig sind. Beginne mit groben Layouts statt mit ausgefeilten Farben. Prüfe, ob der Weg durch diese Bildschirme sinnvoll ist, bevor du das visuelle Konzept verfeinerst.
Lege zuerst den Nutzerfluss fest, damit jeder Bildschirm einen Zweck hat. Eine einfache Übersicht über Ausgangspunkt, Entscheidungen und Ergebnis hilft dir, fehlende Schritte zu erkennen. Anschließend kannst du die Inhalte und Bedienelemente für jeden Schritt dieses Ablaufs anordnen.
Ein browserbasierter Prozess kann die Planung, Ausarbeitung und Überprüfung einer Oberfläche ermöglichen, ohne dass du zuerst eine Desktop-Anwendung installieren musst. Welche Funktionen ein verlinktes Produkt genau bietet, solltest du auf dessen Website prüfen. Die fertige UI musst du dennoch auf den Geräten und Plattformen testen, die du unterstützen möchtest.
Nimm genügend Bildschirme auf, um die Kernaufgabe vom Start bis zur Bestätigung zu zeigen, einschließlich aller wesentlichen Entscheidungen oder Schritte zur Fehlerbehebung. Es gibt keine allgemeingültige Anzahl: Die Aufgabe bestimmt, was nötig ist. Füge keine Bildschirme hinzu, nur damit das App-Design vollständiger wirkt.
Bitte jemanden, der den Entwurf nicht kennt, eine konkrete Aufgabe zu erledigen, ohne zu erklären, wo die Person tippen soll. Achte auf Zögern, Umwege und übersehene Rückmeldungen und behebe dann die Ursache jedes Problems. Ein gelungener visueller Entwurf sollte den nächsten Schritt verständlich machen und nicht nur einheitlich aussehen.