1

My site has a profile page where users can fill out fields, change their pictures, see stats about themselves, etc.

Currently, if the user somehow lands on profile.html without first being logged in, a sign in modal is opened. If this is closed without logging in, however, they are redirected to our homepage.

This was acceptable until now - we will be sending out a mass email urging users to fill out their profiles. This means that many users will be landing on this page without being logged in, and the redirect will be confusing if and when it occurs.

What is the best practice for showing (but disabling) pages that are behind a login wall? So far I've thought of adding an overlay, disabling interactions with fields, adding a banner prompting to log in, and similar prompts.

Improve this question
4
  • Why the forward to the home page? Why not just closing the modal and populating the profile once they have logged in?
    – J. Dimeo
    Commented Aug 16, 2017 at 18:09
  • @J.Dimeo If they close the login modal, they will see an unpopulated profile page. Won't this be confusing when they try to fill out a field, and have nothing happen?
    – fpscolin
    Commented Aug 16, 2017 at 18:18
  • So if they OK/succeed at logging in, you are currently keeping them at the profile, but only if they cancel/don't log in, you go back to the home page? The way you worded it implied you always take them to the home page after closing the auth modal.
    – J. Dimeo
    Commented Aug 16, 2017 at 18:34
  • @J.Dimeo you're right, my apologies. Edited for clarity.
    – fpscolin
    Commented Aug 16, 2017 at 18:49

2 Answers 2

Reset to default
1

Instead of a modal, I would create a special full-page login screen that says "To continue to your profile, please log in". And use the typical redirect pattern.

Otherwise, if you are going with a modal to login/register, I would still show the generic profile page in the background so the existing user knows they are in the right place and need to log in to continue.

Check out this example from this related question. However, in your case the background wouldn't be the home page but the blank profile page (or one filled in with dummy/example data). If the user cancels, you can redirect to the home page- I don't think that is distracting since it's clear that you need to log in to access the profile page.

Example of a modal login

Improve this answer
6
  • This is exactly what the behavior is currently (with the blank profile page in the background, slightly greyed out.) The issue is that once visitors are redirected to the homepage, they would need to click the user icon, log in (which reloads and turns user icon green), click the user icon dropdown and click "Profile" just to get back to the page. This process is way too long and confusing, hence the need to stay within profile.html
    – fpscolin
    Commented Aug 16, 2017 at 19:15
  • But once again, they would only get to the home page if they deliberately decided not to log in, correct? If they logged in successfully from the modal, it would just stay on the profile and reload the page with the user's info?
    – J. Dimeo
    Commented Aug 16, 2017 at 20:40
  • Yes, which I fear might happen often - they'll be landing on this page after potentially not visiting the site in months, only to have a modal pop - many first instincts would be to quickly close the modal to see the page behind it.
    – fpscolin
    Commented Aug 16, 2017 at 20:54
  • This is revealing one of the usability issues behind using modals for this purpose. Edited and added a first line describing what I would do instead of a modal.
    – J. Dimeo
    Commented Aug 16, 2017 at 21:01
  • Alright, I'll consider the standalone sign in page. Thank you for all your help today
    – fpscolin
    Commented Aug 16, 2017 at 21:16
1

If a user tries to navigate to a page for which they must be logged in, make them log in, then forward them on their way.

navigate to profile.html  >  send to login.html  >  proceed to profile.html
(unauthenticated)            automatically.         (authenticated)

This is expected behavior. As a user, if I want to edit my profile, I expect to have to sign in. Additionally, I expect the site to forward me on to where I was trying to go initially--otherwise, I'll get disoriented if I somehow get redirected to home.html, for example, when I had clicked a link that said Edit Profile.

Improve this answer
1
  • This would be the expected behavior, except that our login/signup process is done via Bootstrap modals. This way the user can create or sign in to an account on any page.
    – fpscolin
    Commented Aug 16, 2017 at 18:04

Your Answer

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

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