I'm creating an account system for my website and the account controls will be in the top right corner, as shown in the samples below. The more stuff I add to the top bar, however, the more cluttered and clunky it feels. But, I need to include a button where the user may log out or edit their account settings. I'm worried that if I only show the profile picture that users will not know that they can interact with the button, however I couldn't find any statistics or information about this (I'm not even sure what to Google).
So the question is:
- Will users be able to easily figure out they can interact with the button?
- How are some ways I can make it more obvious without taking up much more space?
Exhibit A
Exhibit B
Exhibit C
Exhibit D
I'm gravitating towards Exhibit B, but I'm not sure if it's obvious enough.
Name
and the picture are different elemenets/options. Also if you are using name how much space are you going to leave for people with ridiculously long names ?