Handling tags that can be automatic, public, or private?

Question

I'm building a webapp where I want content to be taggable in a few different ways:

1. Public system-added tags. Non-removable tags added automatically when content is created based on how it was created
2. Private user-added tags. These should only be visible by the user that adds them
3. Public user-added tags. These should be visible to and editable by everyone

I have a few different problems I need to solve as a result:

1. How to visually distinguish the tags when they're displayed
2. How to make it simple and intuitive to type a tag of a given type
3. Should each type of tag have its own namespace?

For display and editing, I'm planning on having a UX that matches Stackexchange's for tags.

Edit UI

View UI

In order to visually distinguish tag types, the most obvious approach that comes to mind is to simply color them differently. I think this could work but could also fail to accommodate color-blind users, especially if color is the only visually distinguishable difference.

The next best approach that comes to mind is to prefix the different types of tags with a symbol. Eg. system tags might appear as !autogenerated, !repeatable; private user tags could appear as *favorite, *review-later, and public tags could appear without a prefix. Or, with color as well:

The symbol prefix approach could work and also serve as a means of distinguishing the tag types when entering them. For example, when searching for content with specific tags, a user could type !autogenerated, *review-later, amazing in a tag search input. In this case, there would be a separate namespace for each type of tag and !amazing, *amazing, and amazing would all be different tags.

The open questions I have around this are:

1. Are symbol prefixes the best approach?
2. If using symbol prefixes, which symbols are best for each type?

I'd prefer to choose symbols which have at least some amount of pre-existing association with the purpose I'd be using them for, but I can't think of any widely known precedents to draw from. The use of a period prefix in Unix filesystems for hidden dotfiles comes to mind as a possibility for the private user tags, but I don't like how subtle and easy to miss the period is. I also wouldn't expect users to be familiar with that convention.

I'm concerned that this approach overall is too convoluted. I'm personally unaware of any software which utilizes multiple types of tags and I imagine this will be a source of confusion for users. At the same time, I do think this functionality is valuable and would require an even more contrived solution to achieve any other way. I am also intending to build the application in a way that favors power over ease of use, so I'm OK with a steeper learning curve for some features.

Answer 1

Instead of colors, icons could be used and displayed in place of ! or *

My first ideas

• A cog icon for automatic
• A lock icon for private
• No icon for public

Users won't have to remember what is automatic/private/public since icons should be self-explaining. Searching for "automatic icon"/"private icon" in google image : it's a lot of cogs/locks.

Searching by tags
I am not sure how often looking by tags and type would be used. I am just making a list of different way to search.

1. A single input : always look for all types of tag. Apparemently it not enough for your use case.
2. An input for tags + select multiple types : all tags have to be of the same types. The select options would default to "All types". Maybe you don't need more, but it's still not enough for your use case.
3. For each tag added, prompt the user to select types, and add as many tags as types selected (with corresponding icon/color). Maybe a toggle "Advanced search" would be nice for users who do not need it.
4. Keep the search like in the first case and add an advanced search option to display 3 inputs (one for each type of tags). Worst case scenario, a tag has to be in all inputs.

Another idea
Instead of having icon/color to display tags. You can keep it as straightforward as it can be:
Public Tags : publictag1 publictag2
Private Tags : privatetag1 privatetag2
Automatic Tags : automatictag1 automatictag2

This would work with the 1st, 2nd and 4th options to search by tag.
You would have the same in edit mode. The "Automatic tags" would be read only ?

Answer 2

– ...the most obvious approach that comes to mind is to simply color them differently. I think this could work but could also fail to accommodate color-blind users... –

Well, this statement is only valid for situations with multiple elements (more than twelve), but in the case formulated in the question with only three options, it's totally meaningless. Here is an example:

About the search options, not only do I think it's unnecessary to insert an extra character at the beginning of the tag, but I also think it's confusing the user by adding a somewhat archaic usage methodology. Whoever wants to search for a tag within a section, as simple as placing a checkbox, radio button, or whatever that allows searches by zone, two simultaneously, or all at the same time.