GR6 - User Testing

Design

TODO: Screenshots

Image Added
The Home Page.

This is the homepage. In the main panel there is a display of the most popular streams, each stream consisting of a screencap, stream title, and channel title. On On the left there is a column with various stream categories. Clicking on these labels will bring up a thumbnail (screencap, name, user) view of the live streams from that category. Some categories have subcategories; clicking on these categories causes the left panel to update with the subcategories. Clicking "Home Page" takes the user up a level, in the case of subcategories. There is no case where there is more than two levels of subcategories.

Also, clicking on the "StreamBrowser" title itself takes the user back to the home page. The user can also use the back and forward navigation buttons on the browser to the same effect. Image Added

On the top right there is a search box. Typing search terms into the box and then pressing enter brings up a thumbnail view of the streams that match the search. If no streams are found, a message saying that no streams were found appears instead. Image Added
Searching for "starcraft"

Clicking on any of the streams in the thumbnail view takes the user to the embedded player for that stream. Underneath the embedded player is the description of the stream. Image Added
Watching the NHL playoffs

Whenever the user watches a stream, the stream thumbnail appears in the bottom "viewing history" panel. The streams here are ordered from most recently watched to least recently watched. Clicking on any stream in this panel takes the user to the embedded player. In between the first and second screenshots above, the user watched the NHL Playoffs stream, so it appears in the Viewing History.

Finally, we have a neat little spinner for when the page is waiting for a request to a third-party server: Image Added
Waiting for the "football" search to go through

Implementation

StreamBrowser is implemented mostly in javascript with some php. Everything is implemented in one page, and different things are ajaxed in and out based on the request that is sent. Finding the streams are done by making calls to third party sources (currently, only justin.tv api). The viewing history is stored as a cookie on the user's browser. This allows the history to work without having to go through a login system, but on the other hand if a user has multiple computers then the viewing history will not go with them. Since users usually don't want to make new accounts for small features, we feel this is a good tradeoff. It would still be possible to implement a login system later. 

...