Need ideas: designing UI for Q & A with audio/video content

December 5, 2005 12:26 PM

Posting this for a friend whose MeFi account is not active yet. I have a UI issue I'm trying to solve. How to create a casual but efficient interface to a series of audio and video clips of an author, talking about themselves and their book. It's a "conversation with the author" feature for a book site, and I'd like to avoid making the feature just look like a "clip browser". It should have a conversational feel to it.

The content will be something long the lines of "The Wisdom Of Crowds" Q & A [1] except that the "answers" will be in the form of an audio or video clip, with a couple of bullet points to anchor the content in the user's minds.

I've put together some wireframes showing some of the ideas I've had so far [2].

I'm looking for pointers to sites that may have done a good job implementing something like this, or for tips from anyone who may have done something like this in the past.

[1] http://www.randomhouse.com/features/wisdomofcrowds/Q&A.html
[2] http://bookdev.com/tmp/conversation/conversationWireframes.pdf

posted by camworld to computers & internet (3 comments total)

Why not try multiple thumbnails for each answer, with a screencap of the person answering?

I seem to recall a PBS site with a bunch of video outtakes of an interview, and it was kind of like the wisdom of crowds Q&A page, but imagine a small screenshot justified right that was clickable and had some clip info below.
posted by mathowie at 1:36 PM on December 5, 2005

Thanks - this is what I'm currently working with (the first wireframe in the pdf) and it may indeed be the best way to go. I *am* interested in examples of sites that are doing this well.

Does anyone think that linking the questions from thumbnails "hides" the content or makes it more work to browse the questions and answers?
posted by redmonk at 1:42 PM on December 5, 2005

The project I am presently working with is developing ways of serving academically-annotated video to the masses. After a bit of usability testing, I can say that a combination of a representative thumb with an icon overlay [say, a reel-based movie camera] is the best way to indicate a 'thing' represents a clickable video clip. YMMV though.

For video playback, we embed SMIL files in the HTML and then script a DHTML playback interface via plug-in controls + ECMAScript. In our case we are only displaying chunks of an over-large video file [~500MB] with each view so SMIL lets us slice and dice the video dynamically. You would likely just use individual files though. OTOH, SMIL does provide you with a way of synching text with video which may be worth investigating.

Looking at your wireframes, the top-left one looks like the cleanest/most intuitive approach, especially if you incorporate the text of the question into each tab—say by mouseover tooltip.

If you want to talk about specifics or would like a link to see a [very basic and slightly fragile] example of what we're up to, the email is in my profile.
posted by Fezboy! at 2:18 PM on December 5, 2005