Hacker News Reader

Comment by dovel | Hacker News Reader

Recently implemented snap.js on a site with the ability to drag the menu from the left as well as press the 'hamburger' button. On iOS I found that dragging from the edge of the screen leads to a hit and miss situation where the user may sometimes open the nav drawer but may also sometimes go 'back' to the previous page. How are people 'doing' navigation right now? I always liked the sliding navs on mobile sites, but where should I have the drag box. The bottom of the screen?

View on HN

I would have it take up the bottom 80-90% of the page. For me, and most people I see using smartphones, you could get away with a drag box that takes up only the bottom 30% or so (the most comfortable place to perform such a gesture with one's thumb), but it makes sense to handle the edge cases. Also, if someone tries to trigger that gesture and miss, the default behavior is going to be "try it again, but starting closer to the edge and higher up".

In the case of having such a large drag box how should I be ensuring the user can still interact with the content of the page. E.g make sure the hitbox isnt over the top of links and that users can still highlight text etc?

I recommend using the excellent Hammer.js[0] library to pick up swipes (since that's the gesture you're looking for). I've put together a small proof-of-concept here[1]. Try it out on your phone.

Alternatively, if you wanted to have some slick dragging action (so that a user could swipe a little, and control the rate at which the menu drawer opens), you could put a smaller (maybe 10-20% width) dragbox along the left-hand-side of the screen, and keep your selectable content to the right of that.

[0] http://eightmedia.github.io/hammer.js/

[1] http://codepen.io/notduncansmith/full/sthyJ/

Thanks for the reply. Great! I will check out hammer.js, I haven't used it before. Have you used snap.js / what do you think of it?

I don't think your demo works by the way! Doesn't seem to include the hammer.js file!

I agree with the bottom; definitely easier for the user to reach the nav then. Maybe someone can comment from a UX perspective?

Reply on news.ycombinator.com