Add tab for "ALL" criteria

[bagder]

Coming to a project, and I've found that especially during the period in which I work on completing the information about a project, I find it very annoying to have to search around among the tabs to find the remaining criteria to work on (those that are still not "Met"). Similarly, if I go to see project XYZ and it is at YY% completion, I want to easily find the specific criteria it hasn't met.

This could be solved by offering a tab named "all" that would show all criteria on one singe page. Together with the already existing top-button "Hide met or N/A criteria" it would be lovely!

[david-a-wheeler]

The goal of not having to jump between tabs makes sense. It appears that other people have done this, so it may be easy to implement: http://stackoverflow.com/questions/27896757/bootstrap-3-tabs-how-to-create-an-all-tab-that-shows-all-content http://www.bootply.com/60331#

There are various libraries to fiddle with Bootstrap tabs, e.g.: https://github.com/kaspernj/bootstrap-tabs-dynamic

From a UI point-of-view I worry that an "All" tab might be confusing - am I too concerned?

[bagder]

Oh I'm useless with UI so I wouldn't know the correct way of adding something like this!

[david-a-wheeler]

No one will accuse me of being a cutting edge UI designer. But since people only sporatically use the site, we need to make it as simple and "bog standard" as we can.

Oh, try to use singular criterion, plural criteria. I've been sloppy about that in the past, but I'm trying to make up for it now. Being persinckity about that makes things clearer.

[roryokane]

Edit: whoops, this proposal misses the point. But it may still contain some useful ideas.

I had this use-case too, and I just read each tab in turn, scrolling to the top and clicking the next tab each time a finished one. A better interface could have saved me time.

I agree that adding one tab that works differently from all the other tabs would be confusing. That could be mitigated with styling, but I think I know of a better UI than an “All” tab, one that solves this use-case more directly: providing views for only met criteria and only unmet criteria.

These views could be a separate set of tabs, or they could be created by using filter controls on the normal tabbed view. The separate set of tabs would make it easier to see all met or unmet criteria at once, without tab-switching, but it is hard to decide where to place that set where their relationship to the existing set of tabs isn’t confusing.

If we went with filter controls, they could be a <select> menu or a set of radio buttons <input type="radio">. In general, radio buttons should be preferred if there is space in the UI, to make the possible options clear.

Here is a mockup of radio button filter controls added to a project page:

Since you would still have to switch between all the tabs to see all the met or unmet criteria, this design wouldn’t be ideal, but at least it would be an improvement over what there is now.

---

The code for the mockup, in case you need it:

<div class="filter-criteria">
  Show:
  <label><input selected="" name="show" type="radio"> All criteria</label>
  <label><input selected="" name="show" type="radio"> Met criteria</label>
  <label><input selected="" name="show" type="radio"> Unmet criteria</label>
  <label><input selected="" name="show" type="radio"> Indeterminate criteria</label>
</div>

.filter-criteria label {
    margin-left: 8px;
}

And I manually disabled a width: 100% CSS rule for radio buttons in the Inspector.

[roryokane]

Now that I think about it, maybe replacing all the tabs with accordions would be better.

Tabs make the categorization clear while hiding data so the reader isn’t overwhelmed. Accordions do that too, though they take up move vertical space. However, with accordions, the extra horizontal space in the heading for each category would allow summaries of how many are met next to each section’s title. So if you’re looking for only unmet criteria, you would know you don’t need to expand the ones that say they contain only met criteria. Another benefit is that with accordions, unlike tabs, you never need to scroll up to change what section you’re looking at. You can always keep scrolling down.

Here’s a mockup of the tabs on the project page turned into accordions that have summaries in their headers:

I am imagining that a header’s summary circle could also be yellow, if its criteria are marked with yellow icons but no red ones. And the “Expand All” link would change into “Collapse All” when all sections are in their expanded state.

I guess even with this UI, filter controls would still be a helpful addition. But the reader would need those controls in fewer situations.

[roryokane]

Oh, wow, I just reread the issue description and saw that it mentioned a “Hide met or N/A criteria” button. I didn’t even see that button! Its label was low-contrast and text was small, so when I skimmed the page, I didn’t see that it was any different from the “Show details” buttons that are scattered across the page, which have the same styling.

So, the app already has some type of filter controls. That means my first proposal of using filtering instead of an “All” tab was totally missing the point. Sorry. Still, perhaps that radio buttons filtering UI would be easier to use than the toggle button UI. Or we could just move the button closer to the list of practices, so it’s clearer that it’s related to that section of the page and not to the project description, and we could restyle the button to be bigger than the “Show details” buttons since it’s more significant.

At least my second proposal of accordions does fix the problem @bagder described, that the page’s navigation controls make it hard to to find all of the unmet criteria in all of the sections.

[david-a-wheeler]

If we switch to an accordion, we can have a similar effect. In particular, we could make the “Hide met or N/A criteria” button also automatically open all the accordion panes. That would have the same effect (you don't have to move between tabs to see what's missing), and it would be easier for users to understand. We could also show progress in each area.

Further discussion specifically on moving to an accordion is in #630.

[jdossett]

As of merging PR #662 we have switched to collapsible panes. There is now a button to expand all panes and thereby the ability to view all criteria. Closing this now.