Browsing Images

This is the home view/the browsing combos view.  Here the user can search through the entire database of combos, either to leisurely browse or using any of many searching mechanisms to find a specific combo that meets certain parameters.  As demonstrated in the photo above, the entire row highlights in yellow when you mouse over it.  Clicking on the heart image allows you to favorite a combo, turning the heart red, and clicking on any of the other elements in a row takes you to the individual combo page, a view shown later in this write up.

Previously the "Add New Combo" button and search bar were below the table and both were a light blue.  The location of the "Add New Combo" button and search bar moved to above the table itself, and the "Add New Combo" button became an eye-catching red color:  both of these design choices were prompted by comments in heuristic evaluations.  Additionally, between the digital prototype and the final implementation, we were able to implement five-star ratings rather than using fractions out of five.  This was a design decision that we were always planning on implementing but that was also reinforced during heuristic evaluations.

Searching in the Browsing View

The above three images demonstrate three different of the four different ways to filter through combos to find those that meet the specifications that you want (the fourth is the search bar at the top which will match whatever you type to either a character name or a combo name).

The first image demonstrates the functionality of the side panel of characters.  This panel is arranged by an in-game ordering of characters, not alphabetically.  User testing indicated that because images were included in this panel, it was easier to scan by the in-game order than alphabetically.  This contrasts with the drop down menu of characters, which are easier to browse alphabetically because there are not images to assist scanning.  Clicking on a character in the side panel filters out all other character's combos in the browsing view.

The second image shows that the table columns are sortable by clicking on the column headers.  Clicking on the header once sorts in ascending order, clicking on the header twice sorts in descending order, and clicking on it a third time restores the unsorted default state.  Multi-column sorting is supported by holding the shift key while clicking on other column headers, but this was not heavily hinted at within the interface because users who wish to sort by many different parameters instead use the advanced filter option, shown in the third image.

The third image, showing the advanced filter, is a very finely-grained searching view, allowing the user to sort by practically ever parameter available in our database.  One option that is not shown in the picture above is that the drop down menu next to the stars allows the user to filter combos that have difficulty ratings of "less than or equal to" or "greater than or equal to" in addition to "equal to" the star rating indicated next to it.

Combo Input 

This is the view you are brought to once clicking the "Add New Combo" button.  The breadcrumb-esque trail above the input div shows "Incomplete" until all necessary items are filled out, and then "complete" when they are, as shown in the following picture.  The way we were performing form evaluation in our original prototype was via a twitter bootstrap property which, for some reason, also highlights fields in red upon being given focus.  Heuristic evaluations revealed that this detail was disconcerting to users, and thus all of our verification is performed in the breadcrumbs above the div, in the traditional red/green colors for incomplete/complete.  The combo cannot be submitted until all steps are completed.

The above image is what is displayed once the user is done inputing combo metadata.  This is the view that was chosen after our paper prototyping tested many different alternatives.  The following series of images demonstrates all the functionalities of this view.

Inputs that have been recorded thus far are highlighted in light blue.  In this particular fighting game, only certain joystick movements are valid.  As the above image shows, joystick inputs that would be invalid are disabled, leaving only valid inputs white.

Combos are traditionally documented in the numbers and letters shown above.  A user familiar with this notation can type in a combo directly into the text input field above the direct manipulation below.  In the upper right hand corner, there is a preview of what the currently input move is, in both traditional notation and our new graphical notation.  Once a move in the combo is completed, the user presses the "Add Move" button to add it to the "Combo Moves" list.  If the user wishes to start a move over, clicking the "Clear Move" button restores the default state of the direct manipulation buttons as well as the text field above them.

The above two images demonstrate that the list of combo moves is also able to be directly manipulated.  If a user wishes to reorder the moves of a combo, the moves within the list are drag-and-droppable.  If the user wishes to delete a move, mousing over the trashcan will highlight the combo in red and clicking on it will delete it.

Once the user has input the combo data, he is brought to the confirmation view, which shows a preview of what the individual combo page will look like.  The user is able to go back and edit any information via the breadcrumbs above, and once he is satisfied, he can click the "Submit Combo" button.  Clicking the submit button adds the combo to the database and brings the user to the new combo's individual page.

Additionally, once a user has submitted combos, they may click on the "My Combos" link under their name in the top bar to view all combos that they have submitted to the site.

Individual Combo View 

This view is almost identical to the preview the user receives when confirming his combo, with the addition of a comments section supplied via the Disqus plugin.  A user can leave comments about an individual combo and respond to other people's comments using this plugin.

Sign up/Sign in

When a user is not signed in, he may not add combos to the database, as shown above.  A registered user can simply enter in the name and password in the fields in the top bar and click sign in, but if the password is incorrect or the user wishes to sign up, the pop up above is displayed.