Should tags be inside or outside the input field

Question

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:

2. The tags are inside the input:

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?

Answer 1

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

Answer 2

I've came to a point when the tag input had more than 1k items, and sending the input value to the backend started to give "414 Request URI too long" errors. I will now switch the tags to stay outside the input to send only the changes to the backend. The delete button will remain to delete the tags, and adding new tags will clear the input. (Until I find a better way to handle 1k tags)