Improve process of adding/editing/removing tags (Part 2)

What Do You Recommend?

The process of editing tags for an object on the mobile application could use some more improvement. It still does take too many steps and more than one screen to manage add and remove tags.

How Could It Be Done?

It could take inspiration from the WeChat tag system’s design. There, viewing applied and available tags, adding and removing tags can all be done in just one screen, with minimal amount of clicks.

The first and unique screen, after clicking on the tag relation, would already show:

  • applied tags, horizontally stacked, not as a list. This helps save a lot of space.
  • text field to search for tags
  • all available tags, also horizontally stacked. Some interesting features of this section:
    • Click on any tag, and it will be applied to the relation.
    • Applied tags are highlighted

When clicking on search box, it shows the keyboard:

When typing in the search box, it shows the list of matching tags:

After clicking on a tag from the list, it is added to the relation:

  • Show the option to create a tag with the searched text, if it doesn’t exist yet (Anytype already does this).
  • Keep the list of matching tags active, and just select the text in the search box, instead of cleaning it. This way, the user can easily keep on adding and searching for more tags.

To remove a tag:

  • click on it, on the section of available tags
  • Then, the tag is highlighted and shows a “X” to enable removing it.

Anytype’s implementation

In AT, it would look somehow like this:

Real World Use-Cases

Adding, Removing, Creating tags.

Additional Context

Related topics:
Improve process of adding/editing/removing tags