Responsive Nav: How to show user login status on mobile phone width?

Question

I building a responsive navigation, and I'm trying to get a nice clean simple mobile portrait menu.

In the enclosed illustration, we have a standard nav. The business requirements state that the users first name should be shown once they are logged.

My question:
In the mobile view I'd like to use some sort of icon if possible. The trouble is how would you hint to a user if they are logged in or out of the site?

Has anyone come across an instance of this they've solved visually?

I'm thinking just truncate the users name after x number of characters. That seems more obvious from a cognitive perspective. Everyone recognizes their name, and is already an indicator of status.

Any input is appreciated.

Answer 1

• "Profile"
• "Account"
• "Settings"

Any of these or anything similar if you're worried about users inputting long names. Possibly with an icon in front that corresponds to it, be it a silhouette, gears, or anything else you deem fitting.

If that doesn't fit, just the icon, or even replace it with a user's avatar/user-icon. That probably fits best with your case, if you allow uploading of one of those.

The point is, you show something that says "this is different than the rest of the items in the menu bar", and since people looked at "sign in" before they signed in, afterwards, they'll look at (read: glance) that spot again to see if it worked.

Answer 2

Logged out

A very common way to symbolize the user account or login is an avatar icon. I haven't done any specific quantitative research on this but I'd say the vast majority of sites and apps uses an icon like this:

Logged in

Once logged in, there are two main things the icon symbolizes:

1. I'm logged in and it's different to how it used to look like when I was not logged in before, i.e. current status
2. I want to know how to log out

I've been looking for a suitable icon myself for a long time and the on/off switch is what I found to be working well:

Alternatives

I tried a door icon with an arrow pointing to the inside of the open door for login and the arrow pointing from inside to outside of the icon for logout. This icon failed to be understood by users.

I also like the suggestion from @RedSirius - avatar icon not filled but with a question mark for logged out and a filled icon if the user is logged in. I am wondering if this was tested with users and well understood.

Consistency

It goes almost without saying that the login icon and logout icon should both be in the same place, in most cases the up and right corner.

Answer 3

How about an empty silhouette with a ? inside for when they are not logged in. And then the filled silhouette after then have done so?

Answer 4

I would suggest keeping it simple where you take the same visual language of the main site and translate it to the mobile responsive view. Hence your logged out state will look like this

^{download bmml source – Wireframes created with Balsamiq Mockups}

The dropdown icon next to the person shows that there are additional features available and informs the user that there are additional interactions.