In the midst of redesigning a site.
Happy with the traditional Top of the screen for the navigation but thinking of something different for mobile and fixing the menu to the bottom of the screen for ease of use.
Has anyone else tried this approach and how was it received?
Thanks,
Paul
It’s a matter of UX (User experience). For desktop, the users are used to have the menus on the top. After a while, the burger menu with a slide in menu left or right got also accepted in desktop, but it’s not really a common design.
For mobile, if you want to achieve an app-like design, a sticky tab bar with icons to the bottom with the major categories / functionlity of the page / app and a burger menu top left or right that slides in from left / right could be considered as the standard (and learned) behavior.
However, the downside on iOS: the Safari tab bar is visible until the user scrolls, which might confuse the user, and doesn’t look nice:
I haven’t seen a text menu to the bottom very often.
I use a hamburger in the bottom right on the F6 demo site. Demo | Foundation 6 Stacks for RapidWeaver
Which actually is the concept of a “Floating Action Button” to perform directly specific actions as a short cut (Android standard design element, but also widely adopted on iOS, especially with hybrids like Twitter)
I personally (my oppinion!) dont like the idea of having
(No offence!)
No offense taken. Sliding menu in the left may not be the best on mobile. But it’s not horrible UX. But for a site like this with so many menu options, I felt that it worked. You could easily open up a lightbox with a menu or some kind of drop down that opened up or to the left.
You can do what you want, but it’s all about usability. Using conventions that users are used to is always best practice.
To quote one of the industry’s leading authority on usability
“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.”
Jakob Nielsen
…which is a widely used and known design, just think of Twitter (2/3 panel from left, burger icon top left on the app, profile picture on the mobile web), or Facebook App (1/1 panel from the right, burger icon in tab bar bottom right), AirMail, Fantastical, … similar to Twitter and your demo site.
(I am using it for my apps as-well 
)
Thank you @dripple , @joeworkman , and @teefers .
I had been thinking of a menu or Floating Action Button (always fun to learn more TLAs) at the bottom for usability on mobile, the whole conservation of movement thing, instead of the traditional top.
I’ve seen it on a few mobile sites but not many. It’s nice to use but I think it needs to be suitably striking as well. @joeworkman is that the reason the mobile menu on Foundation site is an irregular shape, so that it draws the eye and stands out from the rest of the page?
I thought that I circle just felt so boring. The blob definitely makes it feel custom and unique.
The FAB is for short cuts, to avoid using the menu, for one or more common used features, like “create a new post” or “upload picture”.
For main navigations, the burger menu top left or top right with a sliding menu (like on my screen shots) is the most common way for a mobile navigation.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
