UX-Prompting für Mobile Apps: Physische Einschränkungen statt vager Design-Vorgaben

VideoRay FernandoSammlung

Ray Fernando beschreibt einen Prompt-Ansatz für mobile Interfaces bei der Entwicklung mit KI-Modellen. Weil Sprachmodelle kein physisches Gespür für Smartphones besitzen, erzeugen sie oft unpassende Benutzeroberflächen. Statt das Modell frei gestalten zu lassen, werden konkrete physische Rahmenbedingungen wie Daumenreichweite und Interaktionszeit vorgegeben.
Beim Abspielen wird YouTube (youtube-nocookie.com) geladen.

Das Wichtigste

  1. KI-Modelle haben nie ein Smartphone in der Hand gehalten und kennen die Ergonomie von Touchscreens nicht aus eigener Erfahrung.
  2. Vorgabe des Geräteszenarios: Einhandbedienung an einem grossen Smartphone (iPhone Pro Max).
  3. Aufteilung des Bildschirms: Die oberen 65 Prozent enthalten keine interaktiven Bedienelemente, sondern ausschliesslich Status- und Vertrauensinformationen wie Transkripte oder erfasste Eingaben.
  4. Primäre Aktionen werden konsequent im unteren Bereich platziert, der bequem mit dem Daumen erreichbar ist.
  5. Interaktionen sollen maximal 1,5 bis 2 Sekunden dauern und so simpel aufgebaut sein, dass sie sofort intuitiv verständlich sind.
  6. Design-Grundsatz: Benutzeroberflächen gewinnen durch das Entfernen überflüssiger Elemente an Wert.

Warum das relevant ist

Generative KI-Tools platzieren Buttons und Navigationselemente standardmässig oft gleichmässig über den Bildschirm oder im oberen Bereich, was die Einhandbedienung auf modernen Smartphones erschwert. Klare ergonomische Restriktionen im System-Prompt verhindern unergonomische UI-Entwürfe, bevor sie umgesetzt werden.

Einordnung

Fernandos Ansatz verlagert den Fokus im Prompt Engineering von ästhetischen Anweisungen auf strikte physische Beschränkungen. Die Trennung in eine passive Vertrauenszone (oben) und eine aktive Interaktionszone (unten) ist in der mobilen UX-Entwicklung etabliert, geht bei generischen KI-Prompts jedoch regelmässig verloren. Das Framework zwingt das Modell, Ergonomie und Reduktion zu priorisieren.

Transkript

Vollständiges Transkript anzeigen (554 Wörter)
My latest AI app just feels off. It made me realize that the models I use to build these apps have never actually used a phone. They can't feel what's in my hands, so whatever they give me, they just think it's perfectly fine. And I realized, I actually have to tell it, "Here's my phone. Here are the problems with using it." And here's what I tell it. It should be much more of like a phone design because you have a lot of space on an iPhone Pro Max screen. So we have stuff at the bottom, and then you also want to be mindful of people's fingers because most people's thumbs can only reach a certain range. And so we have to like think about this and kind of decompose it apart a little bit further. And the way that I'm thinking about this is that whenever a person is using their left or right hand, there's a certain reachability aspect. So we should grade higher for things that are reachable within a thumb point of view, and then use the rest of the space that's on top as far as any information that the user needs to see, but doesn't necessarily need to interact with. So I want you to think a little bit deeper here about this problem and think about gestures and taps and things that we can do. But we want to keep it as simple as possible. We should pretend we only have like about one and a half to two seconds to do an interaction, and we shouldn't need the user to interact. It should be as simple as possible so that even a baby can pick this up and really intuitively understand what to do here. So that's it. A thumb reach, one and a half seconds, a baby can actually figure this out. None of that is special. I've been using a phone for all my life, and what's real is that the model actually has not. So I actually have to say that out loud. You can see the passive zone and the thumb zone. So we're kind of seeing how the model's now understanding what our intent is, and how we can design some UX interactions, and it gets us to start thinking about, "How do we want to do this here, right?" Like here in Spanish, so like you can, with one thumb, without reaching too far, you can do all these interactions here, right? So the top 65 has no important controls, and only shows what helps the user trust the system. So that's the detected input, transcript. Like all the other stuff that's peripheral can just like literally just be up here. You actually get more value taking things out of the interface than you do actually keeping them there. You don't want to have too many things in the way. So I'm not really asking the model to design here, I'm just telling it what's actually going on with my phone. There is a thumb, there is about a second and a half, and a baby should figure it out. That's the prompt. And if you want me to keep building this out, just drop a comment, and let's just go ahead and see where this goes.

Links und Tools aus diesem Beitrag

Zusammenfassung von KI erstellt (Gemini 3.8 Flash, 27. September 2026). Sie kann Fehler enthalten – maßgeblich ist die Originalquelle.

Inhaltlich ähnlich, ermittelt über die KI-Suche.

  • X-Post:Kailash

    UI-Skills: Prompts und Richtlinien für besseres Interface-Design mit KI

    Kailash empfiehlt fünf spezialisierte Agenten- und Prompt-Skills von ui-skills.com, mit denen Entwickler und KI-Assistenten die Qualität von Frontend-Designs, flüssigen Animationen, Schatten und Barrierefreiheit verbessern können.

    7289Lesezeichen248.342Aufrufe

    Webentwicklung· Sammlung

  • Prompt:admin

    create styleguide.

    Ein strukturierter System-Prompt leitet KI-Modelle dazu an, als Brand Strategist und Senior UI/UX Designer aufzutreten, um vollständige Styleguides und Design-System-Grundlagen für Websites zu generieren.

    KI & AI· Sammlung

  • Video

    Video:Chase AI

    Besseres Webdesign mit Claude Code in drei Schritten

    Chase AI stellt einen dreistufigen Workflow vor, um bei der Frontend-Entwicklung mit Claude Code generisches 'AI Slop' zu vermeiden. Der Ansatz kombiniert eine eigene Inspirationsbibliothek, spezialisierte Werkzeuge wie Impeccable oder den Higgsfield-MCP und einen visuellen, iterativen Build-Prozess mit interaktiven Tweak-Leisten.

    KI & AI· Anleitung

  • Video

    Video:Lukas Margerie

    UX-Flows in KI-Apps mit dem Mobbin MCP verbessern

    Lukas Margerie demonstriert, wie sich unzureichende Nutzerführung in KI-generierten Webanwendungen mithilfe des Mobbin Model Context Protocol (MCP) beheben lässt. Am Beispiel einer Fitness-App namens Forma ersetzt er einen primitiven Registrierungsdialog durch einen geführten Onboarding-Flow inklusive Social Login, Zielabfrage und Produkt-Tour.

    KI & AI· Anleitung

  • X-Post:Breeje Anadkat

    Design-Workflow: Bessere App-Interfaces mit KI und Figma

    Breeje Anadkat beschreibt seinen fünfstufigen Workflow, um ansprechende Benutzeroberflächen und funktionale MVPs mit Claude, ChatGPT, Figma und Claude Code zu erstellen.

    7003Lesezeichen207.531Aufrufe

    KI & AI· Anleitung

Lassen Sie uns über Ihr Projekt sprechen

Standorte

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Wien
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Dieser Inhalt wurde teilweise mithilfe von KI erstellt.