4

I currently have the following mockup for a menu of a web application.

mockup

I like the left hand side with the main menus and their sub fly out menus. What I'm not sure about is the right hand side. I'd like to show the user's name, the logout button as well as a "drop down" style menu for options that the user can perform: switch their profile and edit their account. A profile just changes the context of the application (different schedule etc).

I would appreciate some comments/suggestions for how to best represent this. I like the 32x32 icons, they're nice and big (not too big or not too small). The only downside is the white space, which is what I try to counter with on the right hand side. But I feel maybe the drop down "Options" isn't ideal.

Improve this question
5
  • Why isn't "Edit Account" and "Switch Profile" part of the "normal" menu?
    – peterchen
    Dec 27, 2010 at 13:47
  • @peterchen - Well, I wanted to keep them separate from the main application functionality.
    – TheCloudlessSky
    Dec 27, 2010 at 13:54
  • I wonder if users themselves would make that distinction, or if they'd see switching profiles and the profile setting just as another part of "that web page".
    – peterchen
    Dec 28, 2010 at 19:30
  • @peterchen - Actually it was their suggestion to keep it separate since the main buttons are for working with the current profile.
    – TheCloudlessSky
    Dec 28, 2010 at 21:01
  • Then all is good and fine - who am I to argue with your clients ;)
    – peterchen
    Dec 30, 2010 at 14:47

2 Answers 2

Reset to default
4

I agree with @jameswanless: I don't see a downside to the white space either. It's a pretty good balance.

The main thing with the right menu is that I can't readily tell who does it belong to: Options or Logout. See this modified mockup:

alt text

Main changes:

  • It's now clearer that this is the Options menu

  • I opted for a slightly bigger triangle, although it probably needs to slim down a pixel or two. It's also a flat triangle. What you had is too small to be anything other than a flat triangle

  • Moved the triangle to the right; that's a far more common usage

  • I would add a gradient like the one that you have for the left menu

Overall, you have a nice clean design IMHO.

Improve this answer
2
  • Yeah I was going to add the gradient. This is the idea that I wasn't sure about doing just because the options menu would "popout" versus "flow down" like the ones on the left if that makes any sense. But, I think if I take the size down a pixel or two and have a dark gray it could work. Thanks for your help.
    – TheCloudlessSky
    Dec 3, 2010 at 11:35
  • You're welcome, happy to help.
    – Hisham
    Dec 3, 2010 at 17:56
0

Why do you feel the whitespace is a downside? There's pretty good balance in the spacing right now IMHO.

What is a little confusing about the mockup above is the meaning of the icons. I think the profile links and dropdown are pretty clear, but as for the icons:

  • home and caledar are both pretty obvious
  • the icon representing a person is unclear and could be interpreted either as being about other users or profile - since profile is clearly articulated on the right side, then this might be OK
  • bar graph - I'm lost on this one, but more context about the application might assist
  • notepad - does this indicate blog/journal and if not, what?
  • gear wheel - this would normally suggest settings, but then if so how does this differ from the user profile settings (if I am correct, maybe you need to blend site settings and user settings or make them more distinct

It's difficult to provide good feedback without knowing what kind of application we are talking about here.

Improve this answer
1
  • More context: medical office application. Basically this is the "admin" interface... so the cog wheel won't even be seen since it's application wide-settings (creating new users etc). Bar graph is reports, and the book is for invoices (but probably going to change). What I'm looking more at for feedback is how to improve that drop down for the right hand side of things. The left hand side has tool tips as well. I feel the drop down on the right hand side is out of place... also the down arrow.
    – TheCloudlessSky
    Dec 2, 2010 at 23:38

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.