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