Can username be omitted if profile picture is present for an “account options” button?

Question

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.

Answer 1

There's no right or wrong way in doing this. It depends on who your users are, the overall look and spacing of your UI and the purpose of your application.

• If you look at Google support threads there are several discussions about users who are having trouble finding the "Sign Out" button after it was moved into the dropdown. I myself worked with users who were using Gmail for awhile, not knowing they can click on the user image to find Sign Out and other options.

Another concern I have for not displaying the name is,

is there a case where users might switch between multiple accounts? If they can, how do they recognise which account they're logged in from if both accounts does not have a profile image?

That is not very important depending on how the application is being used.

If you don't have the space and you're only left with the option to just keep the profile image,

• As the first time experience, make sure you inform the user that you have to click the user image to get to options like "Sign Out" or "Edit Profile"
• Use hover effects to indicate the profile image is clickable
• When clicked, show information on the popover like the person's name so that they know the account they're logged in from.
• Make sure you have a help or FAQ section explaining the possible problems users may come across with this type of UX.

Answer 2

It might be instructive to look at how other big players are handling this. If the 'big guys' are doing it then it's a reasonable assumption that many of your users will be familiar with the approach. Here's a non-scientifically selected sample based on what I happen to have open in Chrome right now...

Facebook

Avatar | Name

Twitter

Avatar only

Stack Exchange

Avatar only [but with badges as part of the same link]

Quora

Avatar | Name

JIRA

Avatar | Downward arrow

Zendesk

Avatar | Downward arrow

GitHub

Avatar | Downward arrow

---

So, I'd say that D should be out - nobody uses that style and, as has been pointed out elsewhere, the 'Name' link sort of merges in to the menu items.

My preference would be for B. It's pretty widely used (though be aware that Zendesk, JIRA and GitHub will tend to attract more of the 'power user' types). I also think that an arrow offers greater affordance than the name link. If you decide to go for the avatar/name combo I'd make sure that the two are connected (i.e. if you hover over one, both items are highlighted) - check the way Facebook, Quora and Stack Exchange handle this.

In short: yes, the username can be omitted.