Get Interaction Patterns from a Live Website

Contents

• [Use an interaction checklist](#use-an-interaction-checklist)
• [Review the page in states](#review-the-page-in-states)
• [Group findings by behavior](#group-findings-by-behavior)
• [Make a buildable handoff](#make-a-buildable-handoff)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

You can get interaction patterns from a live website by recording each user action, the visible response, and the conditions that trigger it. Review the page state by state, then turn the observations into reusable behavior notes instead of collecting screenshots alone.

Use an interaction checklist

Start with the main visitor journey and work outward. For every interaction, record:

1. Default state: What appears before the visitor does anything?
2. Trigger: Is the change caused by a click, tap, hover, focus, scroll, drag, key press, or time delay?
3. Response: Does a panel open, content move, a video start, text change, or a control become active?
4. Timing: Is the response immediate, delayed, eased, or tied to scroll progress?
5. Exit: How does the visitor close, reverse, skip, or complete the interaction?
6. Responsive rule: Does the behavior stay the same on smaller screens, or become a tap, accordion, carousel, or stacked layout?

A useful note is concrete: Hovering or focusing a feature card reveals a secondary action and shifts the supporting image; leaving or blurring restores the default card. That is more useful than writing animated card.

The references below can help you compare video-led sections, illustrations, editorial layouts, and product-launch content. Treat them as visual references for observed details, not as proof that every page on a site behaves identically.

Review the page in states

Do not inspect only the initial load. Check the states a visitor can reach:

• Navigation closed and open
• Header at the top and after scrolling
• Links hovered, focused, pressed, and selected
• Cards before and after hover or focus
• Accordions collapsed and expanded
• Modals, drawers, consent prompts, and dismiss actions
• Video before playback, during playback, paused, muted, and complete
• Forms empty, focused, invalid, loading, and submitted

For scroll-based pages, capture the beginning, middle, and end of each major section. Note whether elements fade, pin, scale, reveal, or simply enter the viewport. Record the condition that produces each state so another person can reproduce it.

Group findings by behavior

Organize the notes by behavior rather than by URL:

• Navigation: sticky header, expanding menu, section jump, mobile drawer
• Content reveal: accordion, tabs, progressive disclosure, scroll reveal
• Media: autoplay video, click-to-play video, hover preview, gallery
• Feedback: hover treatment, focus ring, loading state, success message
• Layered UI: modal, tooltip, popover, toast, consent prompt
• Motion: fade, slide, scale, parallax, pinned section, timeline animation

For each pattern, include its purpose, trigger, visible result, reversal action, responsive rule, and fallback. Keep observed behavior separate from your implementation choice. A source page may use a pinned animation, while your own page may need a simpler reveal that works with keyboard navigation or reduced motion.

When reviewing a media-rich page, inspect the crop, poster frame, controls, mute state, captions, overlay text, clipping, and relationship to nearby buttons. A video may be the main demonstration, a background texture, or a transition between sections. The role affects the right fallback and accessibility treatment.

Make a buildable handoff

A strong handoff combines a short table with state references:

End with open questions: Is the motion essential? What happens with reduced motion? Does the interaction work without JavaScript? Which state should be the default on mobile? The useful result is a clear set of interaction rules that you can compare, simplify, and adapt, not a visual clone.

Use this in your AI agent

> Review the captured website references for interaction patterns. Build an inventory covering navigation, scroll behavior, hover and focus states, accordions, overlays, forms, video playback, responsive changes, and motion. For each pattern, describe the trigger, visible response, timing, reversal action, fallback, and accessibility questions. Separate observed behavior from implementation recommendations, and finish with a concise handoff table.

Install Fudge for your AI agent to review captured references while you work.

Use one entry per interaction and keep the format consistent: trigger, state change, timing, reversal, responsive rule, and implementation note.

For hover, record what changes and whether the same result is available on focus or tap. For scroll, identify the section range and whether the element enters, pins, fades, scales, or changes position. Mention what happens when the visitor scrolls backward.

For video, document the poster frame, autoplay rule, mute state, controls, captions, looping, crop, overlay content, and fallback if playback does not start. Also note whether the video carries essential information or is decorative.

End each entry with questions that still need testing: keyboard access, reduced motion, small screens, slow loading, and interrupted playback. This makes the handoff useful for design, content, and implementation.

Use this checklist for each interaction:

• Name the pattern by its user-facing purpose.
• Identify the default state.
• Define the exact trigger.
• Describe the changed state in plain language.
• Record duration, direction, easing, and whether motion can be skipped.
• Define how the visitor reverses or exits.
• Specify the mobile version.
• Check keyboard focus, labels, and reading order.
• Check reduced-motion behavior.
• Provide a still or simplified fallback for delayed media.
• Test loading, error, empty, disabled, and completed states where relevant.
• Mark each note as observed, inferred, or proposed.

Prioritize interactions that support navigation, choosing content, understanding a product, submitting a form, or controlling media. Treat decorative motion as optional until the essential states are clear.

Related questions

• Get the media styles from a live website
• Get the page layout from a live website
• Get design tokens from a live website
• Get the Spacing Scale From a Live Website