Pancake/UX/Clips and Boards

From MozillaWiki
< Pancake‎ | UX
Jump to: navigation, search

Scenarios

"As a creative person, I want to collect and show off the cool things I find

Visual bookmarking with clips and boards. Boards allow you to collect, organize and make new emotional meaning from the things you enjoy on the web.

"As a user in a hurry, I want to be able to save things and deal with them later"

You can save anything without adding it to a board. Everything you save is added to your Library (see below).

Clips

Clips come in a few flavors:

  • A webpage clip (saves a URL)
  • An image clip (an image from a webpage)
  • A text clip (a snippet of text from a webpage)
  • A video clip (a video from a webpage)

I've listed these by rough order of importance. We should probably develop the clip feature in this order. - Gbrander

Clips, in general

We want the clip content to be a unique entity so we can do things like "show everyone who has clipped this". This means some attributes of the clip belong to the clip, where as some belong to the user that has "clipped" it to their board.

  • Anything related to the original content belongs to the clip
    • A thumbnail. This can be a screenshot of the webpage, or an image from the page that the user has selected.
    • A title (via Diffbot or <title> tag of the page, probably)
    • A summary (via Diffbot or meta description, presumably. This description is used in updates stream and probably in boards)
  • Any commentary belongs to the user
    • User's description
    • Board that clip belongs to
    • Comments

Webpage clip

  • A thumbnail. This can be a screenshot of the webpage, or an image from the page that the user has selected. We will need to generate this at several sizes - Gbrander
  • A title (via Diffbot or <title> tag of the page, probably)
  • A summary (via Diffbot or meta description, presumably. This description is used in updates stream and probably in boards)
  • A favicon This would be great, but I can sacrifice it if we feel it is costly to save these - Gbrander
  • An optional description (provided by the user)
  • "Belongs to these Boards"
  • "Pinned by user"
  • Comments? We probably do want this, but it can wait - Gbrander

Image clip

  • A thumbnail of the image. We will need to generate this at several sizes - Gbrander
  • A url back to the original source.
  • Maybe the title of the original page (via Diffbot or <title> tag of the page, probably)
  • An optional description (provided by the user)
  • "Belongs to these Boards"
  • "Pinned by user"
  • Comments? We probably do want this, but it can wait - Gbrander

Library

Everything you clip is "added to your library". The library is a screen available on Lv 0 that shows you everything you have saved. Your library is private. However, items in your library may not be. If you add a clip to a board, that clip will be visible publicly, because the board is public.

Items in your library should be promoted in type-ahead search. This is similar to the way the Awesomebar treats stars.

Boards

Boards are public places to keep your clips.

What is the job-to-be-done for a board?

  • When I am the creator, "I want to share this collection of awesome things!"
  • When I am visiting, "I'm curious about what this person curates", "Should I follow her?"
  • When I am following, "I trust this person’s taste. I want to see what she curates."

Boards are living magazines built around an interest, concept or theme. Boards should be visual, emotional and worth visiting as an entity.

Boards have:

  • A title
  • Clips
  • Author

Board contents is listed in reverse-chronological order.