We have three ways of displaying Profile Drop-downs as shown below.
Each one of has its strengths and weaknesses.
Is there any other best way to display the Profile Drop-down?
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
Option 3 is good practice, as the user is aware (in most of the cases) of his "User Name" so he will not be interested in his user name all the time upfront (in level one). It's ok if you are hiding it in level two (Behind a click). For example, twitter uses the same technique to get rid of similar issues, that you are facing.
There are few other ways too, you can restrict the username size or you can just show first name or last name or you can truncate the user name after certain (10 or 12) characters etc.
Option 1 and 3 are both viable options depending on what type of service you are offering. Regarding option 3 you can look at the answer given by bagaria.
There are, however, numerous cases where displaying more information about the user than just than just their profile image is preferable. One case that comes to mind are services where the user can administer more that one account or plan. Having that information available to the user at all times removes the stress of having to click their profile image in order to see that they are editing information for the right account/plan.
When displaying more information next to the image, like a user name, I always go for Option 1 since is gives more consistency to the UI (at least if you choose to display this information in the top right corner). This option will always keep the image in the top right corner where as Option 2 will result in the image having random placements depending on how long the user name is.
Here is an illustration:
I hope that helps.