Dynamic Header Space Adapting to User Scrolling
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
The static nature of mobile app header bars, which transition from branding information to navigation bars between screens, can be confusing and cluttered, leading to lost information, especially when users scroll through content, causing branding information to disappear from view.
Innovation Solution
A dynamic header space within a mobile app that changes based on user interaction, such as scrolling, by comparing user interactions with stored data to display relevant information, like the title of an article, in the header space, even as the user navigates through content, by adjusting its size, shape, or content.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If the header bar displays branding information on the first screen and navigation bar on subsequent screens, then navigation functionality is provided, but the user interface becomes inconsistent and confusing
Solution Approach 1:
The header bar dynamically changes its content and appearance based on the current screen context. It transitions from displaying branding information on the first screen to displaying navigation controls on subsequent screens, making the interface adaptive rather than static. This resolves the contradiction by allowing the header to serve different functions appropriately while maintaining overall interface coherence through consistent behavioral patterns.
Solution Approach 2:
The header bar modifies its parameters (content, appearance, functionality) based on the screen context. It changes from showing brand logos and names to showing navigation buttons and back controls depending on whether it's the first screen or subsequent screens. This parameter adaptation allows the header to provide appropriate navigation functionality while maintaining interface consistency through predictable transformation rules.
2Device complexity
If the header bar remains static during scrolling, then the interface structure is simple, but important information like article titles scrolls off the screen and is lost
Solution Approach 1:
The header bar transitions from a static element to a dynamic one that responds to user scrolling actions. When the user scrolls down, the header automatically updates to display the current article title or section heading, ensuring important information remains visible. This dynamic behavior prevents information loss while adding intelligent responsiveness to the interface.
Solution Approach 2:
The header bar implements feedback by monitoring the user's scrolling position and automatically updating its content accordingly. As the user scrolls through an article, the header detects the current position and displays the relevant title or heading, creating a feedback loop that keeps important information visible without requiring the user to manually return to the top.
3Loss of information
If the header bar changes content frequently to reflect current context, then information visibility is improved, but the interface becomes cluttered and complex
Solution Approach 1:
The header bar applies local quality by displaying different types of information in different contexts. Instead of showing all possible information simultaneously, it selectively displays only the most relevant information for the current screen or section. This localized information display maintains clarity while improving visibility of important content.
Solution Approach 2:
The header bar uses partial action by displaying only the essential information needed at each moment rather than all available information. It shows the current article title or section heading without cluttering the interface with additional details, providing just enough context to help the user understand their position and navigate effectively.
Data Source
AI summary
Disclosed is a method and system for transmitting, by a processor to a client device, a software application (e.g., a mobile app or a web page) configured to load, by a computer processor of the client device, a graphical user interface (GUI), the GUI including a header space and a content display space. The software application is further configured to display, by the computer processor, the GUI in a first frame, detect, by the computer processor, user interaction with content displayed in the content display space of the GUI, compare, by the computer processor, the user interaction with a set of stored user interactions, and, based on the comparing, change, by the computer processor, the header space in the GUI in the first frame.