As A SO /CE, I would like to have filtered lists dynamically redrawing the results

[ekellagher]

Context

Sebastian Kopf Sebastian.Kopf@colorado.edu is inquiring about using web express for the Geological Sciences department and has asked about this particular feature for faculty, but this could be used on collections or articles as well.

He would like an interactive topic area exploration (reflecting the interdisciplinary character of the department), He put up a simplified demo here (select different topic areas on the left for dynamic rearrangement): https://cugeology.github.io/geoldev/people/faculty/

[kreynen]

Looking at the code https://github.com/cugeology/geoldev/blob/master/js/isotope.pkgd.min.js

I wrote the original Drupal implementation of that javascript library for https://www.drupal.org/project/views_isotope which is still used by > 14K sites.

This really isn't any more "interactive" than the current exposed filters. What he's really asking for is dynamically redrawing the results without reloading the page, which requires a lot of work to do well and still adhere to the WCAG accessibility standards all colorado.edu sites are required to use.

I'm not against doing it, but I can't see prioritizing this until D8.

[sebkopf]

Thanks! I advocate for this mostly in light of the kind of content that @ekellagher mentions where dynamic redrawing can make it a lot easier for the target audience (in our case prospective graduate students) to explore the content. Totally understand that availability of isotope.js (or similar dynamic masonry) library for Express is some ways out and would have to be carefully crafted to match accessibility standards.

[tovstiadi]

We reviewed it in July - sorry I am just now getting to writing it up. There are some serious accessibility issues here, details http://a11y.colorado.edu/node/296 (requires login, kreynen has access - I would prefer not to post full testing details on a public page)

[kreynen]

I'm not seeing anything in the feedback from the accessibility test that needs to be kept private. We can't make progress on these issues if everyone involved can't access the information.

Severe issues There is no feedback on status change when a category is selected and the list is redrawn.

The buttons themselves give no feedback on their state (pressed or non-pressed) - an issue that is further complicated by the ability to press several buttons at once and combine the filters. Since there is no way to read the state, there is no way to know which categories have been selected.

Significant issues Heading structure can be improved - the first heading on the page is an h3.

Usability issue Tester believed that for something this complicated and non-intuitive it would be nice to have instructions on how to use the tool. Instructions are missing.

Unfortunately the testing focussed on the specific implementation vs. the approach. I know that the Isotope javascript library can be implemented to meet the WCAG standards. What I was more concerned about is the amount of content that is moving on the screen (which there is no standard for) and impacts users who aren't using a screen reader.

Here are some steps one developer took to make the Isotope library more accessible http://melmo.github.io/accessibility/berlin.js/code/dist/isotope.html

Dynamically filtered tiles is an increasingly common UI pattern that we are seeing used by several other universities.

[sebkopf]

Thanks all for reviewing this feature request and sharing the results of the testing. It'd be great if more accessible versions of this kind of feature as mentioned by @kreynen could be potentially viable for WebExpress. I see a lot of value in this (or similar features) for presenting complex content that greatly benefits from real-time filtering and combination filtering.