Process header and menu design explorations

[furilo]

Here are some explorations about changes in process header and menu, in order to make the menu more visible and improve the phases indicator/CTA. Comments:

1. Hero style: we'd transition to a hero style, taking ideas from our initial proposal. The main reason is that this way we can have a more visible menu. Visually maybe its more appealling. We gain a little bit of vertical space. This hero version would allow to create different design footprints for different sections easily. For example for conferences we'd have a taller header without almost any other change.
2. Help system: I propose a system so that the user can close a help banner; if they do it, they will be able to open it again with a small widget in the same position. I think it'd work well as it's not intrusive at all and it fits with this new design.
3. New white phase box vs. new process intro blocks: if we decide to end up implementing the process intro blocks (System help / Process intro #4136) maybe they are a little bit similar/redundant with the new Phase Box in the header. I'd think first on the header, and if we like it, think about the Intro Blocks.
4. I've included a test when viewed in a super-wide screen. I think it'd work well.
5. This changes only affect the header, so implementation is clean.
6. I open a new issue to discuss what to do when items in the menu don't fit in a single line.

A. New header on process home

B. New header on proposals

C. New header with Intro Blocks

D. New header on super-wide screen

E. New header with short help

F. New header with long help

G. New header with help on proposals

Related with #4136 #3973

cc @decidim/product @decidim/lot-core

[mrcasals]

Looks good to me! I really liked your initial proposal when you presented it, so 👍 for me!

Just a question, the help section does not exist right now, right?

[carolromero]

Hi @furilo, this is great! With this solution we're solving several problems at once. Also, your initial proposal always was a winner from the beginning 😎

Some comments / doubts:

• I love the hero style, and as you say, stays in tune with the current design of Conferences.
• Help system: definitely I'd go with your new proposal, I think it works very well. I understand that these are the announcements that we have already implemented (in almost every place), right? (Is that what you were asking @mrcasals?)
• Regarding the intro blocks, maybe this is the one I would drop because it can really bring some confusion vs the white phase box.
• Just a quick doubt on menu items color: what happens in the case of Reus, for example, that they chose a yellowish color?

[furilo]

@mrcasals the help section is the evolution of the banner call out we have. It would mean just adding the ability to add banners in more sections. Let's keep discussing in #3973

@carolromero Reus could look something like:

I guess we have the OK to proceed to HTML. Please confirm @decidim/product

[mrcasals]

@furilo thanks! The issue you link to doesn't seem to be related to this, maybe you mistyped it? 😄

[furilo]

@mrcasals haha totally: here it is: #3973

[carolromero]

Hi @furilo we have pending this: #4231 before we move forward. Also, when you click the "More..." link, how is the complete menu displayed?

[oriolgual]

if the menu is also changing, shouldn't we apply this header to other participatory spaces?

[Crashillo]

Design PR #4284

[carolromero]

Hi @oriolgual, yes we should. I now see that we've been talking about process header when in fact we're referring to space header.

[mrcasals]

@decidim/lot-px we were discussing this in the PR, but I think it's better if everyone is involved here: what happens when a participatory space does not have phases/steps? Considering that right now we don't have a CTA, so I guess both the button and the steps "progressbar" should disappear? Wouldn't the box look weird then?

[mrcasals]

Also, @decidim/product 👆

[Crashillo]

I've updated the screenshot accordingly, @mrcasals
#4284 (comment)

[mrcasals]

@decidim/product @decidim/lot-px the related PR has been merged and the new layout is already on master, can we close this issue or is there something pending?

[carolromero]

@mrcasals @decidim/lot-px in this issue there is also the new design of announcements for contextual help. If this is also been merged we can close it.

[oriolgual]

Nope, we're still working on the announcements.

[Crashillo]

So @oriolgual, I'll assume @decidim/lot-core is on this. I update labels properly.

[oriolgual]

Yes @Crashillo, and I think we can close this, thew new header and contextual help have been merged.