1

We have other questions (such as this one) looking at the ideal height for a sticky top navigation bar on mobile devices. In most situations you'll want it to be reasonably high so that users don't have trouble interacting with it.

But some sites have a very thin top bar, where they do not expect users to need to frequently interact with them.

Some examples:

  • AMP sites have a 32 pixel top bar (which I do more frequently use because I prefer opening the original source page)
  • 4chan has a top bar of only 21 pixels

These heights are in virtual pixels, not physical pixels. For comparison, on my Android phone the top notification/clock area looks to have the same height as the AMP bar, 32 pixels.

I know I've visited some other sites with a similarly thin top bar, but can't remember what they are anymore. I think 4chan's one is probably the thinest I've seen though (and that may be because it's not deliberately designed for mobile browsers?).

Have there been any studies investigating the minimum height bar which can be effectively interacted with by most users? Obviously mobile devices vary widely in screen dimensions and pixel densities, but assuming the user hasn't set their UI settings to too small for them, are there any rules of thumb for thin bars which can be tapped on in the rare occasions you need to? Again most sites will want higher nav bars because they'll be used far more frequently, but some sites will want to have a bar which gives the users options they'll only want to use very infrequently and so they want one that doesn't take up much space.

1

atleast 32 is important and also it would anyway help with the branding/Logo/etc. if theres nothing much in navigation

We have been so accustomed to a navigation that even for SPAs we have navbar that would just help user vertically scroll.

I do believe it should be 40px but 32 is also good.

| improve this answer | |
1

There are a lot of studies done on accessibility to include maximum users irrespective the size of screens. The minimum accepted range of touch target is 7-10mm in physical scale i.e., whenever people want to interact with the touch screen which traslates to 48px in digital scale. To know more about accessibility, you can refer to Google Material Design.

Lets say the the top bar you are talking about has no touch target i.e., no hamburger menu or no other buttons to interact with - you probably only have the title of the page. In that case the height of the nav bar is defined by the height of the text. The least legible font size for titles are 14px - along with leading it translates to 20px. Add 6px padding to top and bottom - we would get a total height of 32px. Which is well spaced out & readable to the user.

If you want to save real estate & not waste space for top bars, you can always hide them on scroll & resurface them when you scroll up.

| improve this answer | |

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.