Footnote UI v2 Design

[cmc333333]

ATF said they liked a mixture of linkable + hover text for footnotes. Right now we do hover text in the regulation and link/jump in the section-by-section analyses

@theresaanna also suggested putting the footnote data in the rhs, which seems like a good use for that space

For this issue to be complete, we need to make a decision on how to move forward, i.e. what strategy. We can break up implementation into separate issues if desired.

[jehlers]

@cmc333333 can you post a few examples here?

What is the general goal? Is it for users to be able to read the footnotes that are noted in the regulation? And, where is the resulting text coming from?

[yowill]

Ideally, if we could provide even just wireframe mockups for more feedback by the Dec. 4th meeting, that would be awesome.

[cmc333333]

@jehlers the regulation contains footnotes, usually of a sentence or two of content.

Right now we display this as:

Elsewhere, in the SxS, we have footnotes like this:

ATF noted that they liked the data being inline as opposed to hopping to the bottom of the page. It seems like a mix of alt text + link would work well.

[jehlers]

@cmc333333 Thanks! I remember the SXS ones now.

The table ones feel a lot like definitions to me... but it looks like those titles are already definitions?

[cmc333333]

@jehlers agreed. We've learned that many of these tables come whole-sale from other documents. It's very possible that the other source used footnotes for definitions.

In this case, it doesn't seem like the footnote is even relevant

[cmc333333]

@jehlers example tables can be found in 27 CFR 555.222, 223, 224

[jehlers]

Ok, footnotes! :tada:

After looking into the footnotes in the sections @cmc333333 mentioned above, I think we should keep the design of footnotes as they are elsewhere in the tool. Footnotes are a very common practice in all types of publications beyond regulations, and users have general preconceived notions about how they work.

In addition, it is very important for our visual language to be consistent throughout the eRegs platform. If a user uses a footnote in one part of the tool, and then tries another one somewhere else, they will be very confused if they don't act the same.

The last important bit I have is that one of eRegs' core principles is accessibility. Because we value the use of this tool on tablet, mobile, or just generally touch devices, we cannot use hover as the primary mode of communication. Hover can be a nice addition for when someone is on a desktop, but it is completely missing from the language of touch devices.

One direction we could go is treating footnotes like definitions:

This direction works, and is nice for sections that are much larger (and the footnotes are farther down on the page). The only issue I have with this is that we have never used the right sidebar to show something that doesn't live somewhere else in the tool. Definitions show up there in addition to their original resting place in an earlier section of the regulation, and section-by-section analyses show up as the intro to that section where someone can click to go deeper. If we put footnotes primarily in the sidebar, this will be the only place the user can see them, and they can only see one at a time.

The other direction is to treat them like standard footnotes that live at the bottom of a section:

In this instance, a user will be jumped down to the footnote at the bottom of the page when a user clicks on a footnote number. This is nice because if someone is using a touch device and accidentally clicks on number [5] when they meant to click on number [4], they will still be able to see both footnotes in the list below. They also have the ability to jump back up to the original footnote from the footnote list. This also allows us to publish the footnotes similar to reg text so they are always there.

Here are how the other two sections with footnotes in 555 would look:

These sections are definitely not the normal way footnotes work (because they are so short). I think they help to fill out these sections since the footnotes basically act as reg text under the tables. They also help to explain the table, so it is super useful to have them right there on the page.

Thoughts?

One question I have is how do these tables with footnotes relate to other tables with NOTES underneath them such as section 555.220?

[cmc333333]

Andrew seemed pretty keen on hover as well as link -- I think that fits this design well? We'd carry over the hover to SxS footnotes, too, for consistency.

I assume the footnote you've clicked on will highlight when jumping to the footer? SxS tint them slightly gray.

A challenge will be getting the interplay right between footnote anchors and scrolling paragraph anchors.

One question I have is how do these tables with footnotes relate to other tables with NOTES underneath them such as section 555.220?

I'd bet the tables came from different sources, which had different paradigms for ancillary information.

[jehlers]

Andrew mentioned a few more spots where footnotes exist w/in ATF regs: 27 CFR 447.21 and 447.52, in 27 CFR 478.103, and in 27 CFR 555.218 and 555.220

[jehlers]

At first glance, those are "NOTES" not "footnotes." I'm going to ask Andrew which is more common/standard or if they have standardized this pattern in anyway.

[jehlers]

Ok! Talked to Andrew.

In ATF's case, footnotes and NOTEs are essentially the same thing, but have been formatted differently by different attorneys over the years. NOTEs refer to the whole section, while footnotes refer to more specific spots. But, in this instance, footnotes are acting the same as NOTEs since they only exist in 3 sections with very short tables and no other reg text. So let's style them the same: