Fading Waypoints

Your post on colour tagging got me to thinking about labels in the Mac OS. For as long as I can remember (well at least system 7), Apple has provided the user with the ability to apply a coloured label to any file on the system.

By default, the labels are the colour names, but his can easily be changed in the finder preferences:

Once you set up your labels, it is a simple matter of applying it to a document through a contextual menu:

As you can see, the colour appears directly on the view of the file in the finder:

You can also use the colour/label as a search criteria:

Some limitations:

Only Seven Labels
This is probably due to the limitations of our short term memory.

No ability to change the colours
Not a huge deal, but I like to think I can customize everything

Labels are Global
You cannot have contextual labels for element in particular locations. A subset of labels for my thesis, such as papers, presentations, projects, homework etc… is not possible.

While I wouldn’t call labels a rich form of tagging, it does offer rudimentary tagging to your file system.

Technorati Tags: Labels Mac OS X tagging as interface Tagging UI

These were some concepts we wanted to see in a mock up. Currently I am thinking of other ways icons could be more utilized in tagging user interfaces.

Phillip J. got me thinking, about the idea of what he calls egotagging during our discussion at northern voice earlier this month. The idea that if you bookmark something first, you should get some kind of reward as feedback and that should be represented in the interface is an interesting one, although most likely benficial to power users only. A user could build a strong reputation as a “pro boomarker” thereby adding more value/weight to the resources she tags.
In general, I think the del.icio.us UI could employ a tad more color and interaction, (and icons!) but I believe in the concept of slow evolution as well. These mockups show an idea for the “first tag” feedback and introduces the idea of tagging with a diamond (the equivalent of googles’ stars). I think these would also be a FAST and easy way to copy other users’ links into your own collection. (just diamond it!)

‘First Tag‘ and ‘Diamond This‘ input interface

‘First Tag‘ and ‘Diamond This‘ feedback interface

---

This was an early thought on introducing color as a tagging element. Using color maps to visualize a tag collection has endless possibilities, but at the very least you could browse your collection by the “dark blueish” color . The feedback UI does not mean anthing too specific, just that each resource would be assigned a color label and it’s proximity to others would be further defined by its position in the color map. The draw back is that it would not allow you to specify two tags with the exact same color.

‘Color Tag‘ input interface

‘Color Tag‘ input interface

Technorati Tags: color tag first mark icons in tagging tag rank Tagging UI Tagging user interface

Two more sketches, both attempts to combine the typical cloud and the associated tags into a single cloud element. The relationship is determined by the number of resources each tag share together, compared to the number of neighbours that tag has has over all resources.

Sketch 1:

The default view is a normal cloud, but as you rollover each tag, the associated tags appear around the tag in a sphere. the biggest issue with this (beyond the messy CSS) is tags with many associations start getting cramped for room, especially at the top and bottom of the sphere. I could set it up with a dynamic radius, so tags with more associations had larger radius, but that could get out of hand, and start drawing off screen, which I definitely want to avoid.

Sketch 2:

Same initial state as #1, but in this instance, the associated tags get a background and colour. I am also trying to suggest the strength of a the relationship between the tags by modifying the tags brightness. The brighter the colour, the more closely related the tags are. It’s pretty subtle at the moment, but it’s not too bad.

I should point out that I have only tested these I FireFox; I’m not looking to publish these formally, and am not interested in testing and debugging in other browsers at the moment. So if these don’t work, do yourself a favour and get FireFox already.

Technorati Tags: delicious API tagcloud tags as interface

Design Theory	Tag Clouds User Interface
The elements of design are the basic building blocks or toolkit of the visual 2d artist. This is a list of the most common elements as they are understood in the field.	We are thinking of tagclouds in terms of there overall relationship to the elements and principles of design. Some of the elements are used in tagcloud display while others are not. Are there opportunities to explore other graphical techniques in the display of ‘tagged data‘? The following are brief summaries of how a particular design element is signifigant from tag cloud Ui perspective, and a visual representation of it.
Form (shape, line, dot, outline, contour) - Lines have many qualities in themselves such as direction, weight, and position. They are the basic elements needed to create shapes or forms, that occupy the space in a composition.	Letters are a distinct type of form from an artists perspective. Quite often creative types will want to reduce the font size on a web page as much as possible treating it as a textural element. Other times it is exaggerated and distorted as the designer explores line, shape and the letterforms themselves. In tag clouds, the overall letterform, is not considered in the presentation of the data and there seems no reason that it should. If anything the font face and style would be the variables to tweak.
Color (hue, intensity, saturation) - has tremendous expressive qualities and pyschological implications. Hue refers to the pure spectrum colors commonly referred to by the names - red, orange, yellow, blue, green violet.	Color has been used in insignifigant ways to date, for example with the third party service tagcloud’s blue and orange pallette. From initial observations, the different colors are simply meant to reinforce the changes in font-size or scale. No additional information is provided by the use of color, yet in a compostion it can be one of the more evocative elements.
Value (tone, light and dark) - is needed to create the illusion of 3d form and volume in a composition. The amount of light or dark affects color. Value can exist when color cannot and will contribute to creating the illusion of 3d space.	In the case of tagclouds, Value would probably have similar applications as color. adjusting the lightness will emphasize or decrease contrast, thereby positioning the element on hieararchy of visual attention..
Texture (pattern) - the surface quality of elements. The repitition of pattern creates texture and adds interest to a composition.	The tagcloud itself becomes a pattern that has much more distinguishability than a list or paragraph. Important words stand out because of the emphasis of scale and/or color. Through overlapping and variation of Value, the texture can become more abstract. This will allow more information to be displayed, but has negative effects on legibility.
Space (actual and virtual, positive and negative) - Taking into account the borders or frame of a composition, how the space is divided, organized, into the various parts Time (first, second, last…) - sequencing of elements. The central element in what makes animation work, from a series of images shown in sequence.	Tagclouds can only occupy a certain amount of the overall screen real estate. We must consider the placement of the tagcloud in the UI, the context of how they are displayed and if they are on their own page. Special tag groupings are often displayed seperately highlighing their importance to users. The temporal aspect of a tag cloud is one of the aspects that gives it usefulness. It represents the state of the resource collection "right now".
Sources - wikipedia, art design and visual thinking,Composition and Design Elements, Principles, and Visual Effects ,Design Exploring the Elements & Principles

Technorati Tags: design elements tagcloud

I am currently doing the Google rounds on existing (mob) tagging workshops in order to prepare for our workshop/paper and I came across steve - Social Terminology Enhancement through Vernacular Engagement.[link]

Steve is a project being developed by a group of museums that want the public to engage with their collections by allowing them to search for an item though a social filter. The way museum curator catalogues a collection is rarely the same as member of the public would search for it.

Curators rarely answer the question “What is this a picture of?”[link]

For example:

A curator may catalogue this image as Italy,futurism, painting, 1912, Balla. Giacomo
Whereas a person searching for it my use terms like dog, daschund, motion, blur

Steve is an attempt to democratize a collections catalogue, not by replacing the curators perspective, but by adding an additional layer of information provided by the public.

Bonus - Steve appears to be under a creative commons/share and share alike licence.

Technorati Tags: folksonomy usability Workshop