​
UX Design

​
Go Back Behavior

  • Preserving Page State
    To create a seamless and intuitive user experience, preserve the state of pages when necessary, especially for pages where maintaining data inputs, scroll positions, or dynamic content enhances user interaction. This ensures users can return to key pages exactly as they left them, providing a smoother navigation experience without overloading unnecessary state management on every page.
  • Clear Navigation Paths
    Define and confirm the destination when users go back. This prevents confusion and ensures a smooth, predictable navigation flow within the miniapp.

​
Bottom Padding and iOS Navigation Bar

  • Designing with Sufficient Bottom Padding
    Ensure your Figma designs include adequate bottom padding to account for the iOS home bar. This prevents interactive elements from being obscured and enhances usability on iOS devices.

​
Toast Message Timing

  • Optimizing Toast Message Duration
    Determine the optimal duration for toast messages to be displayed, typically between 2 to 3 seconds. This ensures that messages are visible long enough to be read without overstaying their welcome, maintaining a smooth user experience.

​
Development

​
Pagination

  • Implementing Pagination to Improve Loading Speed
    To enhance loading speed and reduce perceived latency, implement pagination for data-heavy sections. By loading content in smaller, manageable chunks rather than all at once, pagination helps maintain quick response times and improves the overall user experience, making the miniapp feel faster and more responsive.

​
Cache Control

  • Integrating with a CDN
    Utilize a Content Delivery Network (CDN) to distribute your miniapp’s content efficiently. This helps reduce load times and enhances the overall performance, making your miniapp feel faster and more responsive.
  • Optimizing Image Loading
    While using Next.js’s Image component could enhance image loading, evaluate whether it aligns with your miniapp’s needs. Sometimes <img> with proper CDN and caching performs better than <Image> from Next.js and it solves image flickering issues on iOS.
  • Enabling Browser Caching
    Implement browser caching strategies to store frequently accessed resources locally. This reduces load times on repeat visits and improves the responsiveness of your miniapp.

​
Cache Data from Previous Page

  • Reducing Perceived Latency
    Cache data from the previous page so that if the data is already available, it can be displayed immediately without a loading icon. This reduces perceived latency and makes the transition between pages feel faster and more fluid, closely mimicking the experience of a native app.

​
Page Rendering

  • Client-Side Rendering (CSR) for Enhanced Interactivity
    Utilize Client-Side Rendering (CSR) to improve interactivity and provide faster initial loads. CSR can make your miniapp feel more dynamic and responsive, similar to a native app.
  • Smooth and Fluid Transitions
    Implement sliding effects that are smooth and responsive. Pre-loading images ensures they are ready to display during swipes, contributing to a more native-like experience without lag or delays.

​
Clickable Area

  • Enhancing Clickable Areas for Better Usability
    Increase the size of clickable areas to improve touch accuracy and usability. Ensuring that buttons and links are easily tappable makes your miniapp more user-friendly and aligns with native app standards.

​
Use of JS SDK AppBoxoWebAppSetStatusBarColor Event

  • Blending Content with the Status Bar
    Use the AppBoxoWebAppSetStatusBarColor event from Boxo JS SDK to make your content seamlessly blend with the mobile status bar. This creates a cohesive and polished UI, enhancing the native feel of your miniapp.

​
Disable User Select Text

  • Preventing Unintended Text Selection for a Better User Experience
    Disabling text selection helps maintain a smooth and polished interface by preventing users from accidentally highlighting text while interacting with the miniapp. This is particularly useful for buttons, labels, and other UI elements where text selection is unnecessary. Implement this by using CSS:

    user-select: none;

These recommendations will help you create a miniapp that not only looks but also feels like a native app, providing users with a more cohesive and intuitive experience. By focusing on these areas, your miniapp can achieve the level of polish and performance expected from a high-quality mobile application.