«« Lists as Searches Check out José González »»
blog header image
FanConcert is Tagging with AJAX

I'm still working on changing FanConcert's lists to searches. I'm almost there: just a few more attributes need to be searchable.

While I was doing that I was getting feedback about how artists were tagged. People were checking on boxes but not clicking on the link to tag the selected artists, so no artists were being tagged! Definitely a usability issue.

To fix the problem I've used some AJAX magic to tag artists in the background and made tagging more like a form submission, which makes it more obvious that you need to click a button to tag the artists.

I've used the return value from the background asynchronous AJAX form submission to update the tags on the page the user is looking at. It looks amazing in action. You can try it out by logging into FanConcert and doing an artist search.

The best part? All of the AJAX code was part of Ruby on Rails already. All I did was write some JavaScript to update the tags on the page with the values returned by the AJAX code. Once I figured out how Rails could help me, it was a dead simple and clean implementation.

Why can't artists just be tagged when you check the box? Because the checkboxes will be used for other things in the future, like FanConcert's so-called 'bulk editing' -- editing the same attribute for more than one artist at once -- and also 'bulk moderating/scoring'.

Posted at November 19, 2005 at 10:40 AM EST
Last updated November 19, 2005 at 10:40 AM EST
Comments

Is asynchronous AJAX like NIC Cards and RAM Memory? Anyhow, enough with that. I assume that tagging artists will be much more widely used than bulk editing. This is especially true with all the artists you click needing to be on one page. Maybe since its a common used feature, each artist could have their own special button for selecting whether or not they are on your list. Since we're talking about usability, you should put the button at the bottom, or a copy of it at the bottom, where people expect buttons to be on web forms. Also, the word Go isn't very descriptive. Use something like Submit, especially because i'm not going anywhere. This AJAX stuff is a little of a usability issue on the web, because sometimes it's hard to see if anything even happened. For those of us who know how the web works, it seems a little strange when you click on a form button, and don't see anything noticable happen.

» Posted by: Kibbee at November 20, 2005 03:18 PM

1. Asynchronous in a web browser means that you can still do stuff in the main window while the request is made in the background. Most browser requests are synchronous and take up the whole page: you have to wait until it loads to do things. The term 'asynchronous' is used in this context for AJAX.

2. I'm not sure how much tagging will be used compared with editing or moderating. If I had to guess, I'd say people will be moderating more than tagging/untagging or editing. It's one of those wait and see things, I think.

3. I agree the dropdown+button should be at the bottom of the page as well. Gmail does this.

4. Good point on "Go". I'm not so sure that "Submit" is very user friendly. How about "Do" or "Perform" or something like that? The dropdown is a list of actions for the selected objects. When you edit multiple objects, you do actually "go" somewhere else, so it works for that (only on concerts so far).

5. Seeing if something happened is fairly apparent to me. If you select some artists and tag them, the tags appear. If you select some artists and untag them, the tags disappear. Maybe I'm missing something?

» Posted by: Ryan at November 20, 2005 03:27 PM

1. This was a joke on the redundancy. AJAX stands for Asynchronous Javascript and XML, so the asynchronous was redundant, like in NIC Card, and RAM Memory. I guess I'm a little too subtle.

2. I guess it is hard to say about whether or not more tagging or editing will happen. I think it depends a lot on the user, and their personality. Mostly not untagging, but probably a lot of tagging will happen as people try to keep their list up to date.

3.......

4. Go doesn't work for tagging and untagging, which are the only 2 options I saw, but I only looked at artists. I recommended submit, because it's the generic word for sending data out over the web from the form you just filled in. You use a Mac, so you should be all over the descriptive buttons.

5. My problem is that sometimes I don't really see the tags appear. If you aren't watching, they just kind of show up, and you didn't realize they weren't there to begin with. This happens more when there was already tagged artists on the page. Maybe the new tags could show up in a different colour. Maybe I'm just old skool, and I really want to see the page refresh. Also, it might be a good idea to uncheck the boxes once the action is done. This may be useful if you tag some artists, and then want to untag another. If the first one stays checked, it could become unchecked.

» Posted by: Kibbee at November 20, 2005 04:40 PM

1. Funny! I like "ATM machine".

2. I agree it will depend on the user's "personality". If they are a reader and not a submitter or moderator, they will just use tagging. If they are big submitters, they'll use editing and moderating more. That's a good reason to treat every action equally and put them all in the dropdown.

4. It's interesting you say I should be "all over the descriptive buttons" and yet you recommend 'Submit'. I'm leaning towards 'Do' and leaving the description to the action names in the dropdown, where there is more room.

5. Gmail leaves mails checked after you label them. It may seem like a cop out to copy Gmail but obviously they've worked on their usability more than I have (and they've had a long beta period), which leads me to believe that after some formal/informal analysis they thought leaving them checked after an action was a better idea. To uncheck all of the selected objects, there's a link to select None.

In general, I don't have much of a problem 'borrowing' usability from other apps. I think I'm being creative enough with FanConcert without having to be original all over the place. If a user can see some familiar things, that's good -- it will help them pick up the app faster.

» Posted by: Ryan at November 20, 2005 04:58 PM

I think that "submit" might only be good for someone who regularly builds web apps. For everyone else it isn't a good thing.

I don't think that I have the best choice of labels, but if it's for a search that's already labelled as "search", then I think that "go" is fine. For a tagging button, maybe "tag it" or something... just not "submit"...

» Posted by: Jim at November 21, 2005 07:37 AM
Google
 
Search scope: Web ryanlowe.ca