Content first: hiding the UI on scroll
9 years ago from Mathieu Mayer, Designer at AQ, Tokyo
It's quite a redundant topic within the design/usability community lately. I've seen plenty of very cool websites that hide their navigation behind a menu icon, even on desktop. We're reproducing what was and still is imo a great UI solution for mobile.
I love the pattern in general and always curious to see how much creative can people get with it (Teehan & Lax is a pretty cool example) but I'm very curious to know why this pattern is getting more and more popular out there.
My first guess was that hiding a menu or any trace of navigation UI on a website allowed a better focus on content. My concern today is that of: isn't this hurting the long-term experience of people coming to our websites on a daily basis?
Clicking on an icon to be able to navigate on a website is not that painful. But what if we need to click on that icon 30 times by session?
I'm trying to play around this idea and have been experimenting with a few ideas today. The example below is what I consider to be a decent compromise (Chrome and Desktop only):
It is based on Headroom.js but display a small hamburger icon on scroll to indicate that the menu is still there. If you rollover the area, the menu is being displayed too.
Do you have any other example of websites that manage to hide part of their UI on scroll (basically when one's going through some content) but still do a pretty good job at keeping their usability intact.
I'm doing some research for an upcoming project and would be interested to learn more from the DN community :)
Login to Comment
You'll need to log in before you can leave a comment.Login
New accounts can leave comments immediately, and gain full permissions after one week.Register now