GR2 - Designs

Scenario

Sean Blott comes home after school and he wants to watch relax by watching some of his favorite professional Starcraft gamers. He navigates to streambrowser.com and he finds his recently viewed streams to find his favorite channels. He sees that none are on-air and he wants to view a live stream. He recalls the name of some professional gamer that his friend told him about called PengUser so he does a search for it. The search shows that PengUser's stream is offline. Then Sean simply browses through video-game related streams and finds a live one that looks interesting, and watches it.

Designs

Design 1

Design 1 is based off of a standard tab navigation interface with stream channels represented by thumbnails in a grid.

Storyboard

Analysis

* Learnability: StreamBrowser (SB) is generally easy to learn because of its standard navigation layout with tabs at the top. SB is also only divided into three main sections, so it's very easy to remember and be familiar with the interface. However the popup overlay may not be too intuitive, but easy to remember and retain for future uses of SB.

* Visibility: The different states of the interface is designated by highlighting and other visual signs. A certain tab will be "open" if that page is open, and a catergory item will be underlined and highlighted if that is what the user has selected. The visibility of the clickability of the thumbnails is lacking however. The overlay's visibility is improved by the "dimming" of the background.

* Efficiency: The efficiency of our interface is affected by the amount of data (i.e. collection of stream channels) that we have. The more channels, the more a user has to scroll to find a specific channel. We had a search feature and the recent history page to improve efficiency for experienced users. For new users, who are unsure of how channels are categorized, it may take some time to browse through all the categories. Overall, the main uses of SB are Catergories, Recent History, and Search, and it's very easy to navigate to them. The tabbed and thumbnail navigation should be familiar with many users.

* Errors: Errors are easily recovered from. There won't be any mode errors since there aren't different modes of operation. If the user clicks the wrong stream, all he has to do is go back on his browser. Similarly, other operations like searching and selecting a category are reversible by simply choosing the right thing after an error. Overlays have a close button, so that if a user misclicks, one can go back to the browsing screen. The only irrecoverable error one can make is to erase their cookies and cache. Doing so would mean the their recent history page will be blank, but there may be back-end solutions to this.

Design 2

This design uses an accordion to expand the relevant sections and shrink the others, but still leaving the other sections visible.

Storyboard

This is the initial state of StreamBrowser when a user first comes on. The Categories section has some initial categories, which can be modified by using the drop-down list. The streams from the category are represented as thumbnails in a film-strip, which can be panned left and right using buttons on the left and right.

Clicking on "Recent" expands the Recent section and shrinks the Categories section.The Recent section shows thumbnails of the streams that the user has watched recently.

When the mouse hovers over any stream thumbnail for a period of time, an information card pops up, with extra information about the stream: the name, description, and whether it's currently live or recorded.

Clicking on "Categories" expands the Categories section and shrinks the Recent section.

Clicking on any thumbnail causes the user to start watching a stream. The stream appears in the middle (it will simply be the livestream player) and the rest of the site around it will be dimmed. Clicking anywhere outside the player closes it.

When the user types something into the search box, a search result section appears and expands. The search result section has thumbnails of streams that match the search query.

Analysis

* Learnability: It would be easy to learn that StreamBrowser supports both browsing by category and by recently viewed streams since the panel is always visible, although shrunk. It might be less learnable that the sections can be expanded accordion-style. It isn't obvious how to get the stream information from pictures of the interface, which has just thumbnails, but the behavior of the infocards match the behavior of tool tips so it should be consistent enough to learn. The search box is pretty standard and consistent with other applications.

* Visibility: The state of the interface is very visible as one section is bigger than the others. There aren't different modes in this interface; clicking a stream thumbnail always takes you to a stream, hovering over a thumbnail always opens the infocard, and clicking a section title always expands that section.

* Efficiency: Having only thumbnails allows more streams to fit on a page, and picture recognition may be better than verbal recognition once the user becomes familiar with the thumbnails. However, if the user is not familiar, then the extra time needed to hover over thumbnails to get infocards would be a minus for efficiency. Also, the filmstrip idea is alright if the user is just browsing, but if there is a thing he saw early on that he wants to go back to, the filmstrip could be inefficient because it's like scrolling a scrollbar with the up/down buttons only.

* Errors: Errors are easily recovered from. There won't be any mode errors since there aren't different modes of operation. If the user clicks the wrong stream, all he has to do is go back on his browser. Similarly, other operations like searching and selecting a category are reversible by simply choosing the right thing after an error.

Design 3

Storyboard

This is the view that the user would see when they first get to the page.  There is a title bar at the top showing SB representing StreamBrowser and a search box to the left.  At the bottom of the page would be a playlist of previously viewed streams or any that are queued up.  This is hidden while the playlist is empty.  In the middle section is the categories listing.

Once the user has selected a category, to the right, the recommended streams within the selected category will appear.  When the user clicks a new category, the list to the right updates to show streams in that category.  When the user hovers over the title of a stream, it will show a popup with a short description and actions the user can perform.

 
If the user is to type any queries in the search box at the top, it would update the list just as it did while selecting new categories.

 
This is the small stream viewer.  The main list view turns into a viewer for the stream and begins playing the stream.  

This is the expanded view for the viewer.  The titlebar and category sections go away, leaving the video and playlist.  This playlist does go away after a short delay, providing the video the full screen to display the stream.  

Analysis

The learnability of this interface should be easy because this interface borrows from many other commonly used interfaces.  It uses the stage setting to display the list of streams in the center of the screen in both the search view and the category view.  The playlist also copies from the Grooveshark interface, where the "album art" is shown horizontally in the playlist.  The learnability of this interface might be hindered by the amount of text on the screen as compared to images or other graphical entities that might have hinting toward what they do.  

The visibility of this interface is very large and open.  The playlist is always in view, so you can know what is coming up next and what previous streams you have seen before.  When viewing search results, the main part of the interface comes up with the results in a list view, providing easy viewing of the results.  

The efficiency of the interface is not the best, but is also not bad.  The limitations in the interface are that it is a mostly mouse driven interface and everything must be searched for.  There are no visual indicators of relevance to the user for what they are searching for, other than the default ones of play/pause/etc.  In later revisions, there could be the possibility to navigate with the keyboard, but this would still not increase efficiency very much, as the user would still need to search.  The efficiency comes from consistency in the interface, having the central location being the list of streams viewable, with the playlist at the bottom.  

The errors in this interface should be very recoverable.  There will usually be one button on the interface that returns to the previous screen they were viewing.  They will also be able to use the back button to return to a previous screen.  The user might make an error just out of making a mistake, or missing the click target, but it should not be very faulty.