IT & Software

Interaction Design

Create Seamless Digital Experiences with This Interaction Design Prompt

What This Prompt Does

  • Generates detailed, context-aware interaction models tailored to a specific feature within a digital product, considering the target user's technical proficiency and usage goals.
  • Defines the tactile and visual behaviors users experience when engaging with the feature, including gestures, animations, haptic feedback, and sound.
  • Outlines error states and recovery mechanisms, helping designers plan for edge cases and create forgiving, human-centered interfaces.
  • Incorporates accessibility considerations to ensure inclusive design for users with cognitive, visual, motor, or auditory limitations.
  • Enhances user satisfaction by embedding micro-interactions at key touchpoints that provide clarity, feedback, and emotional value.

Tips

  • Be specific about your users. Define their experience level, goals, and limitations (e.g., “first-time mobile banking users with limited tech knowledge”). This ensures the resulting design is user-centric and usable.
  • Clarify device context. Are interactions touch-based (mobile/tablet), voice-driven (smart speaker), or cursor-driven (desktop)? This influences gesture and transition patterns significantly.
  • Map out user flows. Think through where these interactions live in the broader experience. Micro-interactions tied to success/failure moments (e.g., form submission, password mismatch) can elevate usability.
  • Include emotional and cognitive feedback loops. How does the user know an action worked? What’s the tone of the error message? Is the feedback encouraging or corrective?
  • List edge cases and system limitations. For example: “User loses internet connection while uploading a file” or “Voice command misunderstood by system.”

Prompt

Design detailed interaction patterns for [specific feature] in our [product type]. The target users are [user type] with [skill level] technical proficiency. Include specifications for: gestures, transitions, feedback mechanisms, and error states. Detail the behavior for [list specific interactions]. Consider edge cases like [list scenarios] and accessibility requirements for users who [specific limitation]. Include micro-interactions for [list moments].

How To Use The Prompt

Fill in the placeholders to tailor the interaction design output to your product and users. Consider environment (device/platform), user characteristics, and interaction complexity.

Placeholders to fill:

  • [specific feature] – e.g., “onboarding flow,” “AI chat widget,” “file upload tool”
  • [product type] – e.g., “mobile banking app,” “e-commerce dashboard,” “educational game”
  • [user type] – e.g., “first-time users,” “frequent shoppers,” “students with ADHD”
  • [skill level] – e.g., “low,” “intermediate,” “expert”
  • [list specific interactions] – e.g., “drag and drop,” “swipe to delete,” “voice search,” “multi-step form submission”
  • [list scenarios] – e.g., “user loses connection,” “API fails to return data,” “user enters invalid date”
  • [specific limitation] – e.g., “low vision,” “limited mobility,” “color blindness”
  • [list moments] – e.g., “form submission,” “item added to cart,” “hover over button,” “login success”

Example Input

#PROJECT DETAILS:

  • Feature: Password reset flow
  • Product type: Mobile productivity app
  • Target users: Freelancers aged 25–40 with low-to-medium technical proficiency
  • Interactions: Text input, confirmation modals, progress indicators
  • Edge cases: Slow network, incorrect email input, expired token
  • Accessibility: Users with low vision or dyslexia
  • Micro-interactions: Button press, email sent, error messages, success animation

Example Output

Wireframe for Course Progress Overview Page

Layout Grid:

  • Uses a 12-column fluid grid

  • Content centered with 10-column content span and 1-column gutters on each side (desktop)

  • Stackable layout for mobile (single-column, scrollable design)

Component Hierarchy (Top to Bottom):

  1. Header:

    • Course title, user avatar, "Resume Course" CTA

  2. Progress Bar Section:

    • Large horizontal bar showing percent complete

    • Overlay text with current module (e.g., "Week 2 of 5")

  3. Lesson Tracker Section:

    • Collapsible module list

    • Checkmarks for completed lessons

    • Buttons: "Mark as Complete" / "Download Resources"

  4. Assignment Section:

    • List format with due dates, statuses (e.g., "Upcoming", "Overdue")

    • Button: "Submit Assignment"

  5. User Feedback Section:

    • "Rate Course" dropdown or star component

    • "Leave Feedback" text box

Responsive Behavior:

  • Tablet: Two-column layout for modules and assignments

  • Mobile: All components stack vertically; collapsible sections auto-expand

  • Buttons enlarge for touch accessibility on smaller screens

User States Handled:

  • First-time user: Empty state with onboarding message + "Start Course" CTA

  • Returning user: Persisted state showing last lesson viewed

  • Course completed: Certificate badge + "Review Course" and "Start New Course" buttons

  • Course not started: Locked lesson content with grayed out indicators

Accessibility Considerations:

  • ARIA labels for all buttons and progress components

  • Color contrast meets WCAG AA (4.5:1 minimum)

  • Keyboard-navigable tabs and lesson list

  • Focus rings visible on interactive elements

  • Option to switch to high contrast mode in header settings

Additional Information

This mega-prompt is a powerful tool for UX/UI designers, interaction designers, and product managers aiming to deliver intuitive, inclusive, and emotionally intelligent user interfaces. Whether you're prototyping a new feature or refining an existing one, this prompt will help you define:

  • The choreography of user input and system response

  • How information is conveyed through subtle animations and transitions

  • Ways to recover gracefully from errors and guide users back on track

  • Inclusive design practices that ensure usability for all

With well-defined interaction patterns, you’ll bridge the gap between user intention and system functionality, ensuring seamless, delightful digital experiences that respect user context and need.

Related Prompts

Ready to Dominate Your Business in 2025?

Get immediate access to...

30,000+ AI prompts

Marketing, business, copywriting, visuals & more.

How-to Guides & resources

Biggest collection of AI resources for your business success.

Unlimited updates

Your resources & knowledge grows, free of charge, forever.

Lifetime access

Highest priority support. Instant delivery.

GET INSTANT ACCESS NOW!
Scroll to Top