Image-Based User Interface Grid Layout for Mobile Display Optimization
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
User interfaces on mobile devices with limited display areas face challenges in presenting large amounts of content, leading to negative user experiences due to the need for extensive scrolling and navigation, especially when non-essential information occupies screen space.
Innovation Solution
The system prioritizes the presentation of images by excluding non-image data, allowing users to view more content at once by displaying images in a grid arrangement with category headings remaining stationary, and provides additional information upon image selection without navigating away from the main interface.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Loss of information
If large amounts of content are presented in a single user interface, then information completeness is improved, but user experience deteriorates due to extensive scrolling and navigation
Solution Approach 1:
The patent segments the user interface into multiple priority levels (first priority image data, second priority non-image data, third priority additional information). This segmentation allows the interface to display only essential content at each level, reducing scrolling while maintaining information accessibility through hierarchical organization.
Solution Approach 2:
The patent introduces a new dimension of information organization by implementing a priority-based hierarchical structure. Instead of linear scrolling through all content, the interface organizes data across multiple priority levels, allowing users to access information by priority rather than by scrolling through a single long list.
2Loss of information
If non-essential information is included in the display, then information completeness is improved, but display area efficiency deteriorates
Solution Approach 1:
The patent applies local quality by assigning different priority levels to different types of data. Image data is assigned first priority and displayed prominently, while non-image data is assigned second priority and displayed in a secondary manner. Additional information is assigned third priority and only displayed when explicitly requested. This local differentiation of quality allows optimal use of display area.
Solution Approach 2:
The interface dynamically adjusts what information is displayed based on user interaction. Initially, only first priority image data is displayed. When users interact with the interface, second priority non-image data becomes visible. Further interaction reveals third priority additional information. This dynamic adaptation allows the display area to be used efficiently at each stage.
3Measurement precision
If additional information is provided through separate queries, then information accuracy is improved, but time consumption increases
Solution Approach 1:
The patent implements preliminary action by pre-loading and organizing additional information (third priority data) in the background before the user requests it. When users interact with the interface to request more information, the data is already prepared and can be displayed immediately without requiring separate queries or loading time, thus maintaining information accuracy while reducing time consumption.
Data Source
AI summary
User interfaces that prioritize the presentation of images over other content are generated to facilitate user understanding of available items, especially in cases where a user is accessing a website using a mobile device or other device having a limited display area. When an interface containing images and non-image content is presented, such as a search result output, the user may select an image view in which each image is presented in association with a category of the image, while excluding output of non-image content. User interaction with a particular image may be used to access the non-image content associated with that image. In some cases, user interaction with an image may cause presentation of a three-dimensional model of the depicted item, which may be rotated and magnified through additional user input.