Ribbons

The "ribbon" concept is an idea for a way to mock up content as being relevant to specific products or product versions. Variations on this can also be used to mark blocks as being ready for review.

Marking content with metadata

Often, we need to mark content as being relevant only to specific products or versions. Currently, we have a variety of somewhat contrived techniques for this. The ribbon concept would work like this:

In this case, there are two paragraphs marked as being specific to Firefox OS. We could just as well have marked them as being relevant only to Firefox 8 and later. In addition, one paragraph is marked as having been flagged for technical review.

Document compatibility information would be marked on the left side of the page, and editorial information (tech/editorial review needed, content revision bars, etc) would go on the right.

The exact appearance of the bubbles describing the ribbon in more detail can be adjusted, of course. We could do a simple icon with a tooltip on hover, and there's obviously room to make these significantly smaller. The idea, though, is that they explain the ribbon in an appealing and easy-to-understand way. The image above places these bubbles in the sidebar areas of the page.

The goal is to have metadata available on content that would allow flagging blocks of content with their compatibility information, and to have the wiki automatically add the ribbon or box content.

Multiple ribbons

If content needs to be marked as being relevant to multiple products, that's possible too:

Here we see an added ribbon for "Safari 6+", in which one paragraph overlaps with the Firefox OS content as well as the technical review banner on the right.

Adapting content for the user's needs

Ultimately, the goal is to let the user customize their experience by letting them specify their compatibility needs and obscuring content they don't need to see based on those needs. For example, if the user specifies that they don't care about any version of Safari prior to Safari 6, they wouldn't see the "Safari 6" ribbon above, but just the content.

Similarly, if the user says they're only interested in content that's compatible with Firefox 10 and later, content flagged as having been removed in Firefox 9 would be stripped from the article entirely (or perhaps hidden away with a button to show it again. Perhaps we could have a the bubble remain behind, floating along in the page sidebar, saying something like "Click to learn about earlier versions of Firefox" or something.

Thoughts on bubbles

The bubbles could be done in various ways; they could be simple icons with details displayed on hover, or they could be similar to what I show above but perhaps smaller. They probably should follow along as the user scrolls though; the bubble needs to remain visible so the user can see them as long as the ribbon it describes is visible. It's also worth noting that if the exact same text blocks have multiple bubbles, we need to sort out how to display them (probably one below another, all pointing at the appropriate bars).

Clicking on a review bubble could present review user interface of some sort, including a diff of the flagged content and an "approve" or "edit" option.

We could also forgo the bubbles and draw the text sideways within the ribbons themselves, although this would mean the ribbons would have to be much thicker.

Clicking on the bubble could let you toggle display of that content off and on; this might be tricky for overlapping ribbons though.