Design interface for displaying Rulings, etc.

[cmc333333]

We currently display rulings with their own header in the RHS. We could display them inline with the text or re-organize the RHS.

[cmc333333]

@carodew's note from #474 :

Leaving a note here for us to consider when we get into the UI design phase –

I think it's great that the Rulings bar will appear gold when rulings are there, but I don't think that's necessarily clear without reading the About page. I found myself clicking open the Rulings bar each time I navigated to a new section to see if anything was there (not knowing I was looking for a change in color). The other issue is that this is likely ineffective for color blind users, and we should consider a non-color dependent way of communicating this.

Possible options to explore and validate – 

• include a badge counter on the header that shows the number of rulings (including 0 rulings)
• Once a user has expanded the Rulings section on one page, persist that setting when they navigate to new pages, until they manually close it again.

[micahtaylor]

@cmc333333 Just to clarify RHS means... rulings header section?

[cmc333333]

Right-hand side

[carodew]

Adding relevant notes from the research workshop – 

What problem will this solve? Provides reliable and relevant information to the industry and to internal users Provides an antidote to the false sense of security people get from the orange/white book, in thinking they know everything they need to know from the book. Reduces search fatigue and back and forth navigation between different sites. Nice to all have all information there and not have to do mousing backward and forward.

This solution will fail if: The documentation is not comprehensive. The related documentation is not updated on a regular basis. People don’t see the right hand column or the resources in it. The linked documents aren’t relevant. Content is not tagged properly Content is not 508 compliant Content is not in plain language. Info on the right hand side is not organized well and overwhelms the user. We don’t want to send them on a wild goose chase. It requires multiple open tabs.

[micahtaylor]

Some thoughts around changes to the righthand sidebar.

• Dynamic labeling on the rulings heading
• Increasing contrast for the grey text to pass accessibility
• Opting to try/text chevrons instead of + and -

[carodew]

In terms of chevron vs + or -, CFPB did a lot of research on this and settled on:  https://cfpb.github.io/design-manual/page-components/expandables.html

I like the darker text – I assume that's only shown in the second screenshot (but should also apply to the top screenshot?)

I also like the dynamic labels, it adds some info without adding a lot of new visual information, which could get overwhelming.

[micahtaylor]

I would be okay with keeping the + and - if we start including Show + and Hide -.

[carodew]

I have no preference on symbol, I think either option would work, but I like adding Show and Hide if there's room.

[micahtaylor]

A more refined first stab at the related docs.

• Following the same expected UI pattern of accordions and external linking in the righthand sidebar.
• Utilizing blue to minimize the yellow as yellow can be related with a warning.
• Utilizing chevrons.
• Less use of bold to draw emphasis to dynamic items.
• Updating contrast and colors to help with accessibility.

[carodew]

These look awesome!

Question – in the sentence that starts "These rulings help interpret" – is that color contrast high enough? It looks a little low to me.

Did we want to add the text "show" and "hide" to the accordion buttons, or do we think that's going to be too crowded?

Also – we had talked about (from the research) creating a way to visually indicate or hide which rulings are no longer active (if hide, with option to show). I'm happy for that to be a separate issue if you prefer, tho. (we can also talk to the whole team about the data needs for that)

[micahtaylor]

Thanks @carodew! Updated the image above for consistency and clarity.

• I've increased the contrast and checked with an color analyzer and it passes.
• Opted not to use show hide for the sake of space
• The image above is happy path. I like the idea of creating a separate issue for variations once we have a better grasp on what we will get from the data.

[carodew]

Update from call with ATF – they will send a list of related documents they'd like in the right hand column, prioritized.

[carodew]

big problem – people google questions and they pull up outdated info and get confused. High priority for ATF not to confuse folks with outdated info.

[micahtaylor]

Closing since implementation is happening on #500. We can open new issues around other concerns as the arise.