Scriptaculous Autocompleter
The sponsor of our social network site came in a few days ago and was upset about the autocomplete behavior of the tag field at our site. He said: “when there’s only one tag matched and suggested in the list I cannot choose it”. I was kind of confused, but maybe he is more an ordinary user than me.
What was the problem? When the Scriptaculous autocompleter only get one item to display it is already selected and it just to (1) hit the tab (2) hit enter or (3) click on it with the mouse to have it populated in the form field. But Bob was really eager and said that he wanted to select the suggested tag with the arrow keys (although it was already selected and marked visually as such) and that he had committed usability testing using his wife and that she couldn’t manage the suggestion menu when there was a single match.
The Script.aculo.us behavior has already been a standard when it comes to the autocompleter and it works the same on other suggestion lists like the one in Google Bookmarks.
Another thing about the autocompletion, it get’s kind of confusing when there is a short delay in the network. When you have typed a few characters, up comes a suggestion based on the very first chars you typed.
I wonder what the average user can tell a server based auto suggestion list from the one populated by the browser that suggests strings based on what she typed before in a field like that.
Speaking of autocompletion, what does you guys think of the autocomplete attribute and how do you handle it when trying to be XHTML Strict valid?
10 comments so far
Leave a reply
[...] 25, 2007 at 10:12 pm · Filed under pownce, twitter, mvc, performance, tags Speaking of suggestion of tags for post and bizbob, he added an enhancement request to our Trac DB proposing that the tags [...]
Hi Jane,
Have you set the frequency parameter in the the autocomplete instance? The default value is 0.4 but sometimes you get better UX if you set it to something like 0.2 or 0.1.
Keep up the good work with the site, I’ve submitted a couple of suggestions on your beta tester discussion board that I really think your community should consider.
Michael,
Yes I’m using the 0.1 frequency in the autocompleter. I’m currently playing with the “indicator” parameter animation to get a better user experience. Still don’t know exactly where to place the loading image though.
Speaking of indicators, have you seen the awesome Ajaxload gif generator site?
http://www.ajaxload.info/
And thanks for your suggestions on our beta forum; I’ve logged them all in our Trac system so I expect that they will be implemented into our next beta release.
But Jane, why does our autocomplete suggest all of the tags, including the ones you have already filled in, instead of just the one you are currently writing?
That’s the way I’ve seen it works on many other sites-
BizBoy, you need to choose to either (1) add one tag at a time or (2) a bunch of them in one action. We are using the second approach, mostly because it is faster for the user. On the other hand, it is not so tempting to add crap tags if the user is forced to do (1) and then hit the add button for each tag.
I will test out (1) in the 0.2 version. If TechToby is fine with changing the controller.
Flickr is not using an autocompleter at all, but a cloud you can pick from, not so interactive. Picasweb is not suggestion anything at all. In Google Documents after the UI re-design, you can only add one label in each action by dragging the document to the “folder” as they call it nowadays. del.icio.us is not suggesting anything either while digg.com is using one topic category per item.
The most common problem with using tags/labels to classify content is that you have too many general tags that don’t help you or other users to find the right piece of information in the end. I think ContentConnie has an opinion about this, after all, she is a librarian.
I think Google Bookmarks is the closest example to what BizBob suggest. They display suggestions the last word the user types while keeping the other tags in the input field. But they have their own lib and are of course not using script.aculo.us as the rest of us are.
As an accessibility consultant, I’m often surprised with UI developer’s obsession of being 100% valid. From an a11y perspective, it is much more important to not mixing up the two auto complete menus, the one that the browser provides and the one that a site can implement. For users with screen readers this is however not often a problem since they are not using autocompletion so far.
The site version of an auto suggest menu is btw a good example of not messing things up too much for a disabled user since you can do pretty well without the suggestions and you can still tag your stuff with JavaScript disabled. Auto populated content that you really need to read is much more problematic at the moment.
Another approach to tagging (or categorization as they call it) is the one that your own blog software WordPress is using, i.e. not suggestion anything at all based on what you write but showing you previous tags in a checkbox list below. Might prevent users for applying the tag spamming syndrome.
your sponsor’s wife might be interested in the autocompleter’s ‘autoSelect’ option. eg:
new Ajax.Autocompleter(
‘autoCompleteTextField’,
‘autoCompleteMenu’,
”,
{autoSelect:true});
Thanx for the tip. Didn’t know about the autoSelect option, it is not in the documentation but I can see it is in the source.
We’ll try it out in the next deploy. It’s always good to keep your sponsor’s wife satisfied.