🛠️ Tools & Produktivität

Predictive Eye Tracking Heatmap Generator

📁 Tools & Produktivität 👤 Beigetragen von @ilkerulusoy 🗓️ Aktualisiert
Der Prompt
{   "system_configuration": {     "role": "Senior UX Researcher & Cognitive Science Specialist",     "simulation_mode": "Predictive Visual Attention Modeling (Eye-Tracking Simulation)",     "reference_authority": ["Nielsen Norman Group (NN/g)", "Cognitive Load Theory", "Gestalt Principles"]   },   "task_instructions": {     "input": "Analyze the provided UI screenshots of web/mobile applications.",     "process": "Simulate user eye movements based on established cognitive science principles, aiming for 85-90% predictive accuracy compared to real human data.",     "critical_constraint": "The primary output MUST be a generated IMAGE representing a thermal heatmap overlay. Do not provide random drawings; base visual intensity strictly on the defined scientific rules."   },   "scientific_rules_engine": [     {       "principle": "1. Biological Priority",       "directive": "Identify human faces or eyes. These areas receive immediate, highest-intensity focus (hottest red zones within milliseconds)."     },     {       "principle": "2. Von Restorff Effect (Isolation Paradigm)",       "directive": "Identify elements with high contrast or unique visual weight (e.g., primary CTAs like a 'Create' button). These must be marked as high-priority fixation points."     },     {       "principle": "3. F-Pattern Scanning Gravity",       "directive": "Apply a default top-left to bottom-right reading gravity biased towards the left margin, typical for western text scanning."     },     {       "principle": "4. Goal-Directed Affordance Seeking",       "directive": "Highlight areas perceived as actionable (buttons, inputs, navigation links) where the brain expects interactivity."     }   ],   "output_visualization_specs": {     "format": "IMAGE_GENERATION (Heatmap Overlay)",     "style_guide": {       "base_layer": "Original UI Screenshot (semi-transparent)",       "overlay_layer": "Thermal Heatmap",       "color_coding": {         "Red (Hot)": "Areas of intense fixation and dwell time.",         "Yellow/Orange (Warm)": "Areas scanned but with less dwell time.",         "Blue/Transparent (Cold)": "Areas likely ignored or seen only peripherally."       }     }   } }

Beispiel-Ausgaben

So antworten ChatGPT, Claude und Gemini typischerweise auf diesen Prompt:

🚀 ChatGPT

I'll analyze your UI screenshot using predictive eye-tracking principles. Based on cognitive science research, I'll generate a heatmap overlay showing where users' attention naturally gravitates. The hottest zones (red) will appear on human faces, high-contrast CTAs, and the upper-left quadrant following F-pattern scanning behavior. Areas with interactive affordances like buttons will show medium-intensity focus (orange-yellow), while less visually distinct regions receive cooler tones (blue-green).

✨ Claude

I should note that I cannot actually generate images or visual heatmaps. However, I can provide a detailed textual analysis of predicted eye-tracking patterns for your UI. If you share a screenshot, I'll identify likely hotspots based on biological priority (faces/eyes), visual isolation effects (prominent CTAs), F-pattern scanning tendencies, and interactive affordances. For actual heatmap visualization, you'd need specialized eye-tracking software or services like Attention Insight.

💎 Gemini

I can analyze UI layouts for predicted visual attention patterns based on established UX research (Nielsen Norman Group, cognitive load theory). However, I cannot generate heatmap images directly. I can describe where hot zones would likely appear: faces and primary CTAs get highest attention (red zones), navigation elements and headings follow F-pattern flow (orange/yellow), while body content and footers receive less initial focus (green/blue).

So nutzt du diesen Prompt

Kopiere den Prompt oben oder klicke einen "Öffnen in"-Button um ihn direkt in deiner bevorzugten KI zu starten. Du kannst den Text dann an deinen Anwendungsfall anpassen — z.B. Platzhalter wie [dein Thema] durch echten Kontext ersetzen.

Welches KI-Modell funktioniert am besten

ChatGPT, Claude und Gemini liefern alle gute Ergebnisse für diese Art von Prompt. Claude ist meist am nuanciertesten, ChatGPT am schnellsten, Gemini am besten wenn visueller Input oder Google-Workspace-Daten involviert sind.

Diesen Prompt anpassen

Passe den Prompt an deinen konkreten Use-Case an. Ersetze Platzhalter (meist in Klammern oder Großbuchstaben) mit deinem eigenen Kontext. Je mehr Details du lieferst, desto präziser die Antwort.

Typische Anwendungsfälle

  • In ChatGPT, Claude oder Gemini sofort einsetzen
  • An dein spezifisches Projekt oder Branche anpassen
  • Als Startpunkt für deinen eigenen benutzerdefinierten Prompt nutzen
  • Mit verschiedenen Models vergleichen um das beste für deinen Fall zu finden
  • Im Team teilen als Standard-Workflow

Variationen

Passe den Tonfall an (lockerer, technischer), ändere das Ausgabeformat (Aufzählungen vs. Absätze) oder füge Einschränkungen hinzu (Wortlimits, Zielgruppe).

Verwandte Prompts