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
Storyboard
Analysis
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.
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.