UX: How to present a directory/file structure with videos?

Question

What would be a good user experience to present this? I have:

• A folder/directory structure containing mostly media files that need to be presented in a Silverlight app. Future versions may be expanded to allow some non-media files to be presented as well. The typical use case (that I'm tailoring the solution for) is video.
• The videos (or pictures) have thumbnails. Videos can potentially have multiple thumbnails (i.e. if you hover over them you can see thumbs from multiple points in the video... this may make the screen appear too "busy" though).
• There is a name, and possibly a little metadata associated with each. Audio files tend to have a lot of relevant metadata. I've never used metadata for video files and find the metadata-based indexing of videos that Winamp et. al. do to be fairly annoying. There are not comments or descriptions.
• It is possible to sort the lists, and they don't necessarily need to be present in the hierarchical structure (i.e. search folders or folders based on particular attributes are possible -- although would it really be useful to allow a user to have a folder for all videos longer than 20 minutes?).
• Thumbnails will be retrieved from the server as needed (when they are scolled into view)

Here are some random ideas:

• A one-panel list-like view with fairly small names and icons based on file type (so, basically an explorer-like interface). Possibly columns, though the disparate media types makes sorting on columns fairly useless. To get more info and a thumbnail, the user hovers over an item, which pops up details and a thumbnail if available. Single-click advances.
• A two-panel view. The left has the same structure as above. A single click selects an item and displays its details in the right pane. A double-click selects an item or opens a folder.
• Specific modes/filters. First, the user selects a media mode (i.e. video or audio). In a video mode, the items in the lists become larger and a more "YouTube-like" view is displayed. Clicking on a video brings the user to a separate screen containing the content. Alternatively, videos can be displayed tiled in this mode. The audio mode has a playlist editor, play/pause/stop controls, and works more like a traditional media player with drag-n-drop, etc. Picture mode allows easy access to slideshow viewing. The audio mode will allow sorting by metadata (artist/album/etc.) rather than folder structure.
• (Possibly in addition to one of the above) a "quick search" feature a la Google Desktop/Windows Vista+/ etc. Typing a name will pop up a list of results from anywhere in the index matching a substring there. Pressing enter will automatically play/show the most relevant file.

Any ideas? I want the focus here to be simplicity and ease-of-use, NOT features. iTunes, real player, even YouTube, etc. tend to like to be at the forefront of user attention. I'm looking for simple and streamlined.

Answer 1

I would argue that the simplest approach would be to use the design most are familiar with: a treeview on the left for folders with a collection of thumbnails for the current folder on the right. In addition for video, you could make the thumbnail play (either the video in its entirety or a small representative clip) when the user selects it.

There's nothing wrong with leveraging design that already works. It makes your application more approachable for new users and thus increases your attach rate.

Look at Infragistics' Quince app for more UI Patterns. In addition, there is Jennifer Tidwell's book "Designing interfaces" that provides a great reference.