Different implementations of a menu for a responsive social media website

Question

I'm currently working on a UX for a social media website. My current draft is available here http://yiays.000webhostapp.com/Nyes-Concept.png

Any advice in general is welcome, however my main concern at the moment is how intuitive the mobile menu bar will be...

mobile menu http://yiaysmc.noip.me/imgshare/nyes-menu.png

To remedy this, I'm going to make the user aware that they can swipe right on the menu to expand the menu. In this mode the icons will have text beside them. Is there a better way?

Edit: Title improved.

Answer 1

I'd look at what users are used to seeing. On mobile my experience is with Android, and it's pretty consistent that menues on the left can be viewed with the following icon, known as the "hamburger icon":

Placement of this is also important. It's usually in the top left of the screen as part of a header bar. Provided it's near the top left I think a user would find it easy.

The problem with swiping, is unless it's something common between applications (like swipe to remove from list) it's not something with any visual cues as a possible action for the user. They don't know they can do it. To show them, you have to spend time developing "tutorial/did you know you can" modes that occasionally start. I don't know about you, but I've always got annoyed with those butting in when I'm trying to use an app. It's never the right time, and even if I did follow it I'll probably not remember.

It's not very common to see a narrower icon menu, but to simply hide the menu completely. Does that mean you shouldn't do it? Of course not. But this is the kind of layout I'd expect the user to be familiar with:

(Taken from Google's Material Design which is a popular mobile design pattern.)

So I'd consider trying to bring a little of this, at least the button placement. You could have it overlapping the header image (but does that scroll off the screen?).

I'd be careful just having it as the first item in the list, as it's almost always in the very top left of the screen and your menu starts a way down the page.

So I'd consider something like these two (excuse the bad Paint editing):

But as the other answer mentioned, if your menu has as little as 3 or 4 items in it and they are consistent over the whole application, why not consider bottom navataion, or tabs? Horizontal space is at a premium with portrait mobile applications. The hamburger menu is somewhat disfavoured these days as it hides things from the user:

Answer 2

Please don't use the hamburger menu... This is a social media site, where navigation is potentially the most important aspect of the user journey.

Having them click a hamburger to navigate some place everytime is going to cause frustration. There is a reason why Twitter and Facebook bring navigational components to the front (at least the commonly used ones).

Common placement you could consider:

The Bottom

The bottom gives you enough space to actually space things out without cramming the screen width. Especially on mobile, the screen space is so limited you need to eliminate the usages of two columns to make sure the main content is not squeezed, or downsized in importance. The downside to this position is that on mobile web, you commonly have a navigational component that's apart of the device's browser. Also tapping the bottom of the screen on iOS (if the navigation is hidden there) will slide up the navigation creating the first tap null and void, where users will have to tap twice to move forward.

The Top

Potentially enable a second row for navigation that becomes sticky once the top of the browser hits the top of the component. Same as the bottom, this allows space to do what you want with the navigation. The downside to this is that most mobile devices have become huge that tapping the navigation to move forward will be difficult. Stretching your fingers to reach will become tiresome.

Answer 3

1.The navigation could be solve in 2 ways (imho the current solution is not usable):

• Create a group width a standart hamburger menu, so mobile users can identify where the navigation is located. (remember hamburger is kind of Android user focus, not that common on iOS, so, what is your target?).
• Re-create the menu on a tabs style, bottom if is possible (only for mobile) and in this case i will use the text as additional help for the icons (why not?).

Take care width the fonts reduction, in mobile we need more size font ( i never go less than 12-14px, just check it on a iPhone4 and you will see. This apply to the call to actions you have (i.e. share will be almost imposible to be tab on a mobile).

Also, on mobile we need to design width less and more focused content. My personal recommendation is to re-think the full interface in order to offer less options and information. If you hide some of the content it will help the user to be focus.