Fading Waypoints

An excellent discussion emerged on rashmi’s blog about the website 83 degrees, and its use of a tagcloud for general navigation .

Overall the respondants feel its a bit too unreliable for serious usability, but has some potential to augment the more structured flow of a web site. The designer of the site reveals his reasons for implenenting it in the first place.

I am gererally not a fan of tag clouds at all because they quickly become too cluttered. In this case it was done as a design/marketing effort and not at all for UI. It turns out there are very few options for our corporate site, so it is relatively uncluttered and encourages discovery.

Found two more links from the respondants as well…

googlecloud - has apparently been released recently, quite disturbing.

and what promises to be an amazing post from joe speculating on how tag clouds may evolve. I haven’t even had time to read this yet, but if this is any indication I already looking forward to part two.

In part two, titled “Second Generation Clouds”, I’ll share some thoughts on likely ways that the second generation of tag clouds will evolve in structure and usage in the near future, based on how they support a chain of understanding that semantically links taggers and tag cloud consumers. Context is the key for tag cloud consumers, and we’ll see how it affects the likely evolution of the tag cloud as a visualization tool.

Technorati Tags: tagcloud interface tagcloud navigation

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

Recently, Anthony and I have discussed using the tagcloud for an input interface, as opposed to merely a feedback mechanism that visualizes a collection of resources. Could tag clouds become the common UI for browsing large collections of data as well as organizing and sorting them? A few links that continue this thought.

The Power of Words - A Text Analysis of Political Discourse During Times of Crisis. via info aesthetics Uses a tag cloud to display frequency of words in poltical rhetoric, and goes the additional step of color coding specific words.

More and more I believe, digital assets will be indexed down to finer grains of detail, and users will have the ability to apply different kinds of search methods based on their needs. This collection of Common words in Tom Waits Songs, is an interesting example of an audio collection that has scanned song lyrics and sorts the data on frequency of use. There was alot of work that went into providing this resource, something that only a true fan would do. But its easy to imagine how this data could be available and automated for any musical collection. damn interesting.

Its seems that the trend of tagclouds are going to play an increasing role in HCI in general, not just for all these fancy dancing web 2.0 apps popping up all over the place.
Luke states

Search Folders, Smart Playlists, Virtual Folders, and Tags all group objects based on shared metadata and dynamically update their contents for efficient information retrieval through common attributes

Could they become more ubiquitous than lists to display information? Not given the current state of rendering them thats for sure. There is really going to have to be an evolution for tagclouds as interfaces to become truely useful. Hopefully we can contribute to this discussion.

Mario gives a thumbs up to vista for implenting tagging in the upcoming version of the vista OS. (and not much else). Hopefully josh can wait for it.

So far, all I can give Microsoft credit for (from what I’ve seen) is implementing tagging for their file system. Nice move. Easy transition to non-hierarchical file systems.

This was demonstrated at NorthernVoice earlier this month, and although they showed how all docs, media files, apps or whatever will be ‘taggable’, we did not see theUI that will be used to scan “My Computer” from a tagsonomy perspective. I wouldn’t mind having a crack at that myself.

Technorati Tags: power of words tagcloud taggin as interface tom waits

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

Took another stab at the cloud of related tags with some additional CSS  used to modify the position of the tags.
Now the releated tags form a circle around the main tag.

Not all that interesting yet, but im treating these as preliminary sketches and proofs of concept.

Technorati Tags: AI Summit delicious API folksonomy tagging

Part two in a series of CA and SO descriptions. This time it’s Two-Dimensional CA, looking specifically at Conway’s Game of Life.

The Cell:

Like the cell in one-dimensional CA, The Cell in two-dimensional CA is a binary organism, having only two states:on and off/alive and dead.
These states can be represented though ones and zeros or visually through dark and light dots.

The Petri Dish

Two-dimensional CA live in a grid that extends to the left and right as well a as up and down, like a chessboard. In Two-dimensional CA, a cell can have a maximum of eight neighbours, the cell directly to the left, the cell directly to the right, the cell directly above, the cell directly below and the four cells on each angle.

The Rules

• If a cell has fewer than two living neighbours, it dies.
• If a live cell has more than three living neighbours, it dies
• If a dead cell has three or more live neighbours it comes to life.
• If a cell has only two living neighbours, its state remains unchanged.

For the most part Conway’s game of life is very unstable, cells and structures disappear with alarming frequency. Eventually the the petri dish achieves an endpoint, usually an empty grid, or a series of smaller permanent stable or repeating patterns.

Here’s a really old Flash example I built a couple of years ago.

Technorati Tags:

I spent most of yesterday setting up my own delicious api reader in PHP, and it’s working pretty well thanks to the nice XML structure supplied by the delicious crew. It was much easier than I originally anticiapted, at least the initial phase was.  Currently I am just reading from the results returned from the del.icio.us/api/posts/all? request, then moving the data into my own structure, which currently looks like this:
tags= [tagName[count:Num, neighbours:[tagName:count]]]
The current version provides the exact same information that delicious does - a tag cloud and related tags, without any information on the resource. That of course will come next.
The big deal here (at least for me) is that I own the data and I can manipulate it. Its not pretty, functional, or finished  but it’s mine.

Based on the way the API works you will need to send your delicious username and password before you can see the list.
I do not store, file, or even peek at your username/passwords. I send them to delicious and then eat the piece of paper they were written on.

Technorati Tags: AI Summit delicious API folksonomy

a little bit of humour for the tagosphere.

Technorati Tags: