As part of our recent interface update we added the ability to tag resources in Onehub. From a programmer's perspective, tagging is a relatively simple feature to implement and support. However, from a user's perspective, tags can be difficult and cumbersome to use. In order to avoid the mistakes of the past, Matt and I methodically researched how other teams have approached this problem. Disappointingly, we found that most applications use a simple input box and expect their users to manually ensure the input is correct. However, we were quite impressed with the solution provided by Facebook. Mimicking a modern email client, Facebook's friend selector makes it easy to quickly select a few individuals from your friend's list. The familiar interface convention dramatically reduces the learning curve required to take advantage of tagging. Although Facebook's use case is slightly different, we knew we wanted our interface to function similarly. Fortunately for us InteRiders and Venado had created an excellent Prototype script that has proven to be a great starting point.
The most important feature of the tagging interface is its usability. After testing the new interface with a few users, there were two lessons that stuck out. First and foremost, users instinctively want to separate entries with spaces. This realization uncovered a subtle yet very frustrating flaw in the Facebook interface. Appending new entries to the list requires the user to either select an entry from the autocomplete box or use a comma (,); but there is no indication of this!
In fact, the interface would seem to indicate a space as the primary separator. The existing entries are separated by a visual space, and any commas the user may have entered are removed when the entries are "converted". Attempting to "convert" a new entry to an input with a space results in an invalid entry which is subsequently deleted. This issue does not arise very often on Facbook because most entries are created out of the autocomplete (you cannot message people you are not already friends with), however in our case, users creating new tags would have a very frustrating experience. There is a notable caveat to using spaces as the primary separator, it makes it impossible to use multi-word tags, but we found this trade-off was more than justified by the increase in ease of use and speed.
Second, we found that users are often unsure of what tags are available. To help them select the best tag possible, we suggest tags that have already been used based off what they have already entered into the input field.
Users may select from the autocomplete or continue typing to refine the search. This feature prevents the frustration of having multiple permutations of the same tag (e.g. pri:1 priority:1 priority-1...) which defeats much of the utility tagging provides. Finally, for the power users, the entire interface is navigable with the keyboard to enable managing large sets of tags.
In order to get this desired behavior, we made some changes to the script. We extracted the creation of new tag elements into its own method:
Now we were able convert any remaining input when the input box loses focus. (Note: this ensures their is no autocomplete box up, since the user could be moving to it):
Also, we enhanced the behavior of the Enter/Return key to function like the spacebar if there are no autocomplete suggestions.
Tags can be an incredibly handy way to create ad-hoc relationships, and we think the Onehub tag interface provides a powerful, yet intuitive, means to create and manage them.
What is Workspace.me?
Workspace.me is a social news community for Enterprise 2.0 and online collaboration stories.
Comments