Implement Table Approach examples for ATF feedback

[yowill]

See what technical possibilities are available to prepare for Jen

[jbarnicle]

After looking into this quite a bit, it doesn't seem that there is a real good solution for static headers on tables. I didn't spend a lot of time investigating JS based solutions - but here is a run down on the limitations of the CSS based approaches I have seen.

1) All required fixed-width headers (th) and columns (td) 2) Require a fixed height on the table body (tbody) to facilitate scrolling 3) Did not work with complex table headers such as the ones here:

https://atf-eregs-demo.18f.gov/555-218/03-6573#555-218-p1

[cmc333333]

We should definitely consider JS options, too. I'm betting there's a working jquery plugin that'd accomplish out needs out of the box

[jehlers]

Here are a few different approaches we could take for the table.

First I want to define the problem as I see it now:

The tables in § 555.218 (and other sections around there) are large and complicated. Because of this, they are very tricky to present on the web in a way that is reasonably easy to use/understand.

Now, for some solutions. :)

Option 1 - Leave as is, with sticky a header row

USER NEED: “I only trust the regulation as it is printed in the FR. I like to browse the tables to make sure I’m not missing anything.”

This is the solution that John is working on, it still involves a horizontal scroll function. But would allow for easier tracking of which column the user is in.

What this option could still use:

• Some indication that horizontal scrolling is an option
• Maybe tweaks for mobile viewing?
• Maybe make the column headers easier to read on smaller screen sizes?

Option 2 - Adding some interactivity and focus

USER NEED: “I know my distance or my pounds range, I want to find the corresponding information so I know what I need to do to be in compliance.”

We could present the table one row at a time. Through the use of drop downs or other interactive elements, we could allow the user to choose what information they know and see the corresponding information they are looking for. This assumes less of a browsing strategy and more of a “I need to know X information” strategy.

Potential layout A:

This shows all of the columns in a similar fashion as they are presented in the reg now, but allows for much easier tracking of columns because there are only 2-3 rows to worry about. Each column could be flexible if we wanted, allowing the customer to choose any bit of information they wanted to change and see the matching information from the other columns.

Potential layout B:

This layout is particularly great for mobile. It allows the user to focus on one row and column at a time, but they are is still easily comparable and changeable. This could be the mobile version of the above layout, or a version of this layout could be used for larger screens as well.

Option 3 - Keep the table feeling, but condense it for better viewing

USER NEED: “I’m not sure of the distance or pounds range, I want to browse my options in order to make a more informed decision.”

We could still present the table like a table, but condense it down into 3 columns, allowing the user to always see the quantity (pounds) column but choose which distance category they want to see. The user would be able to scroll up and down to see pounds next to the distances, this way they would be able to see all the surrounding data as well as what they are looking for (facilitating a browsing strategy). This would allow the table to still feel like a regulation table, but also make room for better legibility of the header titles and allow us to avoid any horizontal scrolling.

Final notes to keep in mind for all options

IF we change the presentation of these tables, some users may still want to see “the original” table.

Maybe each of these “enhanced” table presentations would be the benefit of using eRegulations, and would help to meet the general goal of the tool (i.e. making regulations easier to read and understand).

However, these new tables do not necessarily have to replace the original table, we could link out to an image (or csv or other format) of the original table so that it is there for the user if they want it. We could also use this image or something similar for if the user decides to print this page.

[cmc333333]

Some ideas for indications that you can scroll horizontally, courtesy of Google's primary results:

[jehlers]

:tada: