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:

enter image description here

When clicking on the menu:

enter image description here

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:

enter image description here

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).

  • 2
    Are they 'shocked' in that they don't know how to use it? Do they still recognise it as an icon that triggers a menu to appear? – JonW Aug 29 '14 at 13:51
  • Actually, they know how to use the application and it's pretty easy, but they arguing "Facebook does like that, what not you!" ... stupid comparison but I wonder if this is what all lambda users would think..would I need to change? I'm not an UX expert, despite I love the domain, but according to me, as I haven't got many links, it seems enough to have a top-down instead of a left-side or right-side one. – Mik378 Aug 29 '14 at 13:52
  • 5
    click here to refine your search is way to small – njzk2 Aug 29 '14 at 19:30
  • 1
    How about a menu that opens on the top right? Right now your menu fills the entire width on the top. That gives the appearance that the menu is part of the page (and honestly that's ugly). Making it take just enough space needed on the top right corner under the burger (both width and height) will give you a much better looking menu that gives the appearance that it's layered above the page. That way you don't need to resort to the Facebook-style left menu. – ADTC Aug 30 '14 at 6:37
  • 1
    Adding to @njzk2's point, "Click here" should be "Tap here" when your page is being viewed on a mobile device – Luke Bornheimer Sep 3 '14 at 21:04

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!

  • "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." => When user clicks on "Create your meeting", it moves to the page "/meetings/new" that displays a multi-steps form. What's wrong with that? – Mik378 Aug 29 '14 at 14:28
  • If that's the way it works, then nothing. I wasn't entirely clear from the screenshots and it looked like the "create a meeting" functionality was in the menu. I see now the visual difference, but it highlights my other point about the menu button needing some indicator of state--is it open or closed? – nathanziarek Aug 29 '14 at 14:32
  • Understood :) Yes, it would be pretty easy to display another type of icon regarding whether the menu is opened or closed. – Mik378 Aug 29 '14 at 14:33
  • 2
    +1 for your point about not indicating state. I hadn't even considered this before. – Justin Morgan Aug 29 '14 at 18:26
  • 1
    @VinceCgto I don't think we're really in disagreement here. I wasn't suggesting that Mike378 simply take his friends and family whims and develop towards that. Rule number one of UX has to be "don't ask your users what they want" for the exact reasons you described. But, if that's rule number one, rule number two is that design patterns and our "intuition" mean nothing if the user group you're designing for have a different mental model. Again, this isn't to say that users dictate the interactions, but their needs from the software trump any design pattern. – nathanziarek Sep 1 '14 at 14:29

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.


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

Observe how users react to each version and design accordingly.

  • As a public app (it's a social network), family, friends etc. are also targeted users, but the range of people I asked to have a very low culture of applications world. They judge just by what they have seen in the past => Facebook app for instance. – Mik378 Aug 29 '14 at 14:11

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?

  • 1
    "Click here to refine your search" should really be a button that says "Refine" (if it's shown under a search section or can be easily understood to mean refining the search) or "Refine my search" (if it's shown in a non-search-related context). "Click here to" and "tap here to" should really be avoided as being extraneous and unnecessary. If it is a button, people are going to click or tap on it. There is no need to tell them to. – ADTC Aug 30 '14 at 6:30

Your Answer

