Good patterns for placeholders when not logged in?

Question

EDIT: Added some illustrations.

Our app has a side panel to show key account information, e.g. outstanding balance, summary of pending orders, etc.

This works fine when the user is logged in. However: we're trying to figure out what to show if the user hasn't logged in yet. The account info is sensitive, so we need to authenticate before showing the data. But there's also non-sensitive data on the site (e.g. general info) that can be viewed without logging in.

Here's what it looks like conceptually:

(In reality there are more data fields than just balance & orders, but you get the idea).

So the question is: are there any good patterns on what to show logged out users? Fundamentally, the message is simple: "login to see your details". But how to support that visually? Again conceptually:

We're looking for inspiration/patterns on how to present the left hand panel.:

1. Show "Your balance: ?" & "Order Summary ?", with a separate "login" button as above.
2. Separate, clickable links for each missing value
3. Something different?

Any suggestions/references appreciated.

Thanks.

Answer 1

I think you need to ask yourself if the user really needs empty values. Does the user already know what he should expect from your app? Then I'd say showing empty values is pointless.

Personally I like 'placeholders' (I agree this is not the right term but honestly I don't know what else to call them) that are a little more visually pleasing.

Flaticon has a great example of such a 'placeholder', it's even animated.

However if you are looking for a more formal approach your companies logo or a general user icon could also suffice.

Answer 2

Here are some patterns you can use

• Have a collapse/expand controls for the left pane. Don't show (collapse) the left pane when the user is signed out. When the user expands it, direct them to sign in if needed. In this option, the left pane becomes something optional even if you're signed in.

• Keep the left pane open and have a sign in button + an illustration in it. The sign in button navigates away to a sign in page. I wouldn't oversell the benefits, but maybe have a playful illustration of what you'll get when you sign in. You want the call to action in that section to be very clear — the sign in button should be the unmistakeable priority in your layout.

• Make the left pane your sign in form (user name + password + sign in button, forgot password link, etc.) so that the user doesn't need to navigate away. You save a click.

• Represent the left pane the same as a signed in customer with no previous order. Allow the user to fill up their order while signed out, using a cookie to do the same as whatever you do with login. Present the user with the option to sign in or create an account at order confirmation time.

Answer 3

Is the information you are presenting on the right valuable to the user? Have they come for the info? If yes, you can place it there.

If the first thing that the user would do is to search for login - don't make them look for it in the right column, make on the right.

I don't think I saw this kind of pattern.