What is the thinnest a top bar can be for effective touch navigation on mobile devices?
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.