Dropdown Inline Edit Storyboard

Use Case: Allow user to edit information that has constrained choices

Note: this scenario continues on the Date Inline Edit Storyboard page, but can also stand on its own.

Scenario: Change assignment so it is only applicable to students in Section 1.

Scenario begins with the user in the Assignments2 tool.

User mouses over (or tabs to) the (empty) Groups drop-down and discovers it is editable because there is a "Click to edit" message in the field (even before it is moused-over), the cursor changes to a hand (if using a mouse), and a box with a yellow highlight (though whether or not the highlight appears is configurable) and drop-down arrow appears in the field. (The hand and yellow highlight match the interaction in simple text inline edit.)

If user hovers over the field for more than 2 seconds, hover message appears, "Click item to edit" (which matches the interaction in simple text inline edit). If user tabbed to field, show hover message, "Press 'Enter' to edit item" after 2 seconds.

Mouse user thinks they must click on the arrow on the drop-down to open it, so they move the cursor over the arrow and click. Keyboard user opens field by pressing "Enter."

The drop-down opens and the choices are revealed. If using the mouse, the cursor changes to an arrow/pointer. The currently selected choice is highlighted (based on browser/OS defaults); since there was no value in the field previously, "Choose One" is selected.

User selects (either with mouse or using arrow keys with the keyboard) "Section 3."

User clicks on "Section 3" (or presses "Enter" with the keyboard after it's selected), the drop-down closes, and they can see that "Section 3" has been entered as the value for the field. For the mouse user, the cursor remains in the same spot as "Section 3" was formerly. There is now an "undo" icon next to the field which allows the user to undo that edit with unclick. (Note: the Undo icon is a placeholder, and more thinking should probably be done on exactly how this should look. Perhaps it should be blue like the other links.)

The user realizes they actually meant to enter "Section 1" so they mouse over (or tab to) the field and it is highlighted in yellow to show that it is editable. The "undo" icon remains there at this point since they haven't actually edited the field yet.

This time the mouse user quickly clicks on the text itself on the drop-down (they don't even wait for the arrow to appear after 2 seconds). Keyboard user simply opens field by pressing "Enter." The currently selected choice is highlighted (based on browser/OS defaults).

User selects (either with mouse or using arrow keys with the keyboard) "Section 1."

The user clicks on "Section 1" (or presses "Enter" if a keyboard user), the drop-down closes, and they can see that "Section 1" has been entered as the value for the field. Because the mouse user doesn't move their mouse, they can briefly see that the "Groups" field for the assignment below it (though empty) is editable as well.

This scenario continues on the Date Inline Edit Storyboard page, but can also stand on its own.