1

Content first: hiding the UI on scroll

9 years ago from , Designer at AQ, Tokyo

Hello DN,

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):

http://m3xm.github.io/Headroom-Side-Nav-Pattern/

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 :)

Cheers guys!

6 comments

  • ポール ウェッブポール ウェッブ, 9 years ago

    I've done something similar with my site on scroll: http://dsgn.io

    It's not too fancy or overdone, just simple and smooth. I don't think you need anything more.

    0 points
  • Account deleted 9 years ago

    I would say (based on your example/link) ... hidding / showing menu (the animation / transition itself) is distracting, so my focus from the content is even more corrupted - I don't see a proper reason why you would like to keep it :)

    Most of the time (imho) the solution is implemented just to be "cool", not usefull. And most of the time works against usability (at least on desktop, where we have more space, obviously). I prefer "fixed" elements much, much more.

    Teehan & Lax (I love those guys) but, this is exactly what I'm talking about ;). Instead jumping (many times per session), fixed element would be much nicer & confortable.

    Hey, just my preferences ;)

    0 points
    • Mathieu MayerMathieu Mayer, 9 years ago

      You're making a valid point by saying that the animation is quite distracting itself...

      T&L does a really nice job with their navigation imo tho cause it's not just there to be cool but to list their case studies from anywhere on the website. This way, someone who's landing on a blog post from Google has a direct access to what really matters there ;)

      I can't think of a better application of this pattern on desktop.

      0 points
      • Account deleted 9 years ago

        I thought we talking about idea of hidding elements, not the content of it. Yes, I agree that the T&L's nav itself (content / case studies) is nice :) and I'm big fan of it.

        0 points
  • Pete Lonsdale, 9 years ago (edited 9 years ago )

    Hiding things when you have room seems very counter intuitive to me... even bringing them back in focus on hover seems unnecessary.

    What problem did you have with leaving the navigation there in the first place? What are you trying to solve?

    Condensing nav on smaller screens makes sense, doing the same on desktop does not.

    0 points
    • Mathieu MayerMathieu Mayer, 9 years ago

      The demo I made is for reference only. It's just there to show the pattern.

      Doesn't have to be a nav specifically but also ads, metadata, notes. Everything that is not essential to the content experience could be hidden on scroll down, displayed again on scroll up or hover.

      In my demo, hiding the nav doesn't bring much value cause it's just a bunch of paragraph on a whiteish background but I'm thinking of usage in more cluttered UIs...

      I'm not facing any problem at the moment. I'm just wondering whether there is a correct way to put a strong focus on the content by hiding all unessential elements of a page.

      Condensing nav on smaller screens makes sense, doing the same on desktop does not.

      Maybe it makes sense, but not for the same reasons?

      0 points