UX Problem w/ Layered Navigation on Mobile

[simeoned]

Hey there,

I’ve been thinking about this for a while and just haven’t had time to post in the forums till now. The problem is that I think the layered navigation subindicator’s clickable area is far too small for use on a phone. It’s even too small when using a mouse on desktop.

Have a look here:

The margin on the right is set to auto which makes the subindicator push out all the way to the right (though I think flexbox would make a better solution to the layout of these elements - something to think about). The problem with this is that the area highlighted in orange is all clickable for the “parent” page and the user needs to avoid that while managing only to touch the small area that is actually the right arrow itself (plus the 5px of margin it has - not very much). The result is, 9 times out of 10, the user goes to the parent page when they meant to explore the next layer of navigation. The whole thing is rendered pretty useless at that point.

This is a huge UX problem that I have solved in various ways that are cumbersome and not great from a maintenance perspective. For example, I’ve set the sub menu trigger to anchor and created an entirely separate mobile menu which simply repeats the parent page in the next layered pane. That is not a great solution and I would like to not have to do that ever again.

How can this challenge be overcome in a way that keeps us using 1 menu for mobile and desktop and creates a better experience for the user? Put another way, how can I increase the clickable area of the subindicator itself?

Thanks,
Dan

[ruenel]

Hello Dan,

Thank you for the very detailed post information. Please edit your header and then click the Layered Navigation element. Find the Menu > Links > Sub Indicator tab for you to increase the font size of the icon or adjust the margins.

Hope this helps.

[simeoned]

Ah! OK, thanks for this. It pointed me in the right direction. But… the margin didn’t fix it. Here’s what I did to get what I wanted done and for anyone else that needs this:

And then I added this to my child stylesheet (could add it to wherever you add site-wide styles):
.x-anchor-sub-indicator:before{text-align:right !important;}

this combo results in this:

A much wider clickable area for the user on a small device.
This is much better but I still need to do some further usability testing on this to determine if the problem really is put to bed.

Thanks!

[ruenel]

Hi @simeoned,

If you need to increase the padding, since there is no padding option, you will have to add an inline element CSS by going to Menu > Customize tab in the Layered Navigation element settings and then insert this:

$el .x-anchor-sub-indicator {
  padding: 10px;
}

Feel free to adjust the CSS code as this serves as just an example code to get you started with your modifications.

This should increase the padding around the icon.
Hope this helps. Please let us know how it goes.

[simeoned]

There it is. Thank you!

[marc_a]

Hi @simeoned,

We are glad that my colleague able to help you to solve your problems. If you have any other concerns, feel free to reach us.

Thank you.