As part of the work to support Custom translation suggestions (T113257), users can define their areas of interest in order to get relevant suggestions. While the initial basic support for topic selection (T368422) allows users to select just one topic, this ticket proposes to support the selection of multiple topics. In this way, users can define more precise topic areas to match their interests.
The proposed approach follows two key principles:
- Consider the intersection of the selected topics. When selecting multiple topics we want to allow users to define a more specific topic area with the intersection of the topics selected (Boolean logic "AND" operator). We expect this to be the most expected behaviour. Users selecting "Africa" and "Art" seem more likely to expect suggestions about topics that meet both criteria (African artists, works of art related to Africa...) rather than topics that match any of the areas independently, which would lead to articles related to Africa but not art (e.g., Mount Kilimanjaro), or art but not Africa (e.g., The Great Wave off Kanagawa).
- Avoid taxing the simple single-selection case in order to support the more advanced multi-selection one. For many users, selecting just one topic area may be enough most of the time. We want to make sure that multi-selection is supported in a way that does not add complexity to the default single selection process. To support this, the default bahaviour will remain single topic selection, and an explicit action will activate the multiple selection when needed.
This ticket proposes the introduction of the following elements in the "Adjust suggestions" view:
- Active filters area. Includes the list of the active filters, letting the user select one to be replaced with a new selection or a special "+ Add more" option to activate the multi-selection mode.
- New multi-select status for FilterChips to communicate whether they can be added to the selection or have been already.
As a result, the users will be able to use the "Adjust suggestions" view in both single and miultiple selection modes.
Single-selection mode.
As illustrated below, switching the selected topic does not introduce additional interactions. In the example, "Previous edits" is replaced by "Art" with just one tap since the default behaviour is to replace the selected active filter with the new selection:
Multiple selection is possible by selecting the "+ Add more" option from the Active filters section, but the single-selectionmode is the default one. Otherwise, users interested to change from "Previous edits" to "Art" would need to both select "Art" and unselect "Previous edits", adding unnecessary friction.
Multi-selection mode.
The "Add more" option enables the multi-selection mode where the items selected get added to the list of active filters, keeping the "Add more" placeholder as the item selected. In the example below, this allows to select suggestions of women biographies related to art, Africa and popular topics.
More details about each element below. You can also inspect the designs in Figma
Design details
Active filters area
A new "Active filters" area is added at the top of the "Adjust suggestions" view to show (a) all the selected filters, and (b) an additional "Add more" option to allow for multiple selection. All represented as filter chips.
New multi-select status for FilterChips
When the user selects the "Add more" option, it becomes active and the chips from the menu show an additional icon at the end to communicate their status:
- Selected filters show as active and include a check icon.
- Available filters include an "Add" icon at the end to communicate that selecting them will expand the current selection (i.e., anticipating visually the effect of multi-selection)
In addition, when there are two or more items selected, the elements in the Active filters area will show a "close" icon. In this way, users can remove elements from the multi-selection (until there is one left in which case they can switch to the single selection mode).