We think we’d like to build a social content (SoCo) site for Greenfoot. Social content sites (digg, flickr, YouTube, Artsonia, and others) allow users from all over the world to share (and, in some cases, remix) their creations with other users all over the world. MyGame is a first cut at such a site for Greenfoot, and it is powering the Greenfoot competition at JavaOne. However, MyGame (as it stands) most likely does not meet the needs of Greenfoot’s current (and future) users.
So what makes a SoCo site? Instead of writing up my notes offline, I decided I might as well put them here. The local group can see the notes, and there’s room for people Not Geographically Co-located to comment. Today, I want to take a cursory look at flickr, a widely used photo sharing site recently purchased by Yahoo!. My first look at these sites will largely have to do with the interface; I’ll circle back around later to look at other aspects of the site (tagging, search, etc.) later.
SoCo Site: flickr
I want to work my way through a few pages of the flickr site. I’m partially interested in the kinds of functionality that the pages expose, as well as how that functionality is presented to the user. I would like to say, up front, that I am not, by trade, a UI designer. I’m just a guy who got his PhD studying novice programmers who happens to write virtual machines for concurrent programming languages for fun. So, feedback appreciated.
The flickr homepage
The flickr homepage.
The flickr homepage is almost entirely given over to a random photograph and various ways for the inexperienced user to browse content on the site. After the random photo, the user’s eye is immediately drawn to the opportunity to tour the site. The bottom half of the page is given over to interfaces for searching and browsing the content on the site. Even the random quote placed in the middle of the page serves as browsing interface; keywords within the quote are actually links into flickr’s tag browser. Experienced users who find their way to this page don’t need any of these features, and therefore, the login option for returning users takes up a tiny percentage of the page.
Schematic view of the flickr homepage.
The flickr launch page
The flickr homepage is very different from the page that a logged-in user interacts with. This ‘launchpad’ is far less focused on providing access to the content of the site, but, oddly enough, dedicates a remarkably small amount of screen real estate to supporting the user in manipulating content.
A user’s ‘homepage’ in flickr.
I’m surprised by how small the “control surfaces” are on this page. A significant amount of space is given over to “Upload Photos” (4% of the screen), which makes sense, as that is probably the most common action a user might undertake. Recent photos posted by myself and others take up serious real estate (30%), as do news and alerts (another 30% or more). There is a lot of non-functional space given over to my name and icon (the middle of the page, 20%). The most exciting part of this part of the screen—a full fifth of the page!—is that it sometimes says “Hello” or “Good day” to me in languages other than English. Unfortunately, the menu (top), which has over 30 options (in the form of small-target Javascript drop-down arrows) takes up only 15% of the screen… less, perhaps, as I’m being generous in my measurements.
The flickr start page for logged in users.
The contrast between these two pages is that the homepage is for visitors that do not know why they are there, and need guidance to get into the site and (hopefully) become paying members. Site members, however, are assumed to have “bought in,” and can handle a more complex interface. That said, I still think that more space should be given over to letting the user easily do the top three or four most common tasks, as opposed to providing (what I consider to be) a relatively painful set of drop-down Javascript menus.
What I like
I like flickr’s main page. It is simple, and gets a visitor into the content quickly through several different mechanisms. Fully 60% of the first page a new (potential) flickr user sees is given over to one or more forms of browsing the content on the site. This strikes me as an absolutely critical design decision if you are creating a SoCo site: new users are best attracted by the content that others created.
What I don’t like
I don’t like the fact that, as a logged-in user, I have so little space given over to interacting with the site. Only 20% of a logged-in user’s launch page is given over to controls; one control is given 4% of the screen real-estate, while another 30+ controls are hidden in a drop-down menu. As an inexperienced user, I don’t even know what those options are, and worse, have no idea what they are unless I go exploring. Given that Greenfoot has… 17 menu options total (where the “Help” menu has the most options of any of the menus), I can’t imagine creating an associated SoCo site that is harder to use than Greenfoot itself. That strikes me as wrong.
I think too much space is given over to news (30%) and the browsing of content (30%) from this interface. Then again, perhaps the authors of flickr have discovered that it is important to use this much space to communicate with their users, and perhaps those thumbnail browsers are useful. I cannot say. But, for me, the biggest problem I see with the flickr site, once I’m logged in, is the lack of actionable space.
Summary
flickr represents a mature web app, with many users and many third-party clients that leverage it’s API. The web interface gets hit heavily by thousands upon thousands of users, and will warrant some revisiting. I’m particularly interested in the content manipulation options that exist in the menus (once logged in), as well as the mechanisms by which search through the content and tags is handled. This last point, I think, is important, as it represents a kind of website usability that I want to dwell on for a moment.
This URL is clean and simple:
http://www.flickr.com/photos/tags/wombat/
It actually represents a search into the flickr database: it is a query over the tag ‘wombat’. The user does not see it as a query, it can be easily shared, and is easily mailed/etc. without it getting mangled due to a bunch of ugly in the query string. It is, in short, a human-readable, human-writable query.
A simple and easy-to-use tagging system seems to be at the heart of many successful SoCo sites. Letting users develop their own “folksonomy” is not only important, but perhaps one of the most important things that can emerge from such sites. I’ll look at tagging in SoCo sites in a single post that considers how it is done across a range of web apps; no doubt, there’s a good pool of scholarly and usability work in this space as well.
