A comprehensive prompt template for designing complete button state systems and engaging micro-interactions that enhance user experience through visual feedback and intuitive interactions. Ideal for UI/UX designers, interaction designers, and product teams creating polished, responsive interfaces.
Use this prompt to create a complete button state system and micro-interaction framework tailored to your product's needs. Replace bracketed placeholders with specific project details including platform, brand personality, technical stack, and interaction preferences. The output will provide comprehensive designs, specifications, and implementation guidelines covering all button states from default to loading, plus engaging micro-interactions that provide intuitive feedback. For optimal results, provide examples of button interactions you admire or specify animation intensity preferences.
Button states are fundamental to user experience because they provide continuous feedback about interface status and available actions. Each state communicates specific information: default states show availability, hover states indicate interactivity, focus states support keyboard navigation, active states confirm user input, disabled states prevent errors, and loading states manage expectations during processing. Research shows that proper button feedback increases conversion rates by up to 200% and reduces user confusion significantly. Before designing, audit your application to identify all button contexts—forms, navigation, e-commerce transactions, content actions, and settings. Consider user emotional states at each interaction point: anxious users completing payments need reassuring loading feedback, while power users navigating dashboards need fast, subtle responses. Map your button types to a clear hierarchy ensuring users can instantly distinguish primary actions from secondary options through visual weight and positioning.
Effective state transitions balance immediacy with smoothness, providing instant feedback without jarring users. Hover states should respond within 100ms—any longer feels laggy and breaks the connection between mouse movement and visual response. Active/pressed states need instant response on mousedown or touchstart to create tactile feedback that mimics physical buttons. Loading states should appear immediately for processes exceeding 500ms but remain hidden for faster operations to avoid flicker. Use consistent timing across similar interactions: all primary buttons should have identical hover durations, all loading states should use the same spinner style. Design transition animations that feel natural by using appropriate easing functions—ease-in-out works for most state changes, ease-out for growing or appearing elements, and ease-in for shrinking or disappearing elements. Test animations at actual speed in your design tool or browser rather than relying on slow-motion previews, as timing that feels right at 50% speed often feels sluggish at full speed. Consider the emotional tone of each interaction: playful brands might use bouncy cubic-bezier curves while professional applications need more restrained linear or ease-in-out timing.
Great micro-interactions are purposeful, subtle, and enhance functionality without calling attention to themselves. Every micro-interaction should serve a clear purpose—confirming actions, revealing system status, providing error prevention, or creating delightful moments at appropriate times. Follow the principle of progressive disclosure: show only necessary feedback at each stage rather than overwhelming users with every detail. Implement feedback loops that complete the interaction cycle: user acts, system acknowledges, system processes, system confirms completion. Design for edge cases including success, failure, slow connections, and interruptions. Ripple effects on click points help users understand where they touched, especially on large buttons or touch interfaces. Icon animations like arrows sliding or checkmarks drawing in add polish while reinforcing action meaning. However, avoid animation overload—too many simultaneous micro-interactions create chaos and diminish their effectiveness. Respect user preferences by implementing prefers-reduced-motion media queries that disable non-essential animations for users sensitive to motion or using assistive technologies.
Implement button states using CSS pseudo-classes (:hover, :focus, :active, :disabled) for maintainability and performance. Use CSS transitions for simple property changes and CSS animations or JavaScript for complex sequences. Optimize for 60fps by animating only transform and opacity properties, which can be GPU-accelerated, while avoiding width, height, top, left, right, bottom, and margin animations that trigger layout recalculations. Structure CSS with clear state specificity: define default styles first, then layer state modifications ensuring focus styles have sufficient specificity to override hover. For complex interactions, use JavaScript state management rather than purely CSS-based solutions to maintain synchronization between visual state and application state. Implement loading states by disabling the button immediately on click, showing loading indicators, and re-enabling only when server responses complete or errors occur. Test extensively across devices and input methods: mouse hover doesn't exist on touch devices, so ensure touch feedback through active states; keyboard navigation requires visible focus states; screen readers need ARIA attributes announcing state changes. Create reusable button components in your framework (React, Vue, Angular) that encapsulate all states, reducing inconsistencies and simplifying maintenance as your design system evolves.
You are an expert UX designer specializing in creating user flow diagrams and task flows that optimize user experiences and drive conversions. Your task is to design comprehensive flow diagrams that visualize user navigation and task completion paths. Product/Feature Context: [DESCRIBE YOUR PRODUCT, FEATURE, OR SPECIFIC FUNCTIONALITY] User Persona: [DESCRIBE THE TARGET USER OR SEGMENT] Primary User Goal: [SPECIFY THE MAIN OBJECTIVE THE USER WANTS TO ACCOMPLISH] Entry Points: [IDENTIFY HOW USERS ARRIVE - E.G., HOMEPAGE, EMAIL LINK, SEARCH, SOCIAL MEDIA, DIRECT URL] Key Screens/Pages Involved: [LIST MAIN INTERFACES, PAGES, OR SCREENS IN THE FLOW] Existing Pain Points: [DESCRIBE CURRENT ISSUES - E.G., HIGH DROP-OFF RATES, CONFUSION, ABANDONMENT] Business Objectives: [SPECIFY CONVERSION GOALS, SUCCESS METRICS, OR BUSINESS OUTCOMES] Technical Constraints: [MENTION ANY LIMITATIONS - E.G., AUTHENTICATION REQUIREMENTS, THIRD-PARTY INTEGRATIONS] Based on this information, create comprehensive user flow diagrams and task flows that include: 1. Flow Type Determination: - **Task Flow**: Linear, single-path diagram showing steps to complete one specific task (best for focused, goal-oriented actions) - **User Flow**: Multi-path diagram showing all possible routes users can take, including decision points and alternative paths - Recommend which type(s) to create based on complexity and use case 2. Complete User Flow Diagram: - **Entry Points**: All possible starting points for the user journey (homepage, landing page, email, notification, etc.) - **Screens/Pages**: Every interface the user encounters, labeled clearly - **User Actions**: Specific interactions required at each step (click, input, select, scroll, etc.) - **Decision Points**: Places where users make choices that branch the flow into different paths - **System Actions**: Backend processes, validations, or automated responses - **Exit Points**: All possible endpoints (success states, error states, abandonment points) 3. Visual Diagram Structure: - Use standard flowchart symbols: * Ovals/rounded rectangles for entry and exit points * Rectangles for screens/pages/steps * Diamonds for decision points * Arrows for flow direction and connections - Provide a legend explaining all symbols used - Organize flow from left-to-right or top-to-bottom for clarity - Use color coding to differentiate path types (happy path, alternative paths, error states) 4. Detailed Flow Elements: For each step in the flow, specify: - **Step Name**: Clear, concise label for the action or screen - **User Action**: What the user does at this step - **System Response**: What happens after the user acts - **Success Criteria**: What determines if the user can proceed - **Error Handling**: Alternative paths if validation fails or errors occur - **Time Estimates**: Approximate duration for each step (optional but helpful) 5. Multiple Scenario Coverage: - **Happy Path**: Ideal flow where everything works smoothly and users achieve their goal - **Alternative Paths**: Different valid routes to accomplish the same goal - **Error States**: What happens when validation fails, data is missing, or technical issues occur - **Edge Cases**: Uncommon but possible scenarios (first-time users, returning users, permission issues) 6. Friction Point Analysis: - Identify potential drop-off points where users might abandon the flow - Highlight steps with high cognitive load or complexity - Note mandatory vs. optional steps - Flag opportunities to reduce steps or streamline the process 7. Optimization Recommendations: - Suggest ways to minimize the number of steps to completion - Recommend progressive disclosure strategies for complex flows - Identify opportunities for automation or pre-filling information - Propose skip or fast-track options for experienced users - Suggest improvements to reduce errors and increase conversion rates 8. Success Metrics and Testing: - Define measurable success criteria (completion rate, time-to-complete, error rate) - Recommend A/B testing opportunities for alternative paths - Suggest analytics events to track at key decision points - Propose usability testing scenarios to validate the flow 9. Documentation and Annotations: - Provide detailed notes explaining complex interactions - Include business rules or logic that affect the flow - Document assumptions made during flow creation - Note dependencies on other systems or features Ensure the flows focus on one primary goal per diagram to maintain clarity, use consistent visual language and labeling conventions, account for both new and returning user experiences, balance comprehensiveness with readability, and prioritize the user's perspective over internal system processes.
Create comprehensive voice and tone guidelines for [BRAND NAME] in the [INDUSTRY/SECTOR] industry. The brand offers [PRODUCTS/SERVICES] targeting [TARGET AUDIENCE]. Core brand values include [BRAND VALUES], and the brand personality can be described as [BRAND PERSONALITY]. Include a brand voice overview, 3-5 voice characteristics with 'We are/We are not' statements, tone variations for different channels and contexts, practical writing guidelines, and examples of the voice in action.
You are a world-class Design Thinking facilitator. Guide me through the complete design thinking process to solve this challenge: [DESCRIBE YOUR CHALLENGE/PROJECT/PROBLEM]. The target users/stakeholders are [DESCRIBE TARGET AUDIENCE], and the primary objectives are [DESCRIBE KEY GOALS]. I am [BEGINNER/INTERMEDIATE/EXPERT] with design thinking. Please adjust your guidance accordingly.