Color-Coded Tag Interface for Faster Mobile Categorization
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing user interfaces for data categorization in software applications, particularly on mobile devices, are inefficient due to the time-consuming nature of categorizing large data sets and limited screen space, making it difficult to manage and assign categories effectively.
Innovation Solution
A graphical user interface that allows users to input tags, displays existing tags with associated types and colors, enables creation of new tags and types, and provides a user-friendly interface for managing tags, including searching and grouping options.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Productivity
If traditional text-based tag input interfaces are used, then users can input tags, but the process is time-consuming and inefficient for categorizing large data sets
Solution Approach 1:
The system performs preliminary actions by automatically generating tag suggestions and displaying existing tags with matching colors before the user completes the input. This allows users to quickly select from pre-prepared options rather than typing everything from scratch, significantly improving categorization efficiency for large data sets
Solution Approach 2:
The system uses color copying from existing tags to automatically assign colors to new tags. When a user creates a new tag, the system copies the color from a visually similar existing tag, eliminating the need for manual color selection and accelerating the tag creation process
2Ease of operation
If detailed tag information is displayed to aid categorization, then users can better identify and select tags, but the interface consumes more screen space on mobile devices
Solution Approach 1:
The system applies local quality by displaying only the color portion of existing tags in the suggestion list, rather than full tag details. This localized display of critical visual information (color) allows users to quickly identify and select tags based on color matching without occupying excessive screen space, while full tag details remain accessible upon selection
Solution Approach 2:
The system transitions from a traditional text-based one-dimensional interface to a two-dimensional interface that incorporates color visualization. By adding the color dimension to tag identification, users can distinguish tags more efficiently through visual cues rather than reading text, reducing the screen space needed for effective tag selection
Data Source
Figure 1
Figure 2
Figure 3
AI summary
Aspects of the present disclosure provide techniques for providing a graphical user interface. Embodiments include displaying a text input field. Embodiments include receiving an input of at least a portion of a tag via the text input field. Embodiments include displaying, in response to the input and proximate to the text input field, a graphical representation of an existing tag that relates to the input. The graphical representation includes a type of the existing tag, the existing tag, and a colored section on a right side or a left side of the graphical representation having a color that is associated with the type of the existing tag in the computing application. Embodiments include receiving a selection of the graphical representation and displaying an instance of the graphical representation inside of the text input field.