6

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

Only profile picture shown

Exhibit B

Profile picture with arrow

Exhibit C

Profile picture with name on right side

Exhibit D

Profile picture with name on left

I'm gravitating towards Exhibit B, but I'm not sure if it's obvious enough.

  • 1
    Due to the spacing C and D look like 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 ? – User112638726 Jul 28 '15 at 7:25
  • 1
    @User112638726 I tried playing with the spacing and if it gets much closer it looks kind of awkward, because everything else is so spaced out. I set the width to where 9-10 characters could fit inside, and if it overflows it clips it with an ellipsis. – Oztaco Jul 28 '15 at 7:29
  • I find the exhibit A enough today if it's just for account mangement and log out (clearer than SE network log out IMO). Just for your information, Google uses email only with mail.google.com then change to avatar only with inbox.google.com – Alex Jul 28 '15 at 7:34
2

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.
  • Marked as answer for "it depends on who your users are..." and for the suggestions – Oztaco Jul 31 '15 at 3:37
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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