tnc-ca-geo / animl-frontend

A frontend web app for viewing & labeling camera trap data by The Nature Conservancy.
https://animl.camera
Other
16 stars 0 forks source link

Display deployment names when a camera filter is unchecked #88

Closed nathanielrindlaub closed 1 year ago

nathanielrindlaub commented 2 years ago

It's extremely disorienting and annoying that they disappear.

nathanielrindlaub commented 2 years ago

I kind of really like the UX on Kayak.com's checkbox lists: when you hover over a checkbox item, an "only" button appears, which if clicked will uncheck everything else and only select that item. That would be a pretty light-lift way to (partially) alleviate this problem.

nathanielrindlaub commented 1 year ago

107 is related.

nathanielrindlaub commented 1 year ago

Done

postfalk commented 1 year ago

I think the names should be just greyed out and not disappear. The only button is very helpful. However, it would be great to see the name of the deployment even if they are not selected.

nathanielrindlaub commented 1 year ago

totally agree.

nathanielrindlaub commented 1 year ago

Gave this some more thought and wanted to document the design solution here before implementing it.

The challenge is that cameras can have n number of deployments, and we want users to be able to filter out some or all of those deployments (granular control). We also need to have "default" deployments for each camera. Originally we hand a single, long, flat list of deployment filters, but having all the defaults included in the list was hard on the eyes and brain and effectively doubled the length of the list (i.e., "X81149B (default), Walnut drainage, X811224R (default), Chapel Trail, ...").

The last assumption is, for the most part, I expect the number of deployments per camera to be pretty low (often just the default and one additional custom one), and from the user's perspective a camera more or less = a deployment. Assuming that's the case, I decided to nest all the deployments under a "bulk checkbox" that represent all deployments that belong to that camera and a label that attempts to tell the user which deployment filters are currently active. We also can't just list a potentially long string of n number of deployments for each bulk checkbox label for space reasons, so there had to be some space-saving logic built into it.

The current logic for deciding what the labels says is:

  1. if no deployments are selected, show no deployments selected
  2. else, find the most recent active deployment (which will likely be the most meaningful/relevant to the user) and display its name
  3. in addition, we tack on an "additional active deployment count" (e.g. +1) to indicate to the user that there are other deployments associated with this camera that are active

The end result is something like [ ] Chapel Trail, +2.

In order to rectify the most frustrating part of this UX (displaying "no deployments selected" when we uncheck the cameras' bulk select checkboxes, which leaves users entirely in the dark if they uncheck one of the bulk selects), I think the logic should look like the following:

  1. if no deployments are selected, display the name of the most recent deployment, grayed-out
  2. if some number of deployments are selected, show the most recent active deployment in black (as we were doing before)
  3. append two separate "deployment count" indicators to each label: one that's gray and indicates the number of inactive deployments, and one that's black and indicates the number of active deployments. If either is zero, don't show it.

That way you can have a collapsed bulk select label that indicates to some degree what deployments are under-the-hood and how many are active/inactive. It's a little hard to say how intuitive it will be to have two separate "deployment count" indicators (the +1 things), but I think it's worth a shot.

nathanielrindlaub commented 1 year ago

Implemented the fix described above. I think this is an improvement? Definitely a little odd. Closing out until I get feedback or inspiration to try something else.