Johnny Holland is proud to be teaming up again with Mozilla Labs for their concept series. This time, Mozilla is working with the Participatory Culture Foundation to present “Collaborative subtitling — How can users quickly create a timed transcript of any video on the web?”.  We’ll be presenting a series of posts to inspire your concepts, and kick it off by talking to Dean Jansen from PCF  about the competition and some hints.

JH: Can you give us a bit of background about PCF?

DJ: The Participatory Culture Foundation (PCF) began about 5 years ago when television and other mass media really began to move online en masse. Video is the most powerful medium in our culture and we saw an opportunity to push it in a positive and more democratic direction. Our initial strategy was influencing video publishing and viewing practices through popular technology; our goal was to encourage openness and empower the individual. For instance, our first project was an open source video aggregator (video watching application) called Miro that supports open publishing standards such as RSS. It currently has about 1.3 million users each month. PCF has started many additional projects since then, including Universal Subtitles.

You’re part of the Open Video Alliance. Could you give us some more information about the alliance?

The OVA is a coalition of non-profit organizations, companies, and other institutions advocating for open standards for online video. The OVA seeks to encourage better technological practices, as well as spark a social movement, since the basic qualities of online video have the power to influence the development of our politics and culture. Current members include PCF, Mozilla, Kaltura, and the Yale ISP, but we’re about to dramatically expand the scope and membership of the organization. Last summer we co-organized the inaugural Open Video Conference in NYC which brought together a diverse mix of filmmakers, academics, artists, technologist, entrepreneurs, activists, and many others to discuss the implications and importance of open video. We followed up with a series of panels at SXSW and are currently planning the second Open Video Conference.

What are some of the special challenges of working with video?

There’s currently a huge gap in the market for simple and user friendly solutions for doing video subtitles. A number of issues contribute to this gap, such as the lack of standardization in online video players. Flash has proven to be a good basic technology to deliver video, but it’s proprietary, so developing open solutions on top of it—things that would work across the entire video spectrum—have proven difficult. Another issue contributing factor is that subtitling interfaces seem to be geared towards professional subtitlers. We’re aiming for something incredibly user friendly, so that people who would never have thought themselves capable of subtitling are encouraged to pitch in and subtitle/translate their favorite videos.

We’re aiming for something incredibly user friendly, so that people who would never have thought themselves capable of subtitling are encouraged to pitch in and subtitle/translate their favorite videos.

Prototype Collaborative Tool Demo

Is there a difference with getting people to contribute knowledge as opposed to more usual UIs?

Subtitling is something that the vast majority of internet users haven’t done yet, so in that respect maybe this will be a more difficult challenge.  However, that gives us reason to believe that it will be a more unique, interesting, and ultimately, challenging UI challenge. We also think that the probable unfamiliarity with the practice will allow designers to approach the situation with virgin eyes, which is a big advantage in many respects.

Subtitling is something that the vast majority of internet users haven’t done yet, so in that respect maybe this will be a more difficult challenge.  However, that gives us reason to believe that it will be a more unique, interesting, and ultimately, challenging UI challenge.

What are your thoughts on Youtube Video Captions?

We think the initiative is great—it draws a lot of positive attention to the need for subtitles—these will not only make videos more accessible, but also leads to a much higher potential for cross cultural exchange via video. That said, it also has lots of room for improvement, since it relies heavily on machine transcription and translation (which is fairly inaccurate these days). The biggest issue is that these subtitles are only available on YouTube videos. Our approach is more manual and community driven, but we can certainly see using technology to augment the subtitling and translation processes. Our ultimate goal is to end up with an open and standard subtitling technology that YouTube can support on its platform.

What are you hoping to get from the concepts for the Mozilla Challenge?

We’ve thought a lot about a fresh approach to creating subtitles. We’re breaking the process into discreet parts, so instead of transcribing the audio and putting down in and out points in a single step, the user does it in two.

We’re drawing inspiration from video editing software, as well as video games, and we’re shooting for something very inviting and dynamic. Even with all the time we’ve put into this interface, we know there’s a ton of room for improvement —so we’re really excited to be part of the Mozilla challenge.

Do you have any tips for people taking the competition on?

To anyone considering the challenge who hasn’t tried subtitling a video, I’d suggest trying out some of the current solutions. Use YouTube’s subtitling tools (for example Caption Tube or You Tube Subtitler ) or a service like dotsub to add subtitles to a short video that you like. This will give a good idea of the current paradigm and makes a great starting point for imagining a better approach.

Entries are open for the Mozilla Collaborative Subtitling Challenge from now until the 26th of April. For more information, see the Mozilla Challenge site.

As many may know, language is really important to me. I’m one of the first people to jump into any mud wrestling battle drenched in “defining the damn thing”. I love semantics, or more importantly I treasure appropriate semantics. So to support the design challenge, I thought I’d write about metaphors, and more specifically about the metaphor we are so happy to be-friend: the tab.

Lately, metaphors have been growing on my mind like ivy on the side of a Boston rowhouse. First, there is my recent talk on Foundations of Interaction Design that I did in Vancouver in February. But if that wasn’t good enough I did a cut-down version of it in Washington, DC for ReDUX DC. Then I’m in the midst of teaching a Perception & Cognition class as part of my job at the Savannah College of Art & Design where my colleague and co-teacher for the class, Bob Fee, reminded me so poignantly that not only is metaphor in everything digital but a good 90% of our language structure and semantics is rooted in metaphor. Finally, this fine publication along with the organization I helped to establish, IxDA, partnered with Mozilla Labs to create a summer Design Challenge whose topic is tabs in a browser.

Why metaphors at all?

Before we can answer why, we have to answer what. Well, we all took grammar in school and were told that a metaphor is an analogy that unlike a simile does not use the words like or as to declare a relationship.

My life is an adventure whose journey passes through wonders ridiculous and sublime.

Microsoft Bob, the worst metaphor OS ever

Of course, life is not an adventure, but at times has the feel of an adventure. As one of my students stated earlier this week, by creating the analogy without a prefix of like or as it is reinforcing the analogy as a truism which can’t be easily rebutted.

But why? Why do we need metaphors? What value do they add? The answer is quite simple. There is a density of complexity in the world around us. Analogies by themselves often create mental maps between intangible concepts that are difficult for us to understand. And tangible entities that have properties that we can associate between them, thus creating a definitional relationship, which we can use to aid our comprehension of the intangible concept.

A great example is how we talk about expenses: we say they are either rising or falling. Value or Expenses are neither additive or reductive. They just are. We give them a sense of size so that we can relate it to the experience of stacking coins which can go up as there is more, but prices, expenses, value in and of itself has no physical embodiment especially none that relates to altitude. Time is also very tied to metaphor. Does time really “pass”? I don’t think so. Nor does it fly or slow down.

In the digital world the metaphors around us are easier to see. Trashcans, files, folders, paths, etc. And our new favorite metaphor The Tab.

Tabs have existed in user interfaces for quite some time. With files & folders already among even the oldest WIMP (Windows Icons Menus Pointers) operating systems, it only makes sense to continue the office supply metaphor. I don’t know when they first entered the world of the GUI, but I remember them in the world of Windows settings dialogs as a way of presenting collections of options in usually arbitrary categories

I think the next major use of tabs was in the web world. Not in the browser (other than in dialogs) but in web sites themselves. The #1 prognosticator of the use of tabs as a form of web navigation was Amazon.com. They were also the first to realize and deal with the fact that tabs as a navigation/organizing form does not scale.

Older than Amazon but oft forgotten is that Microsoft Excel was using tabs as the means for navigating worksheets for quite some time.It was the main example of using tabs as a means of organizing separate work environments with minimal relationship within a single window instance. Following on its coat tails rather quickly was Visio (before its acquisition by Microsoft and after).  The assumption by both these applications was that there was no need for scaling up to lots & lots of tabs (just like Amazon).

Other applications like Fireworks and Dreamweaver then by Macromedia started using the tab metaphor to manage multiple canvases within the same windowing environment as well. And around this same time tabs were introduced through Netscape’s Navigator and then Mozilla’s Firefox to the browser world (now a de facto standard of all browsers).

The Challenge

The Mozilla Design Challenge for this summer put forward the following.
First the design challenge question:

Reinventing Tabs in the Browser – How can we create, navigate and manage multiple web sites within the same browser instance?

Then this explanation:
“Tabs worked well on slow machines on a thin Internet, where ten browser sessions were “many browser sessions”. Today, 20+ parallel sessions are quite common; the browser is more of an operating system than a data display application; we use it to manage the web as a shared hard drive. However, if you have more than seven or eight tabs open they become pretty much useless. And tabs don’t work well if you use them with heterogeneous information. They’re a good solution to keep the screen tidy for the moment. And that’s just what they should continue doing.”

And they are correct. Tabs for many users are broken. A quick poll of my class demonstrated that they are indeed not fulfilling the user requirements mostly in terms of scalability, but also not in terms of mapping the need of organizing their browsing experience (as it is done today) compared to that of tomorrow. And this is where it gets interesting. The line “… the browser is more of an operating system than a data display application; …” complicates things tremendously. It implies something greater that needs to be done which contradicts the seemingly limited question of the challenge itself. I don’t say this to be critical, but to guide (and I will not be a judge in this competition) participants that maybe “redesigning tabs” is not really the right question, just like “designing a bridge” is not always the answer to “Design me a bridge”. Sometimes you just need to design the appropriate means of getting from point A to point B across water or air.

Dissecting the metaphor

All metaphors should have a solid analog in the physical or tangible universe and Tabs is clearly in that category. When a metaphor fails, you should go back to its analog. Does it fail in that space? If it does maybe it means the metaphor itself is inappropriate. If it doesn’t, you need to understand what about its physical incarnation gives it advantages over its virtual.

In the case of Tabs there is one piece of the dynamic that must be understood when doing a proper analysis. This is that Tabs in the real world have depth. This means they can scale a lot more than the 2D virtual version.  This depth allows for stacking which means the only limitation becomes not the tabs but the depth of the draw in relation to the thickness of the content being held within the tabs themselves. And before anyone goes out there and build 3D tabs, please realize that 2D UI controls in 3D interfaces are not usable to the mainstream, at least not w/o major advancements in the UI control methods.

My advice

Continue doing three exercises:

1. dissect the existing problems;
2. explore what it means to transition from data delivery system to window of a cloud-based computing architecture;
3. understand not the usability of tabs, but rather the orientation of human needs towards organizing multi-tasking, and cross-referencing.

I hope other smart people will offer their advice for participants in the comments below.

I’d like to close, though, with the first part of Adaptive Path’s Aurora concept browser for inspiration:

This article is written as part of the Mozilla Design Labs Challenge: Summer 09. For this Design Challenge we are focusing on finding creative solutions to the question: “Reinventing Tabs in the Browser – How can we create, navigate and manage multiple web sites within the same browser instance?”