1

I'm building a mobile first webapp. I want to add a slideout menu for the main navigation.

The main page of the app is an interactive map, as the user will be moving around on the map a lot, I must deactivate touch for opening the slideout menu, otherwise the user will be opening it by mistake quite often.

Using touch to slide out the menu is a nice feature for mobile users. So, I was considering enabling touch for the rest of the site, and enabling it only for closing it on the map page. Would this seem confusing for the user ? Should I just stick to a button for toggling the slide out menu ?

Edit

I realized that my question is directly related to the library I'm using, as they don't all work the same.

I'm using slideout.js

It seems the author has adressed the issue by allowing a grabWidth so the menu slides out only if swiping from screen edges. Haven't gotten it to work yet though.

  • I don't really understand your problem, google maps has a slide out menu and of course its main page is an interactive map, the touch features work good. – Pectoralis Major Aug 7 '17 at 12:47
  • 1
    The issue is the asked wants a "slide out" menu, as in you slide your finger from the edge of the screen. That will conflict with the free scrolling of the map. – Alan Aug 7 '17 at 13:05
1

Go with a button that (when pushed) reveals the side menu, or a pull-tab for the user to that's independent of the map scrolling. Conflicting UI mechanisms should be avoided.

Example

Replace "Pull Tab" with a more discreet UI object, such as a transparent hamburger menu, or static menu header.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.