Inspiration für mobile App-UI finden und in ein Design-Briefing umsetzen

1. Beginnen Sie mit einer Designfrage

Schreiben Sie vor dem Durchsuchen einen Satz über die Person und den Moment, für den Sie entwerfen. Zum Beispiel: „Ein Koch, der zum ersten Mal zu Hause kocht, muss ein Rezept für die Woche auswählen und wissen, was als nächstes zu tun ist.“ Nennen Sie dann die Unsicherheit: Ist es schwierig, Entscheidungen zu treffen, einer Empfehlung zu vertrauen oder ein mehrstufiges Rezept zu starten?

Diese Frage gibt die Suchgrenzen vor. Entscheiden Sie, welche Plattform, welcher Produktbereich und welche Aufgabe wichtig sind. Wenn Sie eine Erstnutzungserfahrung ausprobieren möchten, sehen Sie sich Onboarding-Beispiele an. Wenn das Problem bei der Tarifauswahl liegt, sehen Sie sich die Paywall-Bildschirme an. Vergleichen Sie für die Dateneingabe Formularmuster. Mit ScreenKits können Sie echte App-Bildschirme nach Kategorie durchsuchen. Speichern Sie nützliche Apps als Browser-Lesezeichen, damit Sie während der Synthese zu ihren Bildschirmen zurückkehren können.

• Wer ist die beabsichtigte Person und was versucht sie zu erreichen?
• Welche Designauswahl ist ungewiss: Hierarchie, Reihenfolge, Navigation, Inhalt oder Feedback?
• Welche Einschränkungen sind wichtig, etwa Plattform, Zugänglichkeit, Gerätegröße oder Geschäftsregeln?

2. Sammeln Sie einen kleinen, sinnvollen Referenzsatz

Sammeln Sie einige Beispiele, die sich mit derselben oder einer eng verwandten Aufgabe befassen. Schließen Sie mehr als einen Ansatz ein: einen direkten Pfad, einen geführten Pfad, vielleicht eine Version, die einen Fehler oder einen leeren Zustand behandelt. Speichern Sie die App für jeden Kandidaten und notieren Sie sich den Bildschirm oder Moment, den Sie erneut besuchen möchten. Ein kompaktes Set erleichtert den Vergleich als ein ungefiltertes Inspirationsboard.

Schauen Sie kategorienübergreifend nach, wenn das zugrunde liegende Problem geteilt wird. Sowohl eine Terminplanungs-App als auch eine Lebensmittel-App müssen möglicherweise jemandem dabei helfen, ein Datum auszuwählen und eine Änderung zu bestätigen. Die nützliche Verbindung ist die Entscheidungsstruktur, nicht das oberflächliche Thema. Vermeiden Sie es, eine ähnliche Zielgruppe oder Branche als Beweis dafür zu betrachten, dass die Schnittstelle Ihr spezifisches Problem löst.

• Wählen Sie Referenzen aus einem Grund aus, den Sie angeben können, z. B. „Zeigt, wie eine ausgewählte Option die Zusammenfassung verändert.“
• Schließen Sie verschiedene Lösungen ein, damit das erste ausgefeilte Beispiel nicht zur Standardantwort wird.
• Verwenden Sie Browser-Lesezeichen, um ausgewählte Apps zum Vergleich verfügbar zu halten, während Sie das Briefing schreiben.

3. Lesen Sie den Ablauf, nicht nur den Screenshot

Ein isolierter Bildschirm zeigt gleichzeitig Anordnung, Farbe, Text und Steuerelemente. Es verrät nicht, was dorthin geführt hat, was nach einem Tipp passiert oder ob eine Aufgabe erfolgreich ist. Gehen Sie die einzelnen relevanten Bildschirme der Reihe nach durch. Notieren Sie den Einstiegspunkt, die Entscheidung, die Aktion, das Feedback und den nächsten Status. Schließen Sie Alternativen wie Validierungsfehler, geschlossene Dialoge und die Rückkehr zum Bearbeiten einer Auswahl ein, wenn sich diese Zustände auf die Aufgabe auswirken.

Trennen Sie Beobachtung und Interpretation. „Die primäre Aktion bleibt über drei Schritte hinweg in der Nähe des Bodens“ ist eine Beobachtung; „Das muss einfacher zu bedienen sein“ ist eine Behauptung, die Sie nicht bewiesen haben. Ein Screenshot kann eine Hypothese anregen, ist aber kein Beweis für die Benutzerfreundlichkeit. NN/g beschreibt Prototyping und Benutzertests als Möglichkeiten, potenzielle Benutzerfreundlichkeitsprobleme zu identifizieren und zu erfahren, wie Menschen mit einer vorgeschlagenen Schnittstelle interagieren.

4. Übersetzen Sie Beobachtungen in einen Design-Briefing

In der Synthese werden Referenzen nützlich. Ziehen Sie ein Prinzip heraus, das sich übertragen lässt, wie zum Beispiel „Machen Sie die Konsequenz einer Auswahl vor der Bestätigung sichtbar.“ Entscheiden Sie dann, wie dieses Prinzip in Ihrem Produkt funktionieren soll, basierend auf seiner Aufgabe, seinem Inhalt und seinen Einschränkungen. Kopieren Sie keine Markenillustration, einen genauen Wortlaut oder ein unverwechselbares Layout, nur weil es in einem überzeugenden Beispiel erscheint.

Für das Rezeptbeispiel schlägt der Referenzsatz möglicherweise vor, frühzeitig aufzutauchen und eine Vorschau der Änderungen durch einen ausgewählten Filter anzuzeigen. Das eigenständige Design-Briefing kann einen kurzen Weg zur Abendessenplanung, eine sichtbare Zeitbeschränkung, klare Filterzustände und einen Überprüfungsschritt vor dem Speichern festlegen. Diese Entscheidungen entsprechen dem Ziel des Produkts; Sie erstellen nicht den Bildschirm einer anderen App neu.

• Zielgruppe und Kontext: Wer braucht das und wo oder wann wird es genutzt?
• Ziel und Erfolg des Benutzers: Was sollte er beenden oder verstehen können?
• Ablauf: Was sind die wichtigsten Schritte, Entscheidungen und wichtigen Alternativzustände?
• Designprinzipien: Was soll die Benutzeroberfläche klar oder einfach machen?
• Einschränkungen und offene Fragen: Was muss wahr sein und was muss erforscht werden?
• Evaluierungsplan: Welche Aufgabe geben Sie jemandem, der den Prototyp verwendet, und was werden Sie beobachten?

5. Prototypen erstellen, Zugänglichkeit prüfen und verfeinern

Verwandeln Sie das Briefing in einen groben Wireflow, bevor Sie den visuellen Stil verfeinern. Erstellen Sie einen Prototyp der wichtigsten Entscheidung und des dazugehörigen Feedbacks und bitten Sie dann jemanden, der die Zielgruppe repräsentiert, eine realistische Aufgabe zu erledigen. Achten Sie auf Zögern, unerwartete Entscheidungen und Fehler. Überarbeiten Sie den Ablauf und wiederholen Sie ihn. Die Forschungsleitlinien von NN/g behandeln iteratives Design und Prototypbewertung als Teil des Lernens und gehen nicht davon aus, dass ein erster Entwurf fertig ist.

Führen Sie parallel zu dieser Arbeit eine Überprüfung der Barrierefreiheit durch. Die Human Interface Guidelines von Apple legen Wert auf wahrnehmbare, anpassbare Interaktionen und die Berücksichtigung verschiedener Eingabemethoden. Überprüfen Sie die Größenänderung und den Kontrast des Textes, steuern Sie Größe und Abstand, löschen Sie Beschriftungen und prüfen Sie, ob die Bedeutung allein von der Farbe abhängt. Überprüfen Sie außerdem, ob sich der Fluss an längere Texte anpasst und mit unterstützenden Technologien verstanden werden kann. Der Leitfaden zur Barrierefreiheit von Material Design ist ein nützlicher Begleiter, wenn Ihr Produkt den Android-Konventionen folgt.

• Geben Sie eine Aufgabenaufforderung, keinen Rundgang durch die Benutzeroberfläche, und beobachten Sie, ob die Leute fortfahren können.
• Testen Sie eine frühe Version mit wenigen Details, während strukturelle Änderungen noch einfach sind.
• Lesen Sie die Plattformleitfäden, die für das von Ihnen unterstützte Gerät und Designsystem relevant sind.
• Kehren Sie nur dann zu den Referenzen zurück, um einer Frage nachzugehen. Lassen Sie nicht zu, dass visuelle Ähnlichkeit als Beweis dient.

Referenz-zu-Brief-Checkliste

Stellen Sie vor der Übergabe des Briefings sicher, dass es eine Produktentscheidung und kein Moodboard beschreibt. Jemand, der die Referenzen nicht gesammelt hat, sollte in der Lage sein, die beabsichtigte Aufgabe, den vorgeschlagenen Ablauf, die noch ungelösten Entscheidungen und die Art und Weise zu verstehen, wie das Team herausfinden will, ob der Entwurf funktioniert.

• Der ursprüngliche Benutzer und die ursprüngliche Aufgabe sind explizit.
• Zu jeder Referenz gibt es einen Hinweis, in dem erläutert wird, welche Frage oder welches Muster sie untersucht.
• Beobachtungen werden von Annahmen und Verwendbarkeitsansprüchen getrennt.
• Der Auftrag beschreibt einen ursprünglichen Ablauf und eine produktspezifische Begründung.
• Zugänglichkeit, Plattformverhalten und wichtige alternative Zustände sind enthalten.
• Es werden eine Prototypenaufgabe und ein beobachtungsbasierter Überprüfungsplan definiert.