Foundation.mozilla.org: UI for nav component for user created pages

[taisdesouzalessa]

Do UI Design, expanding the work on top of the wireframes built on #343

[hannahkane]

Design only estimate

[taisdesouzalessa]

Here are the comps of the simple model (scenario: college student who creates a couple of pages for their research project):
https://redpen.io/p/cb61fd65250ff905b6

I find prototypes are better to test those MVP and see how they really feel in the context of the website. I added the styles on top of the prototypes I built in the wireframe stage. They are not pixel perfect but give a better idea of the behavior of the final pages.

V1 (multi page): https://taisdesouzalessa.github.io/simple-model-ui/
V2 (one long page with multiple sections): https://taisdesouzalessa.github.io/simple-model-ui-v2/

Those prototypes were built to be seen in 2 screen modes - 320 [mobile] and 1280 [desktop]. Please use the Inspector in Firefox to see it on those modes:

[xmatthewx]

These look and feel fantastic. I think it's almost ready to go.

While I really like the long page, scroll down option, I don't think there'll be an easy way to reliably implement it in the CMS –– too much room for user error or confusion since they can manipulate html. While I'm sure it could be a fun problem for us to solve, I'd rather put our energy into landing an MVP version more quickly. And, there'll still be cases when multi-pages will be necessary. We could always explore that later.

The one thing we need to resolve: our site's primary nav is fixed on mobile when a user scrolls down. I'm unsure if we should stop doing. Will it feel odd to lose it only in this scenario? I also wonder (unsure), if we should keep a minified page title. Imagine a visitor who follows a twitter link directly to the Froggy research page. They scroll down quickly. Seems like we want them to see at the top: Main menu, then minified Froggy title, then "research" on drop-down. What do you think?

One other consideration: We will need to teach users how to use page title and heading across their set of pages, to make things easy to find in CMS, but clear to users. This probably happens in a training FAQ doc.

[taisdesouzalessa]

Hey Matthew, here is the new version, based on your feedback and also the designers' feedback from the design critique session.
Some considerations:

1. All pages have minified top nav and page title on mobile (I think we could use the minified version of the top nav across the site too)
2. Instead of having the same words on the top of the page and in the menu, I added an optional treatment for the first paragraph of the content.
   
3. My suggestion is to keep the top nav fixed on desktop (so the "sign up" button is visible at all times) and not on mobile so we make a better use of the limited space. What do you think about this approach?

Here is the prototype - please see it at 320 [mobile] and 1280 [desktop]

https://taisslessa.github.io/simple-model-ui-v4/index.html

[taisdesouzalessa]

Regarding your last comment, we could train the authors as you suggested. We could tweak the layout if necessary, depending on the technical restrictions from the CMS side. I did some studies on different approaches we could take and pros and cons.
https://redpen.io/p/ck8e908630d4872cb7

[xmatthewx]

Thanks @taisdesouzalessa.

I would flip the order of your Redpen options, and think of them as Phase 1 through 3 rather than different choices. Let's see what @alanmoo comes back with in terms of how the CMS will enable this and then figure out MVP.

[xmatthewx]

@taisdesouzalessa really nice work on this UX and UI. I think we can probably close this. Track requirements #477 and then open a new design ticket only if needed. What do you think?

[taisdesouzalessa]

Agree, let's close it :).