6

So tagging inputs are pretty common but there are generally 2 different approaches I see for displaying the tags:

  1. The tags are below the input outside of the type-able space:

enter image description here

  1. The tags are inside the input:

enter image description here

Now from a developer standpoint (which is where I am coming from) the second form is leaps and bounds more difficult to implement just from a general standpoint and even harder when you factor in multiple browsers and mobile support but I am trying to think if there is a clear UX reason why one is far superior vs the other.

The second one does seem to have some benefits for keyboard centric users. Most implementations will allow the user to use the backspace to modify the previous tag. Some will allow you to use the arrow keys to modify previous tags too. Other than being able to use the keyboard to modify existing tags, I don't know what other UX benefits the second form has.

One issue about the second form vs the first form is that implementations of the first form that I have seen are pretty consistent which each other. You type in the input box, select your value, and in goes in the list below. There might be some minor difference but nothing that major. The second forms can have some pretty major differences between implementations. I have seen the backspace implemented where in one case it would just convert the last tag to text that can be modified (like with this site) or the it would select the last tag but not do anything until you did something else, or just straight up delete the previous tag immediately.

Now I lean towards the first form with the tags outside of the input and while part of that might be my bias from the coding implementation standpoint, I also think that the user is going to know pretty much how it works if there ever seen a tagging input in this form before.

Are there any other reasons on why the second form of the tags being inside the input is a better UX?

  • 1
    If it helps it took me a while to even realise that you'd be able to type more tags into the second, whereas the first that was instantly clear. – Jack hardcastle Jun 8 '16 at 12:58
  • Well to be far, the second implementation does not seems to incorporate a placeholder value when there are tags entered which could be address by additional code but that goes to my point about how much more implementation details are needed for the second one, and as @kristiyan-lukanov said, leaves more room for bugs and usability issues like this to arise. – ryanzec Jun 8 '16 at 13:34
2

Both are valid and address different application scenarios. What happens in case you've just mistakenly picked a wrong tag/item? How do you delete it?:

In #1: 1. You type in and pick a wrong item 2. You grab the mouse and point to the wrong item 3. Click on the [X] to delete the tag (input blurs) 4. Click on the input to focus it and enter another item

In #2: 1. You type in and pick a wrong item 2. Just hit Backspace to remove it and type in a new value ;)

Which one is the more user friendly? In this case, I'd vote with both hands for #2, albeit it is a lot more difficult to implement ;)

P.S. Both cases usually go with a drop-down, making the implementation even harder.

My2c

  • This is a valid point though I would probably implement #1 where clicking on the delete tag would auto focus the input to prevent the need of clicking the input to add another tag. I would also implement #1 with the tags at the top instead of the bottom which would make the newest enter tags closest to the input. I omitted the dropdown feature as the implementation of that is pretty much the same regardless of the tag implementation. – ryanzec Jun 9 '16 at 15:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.