1

I have a mobile menu using traditional mobile menu. Due to a long logo, we've placed menu items below. Is it inconsistent that the hamburger icon does not sit on the same level as the close button? Thanks.

enter image description here

enter image description here

Improve this question
2
  • Does the "< Back" link the same as the "X"-Button? If yes, why not just have the Back-Link and call it "Close"?
    – Michael Schmidt
    Sep 24, 2018 at 10:37
  • <Back goes to the previous level of navigation, 'X' closes the menu entirely. Thanks
    – Andrew Spencer
    Sep 24, 2018 at 12:42

2 Answers 2

Reset to default
1

TL:DR: The exact position doesn't matter, what matters is the ease of use for your customers.

There are no such hard UX guidelines as "this element has to align with that element with pixel accuracy". They are only supposed to guide your design in the right direction.
Everything beyond that is visual design and subject to your or your company's styleguide.

With that being said, the most important part is how easy is it for the user to reach / use. How attractive it looks is secondary.

The answer to this question here should be interesting for you too:
https://ux.stackexchange.com/a/89067/67657
It shows that users mostly use the phone single handedly, so consider making the hamburger menu closable by swiping left on it, too.

See this for visualization:
enter image description here

So all in all, think about user friendliness before attractiveness first.

Improve this answer
2
  • 1
    On a iPhone (or iOS platform) the perceived user friendliness is almost equal to attractiveness some of the time :p
    – Michael Lai ♦
    Sep 24, 2018 at 23:01
  • I also want to add -- please make the drag zone for your swipeable side menus a little bigger. I find that on my current phone, trying to swipe from the sides might require you to actually go to the physical edge of the screen, and then swipe it inside. This is hard to do in a one-hand operation.
    – Arkan Tanriwa
    Jun 12, 2020 at 5:27
1

As long as the close button is easily reachable by the hands of the user it should be okay and "normal" users will not even recognize the placement is not consistent.

Sidenote: I would place the shopping-cart icon in the header to make it more prominent.

And i would also consider redesigning the logo and/or creating a web-friendly version of it that is readable/recognizable in smaller size.

Improve this answer
1
  • +1 some really good points to consider for mobile (first) design
    – Michael Lai ♦
    Sep 24, 2018 at 23:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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