UI feedback mega issue

[kirahowe]

Round 1 of feedback from Benjy. See miro board for visuals: https://miro.com/app/board/o9J_lEwGTxU=/

To Do

• Overall page hierarchy
  • Separate page into header/intro, filters, and results, with prominent headings
• Accessibility/markup issues
  • "Trade Data Search" shouldn't be an <h1> — remove whole top nav, make "Find trade data" heading a home link (to clear all applied filters)
  • Intro block should be shorter (one h1 and one p)
  • Combine the filter headings into one ("Find data/add a filter" into a single <h2>Filters</h2>
  • Audit keyboard-focusing and tab behaviour
  • Make any button unique and descriptive for each button — hide extra text so it doesn't add visual noise, e.g. any <span class="sr-only">Trade Sector codes</span>
  • Min font-size on desktop should be 16px
  • Remove empty cells in unfiltered dataset table
  • Footer link text has contrast too low
• Misc markup improvements
  • Remove "Codelists" from the current facet view, doesn't add anything
  • Sentence-case for button/link text (select all matches, un-select all matches, reset search)
  • Add message e.g. "Found 24 codes in 3 codeslists" at top of code search results
  • Turn codelist labels in search results (the top level of each tree) into headers to make the lists easier to read
  • Give search box a max-width, gets too wide on desktop size viewports
  • Turn "Search" button into a magnifying glass icon button to distinguish it more clearly from the "Apply filter" button
  • Put name of dataset before publisher (or move publisher to its own line)
  • Make dataset title link to the dataset in pmd (with filters applied if there are any)

Bugs

• Empty NUTS - Nomenclature of territorial units for statistics classification (2016) list when searching "Geography" for "wales" — there should be no empty codelists in the search results view
  • Investigated and moved to Codes say they're in NUTS scheme but don't show up when building the tree top-down #104

To discuss/need more clarification

• Improve UI for facet tabs
  • Q: Currently just look like buttons, perhaps should be more tab-like? Should have open/close (+/-) buttons?
  • A: Discussed, decided to wait for further feedback. See slack conversation starting here.
• Possibly remove the "apply filter" button
  • Q: What would trigger the filter application? Every selection? What happens to the facet UI after that? (Stay open or close automatically, collapse any open levels? If there are many you won't see the results table change)
  • A: Discussed, button has to stay, decided to wait for more feedback to possibly move it later. See discussion on Miro board here.

Accessibility/markup issues

• Top bar shouldn't be a nav element since it's not a nav
  • Q: "Trade Data Search" navigates home if you are viewing search results, is that not navigation? Should we remove that link?
  • A: Resolved, removed the nav element and made the first heading a link to "Home". Discussion in miro comments here.
• Enclose groups of checkboxes in a fieldset
  • Q: How do we handle nested checkboxes? Per guidance here nested fieldsets aren't recommended. Do we do one big, flat, dynamic fieldset and call it good enough? Do we need to re-think the UI at a higher level to optimize for accessibility?
  • A: Resolved, wrapped all checkboxes in a fieldset, might further simplify UI later pending more feedback. Sort-of relevant discussions here in miro and here in slack
• Disclosure icons have no label/text
  • Q: What should they have?'
  • A: Resolved. Should have a unique aria label. Miro reference

Misc markup questions

• Change/move "cancel current facet" button
  • Q: I don't understand the suggestion in Miro ("Perhaps this should be integrated into the button as open/close type thing"). Where should this button be moved to? How will we distinguish between "cancel this selection and close this facet" and "apply"?
  • A: Resolved. "close" button moved inside each facet button, clicking whist selected closes the facet. Clarification here
• Not easy to distinguish disabled options in code search results
  • Q: Do we need to distinguish between codes that are shown merely to add context to the codes that were found in the search and codes that match the search but have no observations? Right now they are visually different (the first are shown as just text, the second are shown as disabled options)
  • PENDING: miro comment
• Make "Showing all datasets" message the heading for the section
  • Q: Should the other messages that appear here (e.g. "Found x datasets with y observations" or "Showing x of y datasets" or "No datasets match the current selection") also be headings, or should those be messages beneath some sort of more generic "Datasets" heading?
  • A: Resolved. Yes, the text changes but is always the header for that section. discussion and screenshots in miro.
• Rethink default home page
  • Q: Should we not show all the codelists? Should we instead show nothing (just the filter buttons), or some other text?
  • PENDING: miro discussion
• Q: Should we distinguish search vs browse modes (e.g. with tabs) miro discussion
  • Pro:
    • easier to distinguish purpose
    • could prune unused codes in browse (perhaps with note to explain: "Displaying only codes where observation data is available") while still returning them in search ("Codes where no observation data is available are disabled")
  • Con:
    • introduces a navigational step/ hides functionality vs showing the tree with a search form