Page layout guidelines

[benguhin]

Starting this issue for @ajbush and @sonnakim

[duelj]

This is a proposed section for the design manual that would fall under the UI Toolkit and could perhaps be its own page separate from Grids. It would document the user journey, layout levels, and styles being developed by for the refresh of consumerfinance.gov. We want to make sure the format meets the needs of the team and will be useful to teams who will be working on consumer facing web projects.

A working document for the content that would live in this section can be found here. The current content is intended to be informational, while being brief. We are also looking for feedback on needs of the content as well to make sure it meets the team's needs for this section.

Talking points

• Each level of the navigation user journey would be represented by it's own section
• Expanding one of the module sections would reveal description about that module and highlight that section on the corresponding illustration.
• The abstract page is shown in desktop, tablet, and mobile widths to reflect how layout modules adapt responsively.
• There is a download button for a PDF of the navigation overview at the bottom of the page.
• There could be download button for the .ai template file of layouts. This is something we might not want to be public though so I did not show it. Current file lives on Collab drive account and cannot be opened/downloaded by anyone without a collab account.
• Some of the images in the example sections would be abstract page layouts to reflect potential layout compositions and alternate modules that aren't shown in other examples.

Proposed Layout Page

Example of Landing section showing responsive layout images (adjusted from Mollie's comment)

Desktop	Tablet	Mobile

Responsive DM formatting (landing section example)

Desktop	Mobile

[mebates]

Awesome work @duelj, this is a LOT. I'll try to take some time to make suggestions on your google doc this week. I think it all looks great. Only suggestion is at the very bottom; just to left alight the Tablet and Mobile examples to avoid the white gap in the middle.

[duelj]

Good call @mebates. Just updated the original post to reflect your idea!

[stephanieosan]

Woah!

Clarification question: The orange is highlighting whichever page section I have opened in the expandable on the left, correct? So, if I click on "Sidebar" instead of "Main content" the sidebar will highlight in orange?

It seems like there's a lot of (really nice) customization in the design manual layout page. Who is going to build it?

[duelj]

@stephanieosan yes, that is the interaction for the expandables. "The orange is highlighting whichever page section I have opened in the expandable on the left..." so you are right in thinking that when another expandable was opened the corresponding section would get highlighted. I think in this instance the expandables would have to have the one open at a time accordion interaction.

As for who is building it that is a great question. I think that is something we should also discuss in working session.

[nataliafitzgerald]

@duelj - Great work! I am still looking through all of this but I was wondering. What is the green downward arrow to the left of "Main content"?

[duelj]

The green down arrow was meant to reflect the section of the page that would act as primary navigation to get to a page in the next level of the user journey. So in this instance, the main content section of a landing page would have modules that linked out to browse level pages within that section. The idea was to hint the intended navigation pattern through the journey even if there were other sections that could act as navigation.

It's worth mentioning that the designs to not reflect all the final content, however a link to the proposed content is in the post as well.

We had hoped that we could discuss what level of detail felt right for content tomorrow and didn't want to burn too much time headed down the wrong path. The google doc reflects our thinking on the content right now.

[duelj]

Just wanted to see if anyone has had some time to take a closer look at this stuff and has any further feedback or suggestions? As we mentioned in the working session we wanted to keep this open to feedback for a week which means we hope to have final designs to pass off for approval by @nataliafitzgerald and @benguhin this Thursday (tomorrow). We understand that that FEWDs availability will ultimately dictate when this will make it on the DM but we hope to hand off the designs early next week. This page will come with an updated design template file which we will share at this week's working session (5/21).

Please be sure to check out the proposed content as well and add your comments.

[duelj]

Based on the question about the meaning of the green arrow by @nataliafitzgerald here this was an idea from an earlier exploration that helped described the use of the arrow on the page. It makes sense that users would need this and might be smart to bring it back.

Arrow description example

[caheberer]

A few notes after taking a closer look.

• I had a hard time understanding that the green sections in the top visualization were representing navigation. Is there a reason that Navigation Overview wouldn’t be at the top with that visual? I think that would make it clearer.
• Under Browse Examples, I’m not sure how the Hero and sidebar composition fit in. It seems the main piece for Browse pages is the left hand navigation, for something that seems to be an exception to the rule, could reasons why it falls under this category accompany the example?

Ah, I see they are the same for Learn, so I’m guessing they are just placeholder, but just thought I would call it out in case. I think the examples are going to be an important aid.

• This probably falls more appropriately under grid and layout, but will there be a defined width for the page?

[duelj]

@caheberer those are great thoughts! I tried to address them with some updates:

Updating navigation overview section

After you mentioned this it felt like a no-brainer to move it up to the top to help people get more context before sharing the levels. This is kinda how we were thinking that could look with putting the navigation overview first by the intro copy. Also, this reflects some tweaks to calling out the navigation sections with the minicon.

How alternate modules might be shown

Our thinking was that when a module section was expanded the image would update to reflect a layout that would visualize that module. This was part of the reason that we wanted to include more of the "abstract page layout illustrations" in examples. We knew there were layouts that would have optional modules that we wanted to show people. The image I am showing in hero expanded version is just a larger image of the "hero & nav. composition" under Examples. Our concern with this approach is that it will require a lot of images, but we think it might be worth it to show all the options on all the screen sizes.

Browse level - Intro expanded	Browse level - Hero expanded

Calling out the navigation modules better

Tried a revised approach to the green arrow minicons to try and make their purpose clearer. I know the green arrow minicons were confusing to @nataliafitzgerald as well but we wanted to keep the information they added. I tried using a variation of our results messaging style to still highlight the navigation feature of these modules and give some more context. This would work in conjunction with the updated messaging in the navigation overview section as well.

[schaferjh]

As we look to wrap up content and design of this page, I just want to make sure other UXers have had a chance to weigh in since hopefully they'll also find this layouts page and the user flow to be a useful resource.
@keelerr @marteki @ielerol @kurzn @sonnakim @niqjohnson

Please be sure to check out the proposed content as well and add your comments.

Edited to add: The navigation documentation PDF linked to from this page would be this one.

[niqjohnson]

This looks really nice! If it's possible, I'd love to have links to example code and/or demos for all of the modules. That would be a huge help if we end up prototyping pages in HTML (or even if we don't, it could still be useful to better understand how the modules behave in browsers).

[keelerr]

I know I'm late to comment, but wow! This is great. Thanks for all the work putting this together. I think it's going to be very useful. My only question (and it dovetails with what @niqjohnson was saying) is whether or not you need to create lots of images for alternate layouts/examples, or if you could also (or possibly instead) link to pages where these different page types were in use. This way, you could provide access to more examples without extra hassle. I know these pages are meant to be about layout, but I think a broad range of examples could show how images of various sizes/tables/videos were incorporated. (Something that always seems to provoke discussion...)

[duelj]

@niqjohnson that's an interesting thought, I was trying to think through how that might work and how something like that fits with the goal of the page. Here were a couple of thoughts I had in regard to your and @keelerr

• Code examples exist for pieces of a lot of these modules, either in the design manual already or in the Capital Framework documentation, so we tried to minimize overlap with those as much as possible. However, the modules we talk about in the layout page are often a collection of the "components" found on the two resources I just mentioned, and I could see the use of having full code examples of the modules mentioned on layout page. Which leads me to...
• There are full code examples for pretty much every module shown in the sister document refresh ai template. The code for these modules live in the flapjack repos for the specific pages they live on in the site. The idea was the examples at the bottom of each page section could link out to live examples of the modules on working pages, a lot like @keelerr mentioned.
• Adding in code examples for each of the modules in one location (other than flapjack's GH) seems like it could be a worthwhile idea, but also one that is outside of the scope of this page at least for now. If there is a strong desire for this from UX or FEWD's perhaps this is another discussion for us to have soon as to how we could best incorporate those module code examples, and where.
• The examples at the bottom of each page section will link out to live examples of those pages types (landing section will link out to the beta about us landing page, owning a home, etc.). The main issue this we realized was we don't have live examples for all the page compositions we have. Here's an example of what I mean for landing page types:

Landing page composition types:

1. About us - no hero, intro section, sidebar
2. Owning a home - hybrid hero, intro section, sidebar
3. No real example - FJ hero, intro, sidebar
4. No real example - with or w/o hero, no sidebar

We could just not include examples we don't have or not bother making the images for them but, we felt showing all the options would be good for those people building new pages.

• Showing examples instead of abstract illustrations would be an interesting option, like you and @niqjohnson pointed out we could have links under the expandable module sections to pages with those type of modules on them. Our biggest struggle with this is there are not examples for all the modules types in all the page levels. This would only get better as we build more, but we also don't build landing, browse, and learn pages at a consistent rate. There are only five landing pages in our IA and they might not get built until next year for example. We wanted lend some guidance now and felt the abstract illustrations might be a good in between.
• We do hope to include a "broad range of examples" as this page moves forward and had thought about being able to include more than the four shown example spots for each page type to link out to real pages. The abstract illustrations were just our way of trying to give a consistent baseline to visually describe some of these layouts that might not yet exist, or currently have hybrid examples.

Not sure where this leaves us, hope it helps clarify some of the reasoning behind how we got to this format, but also, I may not have understood either of your thinking around the examples being live options. I would be happy to chat more about this with either of you, and will try to touch base to see what you think! Thanks!

[niqjohnson]

@duelj: Thanks for giving this a lot of thought!

Basically all I'm hoping for is something like Bootstrap's documentation for components where, if I'm designing in the browser, I can go to quickly grab snippets of code for whatever component I'm working with (say, a sidebar) and understand how it can combine with other components. If there's already going to be a place like that elsewhere, that's enough for me (though a link to where those samples are might be handy, kind of like how the Design Manual's UI toolkit pages link to Capital Framework documentation).

[stephanieosan]

Okay, maybe I'm going crazy, or maybe this is a really dumb question, but here it is:

Are there only three types of pages (landing, browse, learn)? I vaguely remember four (also, there are four in your lovely overview illustration):

Help!

[duelj]

Our updated thinking per @schaferjh is that there will only be three major page levels (landing, browse, and learn). This an update that I believe was made based on the confusion that some the of differences between the four page levels created. The three level format is an effort to simplify and allow more freedom on each page level. The updated user journey document looks something like this with the revised levels:

[schaferjh]

@stephanieosan good catch -- we should definitely fix that header graphic to fit with the broad page types.

Just to expand a bit on @duelj's comment and the user journey info he posted -- there is still room for sub-levels within page type if needed. We reference this in the content for this page, but the visuals focus on the three broad page types.

[stephanieosan]

Excellent, that makes perfect sense. Thanks for clarifying!

[duelj]

Update: We are at the end of our time where we were looking for open feedback from the design team. If you have final thoughts/concerns please try to document them on the issue ASAP. This issue is now being moved on the the design and UX approval step.

Changes to this version:

• Addressed the visuals to reflect the updated thinking of the user journey for the navigation overview section per the comment by @stephanieosan
• Updated order for the sections so that navigation overview is at the top of the page per comment by @caheberer
• Reduced the prominence of the navigation messaging for expandable sections. Made messaging first paragraph in expanded content.
• Updating the mockup to reflect the content document more closely (module expandables now reflect what would appear for different page levels).
• Abstract page illustrations reflect our FJ navigation more closely (breadcrumbs and updated side nave style reflected).
• No immediate updates to included code for modules on the page per comments by @niqjohnson and @keelerr but it is something that should be discussed further with FEWDs (they can maybe decide on where that might live and if it is a priority)

[duelj]

Feedback from the Falling water working session 6/02/15:

• Consider introducing colors in the navigation overview section to highlight the differences for the navigation levels.
  
• Get rid of the arrow icons on the module expandable. Messaging can just happen in the content within the expandable section.
  

[duelj]

Wondered if anyone had any other input after the working session updates? Still looking to get design and UI approval on this. Please let me know what else we need to do to get to that point.

[benguhin]

Page in progress: http://ascott1.github.io/design-manual/ui-toolkit/layouts.html

[mebates]

@nataliafitzgerald will review by COB on 6/30.

Ultimately, our thoughts on the heros (#301) will end up here too.

@benguhin and @ascott1 are working on building the page now! 💥

[nataliafitzgerald]

@duelj
First off, nice work, Justin. This is looking great.

I read over the content document and did have some comments. It didn't look like the FJ Google Doc was editable or open for comments so I created a copy with my comments which can be found here: https://docs.google.com/document/d/1K1Kmw6B7JDhONLV_7wxx7pH_dX3azlpknx2yEnMpEog/edit#.

Regarding the layout, just a few pieces of feedback:

• For the "Navigation overview, I don't feel like the color coding is working. It seems to confuse/overcomplicate things. What if instead you placed titles underneath each in order to clarify what pages you are showing (Landing, Browse, Learn)?
• If we can shorten and simplify the content for "Navigation overview" that would be beneficial. I don't think we need to say "As shown in the diagram on the right". We also shouldn't use the word "we".
• I'm a little confused about the part where you say "The arrow minicon denotes the modules on the page that navigate users into a deeper section." It seems to me that the colored boxes are indicating this, not the arrow minicon. I feel like this line of text adds complexity that isn't needed. If you add the names of the pages: Landing, Browse, Learn under each image it should be very clear. Then you wouldn't need to explain the arrow. Also, the idea of going deeper into the page should be covered in the "Navigation overview" paragraph copy.

[duelj]

@nataliafitzgerald thanks for taking the time to review everything. In regards to your third bullet point, I think there might be a bit of a misunderstanding of how the highlighted illustration is intended to work in conjunction of the expand/collapse sections. Because this was something our team felt might be helpful for others including the devs. who end up building it, we put together a quick animation to show the intended interactions. I hope the animation helps clarify some of the questions you had. As for the green arrow it was intended to signal the modules on a page that would move a user into a deeper page in that section. I initially felt this would be an important part to help people understand the user journey. After feedback it seemed people didn't feel that it was necessary to call out, and now that messaging is just in the content of the expandables. Let me know if the animation leaves any unanswered questions or makes new ones!

The video can be found on our Google Drive

[benguhin]

Page in progress, updated: https://benguhin.github.io/design-manual/ui-toolkit/layouts.html

[mebates]

Check out how USDS/18F is approaching layout: https://pages.18f.gov/govt-wide-patternlibrary/layout-system/

[duelj]

@ajbush brought up a good point, since OAH is using such a similar format for their loan estimate page is there any way we could get our DM layout page up and running faster by pulling their code?
OAH loan estimates

[stephanieosan]

Probably, yes.

I know from firsthand experience that it's easy to make and modify the boxes that overlay the image. And it's very easy to plug content in and out of the right-hand expandables. I assume it's straightforward to swap out the form images for your page layout image.

I'm sure @virginiacc or @cfarm could walk your team through how it's set up.

[caheberer]

Done!