Vodpod Blog

Last night we launched a new feature for Vodpod users, the “My Videos tray”. This is a little slide-out panel that shows the last 5 videos you’ve collected at Vodpod.

Our main motivation for the tray was to help new users maintain the context of their collection as they add videos. Because you can add videos to your collection from any of: search pages, video pages, your account page – we wanted a way to make your collection present and visible no matter where you are on the site.

So for new users (less than 6 videos collected) we actually slide open the tray automatically whenever they add a video. The visual design and implementation of the tray was made somewhat interesting by these somewhat conflicting goals:

1. Show the video you just added in the upper-left corner of the page (where you start reading)
2. Show placeholder boxes indicating X videos left to be collected until you reach 5
3. Replace a placeholder box with the next video when you add it

Here’s an image of the empty tray:

Now imagine the user has just added the first video. Goal #1 above says that it has to take the first place. So that would look like this:

Good. But now, what about the second video? We’ve got two choices, we could either replace the second empty box, and satisfy goal #3 above, or we could slide the existing video right and insert the new video into its place. But notice that both of these violate one of our goals, either we can’t show the new video in the upper left, or else we can’t give the appearance of replacing an empty box (we just push the empty boxes to the right).

For the first try, we implemented the slide-in from the left. So you saw this after adding video #2:

The problem here is the empty boxes. Rather than looking like spaces you are filling, they just scroll off to the right. Sort of like you have 5 empty items at the top of your list.

Our final solution came from the inspiration of our designer Tom Genoni. Using some sweet jQuery trickery, new videos slide in at the top-left of the panel, and then slide over to take the next free spot in the tray.

This image gives an impression of how the effect works:

So instead of filling in from the left, the tray fills in from the right. But visually you see the video appear in the upper-left corner before it slides into place. Once you’ve got the tray full with 5 videos then subsequent videos start sliding in from the left. Overall I think the effect is pretty cool. I encourage you to go register at Vodpod and collect some videos just to try it out!