Certain interaction patterns recur across application types. Understanding these common prototyping patterns helps you create familiar, intuitive user experiences that users can navigate without confusion. Moonchild recognizes and implements these patterns automatically, but knowing them helps you make better design decisions.

Navigation Patterns

• Sidebar Navigation - Persistent navigation on the left or right side that stays visible across screens. Common in dashboards and admin interfaces. Items are highlighted when active, informing the users of their current location. Moonchild automatically makes sidebar items clickable and updates the active state when you navigate between sections.
• Tab Navigation - Horizontal tabs that switch between different views or content categories without leaving the current screen. Tabs typically show an underline or highlight to indicate the active view.
• Breadcrumb Navigation - Shows the user's current path through the application hierarchy (e.g., "Dashboard > Students > John Smith"). Each level is clickable, letting users jump back to any previous screen. Automatically updates as users navigate deeper into the application.

Form Patterns

• Multi-Step Forms - Forms are divided into manageable steps, each with a progress indicator component. Users complete one section at a time and can navigate using the "Next" and "Back" buttons. The final step allows for a review before submission. Moonchild preserves the form state as users move between steps.
• Inline Validation - Form fields that validate input in real-time, showing success checks or error messages as the user types. This helps users correct mistakes immediately, rather than after submission. Common for email addresses, passwords, and required fields.

Data Display Patterns

• Card Interactions - Cards expand on click to show more details or link to dedicated detail screens. Hover states indicate this is clickable. Common for product listings, user profiles, and content previews.
• Table Actions - Tables with clickable rows, sortable columns, and action buttons (edit, delete, view). Row selection highlights the selected item, and action buttons trigger appropriate modals or navigation.
• Modal Overlays - Pop-up windows for quick actions, confirmations, or forms that don't require a full screen. Include close buttons and backdrop clicks to dismiss.

Feedback Patterns

• Loading States - Spinners, skeleton screens, or progress indicators that appear during data loading or processing. It lets users know the system is working and approximately how long to wait.
• Success/Error Messages - Toast notifications, banner alerts, or inline messages that confirm actions or report errors. Auto-dismiss after a few seconds or require explicit dismissal.
• Empty States - Screens shown when no data exists yet, often with CTAs to add the first item. Turn "No students found" into an opportunity: "Get started by adding your first student."

Moonchild implements these patterns based on context clues in your prompts and design. Recognizing them helps you request specific patterns when needed and understand how your prototype will behave.

<aside>

Did this answer your question? 😊

If you have any further questions, please reach out to [[email protected].](mailto:[email protected].)

</aside>