3

I have a long (possibly, around 2500-3000px) mobile page which content is divided into three sections. The page has a header for global navigation. I am now wondering should I have a subheader for local navigation for these three sections.See image below.

enter image description here

Is this type of local navigation a good idea and if so, when it should be used (e.g., how long the page should be)? Also, if a subheader is used should both headers collapse when the page is scrolled down?

There is already a similar question about this, but it did not clearly answer my problems about page length and the overall necessity of subnavigation in mobile web pages.

Link: Mobile global/sub navigation for a long scrolling page?

Furthermore, I would appreciate if there are any good examples of local navigation on mobile web.

3

Having a submenu on a mobile screen is a very challenging task to accomplish. The type of menu you have shown in your mockup reduces the user experience. The header and a subheader consume most of the space from the top of a mobile screen. We have to be careful while playing around with mobile screens.

I would suggest having a hamburger menu in the header that has a tray menu sliding from top or from left which can be used to accommodate most of the menu contents like in the following image.

enter image description here

You can find the tutorial in this link https://www.rsjoomla.com/blog/view/337-template-tutorial-make-navigation-on-mobile-friendly-with-sub-menu-opening-button.html

I see Wikipedia mobile site has a very good example of placement of long contents in a very user-friendly way. the collapsable sections make the website more mobile friendly and keep the user away from long scrollings. It is best suited for you if your site have a lot of text content.

enter image description here

  • This post ux.stackexchange.com/questions/99554/… contains a link to a study showing that the hamburger menu significantly reduces the interactions with anything hidden behind the hamburger. Beware! – virtualnobi Jan 18 '17 at 7:53
  • Thank you for your answer, especially the wikipedia example! Funny, a page that I view almost daily and did not realize that it could answer my problem.. In my UI, I have a hamburger menu in the header bar. Putting a local navigation options for the page with sub-header like in your example is a bit problematic. This because my system has a lot of different stories/pages (e.g. similar to wikipedia articles) with the same 3 section structure, but different content. – jakapo Jan 19 '17 at 8:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.