App-Screens mit KI gestalten

Erst der Fluss, dann die Screens

Es ist verlockend, die KI um „einen schönen Screen für meine App“ zu bitten. Das Ergebnis sieht meist gut aus und hilft wenig, denn kein Screen steht für sich allein: Er gehört zu einem Ablauf. Bevor Sie etwas zeichnen, legen Sie fest, was Nutzer erreichen wollen und welche Schritte sie dafür gehen.

• Nutzer und Ziel: wer die App verwendet und was er oder sie in einer typischen Sitzung erledigen will.
• Hauptweg: die Schritte der wichtigsten Aufgabe, vom Einstieg bis zum Ergebnis.
• Sonderfälle: was passiert, wenn keine Daten vorhanden sind, die Verbindung abbricht oder ein Nutzer einen Fehler macht.
• Benötigte Screens: die kleinste Liste, mit der sich der Hauptweg abschließen lässt; alles andere kann warten.

Handle als Produktdesigner. Ich entwerfe eine App für [Art der Nutzer], mit der sie [Hauptziel] erreichen können.
Schlage den Nutzerfluss für die wichtigste Aufgabe Schritt für Schritt vor, vom Öffnen der App bis zum Ziel.
Nenne für jeden Schritt: was der Nutzer sieht, was er entscheidet oder tut, welcher Screen nötig ist und was schiefgehen könnte.
Fasse danach die kleinste Liste von Screens für eine erste Version zusammen und sag, was du vorerst weglassen würdest. Wenn Informationen fehlen, frage mich, bevor du beginnst.

Jeden Screen auf einen Zweck ausrichten

Ein gut definierter Screen beantwortet eine Frage: Was soll der Nutzer hier tun können? Davon ausgehend kann die KI eine stimmige Struktur vorschlagen. Je konkreter Ihre Angaben, desto weniger beliebig fällt der Vorschlag aus.

Beschreibe den Screen „[Name des Screens]“ einer mobilen App für [Art der Nutzer].
Ziel des Screens: [was der Nutzer hier erreichen soll].
Angezeigte Daten: [Liste].
Mögliche Aktionen: [Liste], die primäre Aktion markiert.
Gib mir: 1) das Layout von oben nach unten mit Elementen und ihrer Priorität, 2) die Beschriftungen der Buttons und die Meldungen, 3) die Zustände: leer, Ladevorgang, Fehler und Erfolg, 4) Hinweise zur Barrierefreiheit (Kontrast, Größe der Touch-Flächen, Beschriftungen für Screenreader).
Verwende einfache Sprache und vermeide Fachjargon.

Fordern Sie immer die Zustände „leer“, „Ladevorgang“ und „Fehler“ an. Sie werden am häufigsten vergessen und fallen Nutzern am stärksten auf, wenn etwas nicht wie erwartet läuft.

Wo KI im Design stark ist – und wo nicht

KI hilft, Alternativen zu erkunden, Texte für die Oberfläche zu entwerfen, fehlende Screens aufzuspüren und einen Ablauf mit kritischem Blick zu prüfen. Manche Tools erzeugen aus einer Beschreibung auch Mock-ups oder Code; ihre Funktionen, Grenzen und Bedingungen ändern sich oft, prüfen Sie daher die aktuellen Angaben des jeweiligen Tools.

• Gut geeignet für: Strukturen, Texte und Varianten vorschlagen und die Logik des Ablaufs prüfen.
• Mit Vorsicht einsetzen bei: visuellen Mock-ups. Prüfen Sie, ob die Screens zueinander passen und einen gemeinsamen Stil haben.
• Kein Ersatz für: Tests mit Nutzern. Nur sie können Ihnen sagen, ob etwas verstanden wird.
• Nicht zum Kopieren gedacht: Designs anderer Apps. Orientieren Sie sich an gängigen Mustern, aber übernehmen Sie keine Marken, Illustrationen oder Texte, die nicht Ihnen gehören.

Das Design kritisch prüfen

Liegen die Screens vor, bitten Sie die KI um eine Prüfung, die über Lob hinausgeht. Assistenten neigen von Haus aus zur Zustimmung, also fordern Sie Probleme ausdrücklich an:

Prüfe diesen Screen-Ablauf als anspruchsvoller Usability-Experte. Hier ist die Liste der Screens mit ihren Beschreibungen:
[Screens hier einfügen]
Finde: 1) überflüssige oder verwirrende Schritte, 2) Stellen, an denen ein Nutzer hängen bleiben könnte, 3) missverständliche Texte, 4) Probleme bei der Barrierefreiheit, 5) fehlende Screens oder Zustände.
Sortiere die Probleme vom schwerwiegendsten zum geringsten und schlage für jedes eine konkrete Lösung vor. Schwäche die Kritik nicht ab.

Interne Tools und Daten-Dashboards

Nicht jede App richtet sich an Kunden. Viele Teams brauchen ein internes Dashboard, um Daten nachzuschlagen, Anfragen zu prüfen oder Aufgaben zu verwalten. Das Vorgehen ist dasselbe, mit einigen Unterschieden: Klarheit zählt mehr als Politur, und Sie sollten genau überlegen, welche Daten erscheinen und wer sie sehen darf.

• Legen Sie fest, welche Entscheidungen das Dashboard unterstützen soll und welche Informationen jede davon braucht.
• Zeigen Sie nur, was nötig ist: Ein Screen voller Widgets ist schwer zu lesen.
• Denken Sie an Berechtigungen: Nicht jeder Nutzer sollte alle Daten sehen.
• Halten Sie unnötige personenbezogene Daten aus Screens und Testinhalten heraus.

Häufige Fehler beim Gestalten mit KI

• Mit dem visuellen Look beginnen, bevor der Ablauf definiert ist.
• Alle Screens auf einmal gestalten, statt eine minimale erste Version.
• Den ersten Vorschlag übernehmen, ohne Varianten oder Kritik anzufordern.
• Fehler-, Leer- und Ladezustände vergessen.
• Prüfungen zur Barrierefreiheit überspringen: Kontrast, Größen und Beschriftungen.
• Ein Design in die Produktion bringen, ohne es an echten Menschen auszuprobieren.

Bevor Sie zum Code übergehen, spielen Sie den Ablauf einigen Menschen aus Ihrer Zielgruppe vor. Eine Zeichnung zu ändern kostet viel weniger, als eine fertig gebaute App zu ändern.

So hilft PromptNow bei Screens

Die Vorlage für App-Screens und Abläufe fragt nach Ziel, Nutzer und Hauptaufgaben Ihrer App und erzeugt einen Prompt, mit dem die KI den Ablauf vorschlägt und jeden Screen beschreibt. Brauchen Sie ein internes Dashboard für Ihr Team, hilft Ihnen die Vorlage für ein internes KI-Dashboard dabei, zu entscheiden, welche Daten Sie zeigen und wie Sie sie ordnen.

Die Ergebnisse sind ein Ausgangspunkt für Ihr Design-Tool: Prüfen Sie sie, testen Sie sie mit Nutzern und passen Sie sie an.