Grow your CSS skills. Land your dream job.

Poll Results: Off Screen Navigation Use on Mobile/Desktop

Published by Chris Coyier

The results are in! Nearly 5,000 voters weighed in on the last poll to decide if the off-screen "drawer" navigation style that has swept mobile design is appropriate for larger screen ("desktop") designs. You could answer:

  • It's not good on any site.
  • It can be good on any site.
  • It's good for mobile sites, but not desktop sites.

Only 10% of you were of the opinion that the off-screen nav isn't a good idea on any design. So the vast majority approve of it at least on small screens. The remaining 90% were fairly evenly split. By a nose, at 46%, you voted that off-screen nav can work on any design, making it the most popular choice. 44% said it's only appropriate on mobile sites.

Here's a visual breakdown:

See the Pen GtCqp by Chris Coyier (@chriscoyier) on CodePen

Personally I'd lean toward the pragmatic. I know I asked for you to vote without any context of a particular design. That's just to get a general gut instinct and sense of the community vibe around this idea. But I'm sure most of us make real life decisions, especially design decisions, based on the real facts in front of us. If a drawer made a ton of sense on a large screen desktop site design, we'd probably go for it. But of course this idea was born from the reality that small screens are small and moving navigation away from the primary screen gives us more real estate to work with and bigger tap areas in both places. So to put it on a large screen design where that isn't as much of an issue, might be weird. But then again, possibly less and less weird over time as mobile designs dominate what people interact with.

Poll in the sidebar another day or so before the next one goes up. Check out the polls archive for full, real time results for this and all past polls.

Comments

  1. Adolfo
    Permalink to comment#

    Nice poll. I’m with you Chris, I also believe designing is a matter of finding the best solution to a given situation. So I find difficult to understand why anyone would simply drop an alternative before even trying and evaluating it. We have plenty of offscreen navigations already in use in systems and devices other than websites on mobile, like videogames and point of purchase kiosks and I believe this trend will grow as more and more touch devices from any size are introduced to our world.

  2. I think it would work on websites even for desktop, the problem I have for some of my websites is that I have to make them idiotproof. I was asked to move stuff from a dropdown menu because it was too hard to find. And it was very well organized. This type of issue would make going to this type of navigation not possible, but some other customers may not mind this for their sites.

  3. Permalink to comment#

    I’ve been experimenting with off screen navigation on desktops and I’ve found that pre-expanding the sidebar so that it doesnt get hidden works well.

  4. Cory RS
    Permalink to comment#

    I think that if you’re going to do something like that, once the browser window becomes a certain width, you should no longer be able to toggle its visibility (and obviously make sure the regular content isn’t offset as a result).

  5. I really can’t think of a website that would benefit from off-screen slide-out navigation on a desktop. All it does is require an extra click to access content, which is exactly what you don’t want to do. Desktop screen real estate is huge, even with the average minimum resolution is regular usage now, and it’s unnecessary to waste it.

    I was trying to think of websites/webapps where you could possibly utilise off-screen navigation due to large menus, and I still can’t think of a way in which it improves access or usability.

    My Gmail Inbox has a huge number of labels down the left-hand side. Move them to off-screen navigation? I can no longer see their unread message count.

    eBay has huge lists of categories, sub-categories and filters. Move them to off-screen navigation? It now takes an extra click, every time you switch category, before you can choose the next filter you want to use. Getting to acoustic guitars made by Yahama, for instance, now takes EVEN longer.

    The Facebook Apple/Android app has a large off-screen navigation, whereas the website has a much more condensed top-menu bar, with additional in the top left, and this works just fine. Loading times are generally quicker on a Desktop due to not using 3G, and you get much better precision clicking a smaller-sized link with a mouse than you do tapping it with your finger on a tiny screen. Choosing Menu > Any Group I’m A Member Of from a side-navigation is complete overkill when you can just click Groups > Relevant Group.

  6. Chris Schneider
    Permalink to comment#

    I absolutely would use the off screen / accordian style navigation on a site, but it is definitely dependent on the layout of the website. In fact, right now I am trying to decide on whether or not I could do it for a site I am working on.

    I don’t think that making something that would be 6-10 buttons / menu options into one option with a dropdown/accordian would be wasting anything. I believe that if you can condense and take away from the amount of things a user gets overwhelmed with it will simplify the overall experience. Big whoop, they have to click a button or image that says ‘Menu’, they are used to doing that on their phones and tablets anyways.

    I also think this is where data-driven decisions can also help. Are you making a complex forum or very lengthy/in-depth UX that requires the user to have all of their options out in front? Or are you making something more simple, or something that you want to be more simple? And here’s the biggy….how many of your users are coming to your site on a phone or tablet compared to a full-size desktop? I truly believe that the line between desktop sizes and tablet/phone sizes will only become more blurred, therefor allowing people to make a similar UX across all of them.

    This is all a part of being an interactive designer. How will our users interact with the product we are building? How will decision A help them or hurt them over decision B?

    I think this site does a great job of using this form of navigation on a full-size screen:

    http://www.julianabicycles.com/

    But for them the focus has to be on the photos of their product, not interrupting the good photography with some text.

  7. Permalink to comment#

    I think, it all depends to UI/UX design. For desktop sites this type of menu could be useful for some menu groups, an ex. user account menu (profile, settings, email, password etc.), but not for main website navigation. I picked „It can be good on any site“.

  8. Permalink to comment#

    On mobile it’s a pretty common pattern so it wouldn’t be that big a deal. On desktop it just seems pointless and makes users a) have to look for the navigation and b) usually click or hover on something more than they ought to need to.

  9. Cory
    Permalink to comment#

    Don’t mean to thread-bump, but I’d just like to add that YouTube seems to be doing this now and as a result I have almost 300 px of blank space on either side of the main column. I’m sticking to my original thought that is, “it can be good, if done correctly.”

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".