Make the header nav not sticky on mobile? about a4-opin HOT 9 CLOSED

Do we need a new design for this ? I can make it just not sticky...

from a4-opin.

@nicoladimarco What do you think? Maybe some small changes (smaller logo?) could already make it smaller?

from a4-opin.

I would suggest the material design approach on mobile:

• the logo appears only on the header on the landing page
• the logo disappears from the nav
• homepage shows only the hamburger icon (could eventually show also opin as page title)
• other pages show back icon, page title and when needed a contextual menu.

from a4-opin.

Hey @nicoladimarco thanks for the suggestion. I am a bit skeptical if a sticky header without any reference to OPIN will do the trick, as page titles mostly don’t fit in there and it then would be perceived as even more wasted space and it makes the design very generic. I would probably make the header less high or not sticky. If we remove the OPIN logo from the header, though, we should definitely include it in the menu once it is opened.

In general the question is, does jumping between the different sections of OPIN.me so important that it should always occupy 10–15 % of your screen. I would answer that with a “no”. Since we don’t have a very hierarchical navigation structure, I think the main way is navigating via links in the content. Maybe we should just have a little sticky “back to top” arrow in the bottom of the screen so that the jump to the menu/top of the page is easy?

from a4-opin.

Hey, @rittermo I am also quite skeptical about your opinions:
"page titles mostly don’t fit in there.
it then would be perceived as even more wasted space.
makes the design very generic.”

What I suggested is the most reasonable and widely adopted solution for mobile navigation. It is proposed in all major UX design guidelines including Google and Apple.

I agree that we can put the logo, not only on the homepage, but also inside the menu when it is open.

Sticking a 50px menu on the top and indicates the page title (i.e project detail, proposal detail, about etc.) is fundamental for mobile navigation especially in such a standard product.

“back to top” arrow is deprecated since a while and usually indicates a lack of decent information architecture. This is also why we introduced pagination for proposals and comments instead of infinite scrolling.

from a4-opin.

Hey @nicoladimarco,

I know that your suggestion comes from Google’s Material Design approach, which still heavily draws on app design principles not on web design. I think the two have some fundamental differences that Google has not always unified well. Using these sticky headers inside an app (i.e. the browser app on a smartphone), which already has sticky elements is often problematic, in my view. Also, page titles tend to be very long and often confusing (because of SEO, bad naming, long titles, etc.) and that’s why most apps and websites don’t show them prominently or not at all. Even major apps like Facebook or Instagram don’t rely on that concept of a sticky header anymore, but one that minimizes when a user scrolls (also a really big and problematic UX behavior).

By generic design I mean that the header looks like a Material design example without much connection to OPIN.

However, we can keep the sticky header. I just want to make sure we are aware of it‘s downsides. Personally, I think that in our case it distracts more than it helps, but that’s just my two cents.

from a4-opin.

Hey @nicoladimarco, do you have the design and concept ready for the material design header? @vellip wanted to implement it and as I said before, I think it‘s fine to keep a sticky header and use the material design approach.

from a4-opin.

@rittermo Hey Moritz, let me finish with the Admin Interface and I´ll provide a clearer concept tomorrow.

from a4-opin.

Will be dealt with in #310

from a4-opin.