45

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:

…and generally quite a few of the things you can find in the 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.

enter image description here

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?

4
  • 18
    The new tag editor is AWESOME. The biggest win in my mind is that the user will see the tag summaries, before they choose the tag.
    – user102937
    Aug 2, 2011 at 20:23
  • A minor glitch: In Chrome12 individual elements of the tag list jump around and land in a different location when reselecting already inserted tags.
    – user151803
    Aug 2, 2011 at 21:07
  • @Saul Can you put that in an answer and describe a little more what's happening? I'm not sure I understand what you mean.
    – balpha StaffMod
    Aug 2, 2011 at 21:17
  • more input given in my answer Aug 8, 2011 at 21:02

12 Answers 12

25

Have the synonyms display the excerpt from the master tag.

When typing in something like it says:

a synonym of

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.

(synonym of )

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

1
  • 7
    this is completed Aug 6, 2011 at 9:14
12

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.

modified vertical list

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):

modified vertical list with descriptions to the right

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.

8
  • the clipping of the text at the right would be a showstopper, but if it was two lines of text underneath, maybe. I also prefer tags to render as tags Aug 2, 2011 at 22:03
  • Yeah, I don't see any reason why you couldn't easily fit at least two lines of description text under there comfortably (I probably chose a bad example tag). As far as the tag rendering goes, I agree now that I checked again and saw that selecting a tag puts an actual tag in the field, instead of just the text. Let me see what things look like with that change.
    – Tim Stone
    Aug 2, 2011 at 22:08
  • 1
    getting there, I think the x4 needs to be to the right of the tag. My minor beef is that long lines are harder to read, and side-by-side is preferable to top-over-bottom for comparing "which tag should I use again?" Aug 2, 2011 at 22:27
  • 1
    The line length is an issue, since it's into 120+ characters/line territory. A slightly larger font size might help that and people with less than perfect eyesight, though I'll have to see if that's workable given the limited space for description. With regard to the comparison aspect, the side-by-side does win. However, the current setup is side-by-side and top-over-bottom for > 3 results, which I feel is even more confusing when combined with the less-than-typical keyboard selection caused by a grid pattern.
    – Tim Stone
    Aug 2, 2011 at 22:43
  • It would be nice if there was a metric for determining how often users used a tag correctly versus incorrectly (i.e. it was edited out of their post) to factor into the sort ordering, but there's too many other issues that come into play there to pull useful numbers (if doing so was even feasible in the first place).
    – Tim Stone
    Aug 2, 2011 at 22:46
  • we already use that pattern on /tags and /users so the rubicon has been crossed. Aug 2, 2011 at 22:47
  • Ignoring the keyboard navigation aspect, do you think people are comparing items on those pages though? I know when I use those pages I'm typically looking for a specific item or items with certain attributes, so the scenario seems a little different, even if the information is similar.
    – Tim Stone
    Aug 2, 2011 at 22:50
  • 1
    we've decided that the extreme width is prohibitive here and the 2x3 layout, while not perfect, has a better set of pros vs the cons Aug 6, 2011 at 9:15
8

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.
2
  • 1
    #2 is complete, still looking at #1 Aug 8, 2011 at 21:41
  • Just for the record, #1 was also implemented a day later.
    – balpha StaffMod
    Mar 24, 2012 at 12:55
6

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:

    enter image description here

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

6

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)?

5
  • Yes, if you leave the window (or input box, for that matter), it gets rendered as entered. Can you explain why this would be an issue?
    – balpha StaffMod
    Aug 3, 2011 at 7:15
  • @balpha It violates a major cognitive assumption (nothing happens as long as I don't perform any action) and causes several practical problems (see my edited answer). I'm surprised that the web page even gets the information that it loses focus (it happens even if it remains fully exposed). Why do you do this? Aug 3, 2011 at 10:11
  • I don't see that as a huge issue, but I've come to see your point. And since, in addition, this behavior breaks something else on the iPad, I've changed it so it doesn't happen anymore (not deployed yet).
    – balpha StaffMod
    Aug 4, 2011 at 11:45
  • @balpha I could understand that focusing a different control on the page might do something to the control that loses focus, but if I switch to a different window, I haven't done anything on the page — and I can't think of any reason why you'd ever want that behavior. I've added a couple more feature requests. Aug 4, 2011 at 13:03
  • Yeah, the first thing is just "it's not done yet". The second is worth thinking about.
    – balpha StaffMod
    Aug 4, 2011 at 13:23
5

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
  3. Type more letters, resulting in "stat"
  4. Hit the down-arrow a few more times to select
  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.

3

"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...

5
  • (turn the info link into a popup-display-on-hover)
    – user1228
    Aug 4, 2011 at 20:59
  • 1
    What browser? Any browser supporting HTML5 local storage should save your draft even if you go to a new page.
    – nhinkle
    Aug 4, 2011 at 21:22
  • Is this a bug report that the "you've started editing..." comfirmation thing is broken?
    – balpha StaffMod
    Aug 4, 2011 at 22:07
  • 1
    @nhinkle Not sure where you have that from, but we don't store drafts in the localstorage. Chat does that, but the main site stores drafts on the server.
    – balpha StaffMod
    Aug 4, 2011 at 22:12
  • @balpha really? I thought it was localstorage. In that case, it should work for everyone... when I tried to replicate Will's actions it had saved my edits.
    – nhinkle
    Aug 4, 2011 at 22:13
2

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).

1
  • good point, [esc] will now "escape" the dropdown so you can tab out properly. Aug 6, 2011 at 10:24
2

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:

Tag Hint Example

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.

3
1

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.

2
  • it has never worked this way for inline tag edits, FYI, and it does work on the /ask page (non-inline) Aug 6, 2011 at 9:27
  • I know. But it'd be nice...
    – Shog9
    Aug 6, 2011 at 14:43
1

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:

Screenshot

Shift-selecting inside a tag:

Screenshot

3
  • Hmm, that's intended behaviour. Will think about whether that should be changed...
    – balpha StaffMod
    Aug 8, 2011 at 16:55
  • @balpha: Really? But it closes when you click outside? (At least if the keyboard focus was in the textbox at that point)
    – brunnerh
    Aug 8, 2011 at 16:59
  • @balpha: Added some more bugs.
    – brunnerh
    Aug 17, 2011 at 16:41
0

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .