This is the second in a series of examinations of social content sites. Previous: flickr.

The second site I want to look at is Artsonia. Artsonia has a very specific audience: elementary art teachers. Their business model is pretty simple: parents like to exhibit their children’s art. However, parents typically don’t work with their children to help them produce that art, so targeting the parents is the wrong way to go. Instead, Artsonia has targeted teachers, and encourages them to upload their students’ artworks. Then, parents can come and purchase children’s artwork on mousepads, coffee mugs, t-shirts… the list goes on and on.

In return for the photographing/scanning of student work, and uploading those images to the site, Artsonia pays a portion of their proceeds to the teacher’s school for the teacher to use on anything they desire. No doubt this works out well from a tax perspective. (Schools are typically 501(c)(3) organizations in the USA, meaning that all of Artsonia’s “payments” to the schools probably look like tax-deductable donations… very smart.) From the teacher’s perspective, it gives them a budget they can spend on materials or, really, anything they want—as usually, art teachers are severely constrained in what they can purchase, and have to spend a significant part of each day worrying that their program is going to be cut to support the construction of, say, a new set of bleachers for the football field.

(I have opinions on this matter.)

So, lets look at Artsonia.

Artsonia: Not for casual browsers

Artsonia homepage. Click to zoom.

The first page of the Artsonia site is dominated by a large image. This image does not aid the user in any way, and does not get them (immediately) into the content of the site. This is a massive waste of space (35% of the front-page real-estate), and does nothing to help the user learn the site in the best way possible: browsing.

In fact, a minimal amount of space on the front page of Artsonia is given over to browsing. If we count the three entry points for “Parents & Family”, “Teachers,” and “Just Visiting…” as “browsing”, that represents 10% of the user’s experience. We might also consider the sales advert on the right, which I assume is typically customized depending on the time of year (another 8% of the screen). In truth, only one of these clickable options (”Just visiting…”) actually lets you jump into browsing the site. All of the other options present the user with large amounts of documentation, forms, and choices to make.

The page parents and family are presented with
when navigating from the main page.
Documentation heavy and navigation/browsing-poor.

The “museum” homepage. Also browse-poor.

A critical difference between Artsonia and Flickr is that the Artsonia was created, first-and-foremost, as a profit-making venture. While it is true that it is a social-content site, and it is intended for teachers and families to use in publishing (and then printing/buying) their children’s artwork… it was not created strictly for the specialized sharing/publishing of content. In this regard, we might use the absence of an open API for uploading/managing content on the site as a measure, along with the lack of a browsing focus and the strong commercial bent of the site.

Summary

Considering what we’re trying to do with MyGame (support a growing community of users, provide a place to showcase content, provide infrastructure for students/teachers and other groups with specific (pedagogic) goals), Artsonia does not provide a great deal of insight. In our case, if someone is a Greenfoot user, we’ll want them to be able to get into finding interesting scenarios quickly and (possibly) downloading the source for those scenarios. If they aren’t a user, we’ll want them to be able to easily see what others have done, and perhaps play/interact with those scenarios. In either case, we aren’t currently planning on merchandizing anything submitted to the site… although, being able to order a t-shirt with the splash-screen of your scenario could be cool…

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.