From 74231f2adb30d6d72509a8ca6e20e570f4e4021d Mon Sep 17 00:00:00 2001 From: David Dias Date: Mon, 10 Feb 2025 22:21:59 -0500 Subject: [PATCH] fix: reduce number characters for description --- .../en/blog/announcing-ux-patterns-launch.mdx | 2 +- content/en/blog/ux-patterns-gpt.mdx | 2 +- content/en/index.mdx | 2 +- .../en/pattern-guide/choosing-input-types.mdx | 2 +- .../pagination-vs-infinite-scroll.mdx | 2 +- content/en/patterns/books.mdx | 2 +- .../content-management/drag-and-drop.mdx | 2 +- .../content-management/expandable-text.mdx | 8 ++--- .../en/patterns/content-management/modal.mdx | 30 ++++++++-------- content/en/patterns/forms/autocomplete.mdx | 2 +- content/en/patterns/forms/button.mdx | 2 +- content/en/patterns/forms/currency-input.mdx | 2 +- content/en/patterns/forms/date-input.mdx | 2 +- content/en/patterns/forms/date-picker.mdx | 2 +- content/en/patterns/forms/date-range.mdx | 2 +- content/en/patterns/forms/password.mdx | 2 +- content/en/patterns/forms/phone-number.mdx | 2 +- content/en/patterns/forms/rating-input.mdx | 2 +- .../en/patterns/forms/rich-text-editor.mdx | 2 +- content/en/patterns/forms/signature-pad.mdx | 2 +- content/en/patterns/forms/tag-input.mdx | 2 +- content/en/patterns/forms/text-field.mdx | 2 +- content/en/patterns/forms/time-input.mdx | 2 +- .../en/patterns/navigation/back-to-top.mdx | 2 +- .../en/patterns/navigation/hambuger-menu.mdx | 2 +- .../patterns/navigation/infinite-scroll.mdx | 2 +- content/en/patterns/navigation/load-more.mdx | 34 +++++++++---------- content/en/patterns/navigation/megamenu.mdx | 2 +- content/en/patterns/navigation/pagination.mdx | 2 +- content/en/patterns/navigation/sidebar.mdx | 2 +- content/en/patterns/navigation/tabs.mdx | 2 +- 31 files changed, 64 insertions(+), 64 deletions(-) diff --git a/content/en/blog/announcing-ux-patterns-launch.mdx b/content/en/blog/announcing-ux-patterns-launch.mdx index a8f0bfd..46ace4c 100755 --- a/content/en/blog/announcing-ux-patterns-launch.mdx +++ b/content/en/blog/announcing-ux-patterns-launch.mdx @@ -1,7 +1,7 @@ --- title: Launching "UX Patterns for Devs" image: ../../../public/img/opengraph-image.png -description: "Introducing today my new open-source resource filled with proven UX patterns, practical code snippets, and actionable tips - empowering developers to build more accessible and user-friendly interfaces." +description: "Introducing a new open-source resource with UX patterns and code snippets to help developers build more accessible and user-friendly interfaces." date: 2024-12-11 authors: - name: David Dias diff --git a/content/en/blog/ux-patterns-gpt.mdx b/content/en/blog/ux-patterns-gpt.mdx index 25df477..130fb51 100644 --- a/content/en/blog/ux-patterns-gpt.mdx +++ b/content/en/blog/ux-patterns-gpt.mdx @@ -1,7 +1,7 @@ --- title: UX Patterns for Devs GPT image: ../../../public/blog/ux-patterns-gpt.jpg -description: "I'm excited to announce the launch of UX Patterns for Devs GPT, a new AI-powered tool connected to the UX Patterns for Devs project." +description: "Announcing UX Patterns for Devs GPT, an AI tool that enhances the UX Patterns project with intelligent pattern suggestions." date: 2024-12-13 authors: - name: David Dias diff --git a/content/en/index.mdx b/content/en/index.mdx index 260f4ab..d966bdb 100755 --- a/content/en/index.mdx +++ b/content/en/index.mdx @@ -1,6 +1,6 @@ --- title: "Build Better User Experiences" -description: "UX Patterns for Developers is a collection of UX patterns for everyone but specially towards developers who want to understand how to build effective UI components accessible and usable." +description: "A collection of UX patterns for developers to build effective, accessible, and usable UI components." searchable: false --- diff --git a/content/en/pattern-guide/choosing-input-types.mdx b/content/en/pattern-guide/choosing-input-types.mdx index 3fb70e2..0fbf4fc 100644 --- a/content/en/pattern-guide/choosing-input-types.mdx +++ b/content/en/pattern-guide/choosing-input-types.mdx @@ -1,6 +1,6 @@ --- summary: "Select the most appropriate HTML input type based on your data collection needs" -description: "A comprehensive guide to choosing between different HTML input types based on factors like data structure, user experience, and validation requirements." +description: "Guide to choosing HTML input types based on data structure, user experience, and validation needs." icon: FormInput status: complete --- diff --git a/content/en/pattern-guide/pagination-vs-infinite-scroll.mdx b/content/en/pattern-guide/pagination-vs-infinite-scroll.mdx index 6081de8..54fe90f 100644 --- a/content/en/pattern-guide/pagination-vs-infinite-scroll.mdx +++ b/content/en/pattern-guide/pagination-vs-infinite-scroll.mdx @@ -1,6 +1,6 @@ --- summary: "Choose the right content loading pattern based on your user needs and content type" -description: "An in-depth comparison and decision guide to help you choose between pagination and infinite scroll patterns based on factors like content type, user behavior, and technical requirements." +description: "Compare pagination and infinite scroll patterns to choose the best option based on content type and user behavior." icon: Split --- diff --git a/content/en/patterns/books.mdx b/content/en/patterns/books.mdx index d43f00a..6fad458 100644 --- a/content/en/patterns/books.mdx +++ b/content/en/patterns/books.mdx @@ -1,5 +1,5 @@ --- -description: "Recommended UX books for developers" +description: "A curated list of essential UX books to help developers improve their design and implementation skills." icon: Book --- diff --git a/content/en/patterns/content-management/drag-and-drop.mdx b/content/en/patterns/content-management/drag-and-drop.mdx index 018853d..1dd33cd 100644 --- a/content/en/patterns/content-management/drag-and-drop.mdx +++ b/content/en/patterns/content-management/drag-and-drop.mdx @@ -1,6 +1,6 @@ --- summary: "Allow users to reorder items intuitively" -description: "Implement drag and drop functionality in your web applications. Learn best practices for creating intuitive item reordering with proper accessibility and touch support." +description: "Build intuitive drag and drop functionality with accessibility and touch support." icon: Grab --- diff --git a/content/en/patterns/content-management/expandable-text.mdx b/content/en/patterns/content-management/expandable-text.mdx index 8b24c2c..5657777 100644 --- a/content/en/patterns/content-management/expandable-text.mdx +++ b/content/en/patterns/content-management/expandable-text.mdx @@ -1,6 +1,6 @@ --- summary: "Show or hide additional text content on demand" -description: "Learn how to implement expandable text components in your web applications. Discover best practices for progressive disclosure, accessibility, and user experience with practical examples." +description: "Create expandable text components with progressive disclosure and accessibility features for better content management." icon: PlusSquare status: complete --- @@ -198,7 +198,7 @@ Each expandable text interaction provides valuable insights into user behavior. ### Event Payload Structure -To ensure consistent tracking, here’s a recommended event format: +To ensure consistent tracking, here's a recommended event format: ```json { @@ -227,7 +227,7 @@ By analyzing tracking data, we can optimize the expandable text experience: - 🚨 **Low Expand Rate?** → Users may not notice or feel the need to expand content. - **Optimization:** Adjust design cues (e.g., larger icons, clearer labels like “Read More”), or test making the content visible by default. + **Optimization:** Adjust design cues (e.g., larger icons, clearer labels like "Read More"), or test making the content visible by default. - ⏳ **Short Read Time After Expand?** → Users might not be engaging with the expanded content. @@ -239,7 +239,7 @@ By analyzing tracking data, we can optimize the expandable text experience: - 🔁 **High Re-Expand Rate?** → Users may be struggling to retain information after collapsing the text. - **Optimization:** Consider keeping key details visible at all times or providing a “sticky” summary. + **Optimization:** Consider keeping key details visible at all times or providing a "sticky" summary. - ⚙️ **Auto-Expand Not Leading to Higher Engagement?** → Automatically expanded content may be ignored. diff --git a/content/en/patterns/content-management/modal.mdx b/content/en/patterns/content-management/modal.mdx index f480d4f..0abb873 100644 --- a/content/en/patterns/content-management/modal.mdx +++ b/content/en/patterns/content-management/modal.mdx @@ -1,6 +1,6 @@ --- summary: "Display focused content or actions" -description: "Create effective modal dialogs for your web applications. Learn best practices for implementing accessible modal windows with proper focus management and keyboard interactions." +description: "Build accessible modal dialogs with proper focus management, keyboard interactions, and user experience best practices." icon: Maximize2 status: complete --- @@ -212,7 +212,7 @@ graph TD #### Forcing Users Into a Modal (No Close Option) -**❌ What’s Wrong?** Users feel trapped if they can’t exit a modal. +**❌ What's Wrong?** Users feel trapped if they can't exit a modal. **How to Fix It?** Always provide a clear **close button (X)** and support the `Esc` key for dismissal. @@ -220,7 +220,7 @@ graph TD #### Triggering Modals on Page Load -**❌ What’s Wrong?** Unrequested modals on page load can feel like pop-ups that disrupt user flow. +**❌ What's Wrong?** Unrequested modals on page load can feel like pop-ups that disrupt user flow. **How to Fix It?** Only show modals when the user **intentionally** initiates them. @@ -228,23 +228,23 @@ graph TD #### Disrupting Background Page Focus -**❌ What’s Wrong?** Some modals allow interaction with background content while open, causing layered focus. +**❌ What's Wrong?** Some modals allow interaction with background content while open, causing layered focus. -**How to Fix It?** Add a **focus trap** inside the modal and prevent background interaction until it’s closed. +**How to Fix It?** Add a **focus trap** inside the modal and prevent background interaction until it's closed. --- #### Modal Closes on Accidental Click -**❌ What’s Wrong?** Clicking outside the modal might unintentionally dismiss it, frustrating or confusing users. +**❌ What's Wrong?** Clicking outside the modal might unintentionally dismiss it, frustrating or confusing users. -**How to Fix It?** Only allow closing on background click if it’s non-critical info. For important data, require an explicit close action. +**How to Fix It?** Only allow closing on background click if it's non-critical info. For important data, require an explicit close action. --- #### Missing or Incorrect ARIA Markup (Accessibility) -**❌ What’s Wrong?** If the modal isn’t announced as a dialog (e.g., missing `role="dialog"`), screen readers might not indicate it properly. +**❌ What's Wrong?** If the modal isn't announced as a dialog (e.g., missing `role="dialog"`), screen readers might not indicate it properly. **How to Fix It?** Use `role="dialog"` or the `` element with `aria-modal="true"`. Provide a clear heading or label. @@ -252,7 +252,7 @@ graph TD #### Failing to Return Focus to the Trigger (Accessibility) -**❌ What’s Wrong?** When the modal closes, focus can get lost (e.g., jump to the top of the page). +**❌ What's Wrong?** When the modal closes, focus can get lost (e.g., jump to the top of the page). **How to Fix It?** Store the element that triggered the modal and **return focus** to it after closing. @@ -260,15 +260,15 @@ graph TD #### No Visible Focus States (Accessibility) -**❌ What’s Wrong?** Keyboard users can’t see where they are if no focus outline is visible on buttons or form fields. +**❌ What's Wrong?** Keyboard users can't see where they are if no focus outline is visible on buttons or form fields. -**How to Fix It?** Ensure a **clear, high-contrast focus indicator** is present. Validate you can “Tab” through all interactive elements. +**How to Fix It?** Ensure a **clear, high-contrast focus indicator** is present. Validate you can "Tab" through all interactive elements. --- #### Overly Complex or Overstuffed Modals (Accessibility) -**❌ What’s Wrong?** If a modal presents too much content (long forms, lots of text), users relying on screen readers may be overwhelmed. +**❌ What's Wrong?** If a modal presents too much content (long forms, lots of text), users relying on screen readers may be overwhelmed. **How to Fix It?** Keep modals **brief and to the point**. For more complex workflows, use a dedicated page or a multi-step wizard. @@ -293,7 +293,7 @@ Each modal interaction provides valuable insights into user behavior. Below are ### Event Payload Structure -To ensure consistent tracking, here’s a recommended event format: +To ensure consistent tracking, here's a recommended event format: ```json { @@ -313,7 +313,7 @@ Once tracking is in place, the following metrics provide actionable insights: - Open Rate → Percentage of users who see the modal (manual vs. auto-open). - Engagement Rate → Percentage of users who interact with the modal before closing. - Dismissal Rate → Percentage of users who close the modal without taking any action. -- Completion Rate → Percentage of users who complete the modal’s primary action. +- Completion Rate → Percentage of users who complete the modal's primary action. - Time in Modal → Average time users spend inside the modal. ### Insights & Optimization Based on Tracking @@ -340,7 +340,7 @@ By analyzing tracking data, we can optimize the modal experience: → If most users dismiss auto-open modals immediately, they may be perceived as annoying. **Optimization:** Make them **manual-triggered only**, delay their appearance, or ensure they are only shown when truly relevant. -By continuously monitoring these metrics, we can refine the modal’s effectiveness and ensure it enhances, rather than disrupts, the user experience. +By continuously monitoring these metrics, we can refine the modal's effectiveness and ensure it enhances, rather than disrupts, the user experience. ## Localization diff --git a/content/en/patterns/forms/autocomplete.mdx b/content/en/patterns/forms/autocomplete.mdx index 563a773..36209a8 100644 --- a/content/en/patterns/forms/autocomplete.mdx +++ b/content/en/patterns/forms/autocomplete.mdx @@ -1,6 +1,6 @@ --- summary: "Suggest options as users type" -description: "Implement user-friendly autocomplete functionality in your web applications. Learn best practices for search suggestions, keyboard navigation, and accessibility with practical examples." +description: "Build user-friendly autocomplete with search suggestions, keyboard navigation, and accessibility features." icon: Search status: complete --- diff --git a/content/en/patterns/forms/button.mdx b/content/en/patterns/forms/button.mdx index 66cc4e0..bdec30a 100644 --- a/content/en/patterns/forms/button.mdx +++ b/content/en/patterns/forms/button.mdx @@ -1,6 +1,6 @@ --- summary: "Trigger actions and submit forms" -description: "Learn how to implement accessible and user-friendly buttons in your web applications. Discover best practices for button design, states, accessibility, and implementation with code examples and guidelines." +description: "Create accessible and user-friendly buttons with proper states, design patterns, and implementation guidelines." icon: MousePointerClick ogImage: /covers/patterns/button.png status: complete diff --git a/content/en/patterns/forms/currency-input.mdx b/content/en/patterns/forms/currency-input.mdx index 774901c..7abd31c 100644 --- a/content/en/patterns/forms/currency-input.mdx +++ b/content/en/patterns/forms/currency-input.mdx @@ -1,6 +1,6 @@ --- summary: "Enter and format monetary values" -description: "Implement user-friendly currency input fields in your web applications. Learn best practices for number formatting, validation, and international currency handling." +description: "Create currency input fields with number formatting and international currency handling." icon: DollarSign --- diff --git a/content/en/patterns/forms/date-input.mdx b/content/en/patterns/forms/date-input.mdx index 09cf450..3c28771 100644 --- a/content/en/patterns/forms/date-input.mdx +++ b/content/en/patterns/forms/date-input.mdx @@ -1,6 +1,6 @@ --- summary: "Enter dates in a structured text format" -description: "Implement user-friendly date input fields with proper validation and formatting. Learn best practices for collecting dates in forms, including accessibility, localization, and browser compatibility considerations." +description: "Build date input fields with validation, formatting, and localization features." icon: Calendar --- diff --git a/content/en/patterns/forms/date-picker.mdx b/content/en/patterns/forms/date-picker.mdx index cfc7057..0144614 100644 --- a/content/en/patterns/forms/date-picker.mdx +++ b/content/en/patterns/forms/date-picker.mdx @@ -1,6 +1,6 @@ --- summary: "Select dates from a calendar interface" -description: "Build user-friendly date picker components for your web applications. Learn best practices for calendar interfaces, keyboard navigation, and accessibility." +description: "Create user-friendly date pickers with calendar interfaces and keyboard navigation." icon: CalendarDays --- diff --git a/content/en/patterns/forms/date-range.mdx b/content/en/patterns/forms/date-range.mdx index 14bf640..cde5c1b 100644 --- a/content/en/patterns/forms/date-range.mdx +++ b/content/en/patterns/forms/date-range.mdx @@ -1,6 +1,6 @@ --- summary: "Select a range between two dates" -description: "Implement date range selection components in your web applications. Learn best practices for calendar interfaces, validation, and accessibility considerations." +description: "Build date range selection with calendar interfaces and validation features." icon: CalendarRange --- diff --git a/content/en/patterns/forms/password.mdx b/content/en/patterns/forms/password.mdx index c3717f1..726da37 100644 --- a/content/en/patterns/forms/password.mdx +++ b/content/en/patterns/forms/password.mdx @@ -1,6 +1,6 @@ --- summary: "Secure password entry with feedback" -description: "Implement secure and user-friendly password fields in your web applications. Learn best practices for password validation, strength indicators, and accessibility with practical examples." +description: "Build secure and user-friendly password fields with validation, strength indicators, and accessibility features." icon: Lock status: complete --- diff --git a/content/en/patterns/forms/phone-number.mdx b/content/en/patterns/forms/phone-number.mdx index c19cac0..6923577 100644 --- a/content/en/patterns/forms/phone-number.mdx +++ b/content/en/patterns/forms/phone-number.mdx @@ -1,6 +1,6 @@ --- summary: "Format and validate phone numbers" -description: "Build user-friendly phone number input fields for your web applications. Learn best practices for international number formats, validation, and accessibility." +description: "Create phone number inputs with international format support and validation features." icon: Phone --- diff --git a/content/en/patterns/forms/rating-input.mdx b/content/en/patterns/forms/rating-input.mdx index 16432b0..a7a1748 100644 --- a/content/en/patterns/forms/rating-input.mdx +++ b/content/en/patterns/forms/rating-input.mdx @@ -1,6 +1,6 @@ --- summary: "Rate something with a number of stars" -description: "Create user-friendly rating input components for your web applications. Learn best practices for star ratings, numerical scales, and accessibility considerations." +description: "Build user-friendly rating components with star ratings and accessibility features." icon: Star --- diff --git a/content/en/patterns/forms/rich-text-editor.mdx b/content/en/patterns/forms/rich-text-editor.mdx index 03497b5..621832b 100644 --- a/content/en/patterns/forms/rich-text-editor.mdx +++ b/content/en/patterns/forms/rich-text-editor.mdx @@ -1,6 +1,6 @@ --- summary: "Edit and format text content" -description: "Build accessible rich text editors for your web applications. Learn best practices for text formatting, keyboard shortcuts, and accessibility considerations." +description: "Create accessible rich text editors with text formatting tools and keyboard shortcuts." icon: PenTool --- diff --git a/content/en/patterns/forms/signature-pad.mdx b/content/en/patterns/forms/signature-pad.mdx index 8bd2834..92099c1 100644 --- a/content/en/patterns/forms/signature-pad.mdx +++ b/content/en/patterns/forms/signature-pad.mdx @@ -1,6 +1,6 @@ --- summary: "Allow users to sign their name" -description: "Implement digital signature capture in your web applications. Learn best practices for touch-enabled signature pads, canvas drawing, and signature validation." +description: "Build touch-enabled signature capture with canvas drawing and validation features." icon: Pen --- diff --git a/content/en/patterns/forms/tag-input.mdx b/content/en/patterns/forms/tag-input.mdx index 4e54fa4..0d972aa 100644 --- a/content/en/patterns/forms/tag-input.mdx +++ b/content/en/patterns/forms/tag-input.mdx @@ -1,6 +1,6 @@ --- summary: "Enter and format tags" -description: "Implement tag input components for dynamic keyword entry in your web applications. Learn best practices for tag creation, deletion, and validation with accessibility support." +description: "Create tag input components for dynamic keyword entry with validation and accessibility support." icon: Tags --- diff --git a/content/en/patterns/forms/text-field.mdx b/content/en/patterns/forms/text-field.mdx index da2432c..3690ef8 100644 --- a/content/en/patterns/forms/text-field.mdx +++ b/content/en/patterns/forms/text-field.mdx @@ -1,6 +1,6 @@ --- summary: "Enter and edit text content" -description: "Learn how to implement accessible text input fields in your web applications. Discover best practices for validation, error handling, and user experience with practical examples." +description: "Implement accessible text input fields with validation, error handling, and user experience best practices." icon: Text status: complete --- diff --git a/content/en/patterns/forms/time-input.mdx b/content/en/patterns/forms/time-input.mdx index 8e0f08d..e66c97f 100644 --- a/content/en/patterns/forms/time-input.mdx +++ b/content/en/patterns/forms/time-input.mdx @@ -1,6 +1,6 @@ --- summary: "Enter time in a structured format" -description: "Create user-friendly time input fields for your web applications. Learn best practices for time selection, validation, and accessibility considerations." +description: "Build user-friendly time input fields with validation and accessibility features." icon: Clock --- diff --git a/content/en/patterns/navigation/back-to-top.mdx b/content/en/patterns/navigation/back-to-top.mdx index a91efd1..830c7b8 100644 --- a/content/en/patterns/navigation/back-to-top.mdx +++ b/content/en/patterns/navigation/back-to-top.mdx @@ -1,6 +1,6 @@ --- summary: "Quickly navigate back to the top of the page" -description: "Learn how to implement a Back to Top button pattern to enhance user navigation on long pages. Discover best practices for placement, accessibility, and user experience with code examples and implementation guidelines." +description: "Implement a Back to Top button for enhanced navigation on long pages with best practices for placement and accessibility." icon: ArrowUp status: complete --- diff --git a/content/en/patterns/navigation/hambuger-menu.mdx b/content/en/patterns/navigation/hambuger-menu.mdx index 4cbf212..fabd596 100644 --- a/content/en/patterns/navigation/hambuger-menu.mdx +++ b/content/en/patterns/navigation/hambuger-menu.mdx @@ -1,6 +1,6 @@ --- summary: "Display a menu icon for mobile devices" -description: "Learn how to implement a hamburger menu for mobile navigation. Discover best practices for creating accessible, responsive mobile menus with proper animations and touch interactions." +description: "Create accessible mobile menus with smooth animations and touch-friendly interactions." icon: Menu --- diff --git a/content/en/patterns/navigation/infinite-scroll.mdx b/content/en/patterns/navigation/infinite-scroll.mdx index 1c93945..667cc9b 100644 --- a/content/en/patterns/navigation/infinite-scroll.mdx +++ b/content/en/patterns/navigation/infinite-scroll.mdx @@ -1,6 +1,6 @@ --- summary: "Loads additional content automatically as users scroll down." -description: "Implement infinite scroll for seamless content loading in your web applications. Learn best practices for performance, accessibility, and user experience with practical code examples." +description: "Create seamless content loading with infinite scroll, focusing on performance, accessibility, and user experience best practices." icon: Infinity status: complete --- diff --git a/content/en/patterns/navigation/load-more.mdx b/content/en/patterns/navigation/load-more.mdx index dcadc31..3c8e1de 100644 --- a/content/en/patterns/navigation/load-more.mdx +++ b/content/en/patterns/navigation/load-more.mdx @@ -1,6 +1,6 @@ --- summary: "Load additional content on user demand" -description: "Learn how to implement a Load More pattern for efficient content pagination. Discover best practices for user experience, accessibility, and performance when loading content incrementally." +description: "Build efficient content loading with the Load More pattern, focusing on user experience and performance optimization." icon: Plus status: complete --- @@ -185,9 +185,9 @@ flowchart TB #### No Visual Feedback After Clicking "Load More" -**❌ What’s Wrong?** +**❌ What's Wrong?** -Users may think the button is broken if there’s no immediate sign of progress after they click. +Users may think the button is broken if there's no immediate sign of progress after they click. **How to Fix It?** Show a **spinner or loading animation** and possibly disable the button until the new content is fully loaded. @@ -196,7 +196,7 @@ Show a **spinner or loading animation** and possibly disable the button until th #### Loading Too Many Items at Once -**❌ What’s Wrong?** +**❌ What's Wrong?** Fetching a large batch of content can slow performance, cause layout shifts, and overwhelm users. @@ -207,9 +207,9 @@ Load **smaller chunks** (e.g., 10–20 items per click). Provide incremental upd #### Forcing Users to Click "Load More" Too Often -**❌ What’s Wrong?** +**❌ What's Wrong?** -Having users repeatedly click “Load More” leads to frustration and makes the page feel unresponsive. +Having users repeatedly click "Load More" leads to frustration and makes the page feel unresponsive. **How to Fix It?** Use **auto-loading on scroll** after a few manual loads, or at least increase the batch size once you detect high engagement. @@ -218,20 +218,20 @@ Use **auto-loading on scroll** after a few manual loads, or at least increase th #### No Clear End of Content Indicator -**❌ What’s Wrong?** +**❌ What's Wrong?** -Users can’t tell when they’ve reached the final items, potentially clicking “Load More” with no result. +Users can't tell when they've reached the final items, potentially clicking "Load More" with no result. **How to Fix It?** -Display a **“You’ve reached the end”** message or hide the button entirely once there’s no more data. +Display a "You've reached the end" message or hide the button entirely once there's no more data. --- #### Not Accessible via Keyboard (Accessibility) -**❌ What’s Wrong?** +**❌ What's Wrong?** -If the “Load More” button isn’t focusable or doesn’t respond to keyboard events, users relying on keyboard navigation can’t load new content. +If the "Load More" button isn't focusable or doesn't respond to keyboard events, users relying on keyboard navigation can't load new content. **How to Fix It?** Ensure the button is a proper, focusable element (e.g., `