Throughout the project as we experimented with different ideas we have created different prototypes to try them out in an isolated setting. In this post I will go over some of the prototypes created so far. In a future post I will show some of the recorded usability testing sessions which were performed by a sample of potential users on different versions of the prototypes.
Tagging
The prototype running live on this blog is the first prototype developed, it was created as an attempt to see how feasible it is to have the tagging interface connect itself to any image on any website. This turned out to be a lot more difficult than first thought – while it is easy to do it in an isolated case as Facebook or Orkut do (their tagging systems only have to work on their own gallery pages) it is another challenge entirely to have it work on a range of websites implemented by different people.
The first attempt (and the one used in the prototype on this website) is to insert a div around each taggable img, and then move all attributes from the image to the div, for example moving borders, etc. So that the taggable area exactly matches the image.
This turns out to work reasonably well but fails with floats, as the div is floated and then the image moves on to a new line. This is also a problem that if the image is moved programatically it will move relative to the div rather than the rest of the page.
In a later prototype we instead insert a div which is positioned absolutely above the img. This solves the problem of floats however still suffers from a problem that if the image is moved programatically the div position will not be updated. This problem has not yet been solved.
Social Networks
The prototype on this blog integrates tightly with facebook, although this is obviously not the eventual aim of the software. Another of our prototypes integrates with Facebook, Twitter, and LinkedIn using the OAuth APIs. This prototype uses a plugin architecture to allow for the addition of further authentication providers in the future.
Creating Tags
The prototype on this page allows the creation of tags by clicking on people’s faces. We found in the usability tests that for some people this does not offer enough control. Some people preferred dragging out the shape for the tags. There is a prototype where you can drag out a shape of any size for the tags but this does have the problem that tags can be wrapped around other tags and this can get confusing. We have not yet had time to test this through usability tests or think of a good solution.
Viewing Tags
The live prototype shows the list of tagged objects along the bottom, along with a link to their photographs (like Facebook). We saw in a few usability tests that people did not always look there – or if they did they clicked on the user name (which took them to the facebook profile) rather than the “photos” link. In another prototype (which is shown in the “About Last Night” video), we have the user click on the tag, which shows icons for each of the different actions they can perform (Facebook profile, blog, etc.). We have not had time to test in usability tests if this is more or less intuitive than the previous method.