GR3 - Paper Prototyping

Prototype Video

Briefing

Our project is called StreamBrowser. We gather internet streaming channels from sources such as ustream and justin.tv and bring it together in an easy-to-browse interface. Channels are grouped by categories and are searchable. We want to emulate the experience of TV channel browsing for internet streaming.

Scenario Tasks

Setup: The interface is set to the "main" page. Streams under the popular category are on display.

TASK 1: You get home and want to keep some local news. Search for a stream for your local news channel.

Purpose: We want the user to use the search function and get used to how we display results. We also want to populate our Viewing History bar with some streams.

TASK 2: You're tired of bad production quality of the local news stream. Browse for a stream under the category of PC Gaming.

Purpose: We want the user to use our second main functionality: browsing by category.

TASK 3: You don't want to miss the weather forecast. Go back to the first stream you watched (the local news channel).

Purpose: We want to see users use our Viewing History bar.

Observations

The Viewing History bar was initially very confusing. Users did not know that the strip at the bottom represented the history. Later, when we tried to label the bottom as history, some users interpreted the history label as a button that would take you to the history. However, once we changed the design to have updates to the history visible as the user views new streams, it became apparent to the users that the bottom strip represented the recently watched streams. Changes in state more also be less visible and intuitive on paper than on the computer interface.

In the first few user tests, the first task was "Get to the stream for CNN", with the intention of having users use the search feature to find CNN. However, the users tended to try to find CNN through the category browser (clicking "News" in the category side panel). Users will go through the category view if they think the stream will be popular. On the other hand, all users used the search box when told to find the local news.

The "Speak" label on the chat feature of the stream player itself is misleading. One user held it down and tried to actually speak into it, when it actually just enters what you typed in the text box into the chat.

Users in general were pretty quick at using the category sidebar. It seemed like users were familiar with the generic media player/browser template that inspired our design.

Prototype Iteration

Between prototypes, we overhauled how the history bar worked, since that was the biggest design problem for users. We made it more clear that the history bar represented the history by adding a label "Viewing History" and also making visible the just-watched stream in the history bar when the user watches a stream. To make this change visible, we change the stream viewer from a lightbox style viewer (the kind that centers the media in the center of the screen, and darkens the rest of the page) with a simple inline viewer. We also made the decision to have new streams added to the Viewing History bar to the right side of the last item in the style of a video playlist. The feedback we received said that this was the most intuitive way for history updates.

Lastly, we added a title label to the main panel for better visibility of different states (i.e. search results, categories, etc).