Card multi-select process
This is the “home” view of a large project management application. Unlike lower-level views, it deals with several different data types.
It also presents the first step of the process of dealing with change requests.
Because this view presents several data types, we must start the user with a high-level description, working our way toward more-specific illumination of data to enable the user to make an informed approval or rejection of the change request.
To begin this broad-to-specific process, this view present data-type summary KPIs and high-level project cards.
The next interaction to deal with is to allow the user to select some subset of projects that they want to investigate further. We needed to allow the user to evaluate multiple projects in the next step because sometimes changes across different projects are related.
The first design problem was dealing with the selection of the cards: Should we use checkboxes?
After trying checkboxes, I realized that they cluttered up this already-busy view quite a bit. I also realized that if a user wanted to engage one of the cards (to investigate further), they would just naturally click/tap on it.
This realization, paired with my experiences using projects such as Google Photos, led me to this selection approach: A focused selection mode.
After selecting the first card, a fixed bottom-sheet footer appears. In addition to showing a count of the number of cards selected, it also offers a “select all” icon, and the ability to either “evaluate” (proceed with the investigation), or cancel. Canceling exits selection mode.
Something that became apparent from using Google Photos was that once you go into selection mode, you must either continue with that selection process or completely exit out of that mode. This means that while in select mode, you cannot perform other navigations, etc.
This forced-focus prevents the user from getting into some “unapplied state” situation. This can occur when the user selects some things, and then does something unexpected, like navigate to another page or something. I think that’s why Google Photos completely prevents you from doing anything else until you deal with your selections.
In the same way, the middle artboard shows a blocking scrim over the top area – it forces the user to deal with their selection state (and not perform other unexpected actions).
Once the user has selected their desired projects, they proceed to “evaluate” them – taking them to a full-screen modal that reveals the next level of this progress-disclosure process.
For more context about this view, check out this Dribbble bucket.