Top-down hamburger menu / is it a cool experience regarding my application?

Question

I own an application managing some meetings (conceptual example).

Of course, my website is responsive so that it's fully usable on mobile devices.

Before showing some screenshots of my navigation menu, some people (family, friends, since it's a beta app), are "shocked" that the menu isn't a side-oriented hamburger menu (like Facebook web mobile does for instance).

I prefer the advice of real UX guys :)

So, here the simple screenshots:

When clicking on the menu:

Of course, a click on any link hides the menu and shows the corresponding page. Note that the menu's height takes only 15-20% of the entire page.
I just cut the bottom of the page.

Meetings display a list of the actual meetings. Create your meeting allow any user to create its own. Invite people you may know => facebook interaction to let some friends try the app.

And on Meeting page, when clicking on "refine your search", a filter area is shown:

The matched meetings list would appear under the filter area, and one click on the "click here to refine your search would close the filter area".

Is it acceptable regarding UX, (no matter the actual graphic design is) ?

People are "shocked" since they have the high habits of using Facebook app.
Facebook displays a left-side hamburger menu.
Therefore, in the mind of a lot of people, a lot of lambda users consider that nowadays, applications MUST have a left (or right) side menu rather than another form.

(The real application is not dealing with "Meetings", but it's a conceptual example).

Answer 1

A few things about your question and some next steps:

• User Experience Experts are just people that swallow their pride & know to ask their users / customers. I'd like to think my experience gives me a solid base for presenting better-than-average first-shots, but I know that users ultimately control the direction of my work.

  I wouldn't necessarily take design advice from friends and family, but if these folks are a potential market for you, take their thoughts to heart, especially over us so-called experts on StackExchange.

• Obviously you never want to do something like another company (no matter how large) just because. There are reasons to stick with tried-and-true design patterns--you offload some of your learning curve to preconceived notions and take advantage of the UX work done by those organization--but you have to make sure your user goals match theirs.

  If you're going to use something well-known but in a different way, be extremely careful. If I make a webpage with blue underlined text and clicking on it does something other than activate a link, I'm going to confuse an awful lot of people.

• My biggest issue with most hamburger menus--yours included--is that they don't tend to indicate state. In your screenshots, I'm not sure when the menu is open and when it's closed -- the hamburger button looks the same.

• Finally, from the looks of it and based on your description, I'd be careful putting too much weight in the menu itself. Navigational menus are generally designed to bring you to a location, and having them allow for a lot of interaction (such as creating a meeting in multiple steps) can lead to a scenario where the user doesn't quite know where they are.

TL;DR There's no definite right or wrong in most of UX...it's all about how your audience understands your interface / interaction. So long as you're considering your users and testing, there's no issue with doing something different than Facebook or Google. They certainly don't have the market cornered on good ideas!

Answer 2

It's not about whether or not to follow trends just because Facebook has done it. No doubt, Facebook has likely done loads of user research on what is more intuitive for most of their users.

Source: How does something become "common knowledge"?

You should do your own research to see what makes the most sense. In your case, the best way to determine if this is appropriate behaviour is not to ask Family or Friends but to approach others who are within your target user group and run an A/B test.

A/B testing is jargon for a randomized experiment with two variants, A and B, which are the control and treatment in the controlled experiment.

Source: http://en.wikipedia.org/wiki/A/B_testing

Observe how users react to each version and design accordingly.

Answer 3

From these screenshots, there are 3 functions in that part of your app.

1. List of meetings, with search functionnality
2. Meeting creation, with several steps
3. Inviting people

Apparently this menu is displayed on the list/search page? (I will assume so in the rest of the answer)

A few points, not really ordered:

• It is not clear where we are. The title displays the name of the application, when it could be used to indicate where we are in the app.
• The menu contains items that are very different, and I don't see that they belong in the same place.
  • Meetings indicates that it would take you to the list of meetings. But apparently we are already there (are we?). In the meeting creation process, it would create confusion as to the state of the meeting being created if you allow the user to leave like this. I don't really know what the invite part would do.
  • Create your meeting is the primary general function of the meetings list page. It would generally be represented by +, with a single action button (vs 2 actions in the menu). In other parts of the UI it would not make sense to have that link.
  • The power button is unclear. Is this a webapp? if so, what does that button do? (I would tend to think it may close the menu, but I would not click on it, being afraid it may close the whole app)

However, the burger button does convey the idea of a menu, as it is now globally accepted. But it takes the position of a action overflow bar, which can be confusing as to what to expect in the menu.

The click here to refine your search button (Does not really look like a button, though) is way to small.

I am not sure what the bell does. I would expect it to set a reminder on a meeting, but which one? Or maybe to display the next reminders?