We are serious about user experience. And this includes information architecture as well. We had to come up with the nicest and most informative / functional My Account dropdown menu for our TMS script.
First of all, we analyzed the way other big players did it.
- It uses your username which is unique (compared to your first name for example) so you can easily see and identify if you are logged in or not.
- Displays your balance
- Has a separation between author related menu items and other menu items
- Has no image / avatar which would help the user identify faster the logged in / out status
- The Sign Out button is near the account button and can be accidentally pressed. The user needs the sign out button way less often than the my account button. So for our version we’ll come up with another approach – the Sign Out button will be the last item in the dropdown menu.
- Icons should be placed on the left, because, at least Europeans and Americans read from left to right and they should first see the icon and the text only after that. So in this case the icons are only a useless decoration instead of a visual anchor which would help.
- Way to many sections. But this has nothing to do with this particular menu. It has to do with the entire information architecture ThemeForest has. Maybe I’ll come back on that in another article, when we’ll get closer to showcasing our vision and approach regarding the My Account sections.
- Has the user’s avatar for easy visual identification
- Has icons on the dropdown menu items
- Doesn’t display your username, which is more unique than a first name
- Doesn’t display your balance when you’re not with the mouse over the my account menu.
- Mixes menu items with information only elements
- Logout button has an unexpected placement
- Menu items are arguable. Maybe I’ll come back on that in another article, when we’ll get closer to showcasing our vision and approach regarding the My Account sections.
- This is the clear winner. They did everything right in our opinion.
Here’s what we came up with. First, here is the design for the inactive state:
It shows your avatar, username and balance. Plus the down arrow indicator for showing that this one is a dropdown menu. Let’s see how the mouse over design state looks like:
Well, we think it speaks for itself. Let us know your thoughts on this one.
PS: Here’s a photo where we verify all the usecases: whether the username is enormously long, or the balance is huge, or vice-versa.