- in total, there are two types of filters:
- input fields
- user input with auto-suggestion for the input
- once clicked, a dialogue opens with max. 10 suggested termsvalues, each with a checkbox
- the checkboxes can be selected and the respective term value can be added to selected filters via a "apply" buttonby clicking on them
- dropdown fields
- if the amount of terms filter values the user can select is rather small, a dropdown menu can be is used instead of an input field
- input fields
Filters - Items - 2025 - Desktop view:
Filters - Items - 2025 - responsive view:
Elements
ID | Title | Show? | Action | Changes | Tickets | ||||||||||||||||
| 1 | filter header | always | clicking on it closes the filter box | ||||||||||||||||||
| 1a | amount of | ||||||||||||||||||||
filter values | when a min. of 1 filter is selected | (de-)selecting | |||||||||||||||||||
| filter values changes the number | |||||||||||||||||||||
| 2 | reset all | ||||||||||||||||||||
filter values | when more than one filter was selected | all | |||||||||||||||||||
| filter values can be removed, which leads to the content on the page adapting | |||||||||||||||||||||
| only shown when filter value was selected |
| ||||||||||||||||||||
| 3 | filter | ||||||||||||||||||||
area | always | ||||||||||||||||||||
| filter values can be selected and are shown below the respective category | / | ||||||||||||||||||||
| 3a | input filters | always | user types a term into the field, a group of | ||||||||||||||||||
| filter values are displayed based on the input | no more placeholder text |
| |||||||||||||||||||
| remove auto-complete of browser |
| ||||||||||||||||||||
| 3b | dropdown filters | always | user opens a dropdown menu with a set amount of results from which the user can select | / | |||||||||||||||||
| 3c | time filter | always | / | / |
| ||||||||||||||||
| 4 | selected filters (pills) | when filters were selected | filter value can be removed, which leads to the content on the page adapting in the background |
| |||||||||||||||||
| width adjustment |
| ||||||||||||||||||||
| 5 | dropdown menu | when user interacts with a dropdown filter |
|
Other Changes
Responsive View
- responsive viewimplementation:
Jira server JIRA - Deutsche Digitale Bibliothek serverId 67c0afcf-3564-3fd0-8d4d-a69afd7aed63 key DDBNEXT-6380
6522
- modal fills out entire screen
Other Changes
- implementation:
Jira server JIRA - Deutsche Digitale Bibliothek serverId 67c0afcf-3564-3fd0-8d4d-a69afd7aed63 key DDBNEXT-65226380
- bottom of module:
Jira server JIRA - Deutsche Digitale Bibliothek serverId 67c0afcf-3564-3fd0-8d4d-a69afd7aed63 key DDBNEXT-6523
- behavior:
Jira server JIRA - Deutsche Digitale Bibliothek serverId 67c0afcf-3564-3fd0-8d4d-a69afd7aed63 key DDBNEXT-6518
- accessibility
Jira server JIRA - Deutsche Digitale Bibliothek serverId 67c0afcf-3564-3fd0-8d4d-a69afd7aed63 key DDBNEXT-6541
- rights statements changed from input to dropdown menu:
Jira server JIRA - Deutsche Digitale Bibliothek serverId 67c0afcf-3564-3fd0-8d4d-a69afd7aed63 key DDBNEXT-6578
Figma
Filters - Robert Mikuljan (2025)