Labs/The Coop

« Labs

Specification

Overview

The Coop is a Firefox addon in development that will let users keep track of what their friends are doing online, and share new and interesting content with one or more of those friends. It will integrate with popular web services, using their existing data feeds as a transport mechanism.

Users will see their friends' faces, and by clicking on them will be able to get a list of that person's recently added Flickr photos, favourite YouTube videos, tagged websites, composed blog posts, updated Facebook status, etc. If a user wants to share something with a friend, they simply drag that thing onto their friend's face. When they receive something from a friend, that friend's face glows to get the user's attention.

Motivation

Perhaps the most common social interaction on the web today is sending someone a link. It's done over IM, email, weblogs, RSS feeds from aggregator sites, bookmark sharing sites like del.icio.us, social networking sites like Facebook or MySpace, and even over the phone. The desire is the same: "hey, friend, go check out this neat thing and then let's talk about it!"

The goal of The Coop is to ease this interaction, and merge it with similar tools provided by a large number of popular web services.

Use Cases

This product should minimally provide support for the following use cases, making them intuitive, pleasant and delightful experiences.

1. Share a link with a friend.
   1. Share a photo / set of photos with a friend.
   2. Share a blog post with a friend.
   3. Share a favourite video with a friend.
2. Keep up to date with a friend's web activity.
   1. Read latest blog posts / LiveJournal updates / MySpace updates.
   2. See recently uploaded photos.
   3. Show recently tagged websites.
   4. Show recently marked favourite videos.

Non-Goals

The Coop should not require any net-new server infrastructure, and instead leverage and integrate with existing web services. It should also not be a new interface for interacting with those services (ie: uploading photos to Flickr, updating status on Facebook, etc.)

Requirements

The first iteration of The Coop (represented by P1 items) will be a proof-of-concept experimentation, stripped down and bare-bones. Future iterations (P2/P3) can expand that functionality and refine the experience.

• P1: setup/preferences dialog allowing user to provide login information for various services
• P1: add friend to the coop, attempting auto-discovery of their Flickr, del.icio.us & YouTube data feeds, asking for blog address, Facebook ID, and others.
• P2: ability to encapsulate one's set of data feed addresses into a XML snippet that can be shared with/imported by friends
• P2: UI for representing a group of friends to aggregate across / send to
• P2: extensibility for adding arbitrary services or alternative services
• P1: UI for displaying 1..N friends
• P1: UI for indicating presence of new data items for a friend
• P2: UI for pivoting to display datatypes as primary key instead of friends
• P1: support for dragging URI onto friend and having that send the link to the friend along with a description
• P2: also send a preview when sending a URI

Design

Interaction Design

Like a real chicken coop, the UI will have boxes in which each of a user's friends will live. The boxes will be filled with an avatar (drawn from flickr by default?) and represent that friend.

• Icons in the box will indicate new/recent content
  • Clicking an icon will take the user to that content
  • Hovering over the icon will show a preview of the content
• Dragging an item onto the box will send that item to the friend.
  • Multiple selection of friends should allow sending a link to multiple friends.
• The box will glow if there's a sent item from that friend waiting to be seen.
• A drop-down will allow the user to pivot the display on types of data
  • "Movies" will show all the latest movies aggregated from all friends
  • "Pictures" will show all the latest pictures aggregated from all friends
  • "Links" will show page previews aggregated from all friends
  • etc, etc.

Initial Wireframes

Wireframe/Mockups

These are initial thoughts on how we might present the UI for The Coop. Of course we can skin it differently, and future mockups will add more detail highlighting the interaction of dragging content onto another user's face (ex: pop a little DHTML layer that showed a preview of the content you were sharing and let you comment) but these give a basic idea. Nothing's set in stone, hopefully this will stimulate future ideas and discussion:

• The Coop, sorted by friends
• The Coop, sorted by friends (alternate)
• The Coop, showing a preview of a friend's shared content
• The Coop, sorted by content type

(all images used in these mockups are Creative Commons licensed with the exception of the image of Elfina, which was totally lifted from this Penny Arcade cartoon)

beltzner's thoughts on the wireframes

• More faces in less space is probably better
• Different zoom modes is probably best
• The drop a link to a friend interaction is the most powerful
• Subscribe to RSS feeds from flickr, youtube, etc is interesting, too, but secondary
• The ability to attach a comment is a must, but needs to be lightweight
• We could probably do some fun gesture based UI here, too

Influences

Our design was influenced by Chris Messina's mockup for the unimplemented "People in the Browser" feature, with a horizontal bar containing avatars for a user's friends, and icons overlaid on those avatars to indicate the presence of new content:

mockup originally by Chris Messina

• comment by Canarsie

Prototype Implementation (The Coop v0.1)

A prototype based on this design has been developed as an extension to Firefox. Version 0.1 of the prototype, which integrates with Facebook and lets you see a list of your Facebook friends, send them links, and see the links they send you, is available on addons.mozilla.org.

More information about the prototype is available in this blog post. You can get the prototype from addons.mozilla.org, where it is add-on #4746, although you will have to log in, edit your profile to enable the sandbox, and then click the "sandbox" link in the navigation header before you can get the extension.

Once you have it, start it by selecting "The Coop" from the View > Sidebar menu. Click the "Log In" button to log in, following the prompts, and then you should see your friends appear in the right-hand sidebar.

Drag and drop a link onto a friend to send it to that person, and click a friend to see the links they've sent you.

You can also take a look at the source code for the prototype in Mozilla's public SVN repository.

Implementation Thoughts

The idea is to use RSS subscriptions to existing web service data feeds as a transport mechanism for all the various functionality. It will be up to us to cleverly mask this, but I'm thinking:

• When user adds a friend, subscriptions to their Flickr photo feed, del.icio.us tag feed, MySpace status (we might use a Microsummary here, since I don't think it provides RSS), YouTube favourites list, etc, etc.
• Indicators of new content are updated based on the content provided by those feeds (this is "pull").
• When a user sends something to a friend (which is "push") it is done by submitting the URI to del.icio.us with a special tag that indicates it's from The Coop and for a specific user (based on userid); when the other user checks the del.icio.us feed, items tagged with these special tags will cause the glow-effect. Or we could use the de.licio.us "send" feature. Need to think more about this.

Alternate idea, from Vlad:

• Set up an XMPP server that's the actual Coop that all users have to register with. They'll need an account somewhere anyway, unless everything is intended to be purely browser local.
• Use this XMPP server not for general IM, but for passing around data chunks about the stuff that's being shared.
• Depending on delicious/RSS/etc. seems extremely kludgey and fragile, not to mention intermittent. (IMO this thing would only work if the notification was instant.) So I don't see any value that delicious provides here, other than an extremely awkward way of passing links around between people.

Internal Representation (from danja, Apr 4 2007)

• I'd strongly recommend using FOAF as it can provide rich, extensible modelling of the interpersonal domain and is based on established web standards
• it already has: foaf:Person, foaf:knows, foaf:OnlineAccount etc.
• it has been mapped to many other person/social representations - microformats, vCard etc
• there is an XML serialization (RDF/XML) which can be used with XMPP, APP etc.
• many existing systems already have support, e.g. millions of users on LiveJournal
• it would give Mozilla a solid position on the Semantic Web of Data

Similar things to look at (Arnaud 4-Apr-2007)

• http://www.zweitgeist.com (used XMPP)
• http://www.dai.sy
• http://dev.hyperstruct.net/xmpp4moz (from hyperstruct, 14-Apr-2007)
• I have implemented a message transport as a Firefox extension and XULRunner app. I would love to contribute to the coop in some way. http://www.psyc.us / http://about.psyc.eu/PsycZilla (from 20after4)

Great Ideas for The Coop

These are some great ideas...but possibly out of scope for the first release. Want to make sure we capture them someplace.

• Setup of custom server, the official Coop
• Bi-directional updating of multiple profiles.

Here are some other ideas I had which may be interesting?

• give ownership to the users in a coop style so they can vote for what they want (or at least who they want to make the decisions for them).
• create the software in a decentralized manner/structure so that it can evolve according to local needs (AroundMe may be doing something like this).
• make sure that the users actions are used in a positive way for the growth of knowledge and so they are not tempted/encouraged to procrastinate rather than do things that progress (surely that is human nature so it must have a positive side but I don't know what that is;)

I am not a tech head but have been inspired by the positive effect of the internet to try to get involved. Can i help some how? www.whymandesign.com It would be great to use the coop to empower people who think they don't have enough skills to participate in the internet age/evolution/revolution (just started trying to do this at www.UGCunion.org).