Swipe Interactions on Mobile Were Harder Than I Expected

It felt obvious to me that the sidebar should be opened on hover because users often only need it when they know where they’re going or what they’re searching for. But mobile devices don’t have a cursor to hover with. Edge-tapping leads to many accidental openings or closings. My initial intuition of using a hamburger icon button quickly felt extra and awkward to navigate due to extra thumb travel.

I always find swiping more natural than moving my thumb to click anything near the top of the screen. So I settled on the swiping solution. This let out a can of worms: Touching the sidebar triggered the scheduled close event, closing the sidebar broke the layout in mobile view, swiping on the screen made the console throw up errors. Fixing these bugs often required me to change some of the logic for the desktop view.

The hard part wasn’t the bugs. It was learning how touch events work for the first time. This is probably easier for people with mobile experience, but it was new to me. I underestimated it because, unlike desktop interactions, touch interactions required handling additional events and processing them before an action can even happen. Once I understood how the touch events work, the debugging work started to feel familiar again.