Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
Why isn't "Edit Account" and "Switch Profile" part of the "normal" menu? –  peterchen Dec 27 '10 at 13:47
    
@peterchen - Well, I wanted to keep them separate from the main application functionality. –  TheCloudlessSky Dec 27 '10 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 '10 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 '10 at 21:01
    
Then all is good and fine - who am I to argue with your clients ;) –  peterchen Dec 30 '10 at 14:47

2 Answers 2

up vote 4 down vote accepted

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.

share|improve this answer
    
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 '10 at 11:35
    
You're welcome, happy to help. –  Hisham Dec 3 '10 at 17:56

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.

share|improve this answer
    
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 '10 at 23:38

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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