Page History

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. !Screenshot from 2013-05-14 15:55:40.png|border=1!
!Screenshot from 2013-05-14 15:55:54.png|border=1!
The above image is what is displayed once the user is done inputing combo metadata.  The following series of images demonstrates all the functionalities of this view. !Screenshot from 2013-05-14 15:56:01.png|border=1!
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. !Screenshot from 2013-05-14 15:56:09.png|border=1!
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. !Screenshot from 2013-05-14 15:56:32.png|border=1!
!Screenshot from 2013-05-14 15:56:37.png|border=1!
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. !Screenshot from 2013-05-14 15:57:14.png|border=1!
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. !Screenshot from 2013-05-14 15:57:34.png|border=1!
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.