6

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%

Explore page with expanded task-menu

Search page with collapsed task-menu

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 768px

Larger screems: with expanded menu 960px

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

2 Answers 2

2
+50

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.

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

8
  • "The biggest issue I see is users clicking with your meanings of the first-level tasks..." I see where you're coming from and like the idea of making 'questions central to the navigation'. In fact with the task-based ui it's more or less what I'm aiming for. I just feel the need to structure the types of questions, hence the need for these "first level" task-items? IMO the following sound more 'question-like': "Paris Pulse" might be better as "What's on?" or "What's happening?. "Community" could be "Opinions" (with the breacrumb: "opinions on X") and "Concierge" could be "Suggest me" Aug 17, 2012 at 10:45
  • Yes, I see my suggestion as a rather minor modification, it's just the first level that sticks out awkwardly from your concept. Unfortunately, taking the wrong turn there might be fatal. --- How many questions do you have? I would consider ~8 questions on the landing page totally ok. If more, it's good to group, or maybe experiment with designs how much the page can take.
    – peterchen
    Aug 17, 2012 at 13:51
  • Well the type of tasks a user tries to do (i.e: the questions he asks) are imho pretty decently broken up into the categorization I currently have (explore, search, community, concierge, pulse), apart from the fact, as discussed, that these labels may need improving. This categorization is also pretty future-proof as I can naturally fit almost all content to belong to one of these categories . (I'm debating to include first-level item "Read up" for articles/ blogposts, instead of having that combined with "Paris Pulse") Aug 17, 2012 at 14:02
  • As for your remark to the nr of questions.. Did you refer to Type of questions? In that case there is a 1-to-1 mapping with what I discussed above I believe. The total nr of questions however is virtually limitless, with "Explore" going to get the bulk of naturally occuring 'questions': While still providing great value for users the marketing goal of explore pages (used as landing pages) is to target the longtail of keywords (i.e: {cheap|top,..} {thing to do | hotel | rest.} in {location} with {kids|friends..}). Less-structured questions (no pattern as above) are done through Community Q&A Aug 17, 2012 at 14:15
  • 1
    :) I see: individual questions/queries instead of a (to some) unnatural categorization. I still feel that I need some sort of categorization to keep things manageable. How about that the homepage features some kind of simple wizard that let's you fill in the blanks of a 'templated question'? (1 templated question per category) That would bring individal questions to the front like you suggest (which I agree can be a good idea). As a result users get redirected to the correct page in the task-based taxonomy, while playfully learning the categorization in the process. Food for thought! Aug 17, 2012 at 15:04
1

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.

1
  • Some great points. 1.) The homepage will likely enforce the task-based options by having a block for each (plus some temporal stuff like latest/most popular). Indeed, I wanted to color the icons on the homepage. Haven't thought about widening the left-menu as well. Mulling that over as we speak ;).. 2) I've managed to redesign the various pagetypes that displaying the condensed menu is only dependent on screensize (and not on pagetype anymore) , see updated screenshots. As it stands now the condensed menu is only shown for sizes < 768px. As a pattern for mobile, would you still advice against? Aug 17, 2012 at 10:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.