Task-based navigation with menu-items expanding to Mega Menus

Question

First let me apologize for the length of this question, but I want to explain it pretty thoroughly.

Some background/rationale first: As part of the design of a new travel website I've gone with a pretty unusual (for travel sites at least) 'goal/task'-based primary navigation.

Tasks:

• Explore ('guided exploration pages for users that want to casually browse')
• Search (faceted search, etc. for users that know what they want)
• Community (ask user feedback, Q&A, Reviews)
• Concierge (get automated personalized suggestions)
• Pulse (Get info on what's happening now, Blog & articles)

This is in line with the rationale that I wanted to mimic phases/tasks users often go through when researching a trip.

Orthogonally the following Topics/Items exists: Hotels, Restaurants, Attractions, Nightlife, Shopping, Vibes & Experiences, Districts. These usually make up the primary menu of such a travel site.

These 2 can be combined, e.g users are able to:

1. explore > everything
2. explore > districts
3. search > hotels
4. ask community > for reviews on > attractions
5. ask concierge > for personalized tips on > shopping
6. get vibe > on latest concerts

I like this setup a lot.

To me this could me visualized like a matrix of sorts: Task X Topic. I explored ways in which I could visualize this matrix-like navigation, without being intimidating to the user. (btw: A "task" + "thing -> everything" is also possible)

I came up with the following:

1. Basically, task-navigation is displayed vertically to the left (heavily inspired from Google Plus, even the icons are still the same for now;)

2. Clicking a task-item would navigate to "task X everything"

3. Each task-item doubles as a Mega Menu (pop-up) which allows the user to deep-dive into that task. Take "Explore" for example. Items in the mega menu, could be: "hotels", "restaurants" or hierarchically deeper pages like "romantic hotels in montmartre".

4. When a task is selected, that task-item is moved to the top of the screen to double as first item in the breadcrumb. (visually there's the horizontal part of the 'matrix')

I've included 2 screenshots. The first, with the left task-based nav. The second, with that left-nav collapsed into a single menuitem called "Menu...". Used on certain page-types (specifically: "Search" which needs to horizontal space) and on mobile devices.

NOTE: the yellow top-bar appears pretty empty now, but this will feature a search-bar.

EDIT: crops of the screenshots to display at 100%

I'm actually pretty pleased with the result, but I'd like to get some feedback from others on this idea (and visual implementation) . Specifically:

1. Would you think users will discover the functionality (mega menu's) themselves? Would the flow seem logical, etc. Any way to have better affordances to indicate these task menuitems double as Mega Menus without being too obtrusive?

2. What do you think of the condensed menu in the second screenshot? Switching between page-types might lead to a collapsed / expanded task-menu. (screenshot 1 vs 2.) Obviously this is not very consistent. I've thought about always showing the blue 'Menu..." item at the top left even if the task-menu is expanded.

3. I like the idea of the selected task-item doubling as the first item of the breadcrumb. I don't like the need for the task-based menu to change in order as a result. (i.e: the active item always moves to the top) Do you feel this is a big issue?

4. Since as said the active task menuitem doubles as the first item in the breadcrumb, I'd love to have a better flowing 'sentence' for the following:

   • "ask community > for reviews > on attractions" Notice that for this to be a sentence (what I want) I have to add the word "ask" at the very beginning. This is of course due to the fact that "community" is not a task but "ask community" is. Any alternative word/short phrase for "ask community" much appreciated.

   • similarly for "ask concierge" and "vibe" > on events

Looking forward to your response.

EDIT: 2 screenshots displaying 'condensed menu' only at sizes < 768px. As part of a mobile experience, where users might (?) be expecting these 'condensed menus' more, would that work or is it still in an ackward place at the top left?

Small screens: With condensed menu

Larger screems: with expanded menu

Just as reference: The idea of having a condensed-menu only for smaller screens (with the 'more...' button as the only navigational element) seems to be around more than I thought. Calling it a trend would perhaps be too much, but if Facebook, Google+, Youtube, Spotify, Path 2.0 (arguably one of the best Ux-design of the moment) have implemented it... With all these great examples, I'm confident that with some tweaks the discussed ux can be succesful.

https://stackoverflow.com/questions/11377472/slide-out-menu-like-android-google-and-youtube-style-slide-menu-not-like-faceb

Answer 1

1.+2.+4.:
The biggest issue I see is users clickinh with your meanings of the first-level tasks, e.g. "Explore" vs. "Search".

You have already sorted out the questions users have coming to your site - and from my traveling POV, very good ones.

Why not make these questions central to your navigation, rather than the mechanism of your implementation? Your short menu in screenshot #2 fels like "almost there", yet you stick something in fromt of it.

Maybe start with a pool of questions, where segments can be clicked to offer options, e.g.

• "What's going on right now in Lisbon?"
• "Help me with a romantic|business trip to Paris!"
• "What is the best|coziest|cheapest hotel|bar|parasailing company in Antigua, Guatemala?
• I need a place to sleep in Berlin
• What do other guests|blogs|the WHO say about my hotel in Mogadishu?

(links only for style, the options separated by '|' above would of course go into a popup)

Your front page can present these options, and cycle through relevant or ridiculous options based on editorial choices.

3.: As I understand it, no, but as said above, your choice of "first level" task items could be more focused on the visitor, rather than your site.

I have no clear idea yet when to transition from the landing page (wiht all the tasks) to your breadcrumbs + mega menu page - but I'm sure that's easy to figure out wiht some toying around. I could imagine when a user clicks "romantic" in above example, you offer quick options like "business", "family" and "more...", and more leading you to the breadcrumb page and the respective mega menu.

Answer 2

1 - I don't know what other options the users have on the homepage. If there's stuff there fighting for their attention, then they might not discover the vertical menu. If there's not much for them to do there and they're forced to explore the homepage more thoroughly, they will discover it. There's a couple of things you could do to help them.

First, I don't know how you mean to display this vertical navigation initially, but in case it's the way it looks in the screenshot - with those gray icons on black, it would help to make them more colorful. They could all be fully colored on site load, and once an item is selected, the rest fade to B&W, since now we made sure the user is aware of the menu and knows how to use it.

Second, you could display the labels to the right of the icons, so the menu initially takes more room and has more resemblance to standard vertical nav. And same as above, you can shrink it down to the state in your screenshot once it's been interacted with.

2 - I don't think the solution for the condensed menu is a good one. You don't move the website logo just to make room for one of the elements on some of the screens. It's unnatural behavior and to me it feels very forced - like you were looking for a place to put this and couldn't find a better one. Showing it always is a better idea, but I would still change the location and have the blue box under the yellow stripe, pushing the breadcrumbs a bit to the right and the menu items a bit down. If you always show it then you need two states for it, for the menu collapsed and expanded.

3 - Yes, I think it's a big issue :). Breadcrumbs have been around for a very long time and it's always the same situation - choosing a menu items makes it the first item of the breadcrumbs. Yet, noone does this (that I know of). The order of the menu items shouldn't change, it's confusing and disorienting. The alleged redundancy caused by this is perfectly fine.

4 - These games with constructing sentences out of UI elements are cool, but they're only viable when you know that you have full control over the website and you don't mean it to grow much more. Otherwise one day you'll have a category that doesn't quite fit and you struggle with finding an acceptable wording so it does work, and you begin making compromises. Then you end up with both the naming being not quite clear and the generated phrase being not very smooth.