Tagging widgets
One of the features of the “My Stuff” eportfolio is the ability to ‘tag’ items put into the application.
A tag is a (relevant) keyword or term associated with or assigned to a piece of information (like picture, article, or video clip), thus describing the item and enabling keyword-based classification of information it is applied to.
Tagging is used on many social software web applications such as Delicious, Flickr and Digg. Google Mail (gmail) uses the term “lables” but they amount to the same thing – being able to apply keywords to items so you can find things in the future.
My Stuff needs to make it clear how tagging can be useful and it also needs to provide a simple and easily understood method for users to add tags to their stuff.
Here are some screenshots illustrating how two popular Yahoo! web apps – Flickr and Delicious enable users to apply tags.
01
02
Once we’ve clicked ‘add tags’ we get a text box and some contextual help.
03
Once our tags have loaded into view via AJAX we can click tags from the pool of tags we’ve already entered for other images that have been uploaded.
04
Here I clicked ‘guycarberry’ from the list of tags and it appeared in the text box. I typed nothing to achieve this, simply clicked on the relevant tag!
05
Delicious uses a different method. In their firefox extension quick tag favelet I begin typing a tag and a drop-down box appears showing me all my exiting tags that begin with the letter I typed. This is a lot like Sony Ericsson’s implementation of predictive text on their current mobile phone range. Therefore some users may be familiar with this style. Even if they’re not, it’s fairly intuitive.
06
Here I’m hovering over the tag ‘wordpress’.
07
Delicious also ‘suggests’ tags i might like to use. Because many users bookmark the same items and tag them accordingly delicious can see what tags are popular with the particular item and suggest them. This is where folksonomy really takes hold. Im not sure if delicious also analyses the target content for words and then suggests – but i imagine something like this is goin on.
08
Here I’ve clicked ‘folksonomy’ and it’s appeared in the textbox – just like Flickr.
What next?
These are interesting widgets and I think we can take inspiration from them. But before I design these things it might be worth discussing the merits of the methods and if they can be reasonably executed within the technical scope of the project.
Over to you..
Tags: Eportfolio, Web design
A few quick thoughts:
a) we need to make it easy for people so I like the predictive text or the click on an exisitng tag..I guess we should just choose the option that is easiest to do and most accessible
b) I think we do need to have a facility to pickup suggested tags and to offer ‘systems tags’. I am not sure what we call the system tags..perhaps we should have the system tag come up in the insert a tag box with a warning not to delete these as they are used in the CV, accreditation compilation
c)I this showing just the common tags used and then offering the see more is sensible
d) I do like the idea about tagging people to help with sharing
December 7th, 2006 at 5:13 pm
Definitely!
A – Thanh, i have no pref for either way. What’s your pref from a technical point of view?
B – I’ll work up some options for this.
C – I agree, especially when you have hundreds of tags as i do in delicious!
D – Remind me a bit more about this one?
December 7th, 2006 at 5:42 pm
Tagging people – I think is something like. If you use tags to make a buddy list – you can then share that Tag. I think initially it would just be for tutors – to makeit easier for them to put people into sub groups. Thanh I think has a clearer view
December 7th, 2006 at 5:44 pm
I want to keep the technical issue out of the design. Design with usability and ease of use in mind.
Once Guy has something working then if its good we will implement it regardless of the challenge!
I held back a bit on Guy’s earlier design so I rather not do it again if the design works and is usable!
The challenge for Tags are:
1) Make it easy to create
2) Make it easy to find the tag and to apply it to content
3) Make it easy to remove from content
4) Make it easy to use the Tag to find things
5) Make it easy to move things from one Tag to the next (our current approach is to use the pending tray – I wonder if we could do it without the need of a pending tray)
December 11th, 2006 at 3:34 pm