Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.Navbar: logged in/out and mobile menu

Any input is appreciated.

share|improve this question
1  
+1 Such a common problem for responsive sites and interesting that there is no established solution for it. Really hoping to see some more answers to this question. –  greenforest Nov 19 '13 at 14:13

4 Answers 4

  • "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.

share|improve this answer
1  
Thanks sir..I wish we had an avatar icon. We currently don't, but that's a great suggestion. –  Mike Nov 14 '13 at 22:55
1  
@Mike why not generate an avatar, like what StackExchange, Gmail, or Trello do? You get to rely on an aspect ratio, while users can identify that they are logged in. Just make sure you show it in both views. –  harbichidian Nov 19 '13 at 22:32

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?

share|improve this answer

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:

login icon

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:

logout icon

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.

share|improve this answer
    
I am not sure an unfilled icon for not connected status and filled one for connected status is good choose @RedSirius . because for my point of view this distinction can be used to underline different profile of user in the app. –  pierre lebailly Nov 27 '13 at 7:07
    
@pierrelebailly I guess your comment was supposed to appear under RedSirius' answer? :) –  greenforest Nov 27 '13 at 8:42
    
yes of course ;-) @greenforest –  pierre lebailly Dec 17 '13 at 22:46

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

mockup

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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