3

I'm working on a site that primarily has a flat hierarchy. It's very wide and shallow (lots of sections hanging off the root of the site, but very few subsections).

As a result of this the design has evolved so that currently selected side-menu items are bold and have an arrow to the right, pointing at the content.

Now, this brings us to a dilemma. On very rare occasions one of the menu items does not lead to a straight content page, but to another landing page with its own side menu.

One proposal is to give such menu items an ellipsis to signify that there are more menu items behind that click:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

However, according to a previous post here: What are the rules of using ellipsis on buttons, the use of an ellipsis is discouraged when there is not an actual confirmation step linked to that menu item, and suggest using an arrow instead.

But because we already have an arrow in the navigation, this introduces a contradictory pattern - one arrow means 'this is selected' and the other means 'this will take you somewhere else'.

mockup

download bmml source

So, can I use the ellipsis approach after all? Is that a recognised pattern as far as on-page navigation is concerned, or do we need to rethink the whole design approach (which, unfortunately for a site of this size is quite an undertaking)?

Improve this question

3 Answers 3

Reset to default
1

The wireframe you have provided (with an arrow on the right of the text) to show that that particular level has sub sections in the same level could be changed. Move the arrow on the right to the left of the button before the text with a few pixels of padding. This is a very standard tree organization approach. Google drive's organization

Improve this answer
2
  • Yeah, that does seem more instinctive really. However due to the nature of the site as it currently is, to change the layout of the menu is quite a drastic change (not just to the menu but the main site template(s) too - that whole thing will need adjusting to compensate) which will have knock-on effects to the content. Now we'll do it if we have to, but we're hoping for a less drastic change. Sometimes it's strange how the smallest looking change can result in such a huge impact!
    – JonW ♦
    Dec 3, 2014 at 13:45
  • The change if it is gonna be prominent and also will make the old interface fade out completely from the minds is good. Change in layout is bad unless it makes the user to miss old one and want the same back.
    – user3464111
    Dec 4, 2014 at 6:10
0

An ellipsis gives me the idea that the label text didn't fit the space. If I saw it I would hover it to see a tooltip for the complete text. How about using a down arrow:

enter image description here

After your comment it's clear that it isn't about a dropdown menu. But I still think the ellipsis isn't the best indicator for an item with it's own menu. Desktop conventions don't always work for websites, the hamburger icon is more commonly understood on the web.

If you still insist on using the ellipsis, maybe it is a better idea to separate it from the text by placing it on the right:

enter image description here enter image description here

Improve this answer
2
  • The ellipsis is already used in desktop menus without it representing missing text. Such as here: msoutlook.info/pictures/exportwlm.png The down arrow is an interesting idea, but I think it implies that the menu is going to expand down to reveal the submenu, when that's not the case here (plus we use the down arrow as an expander elsewhere in the site so that could again cause confusion). But it's still an option we'll look into.
    – JonW ♦
    Dec 3, 2014 at 18:13
  • I’m not a windows/office user so these conventions are uncommon for me. Also I think that the context of the ellipsis in the image is a little different than yours. See my edit for a few more suggestions.
    – jazZRo
    Dec 4, 2014 at 8:02
0

The concepts

  • You are here ( 'this is selected' )
  • This has deeper navigation ( 'this will take you somewhere else' )

Are quite closely associated concepts in the users "website navigation domain". So having 'arrow based' symbols for both is not conflicting, and may even be beneficial (lower the cognitive load) - providing the styling and contextual visual clues are strong enough.

Improve this answer

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.