Labs/The Coop

From MozillaWiki

Please add your comments to the discussion page, or better yet, come join the discussion in the web forums.

1 Specification
2 Design
3 Implementation Thoughts
4 Great Ideas for The Coop

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.

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.
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

[edit]

Design

[edit]

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.

[edit]

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:

(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)

[edit]

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

[edit]

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

[edit]

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)