What do you think about this menu?

30 Sep 2011 - 11:01am
2 years ago
20 replies
42012 reads
tdellaringa
2006

Greetings,

I've been tasked with reviewing an admin interface for one of our devices. In this interface, there is a very simple menu system. You can take a look at it (sans labels) at the following link:

http://dl.dropbox.com/u/48702/menu-orig.jpg

As you can see, the main menu is color coded for each item. Opening a main item gives you a secondary (and even a tertiary) flyout menu of the same color.

One problem is that there are really only so many distinct primary hues. So you can see the yellowish color is already repeated once, and some colors are similar. But I get why they did it, to make each section have it's own color. I should note that I am not aware of any complaints about the menu.

Still, it sits uneasily with me. I feel like there is something that can be improved here, but I'm not sure what. It just feels old and clunky.

I should also mention this is a touchscreen, so the items are large on purpose, and need to stay that way.

Welcome any thoughts or suggestions. Thanks!

Comments

30 Sep 2011 - 4:41pm
Tania Schlatter
2007

Hi Tom, 

This menu is lacking a harmoniuos color palette and color is used in a way that is spatially confusing rather than clear and consistent. For example, the green, purple, orange and red are quite saturated and strong. The yellow, blueish and pinkish are muted. The very strong backgound color competes with the saturated menu items in that they both come forward to the eye. The muted menu items receed, though they are intended to be primary menu items. 

If the menu items need to be in primary hues, I recommend a neutral background. Also, I question the need for primary versus saturated colors. While the number of primary hues is limited, there are plenty of distinct saturated hues.

Tools that are helpful for selecting colors for a palette:

http://kuler.adobe.com/

http://www.colorschemedesigner.com

Tania

 

2 Oct 2011 - 4:16pm
Eric Harris
2009

I'm in agreement with Tania about the color. A neutral background would go a long way here.

Also, have you tried any button designs that would vary from one tier to the next? I think visually differentiating the size/shape/texture of the fly-out menu levels would help it look & feel less "old and clunky" as you put it. Perhaps one level of menu buttons could overlap slightly or be a few pixels lower than the parent menu, or the top and bottom buttons could have a rounded edge, etc.

Also would be curious to see this with some text or button labels. It seems dificult to imagine that ALL the buttons would have labels (if they were text) that would fit in the same size rectangle. Could these child menus have a varying width?

3 Oct 2011 - 10:13am
tdellaringa
2006

Thanks for the replies. I have looked at this for so long it was hard to be objective about it. I'm not sure how I missed we need a neutral background. I also agree about the saturation/primary hues.

Varying button sizes is an idea, too. I am quite limited in what I can suggest to them, however, That may be too big of a change.

And yes, there are labels on every single button, and they do all fit. Great suggestions, if anyone else has anything let me know.

6 Oct 2011 - 4:37am
rashmi.nk
2011

Hi,

I have had a similar reqiremnet to design a fly out menu. As discussed earlier in the thread a  neutral background is a better option. As for having different colors for the buttons, I would suggest that have a palette of three colors maximum. On selection of a button you can display the flyout menu buttons on a different shade. This way the user is clear about his selection and can easily distinguish between the buttons.

14 Oct 2011 - 1:55pm
Jochen Wolters
2010

Here's another aspect in addition to the excellent advice you already received:

Is color the only visual clue for the relationship between the (sub-)menus? If so, you could add further clues like a "pressed button" appearance for the selected parent menu item and/or triangles pointing from the parent to the child menu.

With these in place, you could even reduce the use of color to grouping similar/related functions.

16 Oct 2011 - 3:01pm
Peter Becker
2010

I've found that using any more than 4 or 5 colors, at the most, in this situation becomes problematic. Going to a neutral bkgd as suggested is the first step toward providing focus. The second suggestion might be to lessen the degree the colors are used in each button ie. make the primary color in the buttons neutral and use a unique color (if necessary) as a highlight within the button, maybe like an an outline. Then you use this highlight color as the background for the secondary and tertiary colors. This reinforces the focus and more clearly ties these menues to the primary menu choice.

21 Oct 2011 - 10:40am
tdellaringa
2006

Thanks again for the replies. I've done a rough rework using only 3 colors for each level of the  menu, and I modified the shape to have essentially point to the next level. (Left some labels off due to sensitive material).

There's a darker color for the selected menu item in each of the first two levels, as you can see.

One thing I am not sure about is how to handle the positioning of the 2nd and 3rd levels. Sometimes there will be 8 or 10 items (particularly in the 2nd level) and there would be no choice but to load the menu at the top, equal with the 1st level. But sometimes there may be only 2 or 3, same thing in the 3rd level. In those cases, the menu appearing at the top could seem odd, especially if there is room to line it up with the selection made in the previous menu.

But I think I need to pick one way and stick to it, and it seems that forces me to always load the menu at the top. Thoughts on that - and the design so far in general? Link to menu below:

http://dl.dropbox.com/u/48702/menu.jpg

22 Oct 2011 - 1:07pm
Larry Tesler
2004

Tom,

I didn't see the original menu before you replaced it by a new one yesterday. I can only comment on the new one.

The structure of this menu is not at all clear to me:

- Are the "levels" the eight rows or the three columns? Parts of your explanation imply rows, parts imply columns. There is little in the image to help.

- I cannot infer the initial state of the menu or what the user tapped to elicit the state you depicted.

Could you post a series of images or a storyboard that illustrates the dynamic behavior of the menu and illustrates the level-positioning issue that you raised?

Could you label every item in every frame of the storyboard to make the intended hierarchy crystal clear to us reviewers? The labels need not reveal any secrets. The labels could be region, state, city in the three columns; or outline labels like 2, 2.4, 2.4.3.

Without understanding the structure, the one thing I can comment on is the way you distinguish selected from unselected items. I wouldn't change the color of an entire item shape; I wouldn't use a different selection color in each column; I wouldn't make the selection color dark; I wouldn't make the selection color similar to the background color.

Larry

24 Oct 2011 - 10:00am
tdellaringa
2006

Sorry, I goofed up the original link - here's the current version of the menu sans most text labels

http://dl.dropbox.com/u/48702/menu-orig.jpg

One thing I should clarify. I cannot make wholesale/radical changes. This is in a sense a "reskinning" project. They do not have the resources or time to tear this apart and redo the whole interface (which is what it really needs, unfortunately.)

To answer your questions, the levels are the columns. You choose item 1 in column 1, then the next column flies out. There might be a 3rd column in some cases, but it's rare, but I included it. So the initial state of the menu is seen here:

http://dl.dropbox.com/u/48702/step1.jpg

Just the first column, nothing selected.

Step 2 then becomes this after selection:

http://dl.dropbox.com/u/48702/step2.jpg

From there, you'd pick something in the second column, and the screen would change completely to the manage screen for that item.

P.S. It sure would be nice to be able to show images in threads on this site. Seems a bit archaic that we can't - especially for a IX/UX Site!

24 Oct 2011 - 11:23am
Mike Combs
2004

IMHO there needs to be a clearer way to correlate the selected item from column 1 to column 2. Right now it looks like each item in column 1 is pointing to something in column 2 and it's not clear that the values in column 2 are related to a single item in column 1. Perhaps once selecting an item in column 1, the button then all the buttons (except the selected one) loose their arrow?

24 Oct 2011 - 11:36am
tdellaringa
2006

(Hi Mike!)

Yes, good point, and I think that is one thing that has been bothering me that I could not put my finger on. Having all them shaped as an arrow is confusing. Let me update that.

24 Oct 2011 - 4:07pm
tdellaringa
2006

I removed all the "arrow" parts of the buttons on level 1, except for when it gets selected. I'm not sold that I even need the arrow, actually. Maybe the darker selected item is enough - possibly the arrow is a distraction at this point. Then the 2nd level, when you select an item you go to the page. in the rare instance where there is a level 3, level 2 would behave the same as 1, with a darkened selector.

It's possible the arrow shape could be confusing, seeming to point to one menu selection in level 2.

Here's the new screens.

http://dl.dropbox.com/u/48702/menu1.jpg

http://dl.dropbox.com/u/48702/menu2.jpg

24 Oct 2011 - 4:57pm
Brian Mila
2009

Personally, I think you've got something that looks "good enough" with that last revision.  I think with the interaction of actually touching and watching the menus appear, I doubt anyone will have any confusion over it (or frankly will even notice it unless the interaction is horribly unexpected).   I'd say that at this point you'd be better off focusing your attention on grouping the functionality into relevant, appropriately named menu items.   That's where you'll get the most benefit in terms of user's being able to use the app to perform their tasks IMO.

Brian

25 Oct 2011 - 11:32am
steff
2007

One thing that I might help is to offset the touch state of the initial link so that it correlates more closely to the second level color scheme. On a device (mobile expecially) the dark blue roll state, which is quite close in color and contrast to the background, may get lost. You might try a more muted version oft he second level tan as the active state of the primary buttons.

 

25 Oct 2011 - 11:40am
steff
2007

something akin to the attched image

25 Oct 2011 - 12:14pm
tdellaringa
2006

Sound logical, Steff - although I don't see any attached image Frown

27 Oct 2011 - 11:16am
steff
2007

menu.jpg

27 Oct 2011 - 11:26am
tdellaringa
2006

Ah, now I see. And how did you attach that image?

27 Oct 2011 - 8:33am
Jochen Wolters
2010

Tom,

When, in my previous comment, I suggested to add "triangles pointing from the parent to the child menu", I failed to make it clearer that I would add those only to the selected parent menu item(s). Hence, your latest re-design is exactly what I had in mind in that regard. :)

With regards to highlighting the selection, I agree with Steff that, in the current mock-up, the highlight in the root menu is too close to the background color. Maybe, instead of making the selection darker, you could experiment with making it lighter so it visually stands out more vs. the unselected menu items.

Another thought that came to mind is this: What will the user see "at the end" of a menu selection? Will there be a configuration panel, will (some of) the menu items trigger an action like a push button? I'm not sure yet what impact that could have on the menu design, but it would be interesting to know what the overall panel will look like, not just this nav menu.

Overall, though, your current mock-up already looks much more "graspable" and elegant then the original.

Regards,

Jochen.

27 Oct 2011 - 8:58am
tdellaringa
2006

Yes, I took that too literally eh? :) I agree the selected color is too dark. Lighter might work, I will play around with that.

At the end, they basically go to a configuration page. So they select an item from col 1, then pick an item from col 2 and they are whisked to a page. Thanks!

Syndicate content Get the feed