2

A website we've build is based on a 200px x 200px grid system, each item in the grid represents a link to somewhere on the site, or does something specific. (5x4 boxes in size)

It's meant as some eye-candy for the homepage.

We continue this grid system throughout the site, but only show a single column of boxes down the left hand side (4), and a clear content area on the right occupying the space for the remaining 16 boxes.

The main menu is a list ecapsulated in one of the boxes.

Menu

It's a multi-levelled menu.

The way of accessing the next level down is to click the little > icon. The entire menu slides to the left and the sub menu slides in from the right. See below, with the 'About' link as an example

Submenu

Clicking the reverse < returns you to the parent menu.

It works fine, in a functional sense, and looks great. However, our client is reporting that he doesn't feel the icons for the drop down portion are obvious enough, and that he feels that some users won't know to click the > to reveal the next portion of the menu.

I was wondering what other options there are available to me. A traditional drop down menu is at odds with the design of the site, and I want to avoid a re-built really. How can I improve the menu system to make the drop down portions more obvious?

Improve this question

2 Answers 2

Reset to default
2

The IPod style menu is very effective in areas where you have limited space. You are only displaying what is immediately necessary on the screen. There are 2 good examples at http://filamentgroup.com/examples/menus/ipod.php#

Try changing the colour of the line as you hover over it so that it looks like you can select it. And make the whole line clickable to take it to the next level down.

Alternatively include a heading saying that you want the user to choose an option.

ipod style menu

Or try making the right arrow look like a button

button

Improve this answer
4
  • iPod Style menu! I knew there was a comparison somewhere, couldn't think! The issue with making the whole line clickable is that the actual menu option also directs to a page, i.e. in the example above: 'About' represents a page in itself, as does each of it's sub-options.
    – Dan Hanly
    Oct 25, 2012 at 10:07
  • @Daniel What about making the right arrow look like a button?
    – Lauren van der Vyver
    Oct 25, 2012 at 10:15
  • How do you mean a button? You mean box it up perhaps, darken the background and 'fill' the arrow to look more like the example above?
    – Dan Hanly
    Oct 25, 2012 at 10:16
  • Ah, I see your edit! I'll see what I can do. Thank you.
    – Dan Hanly
    Oct 25, 2012 at 10:17
0

I don't know if I entirely follow your description, but could you maybe make it into an accordian menu instead? (i.e. turn the right arrow into a down arrow, and open its sub-items underneath, and then flip the down arrow into an up arrow to close the sub-section) In this way, the heading for that section is still available (even if other options need to be pushed out the way for space) and the user doesn't feel disconnected from the original menu. I think this would eliminate the confusion over how to get in and out of the the sub-sections.

Also, in cases like this, I believe it is very helpful if the link is clickable in addition to the icon. Many users expect this, and some users would have trouble focusing their mouse clicks on a small icon so it would be beneficial to make the entire item clickable. Again, I don't totally understand your menu so I'm not sure if this makes sense here, but I tend to follow this as a rule of thumb.

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.