Remove -30px right and left margin for wells

[nataliafitzgerald]

Remove -30px right and left margin for wells

Issue

Currently the well and featured content module pattern touch the sidebar and left side navigation creating the sense that the well is anchored to these page elements. This arrangement creates a tension on the page, disrupts the flow, and feels off balance. This approach is also inconsistent with how we handle other well-like components, like the feedback module, for example.

Recommendation

Remove -30px right and left margin for wells.

User story

https://github.com/cfpb/design-manual/issues/470

Acceptance criteria

• -30px margin removed from the left and right side of the well within cf.gov (Note: The well pattern is not contained within Capital Framework)
• Check to make sure the change is implemented and functions as expected across different page types.

Discussion (optional)

https://[GHE]/flapjack/wagtail-documentation/issues/71

[nataliafitzgerald]

Supporting images:

Current pattern: Well

Updated pattern: Well

[nataliafitzgerald]

The well and the feedback module are not handled consistently. There are times where these appear on the same page and that is especially concerning. For example here

Current instance

Proposed update

[Scotchester]

Definitely curious to hear other designers' input on this proposal.

IIRC (@duelj and @ell0ell0 may be able to confirm), the intent of the negative margins was to keep the left edge of the text in the same place as your eye moves down the page. Anyone remember any other reasons for designing it that way?

I personally have come to like the negative margin design, but I don't think that the text alignment issue is a super huge deal, so I think it's mostly personal preference.

I don't have a good explanation for why we didn't follow this model for the Feedback Form.

Also, just to be clear, you want this change to apply to FCMs also, correct? (The existence of #471 may imply the answer to this question; just want to confirm.)

[jimmynotjim]

We also don't follow that rule in Expandables.

[jimmynotjim]

@Scotchester That change is already intended for FCMs https://github.com/cfpb/cfgov-refresh/pull/2738

[jenn-franklin]

I'm in favor of de-anchoring it from the sidebar, especially since both are the same color and create an "L" shape. The rule also appears to be darker/just barely not-aligned at their joining point. In general, 👍 to being consistent with wells/modules. So, cool if that means removing 30px on the left. I don't have strong feelings, but it seems that makes sense if 30px is being removed from the right. It doesn't bother me if the text is inset 30px because then it truly appears as a content inset, which seems understandable.

[ajbush]

Could we have the flexibility to do both?

The screenshots below (from a visual perspective) would be essentially like offering wells as part of full width text. @Scotchester @jimmynotjim was there a reason we didn't/don't offer this?

Would be nice to be able to have the flexibility to do both A and B below to allow more flexibility from a content hierarchy perspective. In my work I have encountered several situations where mockup B would have been helpful.

Example A: Negative margin offers more prominence for content

Example B: width of well would match full width text (670 at deskop), could visually work like subsection of full width text

[jimmynotjim]

@ajbush Wells aren't in CF yet, so it would have a been a decision we made during the v1 working period. I can't recall why we decided on the negative margin, other than maybe matching the pre-footer that I believe was the first well like component.

[nataliafitzgerald]

@ajbush The Example A you've posted feels like a "Featured Content Module" without an image. The FCM a pattern that is slated for additional design exploration (I know @huetingj is going to be looking at it but this is something we'll want full GD team involvement on). So, we should definitely take a look at many options as well as content strategy for that. @huetingj - Have you created an issue for that yet?

In terms of Example A (that you posted above) feeling more visually prominent do you feel that way because of the anchoring of the well or the left aligning of the type? Some of the concerns (voiced by @huetingj above) with the well touching the sidebar or left nav have to do with the L shape that they form, the light gray fill of the well meeting the light gray fill of the sidebar, and the double gray line where the well and sidebar or left nav meet.

In comparing your Example B to the approach I proposed above, we would have alignment issues on pages with 25/75's, like here. Now, if we updated the width of the 25/75's so that the image plus the supporting text is 670px this could work. I've actually had that change in the back of my mind ever since we pushed the updates to the width of content-main to 670px.

My goal at this point is for us to build a base organism in CF that can be used as building block for modifiers, which could be the other well-like things (o-well__featured, o-well_notification, etc.). So, initially it would be good to iron out the basic well (options like my proposal and your Example B) and look at how these would work across different pages.

[Scotchester]

Just a real quick note, if it matters. I suspect it doesn't, because there are other design issues that people seem to think are bigger issues, but just FYI:

The double border where it meets the sidebar was never intentional. It's a bug that we've had trouble fixing (read: procrastinated fixing).

---

One other quick thing: It probably doesn't change the overall opinions any, but be sure to consider these modules in the context of pages with a left nav sidebar, as well.

[ajbush]

@nataliafitzgerald

initially it would be good to iron out the basic well (options like my proposal and your Example B) and look at how these would work across different pages.

That sounds like a really good plan to me. I'd like to help out.

I don't think we should get rid of the well option with negative margins just yet until we do that exploration. I have a hunch that having the flexibility to use the well with the negative margin will come in handy since it doesn't feel like a child of other content the way wells with no margin do (in my mockup B and your proposed update). We also don't know yet what the updated FCM will look like so I don't think we should drop the well with a negative margin just yet until we do the exploration you're talking about.

[Scotchester]

AhI Thank you for finally putting words to a concern I think I had subconsciously, but couldn't describe, @ajbush: That disallowing the anchoring may lower their perceived importance or muddle their place in the content hierarchy. I'm definitely into the idea of giving them an option to use both formats.

[nataliafitzgerald]

@ajbush @Scotchester - I think an important next step would be to confirm where a well sits in the content hierarchy. In thinking about this we should consider where the basic well sits as well as any modifiers (like the FCM, feedback, etc). The FCM probably holds a different place in the hierarchy than would be a standard well that is potentially a child of a section. In the case of a feedback form I'm not sure that I would call that a child. Maybe just that it is secondary to the page content?

The DM has some content strategy guidance about the basic well and FCM:

Basic well "Wells are used to highlight specific information within a designated section of a page. This breaks up the flow of content on the page and helps to emphasize and set apart the content that is included. Use sparingly to attract users’ attention to a concise piece of content. Full width text, images, and embedded media (like video) may be placed within wells, however, if content includes imagery also consider the featured content module."

Featured Content Module "Featured content modules (FCMs) function to highlight a specific piece of content within a page. They are not integral to the page, and could be removed while leaving the page integrity intact. Featured content modules should include a single piece of content from a defined content type. FCMs appear below the title and introductory paragraph on a page, and retain that position on all screen sizes. FCMs contain a headline, body copy text, and a graphical element related to the piece of content being featured. They are a “mini story” and never simply a dominant visual."

I'd love to dig deeper into the content strategy so that we can better understand the basic well as a whole and where it sits in the content hierarchy. We state that the FCM can be removed and retain page integrity but is this true of a basic well too?

Looking for content strategy thoughts: @keelerr @kurzn @marteki @sarahsimpson09 @ielerol

[ajbush]

@nataliafitzgerald

In the case of a feedback form I'm not sure that I would call that a child. Maybe just that it is secondary to the page content?

I don't see the Feedback form really tied to the Well pattern discussion. It's hard not to tie them together because they are visually similar with the use of gray but I think what we are calling Wells and Forms (that live inside of a gray well) are separate things with two separate goals. I think we definitely should be mindful of how they work together and that's why I think your suggestion to explore how different patterns work together is important.

There is currently documentation on the DM around form fields here: https://cfpb.github.io/design-manual/page-components/form-fields.html but there is also documentation that has not made it to the Design Manual that covers the styling for forms in relation to the gray well they live in, will send this to you.

Maybe "Wells" is too general of a name for this pattern? Does it need a better way to differentiate itself from Forms, the FCM, and the more general use of the word "well"?

[nataliafitzgerald]

@ajbush Yes I think these are all good points. I'd definitely like to be sure we're defining things as narrowly as we should - and make sure that we're including the right things when we think about wells versus forms. Maybe a few of us need to hop on Hangouts next week to chat through some of this so that we can better define where to start?

[nataliafitzgerald]

@ajbush @huetingj @caheberer @marteki @Dnpizarro I think this conversation got a little off track and is now paralyzed.

I think there's a content strategy question of what exactly a well is. Is a design element that lives within a section to support or call out content from within that section? If so it should look like it falls within that section. So, for the default well I am in support of removing the -30px right and left margin for wells (as shown above). How do you all feel about this?

Looking for discussion/thoughts.

[marteki]

Per the current intro description on the manual:

Wells are used to highlight specific information within a designated section of a page. This breaks up the flow of content on the page and helps to emphasize and set apart the content that is included.

I think the current implementation serves well to break up the flow of content, but (to @nataliafitzgerald's point) doesn't highlight specific information within a section. Right now, it almost creates its own separate section that's set apart as separate from either of the preceding or following sections.

[ielerol]

I agree, the current wells look disconnected from surrounding content, rather than a highlighted piece of a larger section. We have other options to indicate new sections of a page, and unmet needs for highlighting and creating variety in related content within a section, so I'm in favor of making this change to the wells so they meet that need better.

[jenn-franklin]

I'm in favor of this change, too.

Team Rara will be exploring changes to the featured content module in our next phase of work beginning in July. We'll loop other team designers in as that unfolds.

[nataliafitzgerald]

At this point in time, my goal is to update the basic well pattern. The featured content module feels separate from this effort (different content strategy and use cases). Also since @huetingj and her team will be working on the FCM in the coming months I think we're ok in keeping that separate.

[ajbush]

Scrolling back---looks like we left off with @nataliafitzgerald mentioning wanting to explore how different patterns work together before making this change.

If the team would prefer to make this change before doing that exploration I would caution that the well has been used with the current negative margin style in mind throughout the site.

I agree with the current pattern not meeting all the use cases we've encountered but it also has worked successfully in some instances. That's why I pointed out why having the flexibility to have different wells in my comment above would seem to be the best of both worlds.

I'd be interested in just making the switch though if you all feel strongly about it. Seems like more are in favor of making the change than pursuing flexibility.

[nataliafitzgerald]

@ajbush Can you post some examples of where the current basic well pattern worked successfully (and where this change would make it unsuccessful)? With this update I want to steer clear of anything that is not a basic well.

So, at this point in time I'm not pushing for a change to the Featured Content Module, Feedback forms, etc. I'm just focusing on addressing a well in it's most basic application - to highlight specific information within a designated section. My concern with what we currently have (and what I am trying to solve) is that the well does not look like it is part of a section.

My goal is to solve the need for a well pattern that accomplishes what the team has agreed and the Design Manual says wells should accomplish:

Wells are used to highlight specific information within a designated section of a page.

[ajbush]

@nataliafitzgerald I think the example I posted above captures what flexibility would offer.

I think I'm suggesting something a little more than the fix you're suggesting. And I think that can be addressed in another issue (that I can open).

I'll probably wait to see how this fix goes and the new FCM.

But I'm not trying to be a blocker to making this fix!

[nataliafitzgerald]

@ajbush Yes, I think that what you're addressing is the need for more options for highlighting page content. In your Example A the need is for a way to highlight specific information on a page that is not necessarily part of a section and give that content some visual prominence. The closest thing we have to this now is the Featured Content Module but that pattern needs some work. It sounds like RaRa will be digging into that work soon (and I'm sure @huetingj will want us to participate). The existing well pattern probably suits this need too but, unfortunately, this is at the expense of suiting the actual need that is detailed in the content strategy for the pattern, i.e. highlighting specific information within a designated section of a page.

This need for more options for featuring or highlighting content is on the backlog for Platform and also on the board for RaRa (in their case FCM specifically) so it is definitely something that has been identified as a need - particularly given the fact that our pages are 95% text.

Any adjustments to the existing well pattern will be slow. Wells are not currently in Capital Framework so the first step will be to add the pattern there. So, it will likely be a long while before any of this shows up on our site pages (built in Wagtail). And, in the meantime fingers crossed that we are able to work on improving the FCM and other patterns that are used to feature content (image inset, quote, etc) so that there are options that address the Example A need.

[nataliafitzgerald]

@huetingj Can you provide an update on where you landed on the FCM design exploration. I think that the needs that @ajbush brings up (above) are related to having more options in terms of how content can be featured on a page. As far as the well goes, we seem to have consensus that the well should be de-anchored and the -30 px of padding should be removed.

@jimmynotjim Would this mean making updates within the "Block" pattern in CF? Or what is the path forward for making this fix?

[jenn-franklin]

@nataliafitzgerald We're currently conducting AB testing. Will let you know where we land soon!

[jimmynotjim]

We did this, closing.