App Design
Design starten
Deutsch

Vom Problem zum Bildschirm

App-Design-Ideen in testbare Bildschirmkonzepte verwandeln

Sie suchen nach App-Design-Ideen? Beginnen Sie mit einer Aufgabe, die jemandem bereits Schwierigkeiten bereitet, und skizzieren Sie dann den kürzesten Weg, sie zu erledigen. App Design hilft Ihnen, die Bildschirme zu durchdenken, bevor Sie mit einem browserbasierten Design-Workflow beginnen.

Design-Workflow erkunden
Visual der App Design-Startseite mit einem kreativen Design-Arbeitsbereich

Der bestehende Workflow der Zielgruppe

Ein vielversprechendes Konzept entsteht meist außerhalb eines Design-Tools: aus einer Kundenanfrage, einem wiederkehrenden Behelf oder einer Aufgabe, die zu viele Schritte erfordert.

Wo wir ins Spiel kommen

Nutzen Sie diese Seite, um aus einem Problem ein konkretes Konzept und eine Abfolge von Bildschirmen zu entwickeln. Sie ist eine Planungshilfe, kein Ersatz für Recherche oder Implementierung.

1

Eine Idee ist kein Beleg für Nutzerbedürfnisse

Ein plausibles App-Design-Konzept verrät Ihnen nicht, ob Menschen oft genug auf das Problem stoßen, um ihr Verhalten zu ändern.

Was Sie stattdessen tun können

Bitten Sie potenzielle Nutzer, zu beschreiben, wann das Problem zuletzt aufgetreten ist, bevor Sie in ausgefeilte Bildschirmentwürfe investieren.

2

Ein Bildschirmplan ist kein funktionierendes Produkt

Eine visuelle Richtung legt weder den Umgang mit Daten noch das Verhalten bei der barrierefreien Nutzung, Sicherheitsanforderungen oder die technische Umsetzung fest, die eine App funktionsfähig macht.

Was Sie stattdessen tun können

Ergänzen Sie jeden Bildschirm um eine kurze Notiz zu den benötigten Daten, Zuständen und technischen Abhängigkeiten.

3

Eine Referenz ist keine wiederverwendbare Vorlage

Ein ansprechendes Layout kann auf Bildern, Berechtigungen oder Interaktionen beruhen, die Sie nicht in Ihr eigenes Projekt übernehmen können.

Was Sie stattdessen tun können

Übernehmen Sie das zugrunde liegende Muster, ersetzen Sie dann die Inhalte und prüfen Sie, ob das Muster Ihre Aufgabe weiterhin unterstützt.

Entwickeln Sie jeweils nur ein Konzept

Eine kleine App-Design-Übung erleichtert es, konkurrierende Ideen zu vergleichen, ohne jede mögliche Funktion umzusetzen.

  1. 1

    Benennen Sie die wiederkehrende Aufgabe

    Beschreiben Sie in einem Satz, wer Hilfe braucht und was diese Person erledigen möchte. Eine App zur Haushaltsorganisation könnte beispielsweise Mitbewohnern helfen, gemeinsame Ausgaben direkt nach einem Einkauf zu erfassen. Beginnen Sie nicht mit einer Funktionsliste.

  2. 2

    Skizzieren Sie den kürzesten Ablauf

    Bestimmen Sie den Einstiegsbildschirm, die Hauptaktion und die Bestätigung. Bei gemeinsamen Ausgaben könnten das eine Saldenübersicht, ein Formular zum Hinzufügen einer Ausgabe und ein Zustand nach dem Speichern des Eintrags sein. Halten Sie auch fest, was passiert, wenn Angaben fehlen oder ein Eintrag fehlschlägt.

  3. 3

    Prüfen Sie die Idee anhand der Praxis

    Zeigen Sie den Ablauf einer Person, die diese Aufgabe tatsächlich erledigt. Fragen Sie, worauf sie zuerst tippen würde, welche Informationen sie erwartet und wo sie zögert. Überarbeiten Sie den Ablauf, bevor Sie Zeit in Farben oder dekorative Details investieren.

Vorher/Nachher

Der entscheidende Fortschritt führt von einem allgemeinen Thema zu einer Oberfläche, die eine vollständige Aufgabe unterstützt.

Frühes Wireframe zur Planung eines Bildschirmlayouts
Vorher: ein grobes Layout
Visuelle Referenz für ein ausgereifteres App-Konzept
Nachher: eine auf die Aufgabe ausgerichtete Richtung

Betrachten Sie die Bilder als Planungshilfen, nicht als Beleg dafür, dass eine bestimmte Funktion umgesetzt wurde. Ein aussagekräftigeres App-Design-Briefing benennt die Nutzenden, die Aktion, die benötigten Informationen und den Zustand nach erfolgreichem Abschluss.

Vorher: ein grobes LayoutNachher: eine auf die Aufgabe ausgerichtete Richtung

Spezifikation der Ergebnisse

Jedes der folgenden Szenarien schlägt ein konkretes Ergebnis vor: einen kurzen Ablauf, die wesentlichen Bildschirminhalte und eine Frage, die Sie mit den vorgesehenen Nutzenden testen können.

Koordination lokaler Freiwilliger

Interessierte sollen eine freie Schicht übernehmen können, ohne mehrfach Nachrichten austauschen zu müssen. Planen Sie eine Liste verfügbarer Einsätze, einen Bildschirm mit Schichtdetails und eine eindeutige Bestätigung mit Uhrzeit und Ort.

Erstellen Sie einen Ablauf mit drei Bildschirmen und prüfen Sie, ob jemand, der sich zum ersten Mal freiwillig meldet, erkennen kann, wozu er sich verpflichtet hat. Berücksichtigen Sie in der Planung auch die Möglichkeiten zur Absage und die Anzeige bereits vollständig besetzter Schichten.

Ideen für mobiles App-Design

Selbstständiger Fitnesstrainer

Kunden vergessen während einer Trainingseinheit, welche Übung als Nächstes kommt. Planen Sie eine Übersicht der Trainingseinheit, eine Übungsdetailansicht und einen Abschlusszustand mit einer gut erkennbaren Fortschrittsanzeige.

Entwirf die Grundstruktur eines Bildschirms, die auch funktioniert, wenn jemand unterwegs oder müde ist oder nur kurz aufs Smartphone schaut. Prüfe, ob Anweisungen und der nächste Schritt leicht zu finden sind.

Ideen für mobiles App-Design

Lebensmittelausgabe in der Nachbarschaft

Spender möchten wissen, welche Dinge heute benötigt werden. Plane eine Liste mit dem aktuellen Bedarf, eine Detailansicht mit hilfreichen Mengenangaben und einen Bildschirm mit Informationen zur Abgabe.

Erstelle einen Ablauf, der die Inhalte in den Vordergrund stellt, und lege fest, wer die Bedarfsliste aktuell hält. Prüfe, ob Spender handeln können, ohne eine veraltete Anfrage für aktuell zu halten.

Ideen für mobiles App-Design

Mach den nächsten Schritt

Wähle das Szenario mit dem klarsten Nutzerbedarf. Nimm die Aufgabenbeschreibung, die Bildschirmabfolge und die offenen Fragen mit in die nächste Design-Sitzung. App Design kann dir helfen, die Aufgabe einzugrenzen; im verlinkten Browser-Workflow kannst du erkunden, wie du sie weiterverfolgst. Prüfe die verfügbaren Funktionen, bevor du dich auf eine bestimmte verlässt.

Überführe ein klares Konzept in einen Browser-Workflow

  • Beginne mit einer Nutzeraufgabe
  • Beschreibe die wesentlichen Bildschirme
  • Halte ungeprüfte Annahmen sichtbar
Erkunde den Workflow

FAQ zu den Szenarien

Liste Aufgaben auf, die Menschen bereits mithilfe von Notizen, Nachrichten oder Tabellen erledigen. Suche nach einer Aufgabe mit klarem Anfang und Ende und skizziere dann, wie ein einfacherer Weg auf dem Bildschirm aussehen könnte. Eine konkrete Unannehmlichkeit ist hilfreicher als eine breite Kategorie wie Produktivität.

Frage Menschen, die mit dem Problem zu tun haben, wie sie es derzeit lösen und wo ihre Methode an Grenzen stößt. Wenn du eine wiederkehrende Aufgabe und eine sinnvolle Verbesserung beschreiben kannst, lohnt es sich, einen kleinen Bildschirmablauf zu testen. Das ist ein Grund, die Idee zu untersuchen, aber kein Beleg für eine Nachfrage.

Halte fest, für wen die App gedacht ist, welche Aufgabe diese Person erledigen möchte und welche Bildschirme dafür mindestens nötig sind. Notiere, welche Inhalte jeder Bildschirm zeigen muss, und berücksichtige gegebenenfalls einen Leer-, Fehler- oder Bestätigungszustand. Zusätzliche Funktionen können bis zu einer späteren Überarbeitung warten.

Nein. Eine lesbare Skizze oder ein einfaches Wireframe reicht aus, um jemanden zu fragen, was er bei jedem Schritt erwartet. Frühes Feedback ist am nützlichsten, solange Ablauf, Beschriftungen und Prioritäten noch geändert werden können.

Design starten
Design starten