Feedback wanted: Improved tag editor

Question

Now deployed everywhere

We're working on improving the tag editor (mainly for the "ask question" page). The most important reason is this:

We have awesome tag wikis that are being created and curated by the community, to help people understand what a particular tag is about, and what they need to know when using the tag for a question – but when that information would be by far most important (namely, at the moment a question is being tagged), that information is nowhere to be seen*.

^{*except when you hover over the preview tag that magically appears below the actual input box. Not quite in your face.}

We're giving you a simple autocomplete box, but that's it. Or, as Jeff so eloquently said in one of our Monday team status reports:

This Week

• begin next-gen tag autocompleter. "javascript (54710)" is not cutting it any more

Here are a few examples of the kind of problems we hope to take on with this:

• Suggest disambiguation to user when tagging
• Is there any merit to extending the tags Wiki?
• Rename or remove [old-games]
• Improve display of tag synonyms

…and generally quite a few of the things you can find in the tags tag here on Meta.

It's not quite done, but we're getting close, so we've put up a play ground page here on Meta: https://meta.stackoverflow.com/posts/new-tag-editor

It's now activated; currently here on Meta only.

Please have a look, play with it, and give feedback. The single most important question is:

Will it help improve tagging of questions, and what can be done make it help even more?

Answer 1

Have the synonyms display the excerpt from the master tag.

When typing in something like possible-bug it says:

possible-bug

a synonym of support

If you used the excerpt from the master tag and told them it will be corrected, it should help them understand both what the real tag is and what will happen to their chosen tag.

possible-bug (synonym of support)

This tag indicates a request for assistance with one of the site's features.

Answer 2

Having additional tag information readily available when tagging questions seems like it would be really beneficial, and I like the general approach you've taken. I am, however, kind of partial to the vertical list in these kinds of cases.

Taking that into account, and incorporating random's suggestion, I messed around with it a bit in Inspector Tools and came up with the following. I still feel like this isn't perfect, and I'm not sure how this would look with a lengthier description text, but it feels more natural to me.

Another approach would be to put the description next to the tag to conserve vertical space (~350px with six results versus ~500px), although I couldn't get that to turn out in a way I really liked (synonyms look especially off to me. I do like the increased font size though):

I was also considering what might happen if you gave people positive feedback on tags that were well-related to the other tags they were using, but I feel like there might be too many issues with trying to make that work effectively.

Answer 3

A couple ideas:

• For sites with obligatory tags, those should be suggested as soon as you focus the box, perhaps with a "Obligatory tags (you must use one of these)" header.
• For sites with moderator-only tags, those should not be suggested unless you are a moderator.

Answer 4

The new information is great, but the layout, and the select mechanism, busts the way people are used to dealing with auto-complete suggestions.

Grab 5 strangers and have them try to tag a question while you do nothing but watch.

Two possible alternatives:

1. Keep the auto-complete behavior that people are slowly learning to use on the web (Google-style). But, when finished or upon submitting the question, throw up a confirmation that asks the OP to verify that the tags (with extended info displayed) are applicable.

   OR

2. Keep the linear arrangement and arrow-down behavior, with Tab as a select. Maybe:

   

   Note how the drop-down suggestions follow the currently inputting word.

Answer 5

Showing the tag wiki excerpt is a major improvement. Thank you.

The font of wiki excerpts is too small. (Wiki excerpts already shown when you hover your mouse on a tag button now have the same problem.) Sure, small fonts allow cramming a lot of information in a short space, but that's no good if you can't read this information without a magnifying glass.

I would like some feedback on the number of matching tags when I enter a partial tag name. E.g. if I enter edit, I want to see “21 total” or “15 more” or some such indication.

I'm torn on the value of presenting a rectangular arrangement rather than a list of rows. The narrow columns for short text are nice, but when a tag lacks an excerpt, that means a lot of ugly blank space.

When I unfocus the browser window or switch tabs, the tag is considered entered. E.g. type alw, switch to a different window, and the display changes to alw⊗. This is disconcerting: the UI is reactive, in the sense that it reacts to my actions, and here something happened in a tab where I did nothing. A few practical problems this causes:

• I wanted to take a screenshot of the UI while entering a tag name, but couldn't, because any reasonable method I tried to get a screenshot tool (invoking my screenshot browser extension, invoking my window manager screenshot command, focusing a shell window to start a screenshot tool) was enough to complete the tag entry.
• Sometimes when entering tags I go and check the tags on a similar question. With this UI, the tag name I might have been typing would be entered, which translates into user annoyance (if I notice) or a bogus tag (if I don't notice).
• With focus-follows-mouse, merely moving the mouse can cause a tag to be entered, even if you don't type after the mouse has moved.

Tags now look like buttons; this creates the expectation that they will act as buttons. I expected something useful to happen when I clicked on one, probably open /tags/$name − in a new tab/window, since I'm clearly doing something important in the current tab. Also the usual little box with the excerpt, count and info link should appear on mouse hover.

It would be nice to have a visual indication when creating a new tag. I don't know what's appropriate here: bold? underline? a different color? a new indicator? ䷀ (just kidding)?

Answer 6

Small problem with keyboard navigation: once I start using the arrow keys to select a tag, I can't continue typing the tag (without putting focus back into the box).

Scenario #1: typing to narrow the list

1. Start typing "sta"
2. Use the arrow keys to select stackoverflow
3. Type more letters, resulting in "stat"
4. Hit the down-arrow a few more times to select status-norepro
5. Hit tab to autocomplete the selected tag.

In the new tag editor, this scenario fails at step #3 - once the arrow keys have been used, no more letters can be entered. Also, tab doesn't work in step 5.

Scenario #2: typing to expand / correct for fat fingers

1. Start typing "edo"
2. Hit the down arrow to select
3. Note you fat-fingered that "o", and hit backspace
4. Hit down-arrow to select again, now that the proper items are in the list

In the new tag editor, this scenario fails at step #3 - hitting backspace once you've used the arrow keys will trigger browser navigation to the previous page in history, forcing you to start over again.

Answer 7

"This post is crap. I'll edit to improve"
spends an hour editing to perfection

"Spectacular! Now, to edit the tags!"
edits tags

"Oh, a new tag popup!"
reads suggested tags

"Interesting, I wonder what that tag is about..."
sees the info link

"Lemme hover over the info link and see what the popup says..."
hovers

"Uh, so, well it doesn't do anything on hover. Clicky."
page changes, edits lost

FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF...

Answer 8

As i just submitted this question i would like to note that the tabbing behavior of the new tag editor is not quite thrilling to me either. I did not ask for suggestions and in my personal opinion TAB should switch to the next input control and not to some suggestion in a popup making me hit it six additional times to get were i want.

Being able to navigate the list with arrow keys should be fine but in the vast majority of the cases i just want to get the hell out of the box to the save button (those cases are when i see a question and just want to retag it, so i know beforehand what tag i will add).

Besides that i like it, even though i would greatly appreciate some profile option to not even show the dropdown until i press the down arrow or click on some button (as with a combo box).

Answer 9

Input: It works ok, and looks nice, but it takes longer to run than the dropdown list, and a lot longer when you're talking multiple tags.

Here's my repeat of my answer here on how to improve getting tag info to question askers that would keep things simpler (on the front end):

Maybe we could add a new thing to the Tag Wiki for the tag dropdown, call it Tag Hint, and it could show a very short tagging info piece, like so:

It would really help to have something, since most users don't hover over the tag for the tag excerpt instructions before they post.

Additional Input: It's clunky to use the keyboard, so I've ended up having to re-edit a few times. Could we smooth out that interface? Note I think some of the clunkiness is just the slowness, so that my keystrokes are getting there before the dialog has regenerated.

Answer 10

Not a bug, but since you're working on or near this... It would be really nice if the inline tag editor submitted the edit when I hit the enter key. Having to tab all the way over to Save Tag Edits is tedious.

Answer 11

Possible Bug: When having tabbed out of the (opened) dropdown it does not disappear, obscuring the save and cancel buttons.

Edit - More possible bugs:

• When pressing Ctrl+Z when on a tag it will be completely deleted (after all user-made changes have been reversed).
• Ctrl-Clicking the learn more-link will not open it in a new tab but close the dropdown menu. (Same for middle-mouse-click.)

Edit - Even more:

Delete tag or part of tag, selection includes left boundary:

Shift-selecting inside a tag:

Answer 12

I would prefer bold-only instead of bold and underscore for matches because my mind always treats underscores as links (and I don't see them used on SO anyway).

Another thing that bugs me is I used to press Enter instead of Space to select a tag and now Enter saves my edit right away. But this is probably by design so I'll have to re-learn.