User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
As shown in figure, can click "Completed", the list will filter out green "Completed"? Similar to a dropdown.
After clicking,"legend" should have what kind of visual feedback? Or add a chekbox in front of the "legend" ?
Who's seen a similar example ？
The option 1 that you mentioned does not make good UX just because your legend feels like a label, at first user will not have any clue that it can be selected.
Option 2 will be fine but I would suggest few enhancement that you can add to that:
-> You can make the text of selected legend Bold.
-> Or you can also make UI better like shown below:
-> Use the border and background color as per legend (e.g. green for completed, yellow for pending)
-> If you prefer more customiztion than replace circle radio with the checkbox that you mentioned in option 2.
Design I have showed is particularly for mobile, but I hope you got the hint on how to take advantage of it in your website.
