11

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.

1
  • 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. Nov 19, 2013 at 14:13

4 Answers 4

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

2
  • 1
    Thanks sir..I wish we had an avatar icon. We currently don't, but that's a great suggestion.
    – Mike M
    Nov 14, 2013 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.
    – wersimmon
    Nov 19, 2013 at 22:32
4

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.

3
  • 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. Nov 27, 2013 at 7:07
  • @pierrelebailly I guess your comment was supposed to appear under RedSirius' answer? :) Nov 27, 2013 at 8:42
  • yes of course ;-) @greenforest Dec 17, 2013 at 22:46
2

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?

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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