2

I've got the following tabbed interface enter image description here

Each tab is a scrollable list of items that can be marked as checked or not.

You can click on the blue button on the top right to add a new item to the current tab.

If you switch to a different tab, the button label and where the new item will be added will change accordingly.

Now, I've got this new requirement to implement a check/uncheck all items for the current tab. Functionally, it's simple enough, but I'm at a lost as to where to place this functionality.


Note:

  • Inside the tab, it can only be a list of items. Can't have a menu bar at the very top of the list.
  • There is a lot more room between the tab labels and the button than what my crummy mock shows. Enough to fit say two more buttons.
3

First of all I wouldn't place "Add tab one item" button in the tabs section. For me it looks like you're going to add a new tab. And answering your question - I would place checkbox in the header of the list. You could also use this header for other actions with list.

enter image description here

  • We're currently married to the current UI at the moment, but this is definitely nicer. All we have time to implement right now is that one functionality but not enough time to move things around. – kei May 29 '18 at 14:46
2

If it's not possible to place the select-all checkbox inside, a good place for it would be on the left-hand side, aligned with the checkboxes of the items.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.