De retour de la folie de sxsw. C’était l’occasion de se laisser impregner jusqu’à en perdre control de toutes sortes d’informations, de gens, de la culture même du web et de créer des contacts intéressant avec des personnes inspirantes. Pour l’occasion, j’ai eu la chance interviewer Michael Dunn, wikimedia, à propos de la vidéo utilisant le codec html5. Lors de l’atelier “Wow, That’s Cool… Fun With HTML5 Video” présenté par Michael Dale – Kaltura Wikimedia et Christopher Blizzard – Mozilla Corporation

L’interview est en anglais, si vous êtes fluant en anglais français, s’il-vous-plaît traduisez!

CELINE: Hello, Hello, Alright

MICHAEL: It’s working?

CELINE: Hello Michael, can you tell us more about yourself… While you’re texting

MICHAEL: Ahah, Okay, I’m Michael Dale I work with Kaltura and Wikipedia on Open video project. So, let’s see, what do you want to know about the project?

CELINE: I want to know about the project as if you are explaining it to your Mom.

MICHAEL: Okay, so it’s basically that Wikipedia is all about text right now, and we are thinking about the idea of, what would video on Wikipedia look like? How would it work? How is it going to integrate with how people interact with text? You know they have this versions of things (edits). So somebody can change one word, and another person can come along and change another word. What’s the analogy with video? The idea is sorta like… Open…

CELINE: Open video!

MICHAEL: Open video! Yes, :) hahah More like a shared sequence format, shared edit decision list, that’s what it’s called in film… speak. So, you have a shared edition list so you can imagine a film where every cut is something that people can change. You can actually decide, “well these people captured only part of that concept, they really need to slice in another picture, other words of this interview, to make sure they capture the whole concept”. Or maybe there’s a background image, and you think there’s a better image they can use in this case, to better communicate this documentary or something. So you can swap up that image. So in this process, of those decisions, and those changes are run like a wiki, between those different edit decisions.

CELINE: That’s cool! Today you presented something with Mozilla about a codec for video that is running with html5, right?

MICHAEL: Correct. So html5 is a standard, that’s emerging to sort of make video with a tag associated to make video more like other web elements. Just like we have an image tag, we have div tag, so this is a video tag. So it’s right in the web page and works the same way as the rest of the web works.

CELINE: Also, there was something super cool you showed today, which was the customized player…

MICHAEL: Yes! So that means, you use this video tag, so your player is done in html so you can style it with CSS. So you don’t have to know Flash, or be a Flash developer in order to customize your interface.

CELINE: What are the advantages if we compare this with the Flash technology in terms of performance, accessibility and all that stuff?

MICHAEL: Let’s see… On performance in theory it will be much faster because you will not have to load a separate process or load another separate application every time you want to embed video on a web page. And since all the player and the control of the player are done in JavaScript and CSS it can be very small, not like Flash that compiles into this large blob that you have to put on your page. In terms of accessibility, it’s inherently just by the fact that you point at the video URL, it’s gonna be easier for search engines, and screen readers to understand what’s going on. Because there is semantic value, and semantic information to the page that’s been communicated, otherwise would be a big Flash blob. You know, so you won’t be able to know what this Flash element is, and what it is doing. With video tag you have, the element right in the page, so that the screen reader, the search engine, and the web author, everybody can know what that means and interact with it, and make it more accessible.

CELINE: That’s so cool! When we talk about mash-ups and take the video and embed it on another website, and in terms of sharing the video. Would that be easier since we are using HTML5 instead of Flash, to be embeding video on other sites? Mash it up, edit it, and re-edit it?

MICHAEL: Yeah, it’s going to make all those processes a lot easier, you won’t need anything special. It’s comparable to an image tag, like it’s very easy to right click on image, and save it to disk, edit it with Photoshop and re-post it to your website. That’s the idea of the video tag is that it makes it just as easy to just view source, or right click on video copy it to your computer, do what you want to do, re-post it or re-edit it, or cut it down. So it’s make video more like other web technologies.

CELINE: That’s so cool! Makes me so excited because I love remixing! Ok so would that be scary then for people coming from the older media like Television to be having their videos easily re-edited, like right click save on desktop put it into Final Cut, do a little bit of tweaking to it, and re-post it on my blog. We can totally anticipate how the older media people are gonna be afraid. Can you give a wise quote or a message of hope to these people to help them not be so afraid.

MICHAEL: I think it provides more visibility, they need to transition into new business models. For a long time they pretended the internet didn’t exist, in some sense, they said “we are not going to put video up there”. Then all of a sudden they are putting videos out there without having a good concept of monetization tru the stack. If we go thru the workflow you just described where you download a video, you do some editing and you post it to your blog, if you had Google Adsense on your blog, it would make sense that Google would be able to read the page, see that it’s a video tag, do the finger printing on the media asset and then compensate the original producer of the video content. They have to be thinking of solutions in that sense. If that workflow does not exist they should be working towards it. If it’s not a possibility now they should be able to work on making that a possibility rather then get you to take down that video. Or getting you to not want to communicate with the visual medium. They shouldn’t try to control that in that sense, they should be trying to innovate and make it worth while for everyone.

CELINE: So times have changed. Doesn’t mean time stopped changing, it just means we keep on changing. Sometimes it’s more of an obvious change. Yesterday we attended Joi Ito’s conference when he said that Creative Commons are able to assign credits, like the finger prints of the medium, just like you described. Can you explain to me more about that. I know I have an empirical understanding of it, but can you make it clearer, that you can just with a click have all the credits?

MICHAEL: I’m not too familiar with the Creative Commons system, but the basic idea is that you create a finger print of a media asset that you are able to associate meta-data of it, whether that is content ownership, or subtitles, or some other meta-data that you want to associate with that asset. It’s like it looks at the picture and can say, it has this particular shape, these colors, it creates a perceptual hash (#), so it’s called, and that finger print can be used to look it up. Even if you say, you re-encode, or you cut different pieces of the video, snip it out, or shorten it, it doesn’t matter because the perceptual hash works with the content not by the digital bits sort of speak. I don’t know how technical you want to go here..

CELINE: Go technical!! Go all the way!

MICHAEL: ahaha Ok, so, with normal files you have these things call “sha1” and “md5” that generate a hashof the binary file and that hash is specific to that file. With something like a perceptual hash or media finger printing you are not trying to identify that file, you are trying to identify content. And that’s what it’s all about. So it creates a way to identify content.

CELINE: That’s so cool! Thank you so much Michael. Can you give me all the links to the codes behind the videos so we can share them.

MICHAEL: Sure you can go to: http://commons.wikimedia.org/wiki/Commons:Timed_Text_Demo_Page?withJS=MediaWiki:MwEmbed.js, Should up soon:
http://html5video.org/.

CELINE: Oups I have no more battery on my recorder… That’s crazy. OK… Thank You!

Sound recording of Interview with Michael by celinecelines

Interaction designer and Typographer shared process

The best process when designing interfaces is the data driven design vs. the graphic driven design. When designing for people, for usability, designing a service, a useful object, a useful site or phone, we _as Interaction Designers_ need to think about the obvious. What is it that will make people intuitively understand the means of the product? In other words, make the end result as intuitive, and as natural to use as to turn a door knob in order to open the door.

Design should make our lives easier, and not complicate them. Design should be invisible. When designing a site, whatever this site might be, design should be the structure on which content sits and blossoms.

In an  attempt to describe what I mean by Id = = Typography, I will quote a passage from, The Elements of Typographic Styles, a bible for contemporary typographers and designers, written by Robert Bringhurst :

“There are always exceptions, always excuses for stunts and surprises. But perhaps we can agree that, as a rule, typography should perform these services for the reader:

• invite the reader into the text;
• reveal the tenor and meaning of the text;
• clarify the structure and the order of the text;
• link the text with other existing elements;
• induce a state of energetic repose, which is the ideal condition for reading.

While serving the reader in this way, typography, like a musical performance or a theatrical production, should serve two other ends. It should honor the text for its own sake – always assuming that the text is worth a typographer’s trouble – and it should honor and contribute to its own tradition: that of typography itself.”

The Invisible

Embracing the future, letting go of the past

The keys to hold in your hands as a designer, specially one designing interfaces aimed to serve as a service, or as a bank of content, is the following:

• invite the reader/customer/blogger into the content;
• reveal the tenor and meaning of the content of the site;
• clarify the structure and the order of the site;
• link the content with other existing elements of the site, or other services, or other contents;
• induce a state of energetic repose, which is the ideal condition for reading/browsing/using the information.

Your design should be honoring the content of the site. Content itself should be placed on an invisible and solid structure balanced in space and organized in a hierarchical way favoring priority of information. Brand should have enough space to deploy its colors or shape not overlapping the information, or compromising the understanding of the content.

Concepts of visual design can be applied when thinking of an interface. Concepts like how the eye reads in diagonal, “le vide est aussi important que le plein”, catchy elements, color attention, and so on. However any type of ornamentation, or decoration should be abolished when thinking and drawing an interface as it serves no purpose for the content. The goal and purpose of the site is aimed to invisible and transparent.

When designing the obvious, the useful, the seamless, it is important to always be reminded to know the content of which you apply Information or Interaction design to. The structure that is thought first, then drawn should also be basing itself on reality (data) and feasibility.

Check List

Things to remember

1. Get the content
2. Make a thorough content inventory of the site
3. Work on a content strategy
4. Know where this product is positioned in the market, and who else is offering the same type of things (competitor research can inspire you a lot!)
5. Research who is going to use it, and how