Design Your Experience

So I deployed a personal website last week which I was quite happy with at the time but over the last few days I’ve thought of some features I wanted to add. I wanted visitors to be able to do a couple of things when they view my website:

• pause and skip the music (not everyone likes minimal-tech-dub)
• choose which videos are in rotation
• i also want the UI not to get in the way when not in use

So I added an options panel. It presents you with a pause/play button and a skip button to control the music. Most people, including myself, hate it when websites play music and you can’t stop it so here’s the option. I used the WebDings font for the button icons which I copied from my windows folder into my solution and embedded it.

Further below in the options panel you have a list of checkboxes which determine what kinds of videos are circulating in the pool that can be selected to play. Uncheck the ‘cows’ tag to any videos everything featuring cows, for instance. I use System.Linq methods to regenerate the pool on each click, like so:

if (c.IsChecked.HasValue && c.IsChecked.Value)

{

tagSet = tagSet.Union(new string[] { tb.Text }).ToArray();

}

else

{

tagSet = (from t in tagSet where !t.Equals(tb.Text) select t).ToArray();

}

string[] tagSet = new string[10];
if (c.IsChecked.HasValue && c.IsChecked.Value)
{
    tagSet = tagSet.Union(new string[] { tag }).ToArray();
}
else
{
    tagSet = (from t in tagSet where !t.Equals(tag) select t).ToArray();
}

In the above snippet, tagSet is my collection of active tags, it’s just a string array as I’ve indicated with the declaration on the first line. The first logic branch is adding the selected tag to the array using a Union() and the second logic branch removes it by performing a select where not equal. I wonder if this is awfully inefficient.

Finally at the very bottom of the options panel there are some blurry lines which now and then shrink and expand. These are gauges which indicate the current buffering and download progress of the videos. If you look closely you can see four distinct lines. The 1st and 3rd lines indicate buffering progress while the 2nd and 4th lines indicate download progress.

What’s actually happening behind the scenes is that while one video is playing another one is silently buffering. Once the background video source is ready to play and the timing is right a cross-fade transition will occur. As soon as the transition is completed the video source that was previously in the foreground begins buffering the next video in the pool, and so on the so forth. I can see what’s happening by switching into my diagnostics view:

I’m reasonably happy with the way that the options panel slides out smoothly to meet the mouse cursor as you move it towards the left-hand side of the screen, and retracts discretely in the same way. I’ve wanted to experiment with this method of revealing/hiding UI for a while and I like this as a prototype. I’m not a designer though so I’m pretty sure the whole thing could be much slicker.

One more thing I’ve added is a little ‘loading’ note with initial buffering gauges. There are two separate white bars which indicate the loading process – these are for source A and source B which I load both of initially before video starts. Sometimes however (actually, quite frequently) Silverlight is loading a cached video, so it doesn’t need to buffer in which case Silverlight reports a buffering progress of 0.0. This isn’t the desired behaviour in my case, because it means I have to set up some hacks to detect this case and show a full buffering gauge instead. From my point of view this is a bug.