Sorry, Twitter cannot be contacted. Try again soon.

Skinning the video player


If your finger has instinctively clicked the mouse button to play the video, it won’t work. What you see is just the skin of the video player, designed after six or seven other versions, plus online research. And probably this isn't even the final version. I looked at more than 20 of the best newspapers’ websites (New York Times, Washington Post, Wall Street Journal, The Boston Globe, Los Angeles Times, El Mundo, El Pais and so on), grabbed screenshots and tried to figure it out which video players seemed more intuitive to use and less confusing for our users.

I chose to use words instead of icons or symbols, both for usability and aesthetic reasons. Basically, icons are those graphics that carry a physical resemblance relationship between the object and its meaning, such as a photograph of a person or a silhouette. On the other hand, the meaning of the symbols derives from cultural convention. What puzzled me is that I have recently found several types of symbols representing the full screen functionality, as you can see below.

Also, the symbol CC in a square doesn’t seem to be self-explanatory and clearly addresses cultural issues. Meanwhile, the word “captions” included in the player clearly indicates its functionality and will be less confusing even for non-English native speakers. The download function is usually represented by a down arrow.

Obviously, there is a need for a semiotic analysis of all the icons and symbols out there on the Web. How many of them are used to indicate the same thing? Or how many times is a certain icon/symbol used to indicate one thing? But for now, there is one main question in my mind that I would put to any users interacting with the skin I designed:

Is there anything you wouldn’t know how to use with this newly skinned video player?

UPDATE: On his blog, Zach addresses the programming part of creating the video player, bringing into discussion the search functionality.