Visual design of footer navigation

[jenniferthibault]

Based on research of where users go to look for Press pages and discussion in https://github.com/18F/fec-cms/issues/455#issuecomment-245083161 , the team identified the need to either expand our utility nav, or iterate the design to include navigational components in the site's footer.

We believe that a concise utility nav will help keep the site clean and prioritized, so are interested in developing a footer navigational field for similar nav items.

This task is for updating the layout of the footer to accommodate a navigational field. I intend to look at patterns established in the US Web Design standards for inspiration, since we've been using their footer templates already.

[jenniferthibault]

Using something close to the US Web Design's Big Footer, but based on a four-column layout instead of six, I have a roughed out concept of what it could look like to integrate more site navigation into the footer. Most of the other elements are guesses and placeholder, but I wanted to give the Press & Contact links some neighbors for context.

Moving the contact link down would adjust the utility nav in the header like so:

cc @nickykrause @emileighoutlaw @onezerojeremy @noahmanger

[nickykrause]

@jenniferthibault I like the look of this (and this is the first time I have been linked to the US WDS, which is a very helpful thing!....)

Questions I have:

• "About the FEC" appears in the footer, as well as in the utility nav. Is that the same "about," or are they different somehow?
• Some of these links are for content elements with which I am unfamiliar, so I am curious:
  • What is "The FEC API: / developers"?
  • Does "Contribute to this site" go to GitHub?

Would the list of "nav links" be the main nav repeated?

(Possibly not very helpful "feedback" - thanks for your patience with my ignorance on some of these things!)

[nickykrause]

@jenniferthibault: Quick clarification: I know you said some are "guesses" or "placeholder," so perhaps there isn't much more to them than that. I was just curious where some of the guesses are coming from / what they are in reference to

[emileighoutlaw]

I have the same question about the "About the FEC" link.

Having talked through content with FEC folks yesterday, another candidate I see for the footer would be Reports about FEC (which include financial, FOIA, IG, procurement, and performance reports).

I also think there will be a few OMB required things for the footer. For example, information about the No FEAR Act and information about Plain language. Those are the two I know are required to be on the homepage of .gov websites, but I'm not sure who would know what else might be required.

[nickykrause]

@emileighoutlaw I was just going to ask if anyone knew more about the partners' comment yesterday that there are "regulations around what has to go on the homepage of a federal website." Hadn't even thought about that 😬 , but, I agree, maybe some of those things will find a good home in the footer.

[jenniferthibault]

I should have just used lorem ipsum for all those links. I feel like i caused some panicking that i didn't mean to cause.

Sorry for not being clear that I am looking purely at the visual layout here. I was not trying to get into any more IA, but I was trying to put things in so it wouldn't be empty.

So I did some best guesses based on common patterns:

• FEC API/developers is meant to link to the FEC API
• Contribute to this site would go to the main FEC GitHub repository
• The Policies links get into some of the "required" (but not well understood) content that Amy referenced in yesterday's meeting. Maybe required is more like recommended. I think we have research to do here.
• Nav links just mean a link to something TBD, not necessarily the main nav

Maybe this would have been better:
What do you think of this layout?

[emileighoutlaw]

Hahaha. Sorry Jen! I am just like everyone else in the world — I see words and I focus in on them like a hawk. 😒

I think that layout looks great. The spacing makes it easy to read the links clearly, and it doesn't look crowded, despite having many potential spots for stuff.

[nickykrause]

@jenniferthibault: I wasn't concerned (nor panicking)! I probably seemed that way, with my battery of questions, but I really was just curious. Responding to your design was probably not the appropriate moment to satisfy the curiosity.

Anyway, as I said before: I like the look of this. It also feels clean and functional to me.

[onezerojeremy]

seems clean and good to me too! Nice work!

We may of course have to play with the layout a bit after we know what all has to go there, but this feels like a good place to start.

[jenniferthibault]

Haha no worries all, I think we're all running in high gear these days 😄

Yes, of course there's flexibility for it to evolve as the content does. There could even be category headers for each column.

For now, since the layout requires moving the existing GitHub link out of the base footer, I'd recommend we include that in v1 like this, and move this forward to implementation so that we can get the press section up.

In later sprints, when we can prioritize other parts of the IA, we can continue filling this section out and determining the content design of what lives here.

Closing and opening an implementation issue. Thanks all!