Survey Task - design improvement for deselecting species choices

[lcjohnso]

Package

lib-classifier

Problem / Current Behavior

When a volunteer has selected a species via the FEM survey task and wants to deselect the species, currently the user has to click on the species and select the "not this" option from the modal interface.

Example: Left = Species selection has been made; Right = clicking re-opens the same modal and user has to click "not this" -- same as if when the clicked into the species detail originally and reconsidered.

Volunteers have highlighted that the PFE UX, where species identifications generate an icon / label that appears at the bottom of the image viewer (see screenshot below), allows the user to deselect a choice without re-entering the species dialog. However, there's pretty strong consensus that this PFE UX is a little wonky and not desirable to replicate.

Example: PFE subject image viewer with species identification tag for single selected species in lower left corner.

Potential Solutions

Initial conversations (Cliff, Delilah, Sam, and Laura) generated a few ideas, but open to others (this list is not comprehensive!).

1. Simple Click (less good option): clicking on a selected species will deselect the choice.
   • Pro: simple is good?
   • Con: volunteer may want to edit rather than delete their selection (i.e., edit answer to follow-on subquestions), but this solution only allows for all-in removal of annotation.
2. Add "X" Tooltip: on hover (or similar?), reveal an "X" icon connected to the choice button that would allow for deselection of species. Alternately, clicking on the species reopens the dialog (as is currently done).
   • Pro: keeps users from having to click into dialog
   • Con: "X" button would require hover to reveal (?), might be difficult to use (tooltip would be small when many choices)
3. Change Button Text in Dialog When Already Selected: keep same behavior, but in the case that the dialog is opened for an already-selected species, replace the "not this" / "identify" button text to a more useful alternative (e.g., "Deselect" / "Keep Selected", but better :-) )
   • Pro: minimal change
   • Con: still requires opening dialog

[eatyourgreens]

PFE supports backspace to deselect a selection. I think that shortcut was ported across. Use the arrow keys to navigate the choices menu, then backspace to deselect.

https://github.com/zooniverse/Panoptes-Front-End/blob/0f3b2dbf088b5d7afbd078b2156618d4aa96ba81/app/classifier/tasks/survey/chooser/Choices.jsx#L77-L80

EDIT: FEM supports backspace and delete to remove a selected menu item:

front-end-monorepo/packages/lib-classifier/src/plugins/tasks/survey/components/components/Chooser/components/Choices/Choices.js

Lines 83 to 90 in b76abf2

	case 'Backspace':
	case 'Delete': {
	event.preventDefault()
	event.stopPropagation()
	handleDelete(choiceId)
	return false
	}

[eatyourgreens]

Hover interactions aren’t available on touch devices, and fail WCAG success criterion 2.1.1, which is a level A requirement, so you’d still need a solution for touch and keyboard in that case.

[eatyourgreens]

Zooniverse has at least one blind volunteer, who uses NVDA to participate in audio survey projects, so any design solution should include screen readers, as well as keyboard interaction. Screen readers, of course, don't have hover interactions.

The new survey task uses a checkbox menu. Here, 'Bat' is selected and its checkbox is checked. In that case, as a blind user I would expect Enter or Space to toggle the checkbox off, but it actually opens the Choice popup (and unexpectedly changes the reading focus?) Adding a haspopup relationship, to indicate that the menu item is linked to a Choice popup, might help fix that. At the moment, Backspace or Delete will uncheck the checkbox, but that's not the usual shortcut for a checkbox.

MDN lists the keyboard interactions for a checkbox menu item.