Mobile Design Patterns for Cross-Platform UI Adaptation

Resolve Bottlenecks,
Find Innovative Solutions
Generate Solutions

Solution Overview

Problem

Existing mobile application development methodologies fail to provide comprehensive design solutions suitable for a wide range of mobile platforms, particularly due to limitations in screen space and computing resources, and are incompatible with the distractions and requirements of mobile computing environments.

Innovation Solution

A design pattern for mobile computing applications that includes a user interface with organized controls in rows, a navigation bar, and an information-display region, allowing for flexible icon management, search functionality, and notification bands, along with personalization and sign-out options, which facilitates efficient and usable interfaces across various mobile platforms like iPhone, BlackBerry, Symbian, and Android devices.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Adaptability or versatility

If existing mobile application development methodologies are used, then development can proceed on specific mobile platforms, but comprehensive design solutions suitable for a wide range of mobile platforms cannot be achieved

Engineering Contradiction:
Improvecompatibility across mobile platformsVSAvoiddesign complexity for multiple platforms
Core Design Contradiction:
Adaptability or versatilityVSDevice complexity

Solution Approach 1:

The patent applies universality by creating a cross-platform mobile application framework that enables a single codebase to deploy across multiple mobile platforms (iOS, Android, Windows Phone, etc.). The framework provides platform-agnostic UI components, navigation patterns, and development methodologies that work universally across different devices, eliminating the need for separate development teams for each platform while maintaining platform-specific optimizations.

Inventive Principle:
Principle #6Universality (Multi-functionality)

Solution Approach 2:

The patent segments the mobile application development process into distinct layers: a platform-independent business logic layer, a framework layer providing common services, and a platform-specific presentation layer. This segmentation allows developers to work with universal design patterns while automatically handling platform-specific implementations, thereby achieving broad compatibility without proportionally increasing design complexity.

Inventive Principle:
Principle #1Segmentation

2Ease of operation

If desktop application design methodologies are used, then comprehensive functionality can be implemented, but the design becomes incompatible with mobile computing environments

Engineering Contradiction:
Improveusability in mobile environmentVSAvoidfunctional limitations
Core Design Contradiction:
Ease of operationVSDevice complexity

Solution Approach 1:

The patent applies dynamics by implementing adaptive UI components that automatically adjust their behavior and layout based on the mobile device's screen size, orientation, and input method. Navigation patterns dynamically respond to user context, such as providing gesture-based navigation on touchscreens while maintaining keyboard shortcuts for connected keyboards. This dynamic adaptation ensures desktop-level functionality is accessible through mobile-appropriate interactions.

Inventive Principle:
Principle #15Dynamics

Solution Approach 2:

The patent transitions from traditional two-dimensional desktop UI layouts to multi-dimensional mobile UI patterns that utilize screen depth, gesture layers, and contextual menus. Information architecture reorganizes content into collapsible sections, modals, and progressive disclosure patterns that maintain comprehensive functionality while adapting to limited screen real estate through spatial reorganization rather than functional reduction.

Inventive Principle:
Principle #17Another dimension (Dimensionality change)

3Adaptability or versatility

If mobile application interfaces include comprehensive controls and functionality, then feature completeness is achieved, but screen space limitations are exceeded

Engineering Contradiction:
Improvefeature completenessVSAvoidscreen space
Core Design Contradiction:
Adaptability or versatilityVSArea of stationary object

Solution Approach 1:

The patent implements nesting by organizing UI components in hierarchical layers where primary navigation and core functions occupy the main screen space, while secondary functions are nested within expandable panels, context menus, and modal dialogs. Controls are grouped into collapsible sections that reveal detailed options only when needed, allowing comprehensive feature sets to coexist with limited screen real estate through spatial nesting rather than functional compromise.

Inventive Principle:
Principle #7Nested doll (Nesting)

Solution Approach 2:

The patent applies periodic action through progressive disclosure patterns where information and controls are revealed in sequences based on user interaction. Instead of displaying all controls simultaneously, the interface presents essential functions first, then periodically reveals additional controls and options as users navigate through contexts, perform gestures, or access specific features. This temporal organization allows comprehensive functionality to be accessed over time without overwhelming the limited screen space at any single moment.

Inventive Principle:
Principle #19Periodic action

Data Source

PatentUS9778920B2Mobile design patterns
Publication Date: 2017.10.03 ORACLE INT CORP
  • US9778920B2 patent drawing
  • US9778920B2 patent drawing
  • US9778920B2 patent drawing

AI summary

A mobile design pattern. In an example embodiment, the design pattern includes a first user interface display screen that depicts a list of user interface controls organized in rows. Each row in the list includes a different set of one or more controls. Each different set of one or more controls is associated with a different set of functionality provided by one or more additional user interface display screens. The example design pattern further includes a second user interface display screen that is accessible via the different sets of one or more controls. The second user interface display screen includes a navigation bar, which includes one or more navigation controls and a title or header identifying a set of functionality associated with the different set of one or more controls. The second user interface display screen further includes an information-display region adapted to display data associated with the set of functionality.