Virtual Shopping Cart Overlay for Low-Latency Mobile Navigation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Navigating between active and virtual shopping cart views in e-commerce interfaces is inefficient, particularly on handheld devices with limited resources, leading to wasted computing resources and a poor user experience due to overhead and latency.
Innovation Solution
A graphical user interface design where the virtual shopping cart view is maintained as a persistent view underneath the active view, accessible without navigating away, using local data storage and touch-based inputs for seamless interaction.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Loss of information
If the user navigates to the virtual shopping cart view to review products, then the user can see the cart contents, but the user loses track of the current active view and incurs navigation overhead and latency
Solution Approach 1:
The virtual shopping cart view is nested within the active view as an overlay layer. When the user accesses the cart, it appears as a modal or popup overlay on top of the current active view rather than replacing it entirely. This allows the user to view cart contents while the active view remains accessible in the background, eliminating the need to navigate away and preserving context.
Solution Approach 2:
The solution adds a vertical dimension to the interface by layering views. Instead of horizontal navigation between views (which causes context loss), the cart view is positioned in a higher visual layer (overlay) while the active view remains in the base layer. This dimensional separation allows simultaneous access to both views without navigation overhead.
2Ease of operation
If the user navigates between active view and virtual shopping cart view, then the user can access cart contents, but computing resources are wasted due to overhead and latency
Solution Approach 1:
The virtual shopping cart view and its data are pre-loaded and maintained in memory before the user actually needs to view them. The cart state is persisted as a state object that updates automatically as products are added or removed, so when the user opens the cart overlay, the contents are already prepared and displayed immediately without requiring a full page load or data fetching operation.
Solution Approach 2:
Instead of navigating to a separate cart page that requires complete data retrieval and rendering, the system creates a lightweight copy or representation of the cart view as an overlay. This overlay contains only the essential cart information and functionality needed, reducing the computational overhead compared to a full page navigation.
3Ease of operation
If the virtual shopping cart view is presented on a handheld mobile device, then the user can access the cart, but the limited screen size and resources make re-navigation cumbersome and resource-intensive
Solution Approach 1:
The cart view is nested as an overlay within the mobile application's active view. This allows the user to access cart contents by opening an overlay panel or modal that sits on top of the current page, eliminating the need to navigate away from the active view. The nested structure preserves the mobile device's limited navigation options while providing easy cart access.
4Loss of information
If the user navigates to the virtual shopping cart view, then the user can review products, but latency is significant on computing systems with slow or poor connections
Solution Approach 1:
Cart data is pre-fetched and stored in the device's memory or local storage as the user shops. The cart state object continuously updates in the background as products are added or removed. When the user opens the cart view, the data is already available locally, eliminating the need for network requests and reducing latency to near-zero even on slow connections.
Solution Approach 2:
A local cache or intermediary storage layer is introduced between the remote server and the user interface. This intermediary holds the cart data locally on the device, allowing the user to view and interact with cart contents without requiring real-time communication with the server. Network connectivity is only needed when synchronizing changes, not for every cart view access.
Data Source
AI summary
Methods and systems for interactions with a virtual shopping cart view are disclosed. A graphical user interface (GUI) is displayed on a touchscreen of a computing system. The GUI presents a virtual shopping cart view. The GUI also presents an edge region of an active view partially overlaid over a first side of the virtual shopping cart view. A first drag gesture is detected on the touchscreen at the edge region of the active view that moves towards an opposing second side of the virtual shopping cart view. Responsive to the first drag gesture, the GUI is caused to gradually show the active view by moving the active view over the virtual shopping cart view corresponding to movement of the first drag gesture.