Hey everyone, here’s a quick proposal for improvements on the filters and actions of LiveData. There’re other improvements more specific to the pagination, and overall LF of LiveData, so in this one I am focusing more on mobile improvements.
Current Context
Currently LiveData filters have these problems, usability wise:
- It occupies a lot of space initially, that can grow based on the size of the table
- Fields that an not be filtered are being shown nonetheless, taking valuable space.
- Not enough visual differentiation between the filter area and the body of the table
- Field names and input are misaligned
- The actions on the card are very hard to use, with a small action area and piled up next to each other.
- The actions on the card are very hard to use, with a small action area and piled up next to each other.
Proposal
- Make the filters appear with a toggle button, with the default being off (mobile only)
- Add a bg to make it standout from regular data
- Align field names and input
- Make the actions field act like a popup menu, like the “more” button of the page.
Examples
Filters Closed:
“Filters” buttons is visible
Filters opened:
Filters button is hidden, to get to the previous state the “close” button should be used panel
I don’t know the technical complexities on the opening and closing panel for the filters, probably the implementation need to be a bit different from what it is today. Currently, the filter row on desktop is just rearranged on mobile, but this is partly why we have some of the problems listed, namely showing filterless fields on mobile and the lack of open and close.
WDYT?
Any other ideas for showing liveData on mobile?
Thanks all