Information Card Sliding Layout for Multi-Directional Feed Browsing
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing information presentation methods are monotonous, often presenting information in a top-down direction, which fails to meet user browsing requirements in other directions and can result in partial information being cut, leading to a poor presentation effect.
Innovation Solution
An information presentation method and apparatus that allows for presenting at least two initial information cards on a stream page, determining a to-be-moved-out card and a target information card based on a target slide unit from a user's slide operation, and sliding these cards in a preset direction to ensure complete presentation without cutting, enabling browsing in multiple directions.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Loss of information
If multiple full-screen pop-up windows are displayed to provide rich information, then information completeness is improved, but user attention is fragmented and important information cannot be highlighted
Solution Approach 1:
The notification system segments information display into hierarchical levels: primary notifications are displayed prominently in the notification drawer, while secondary notifications are displayed in a compact carousel format. This segmentation allows multiple pieces of information to be presented without overwhelming the user, as each notification type has its own designated space and visual weight.
Solution Approach 2:
Different visual qualities are applied to different notification types based on their importance. Primary notifications use larger icons, more prominent positioning, and distinct visual styling to capture attention, while secondary notifications use a more compact format. This local quality differentiation ensures that important information stands out while still allowing comprehensive information delivery.
2Loss of information
If notification icons are made small to display more notifications, then information quantity is improved, but icon recognition and visual appeal deteriorate
Solution Approach 1:
The notification system segments displayed notifications into two distinct size categories: primary notifications with larger, more recognizable icons, and secondary notifications with smaller icons displayed in a carousel format. This segmentation allows the system to display a greater total number of notifications while maintaining adequate icon size for important notifications that users are most likely to interact with.
Solution Approach 2:
The notification carousel dynamically adjusts the display based on user interaction. When users swipe through or tap on notifications, the system provides expanded views and additional information, allowing compact icons to serve as effective entry points that can reveal more detail on demand rather than requiring all notifications to be displayed at full size simultaneously.
3Productivity
If notification information is condensed to save space, then device UI efficiency is improved, but information detail and readability deteriorate
Solution Approach 1:
The notification system employs dynamic information disclosure where the level of detail displayed adapts based on user interaction. Compact notifications serve as efficient summaries in the main view, but when users tap or swipe on a notification, the system dynamically expands to show full details, action buttons, and additional context. This dynamic behavior maintains UI efficiency while preserving access to complete information.
Solution Approach 2:
The system performs preliminary action by pre-processing notification content into hierarchical layers of information. Essential summary information is prepared and displayed in compact form immediately, while detailed information is pre-loaded and ready to be revealed on demand. This preliminary organization allows the interface to be space-efficient without sacrificing information availability.
4Area of stationary object
If secondary notifications are displayed in a compact carousel, then screen space utilization is improved, but user access to notification details becomes less direct
Solution Approach 1:
The notification carousel incorporates swipe gestures that provide tactile feedback and smooth animation transitions, creating an intuitive interaction pattern similar to scrolling through a feed. This gesture-based interaction allows users to quickly browse through multiple compact notifications with minimal effort, making the compact format as accessible as traditional full-size notifications.
Solution Approach 2:
When users interact with compact carousel notifications, the system creates and displays a full-size copy or expanded view of the selected notification. This copying mechanism allows users to access complete notification details in a familiar full-size format while maintaining the space-efficient carousel display for browsing, effectively combining the benefits of both compact and full-size notification formats.
Data Source
Figure 1
Figure 2
Figure 3
AI summary
Embodiments of the present disclosure relate to an information display method and apparatus, a device, and a medium. The information display method comprises: displaying at least two initial information cards on an information flow page, the information flow page comprising a plurality of rows consisting of the initial information cards, and at least one row of the plurality of rows consisting of more than two initial information cards; in response to a first sliding operation in a preset direction, determining, according to a target sliding unit corresponding to the first sliding operation, a card to be removed of the at least two initial information cards, and sliding the card to be removed out of the information flow page in the preset direction; determining at least one target information card according to the target sliding unit; and sliding other cards except the card to be removed in the at least two initial information cards by the target sliding unit in the preset direction, and sliding the at least one target information card into the information flow page in the preset direction until the at least one target information card is completely displayed.