I had a client bring up a good point recently about a mobile menu, specifically where should the "hamburger" icon be placed?
In looking at sites you see it in three common places, top right, top left or wherever the menu appeared on the site, typically below the logo and any header type content (login, cart, etc.) but above the main content of the site.
Where is the ideal place to place this icon from a UX perspective?
Note: This is for a mobile friendly website.
There's is a lot of research around that explains the way a reader's eyes naturally flow when reading, so you may find some of that useful. For example, you may get some insight from:
How much of that applies to a User Interface is always open to debate. Your question doesn't specify whether you're talking about a mobile app or just a mobile-friendly website, but one of the factors of any good user interface design is that your design doesn't behave in a way the majority of its users don't expect it to.
So, as you say in your post, the three most common places for the hamburger menu is top right, top left or wherever the menu appears. Because this is how most sites are doing it and therefore there is a familiarity with this approach, I would definitely ensure you adopt one of these locations. Why? Because familiarity breeds expectation, and this usually leads to a better user experience because it matches what users are expecting. Here is some further reading to back this assertion up:
I would argue that you don't want to step away from this (a familiar approach) unless you have something that is significantly better and therefore warrants the change.
In terms of answering the more specific question of which one of the three most common locations you should adopt, without seeing your specific design it's a bit hard to offer a definite answer. I have used both top left and top right in my web designs, and I've used all three in the mobile apps I've developed.
In a nutshell, the location is somewhat design-specifc.
Hope this helps.
This is a very good question. Icons are an extra form of communication. They are commonly used to make important elements of the content stand out. Since in our western society we read left-to-right it makes sense they are the first thing we see when we want to emphasise an element or an action.
On the other hand, there is the logic that you want to read first and, the icon is just interrupting that action or in chunks/jumps having the text first could be a better option.
At the end of the day, it is what most humans are doing and what the brand has established too, or even the action being requested but, I think putting the icon first helps the reader to scan through information while the second option makes the use of the icon pointless.
