3

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:

enter image description here

(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:

enter image description here

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.

  • 1
    What do your users expect to see? Its not a flippant question :-) – SteveD Aug 2 '16 at 11:16
  • I don't think "placeholders" is the right term for what you need to display. – Madalina Taina Aug 2 '16 at 11:17
  • I think the user shouldn't be able to access the balance page. A developer can handle that. – Madalina Taina Aug 2 '16 at 11:20
  • 1
    @sfinnie What I usually do is not displaying any links to the profile page if the user is not logged in. If he try to access the page, I redirect him in the sign up/ login page. I think you want to know what messages to display in the pages where the informations are not visible, but maybe I didn't understand your problem. This is why I asked for more details. – Madalina Taina Aug 2 '16 at 12:54
  • 1
    Is it possible to just hide that panel until a user actually logs in? – adriennetacke Aug 2 '16 at 19:57
4

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.

flaticon placeholder

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

  • 2
    These are called empty states. You can see tons of information here: material.google.com/patterns/empty-states.html# and some good examples here: acodez.in/empty-states-aspect-of-ux-design – Daniel Slowacek Aug 4 '16 at 8:03
  • @DanielSlowacek this is similar but not exactly the same as an empty state. An empty state would be what a signed in user with no order yet sees. – qoba Aug 9 '16 at 14:57
  • @qoba: This definitely is an empty state. In the screenshot above the user is building a collection to download, which is currently empty. – Daniel Slowacek Aug 10 '16 at 11:55
  • Yes, the example in this answer is definitely an empty state. However, the question is about the logged out state, which is a bit different from the empty-but-logged-in state. – qoba Aug 10 '16 at 13:56
  • @qoba The example given is also empty and logged out, you don't need to be signed in to make full use of the features in this case. – Summer Aug 10 '16 at 14:23
5

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.

  • The sign in form is a great suggestion, it has the added bonus of not just being a placeholder showing what sort of information will be there, it is functional. – DBlackborough May 26 '17 at 10:35
1

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.

protected by Community May 26 '17 at 8:14

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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