A reader wrote in with this question:
We know that slide out menus are good for mobile (Facebook, Gmail, etc) But do you think they are appropriate for desktop web applications?
Good question. You know the type:
Certainly we can replicate this design pattern on desktop sites. But should we? Does it make sense? Didn’t this pattern evolve simply because nav can be very space consuming and, while we have plenty on desktop, don’t have enough on mobile? Does the ubiquity of this pattern on mobile mean it can now move safely into desktop without confusing anyone?
There are already projects taking it on, like Sidr, Meny, jPanelMenu, and many more. I see people experimenting with it on CodePen all the time.
Let’s take it to a poll! It’s over in the sidebar.
I wish sites like Facebook would start using an offscreen nav like their mobile site. When I load up Facebook, I’m hit in the face with 3 columns of text and ads and it’s sometimes a bit too much to handle. I prefer clean and spacious UIs & the offscreen nav would help clean that up.
Facebook does use this offscreen navigation now
I’d agree that slide outs are great for mobile but aren’t suited for desktop. Firstly, on mobile, the OS can strongly guide devs to adopt app drawers as a concept, which creates and expectation for users, and that flows through to web pages for sites like LinkedIn where their app is mostly HTML5 anyway.
Secondly, if the drawer style is to be replicated closely, then I’d need to have the little bars to pull the drawer out right up in the top left corner. A long way from where the eyes fall on a large monitor.
Shameless plug, but Jonathan you mike like the slimmed down interface for facebook at fbslim.com Early stages of dev…
I think that was invented for the mobile user experience because of the touchpad. So why not on a tablet or a tablet-PC.
But I think that when the user can use a mouse, it’s a bit useless (but fashion)! :D
I think this technique might be more useful for pages where navigation is the lesser element of the website like scroller websites.
We also have to consider that the placement of these menus is often in the corner and represented by a hamburger icon. Does every user know the hamburger means navigation?
I would say that if you want to ensure everyone can easily navigate your website, use the ample space available to us on the desktop for the nav and keep the sliders mobile.
That being said, if the navigation isn’t a big element of your site and you want to guide the user through your website through the content, buttons and other imagery, why not?
It could be annoying to have to open it every time i want to use the menu, but i think it would be awesome if it was an option to have it expanded or hidden, similar to photoshop where you can collapse it or have it open all the time.
That way people with smaller screens, or people who prefer the spacious interface would have the option, where those who would prefer to avoid the extra click and older interface could choose to keep it.
I think it makes sense, if it is implemented with a slightly differentiated intention. In mobile, we use off-screen due to limited screen space, but in desktop, I think we should interpret it to be a mechanism for a less-cluttered, cleaner interface. For example with YouTube (if you’re logged in and have any appreciable amount of subscriptions), this makes perfect sense to me. Basically, when you’re dedicating yourself to viewing a video, you may wish to go use some navigation elements, but that’s not the primary purpose of the page you’re on (viewing the video). So to click on the (what they are calling “Guide” on YouTube) and getting a listing to form showing your nav. options keeps your primary intent of the page clean and still gives you that functionality. When you’re using the YouTube mobile app, you get the true use of off-screen space for the same navigational elements. I believe this to be a great blend of the two approaches with the shared intent.
I couldn’t agree more. I’m even thinking fo hiding shopping carts on e-commerce websites. So you can open it only if you wish to see what items have you added to it.
It’s like that on Pinterest – http://pinterest.com/
I think it can be useful when used correctly.
I like to see it/use it when navigation is truly a secondary function (shouldn’t be interacted with often). OR when I want the user to truly focus on what is on the screen and nothing else.
Slide out menus are answers to the lack of space on mobile screen. On desktop there is no need, although apple have introduced this slide on mountain lion, it’s a little confusing when you have more then one screen.
Google+ has something like this with their new updates and I think it works quite well for them. I don’t think it should be a norm, but could definitely work well for some sites if used correctly, although Google could just be one of those exceptions to the rul. Could probably go horribly wrong if not used correctly.
I think this a “none of the above” option. It really depends, at least when it comes to desktop sites. If you have a site that it commonly accessed by users used to mobile browsing it might well be appropriate, even better – give them at least the option of a similar user experience regardless of platform. Although as Kelly suggests an option to have it always open on the desktop where you’ve got the space strikes me as nicer still.
But if you’ve got a significant proportion of users who only access via a desktop/laptop and are used to that paradigm. Especially if, like my parents and my sister that’s their sole browsing paradigm, they’re going to look around for navigation tools wonder more or less politely where they are and then give up and either never go back or ring me and ask how they get around on the site. Which will certainly have me saying rude things about the designer and probably them too.
It’s like all these things. They pay us to use our brains and experience. There isn’t yet a one-size fits all answer. If you’re designing for mobileBrowserTricks.com.uk then go for it. ruralOver80’s-home-dating.net.uk – maybe not! (With the greatest of respect to either or both if they exist and anyone who would like to use either random special interest group I plucked from my head.)
I think they work on mobile apps and such like but for desktop sites? No. There’s not much point in my opinion.
Some (most?) implementations rely on javascript too which should work most of the time but we all know not everyone has it enabled. Something as fundamental as the navigation should be simple and work flawlessly 100% of the time.
I think that if the nav starts “popped-out” and the user has the opportunity to hide the sidebar to increase main-area real estate and focus, the drawer pattern can work.
But hiding the nav behind a hamburger on a large-enough screen to accommodate it is silly I think.
I thought about that too. Possibly showing the nav and then animating it to collapse on load, but then I think “What’s the point of all this?”
It gets at the crux of the issue that designers like it because it’s unobtrusive, fancy and one more element to pretty up, not necessarily usable on larger screens.
I think… depends of screen size. Thats all :)
Depends too much on the type of layout youre facing (news? photogallery? cms? erp?), the context inside the offscreen menu (a simple menu? a search bar? both?).
Oh, depends on how it is implemented, too ;)
Can be nice, especially on full background websites, but must be done properly.
When working on a Mac with your Dock placed on the side, it can be very annoying to have it popping out when trying to reach for the drawer nav.
I think, it’s a matter of preference.
If you try to highlight the content, then there’s nothing better than an offscreen navigation. Also, if you have a really heavy, unclear menu, then it’s a good chance to move it outside the actual screen – so you gain much more space for it.
On the other hand, you pay for it with the speed of using it. A fixed menu is better reachable than the one you have to activate.
But you have to see: Eventually, you are already using offscreen navigation for desktop; my mother owns a little netbook, with a screen-width of 1024px, that’s the same as a landscape ipad.
So if you calibrated your media querys to work with an offscreen navigation for landscape-ipads, than you also make it work with a netbook.
It can work fine on desktop website, you just need to know when and how to use it.
Google did an amazing job on the Hangouts page: http://d.pr/i/CMOx
I think it’ll be a nice feature for the upcoming touch era of desktop pcs.
But still it’s not nice to use with a mouse. If you think about the left sidebar of G+ it’s so annoying. I hate that thing.
bethel.edu uses it for the search area
also – the new squarespace.com features it
I think, like many other things… depends. Mainly the screen size and “content”.
I think it can be used on any website but the important thing is knowing how and when to use. =D
Having said I don’t think it’s a great idea, I’ve just realized that I’ve been using it happily on Google+ for a while now.
As with most things it depends entirely on implementation and design. If the choise is well considered and not tacked on it can work quite well even on desktop with a lot of screen real estate.
My background is “Form follows function” . The primary function we are to follow with the form / our design on a desktop as well as any other site is – information. Get to it quickly and efficiently , and where possible – aesthetically pleasing.
“Drawer” menus have excelled on mobile and smaller displays for the solving the lack of space issue. With the new huge desktop screen sizes,
I don’t see a need of hiding an information in order to show it on hover or click. Yes, for some minor information I need not see all the time, but the essential element like navigation?
Of course it can be done on desktop sites.
But why?
Not everything that can should be done.
Otherwise , it will turn a functional “drawer” effect so useful on mobile et al.
into a gimmick on a desktop site.
I guess this works
I noticed this recently on the new squarespace site:
Your text to link here…
Got me thinking about it. For the most part I think that is used by designers who want to minimise and declutter but maybe dont think about the user experiance enough.
Personally on a wide screen I dont think its nessery, reading the nav is also a great way to understand the basics of a site.
However! I do think it would look awesome for a setting kind of panel, you could change your profile details for example and update them in real time on the page, which would give great context to the changes.
Damn, now I’ve got to give this a try some time.
I believe it only works on desktop sites if the user has a touch screen interface on their laptop or pc otherwise it just doesn’t do it for me.
I think a good way to answer this might be to consider whether or not you collapse pallets in desktop software, like Photoshop, Excell, or Keynote. I personally like my pallets visible all the time, and dislike Facbook’s offscreen menu.
I do like clutter-free reading, though.
When doing this keep in mind the older or less computer familiar users. As long as it defaults to open and doesn’t disappear in one of the grrr where did it go moments :-) It would provide a consistent feel for tablets and desktops.
I don’t believe it’s necessary after a certain browser width (although I do not know what this width is).
If I did, my vote would likely be “It’s good in a responsive design where width < x.” I don’t think it should matter if it’s mobile or not.
I don’t think so, is this the appropriate way for desktop application?, I mean does it better for SEO too? desktop application’s nav should be better and more clear as standard.
I have a problem with slide out drawers in general. While they do allow a site to use small screen space more effectively, they also usually have no indication that they are available. As of right now, I am not an iSheep, so I don’t have an i-Phone. However, on Chrome for android, when you slide right or left across the screen, it will change tabs within the browser. So when using websites that I know have a drawer feature (usually because I wanted to switch tabs), I switch tabs a couple of time before getting the drawer. As far as native apps are concerned, they have some of the same issues. I was not until recently that Google added a little tab indicator to maps that lets the user know “something” is there. Unfortunately, it looks like a GTK, or Windows scroll slider so my first thought was that there was more on the page. So the questions really are,
Are slide out trays truly good for mobile?
If so, why?
What are their drawbacks?
What visual queuing conventions should the development community to help Granny Smith know that the feature is available?
Is a slide access motion really the best?
I believe this fits greatly on desktop sites because it removes the navigation from the users view so that the can focus on what matters, the content. Then when they are ready to navigate they can open the navigation.
The poll seems to be hidden from view on the iPhone or I just had to scroll and scroll to find it so I’m guessing its not good for mobile.
I tend to agree with the comments leaning towards this technique not being necessary for desktop but I also don’t like the idea of being boxed in when it comes to the possibilities. This may be a question where the debate is more valuable than trying to arrive at one answer.
Well i think that a small menu drawer on a desktop would not be a good idea but i think it can be implemented in other ways like a thin left bar of 100% height and it slides open on click, or any thing pretty dynamic like a hook from the top and a drag to open drawer.
Speaking from my own personal experience on the subject, I think the navigation/menu drawers are dynamic enough to suit the needs of both a desktop or mobile user. Here’s a link to a project I’m working on that solely uses a sliding side menu – Sliding Side Menu on Desktop and Mobile
I actually came across a project that used offscreen navigation. The design supported a single, under the header menu, but we needed another menu with a lot of links in it for logged in users ( found about this after the design was approved… :| ).
We couldn’t touch the design, didn’t have a sidebar (it was single column) so implementing a Sliding Side Menu actually made perfect sense. And it worked like a charm.
With that in mind I integrated the really nice Slidr library into a WordPress plugin in case anyone else needs it: wordpress.org/plugins/wp-offscreen-navigation
How about “It can be good on some sites”? I feel like “It can be good on any site” doesn’t really apply, but it does fit some sites. It depends on the type of content i’d say.
I wonder if the people from, let’s say, Teehan and Lax (http://www.teehanlax.com) have some statistics on how this worked out for them?!
Frankly, i think offscreen drawers dont really make a lot of sense on the desktops. The entire screen animating to the right/left is not that very subtle. Its actually more of a paint point if you had to use it all the time.
The way pinterest does is nice. They use the same icon too. But it does not slide the rest of the screen to the right / left. Youtube does it nicely too. Have it hidden and toggle it.
If the off screen nav would also be in desktop, we could just always assume that we can scroll from the side to open the nav, which makes websites easier to navigate through and gives you straight away the feling that you’re at home ;)
I’ve recently just developed an adaptive website (no not responsive!) that uses this exact functionality for screen resolutions within the realms of mobile and tablet devices – which are evermore increasing up to similar resolutions of desktop screens.
This concept very sound – with such mobile devices catching up on the processing power of desktops – making use of 3D/2D space on and off screen is a great approach to making the most of available space on the screen.
Desktops with a large screen real-estate might not benefit from the same perks as what you would get on a mobile device, but fundamentally if I don’t need to see it all the time that freedom of hiding it away is always there on desktop and makes for a very modular interface – where crucial information is shown were and when I want.
I vote for using mobile navs on desktop, and for a lot of very logical reasons.
Problem #1 with using horizontal top level navigation:
This is the first problem that all CMS users and designers run into first with horizontal nav menus> They run out of space from too many top level links, or the fonts sizes are too large. This is also a problem for creating a mobile version of the nav that kicks in only when the nav items have overflowed horizontally. Just more javascript development to fix this bug. There is no one resolution that works for all sites.
Problem #2 with using horizontal top level navigation:
Drop Downs! Drop downs are extremely painful to hover & navigate with any input device wether mouse, touch, or trackpad. The constant slip or miss click, and the user has to now navigate all the way to the top level and start pulling the drop downs again in hopes that it doesn’t happen twice, or even worse, 3 or 4 times before they click the link they want. Another huge problem with the drop downs is knowing when to make it drop down to the left side or right side, so again more jquery has to programmed which slows the performance of the site down just to stop drop downs from floating outside the right side of your webpage rendering them inaccessible, so you could drop them down to the left instead, which just gets messy and confusing and more likely to make a mistake again and start all over.
Problem #3 with using horizontal top level navigation:
Tablet devices!!!!! This is one that breaks the camels back so to speak. First of all, touch-gesture driven navigation is the future, it’s not just the future, its the Now! 50% of web traffic comes from tablets and mobile devices, desktop & laptop sales of in serious decline, so what does that mean for your horizontal navigation? HEADACHES!!!! for you and your web developer. There is no one perfect screen size break-point that will be perfect across all devices. Using user agent detectors to load different menus is also a hack that doesn’t work properly all of the time, so a true-gesture-driven universal navigation system is the only & best way to have consistent nav flow of your website.
Problem #4 with using horizontal top level navigation:
“”Wait a sec, I’m on a page that is a child page of a parent menu item, but now I can’t see the active page highlighted in the menu because its hidden in a drop down! Where am I?””
Answer: You Are Here > ( Breadcrumbs ) !
Breadcrumbs are the best way to convey to your visitors where the heck they are, plus its better for SEO if you are using RDFa and schema.org markup. This way they can always see exactly how to navigate to a parent page with ease, it doesn’t look hideous in your page just below the header.
Problem #5 with using horizontal top level navigation:
Let’s be honest here, as a web developer and designer, its nothing more than a huge pain in the butt to constantly have to program two different nav menus for each project. All this does is slow your site down, and confuse visitors even more because the website owner is still stuck in the 90’s. I say, if you want a top level horizontal nav menu, do something simple, like 2-3 main functions of your website, like google, twitter, facebook, and all the other large websites have done, and put your more detailed navigation menus inside the pages they coincide with. there’s an html5 element called USE IT!!!!! IT’S YOUR WEB PAGES BEST FRIEND!
Problem #6 with using horizontal top level navigation:
MegaMenus! Don’t even get me started on this disaster! If you want to increase to cost of developing your site, while at the same time slowing down the site load times and performance, and even worse, completely distract your visitors from actually using the site, well shoot, why bother with a web page at all? Just make the whole entire website a nav bar lol! The main problem with megamenus, are they full of problems! The truth is, these types of functions should be reserved for the website content area itself.
Still need more room for that hideous eye sore horizontal navigation in the header with every single link your site has? Create another small footer nav menu, or even better, a site map page. Why would you want to clutter up every single page on your site with a massive header they have to distract from just to get to the important part of your site: THE PAGE!
People should get used to what a menu button is wether an icon or the word “menu”. It’s easy to use, infinitely extendible, universal display across all devices, and they are pretty and fun to use. Don’t worry, if your visitors haven’t learned to click a menu button yet, they will soon. They learned how to use a mouse, they will learn to use your menu button. Besides, it’s only a matter of time before they realize what it is since a large percentage of the web is already made the shift away from non-sense horizontal navigation menus.
By they way, love the new design on CSS-Tricks!