List autocomplete delete/edit behaviour

Question

I am not sure what these widgets are called, but they are the ones used to assigned tags to questions on SE and appear in webmail apps such as GMail and Hotmail as well:

If someone could chime in and tell me what they are called, that would be great, but I will call them "List autocomplete" for now.

When using these widgets, there are 2 implementations of "delete", that is when a user presses the backspace key.

On SE, the behaviour is to turn the previous item into a text field, and allow the user to change the text of that tag. We can also click on a previous tag and edit it (the 1, 2 are steps to go through when the backspace key is pressed):

---

The other behaviour is to select the previous tag the first time backspace is pressed. The second time it is pressed, the whole tag is deleted. Editing a previous tag is not possible (the 1, 2, 3 are steps to go through when the backspace key is pressed):

Which approach is better? Have any of you done any testing to determine whether users will prefer to modify the previous item or get rid of it completely? What do users expect when using these type of widgets? Any studies/testing data would be nice to have too.

Answer 1

We have two cases here:

1. The tag vocabulary is fixed.
2. The tag vocabulary can grow.

Use number 1 for things that are unlikely to evolve with time, like the number of states in a country. When this is the case, you're not likely to have similar words, and when making a mistakes is very useful just to type twice backspace or clicking the x and delete the entire word rather than characters. It will also reduce the chances of typos.

Use number 2 when you have a base vocabulary that you know that can grow, but you want to provide the users with a sufficient base vocabulary that allows them to pick from choices available, but allows you to submit your own after typing a ",". Then the new typed keyword becomes part of the vocabulary and allows other users to use it. Once the "," is pressed the new keyword becomes unavailable for editions, as the only way to delete it is by pressing backspace twice, or clicking the x icon.

In my opinion both examples show to some extent the same functionality, but one is closed to submission (1) and the other is open (2).

So basically the question is whether you'd like your users to submit keywords to the vocabulary or not.

In terms of functionality, I'd use both approaches: the X and the Double-Backspace to delete.

The whole deal forces users to double-check their input if available.

Answer 2

Both have a hidden feature: how to delete.

But both examples have a X-Button at the right. This one gives you a hint that its deletable - its affordance. Usually, this one is clickable, too.

First example:

• I assume its hard to hit it at the first example as there is a decent chance, that it turns into a textfield. Now you have to delete it using keys.
• I call it tag myself, and usually Tags are not editable. This implemention is different, which doesn't speak for its conformity.
• Its not visible, that this Tags are editable. No affordance - a hidden feature.

Second example:

• Selection by clicking on it, is a common behaviour. Now, you have to delete by pressing delete key once.
• I guess its easier to hit the X-Button. Otherwise you just marked the tag, which is okay, but it doesn't chnage its behaviour.

So, I would go for the second, because of its better affordance.

No studies at hand, sorry.