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:
- explore > everything
- explore > districts
- search > hotels
- ask community > for reviews on > attractions
- ask concierge > for personalized tips on > shopping
- 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:
Basically, task-navigation is displayed vertically to the left (heavily inspired from Google Plus, even the icons are still the same for now;)
Clicking a task-item would navigate to "task X everything"
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".
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:
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?
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.
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?
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.