dailyidea / dailyidea.com---ARCHIVE

Daily Idea: Email me an idea every day. I'll store it, make it searchable, and tell you about similar ideas submitted by others.
11 stars 11 forks source link

[follow button] If user is not authenticated, make this direct to a login page #679

Open ezl opened 3 years ago

ezl commented 3 years ago

Currently, it the user is not authenticated and views a user profile page, when they click the "follow" button, nothing happens.

For now, show an alert saying: "please log in in order to follow users." with a link to log the login page.

In the future, we may design a separate flow for this with modals to collect the user email address and sign them up (as we have with other interactions like like/share/save). this is ticketed separately for future design in #678

ikosovec commented 3 years ago

The app is redirecting to the login page, but the error "please log in in order to follow users." is not being shown anywhere. image

@ezl please check if this is fine from your perspective. If it is, we can close the ticket.

ezl commented 3 years ago

I'm ok with this for now.

@ikosovec can you work with @Watson-B to create a NEW ticket for improving this full flow though?

From my perspective:

(A) sending the user to a login page because authentication is required is a bit of a "hack" and an imperfect UX. For example, there are several different actions that require authentication (save, comment, or like an idea; follow a user). For an unauthenticated user, if they try these, it should not "just work" (in fact, it CAN'T, since we don't know who the unauthenticated user is, therefore it's impossible for us to complete the action for the user).

It's not WRONG to just force these interactions to a login screen without any messaging, but it's not the best experience. The user doesn't necessarily know how to solve this, nor is it clear how they should get back to the original action. What I mean by this is that if we take all of the different actions described above (liking a post vs following a user vs commenting) and just drive them to the login page, then what happens after they log in? Do we just take them to their dashboard? If so, they lose their flow/context and forget what they were doing.

In a PERFECT world, each action takes them down a specific path with specific messaging that "completes" the action they were INTENDING to complete.

So for example, if they click the follow button, steps are something like:

  1. specific lightbox sequence like: "sure! we'll follow USER=ERIC for you, but we don't know who you are. Whats your email?"
  2. if you are an existing user, then the browser will say "ah cool, Ivan! welcome back. We just sent you an email to confirm. Click that and we'll complete the follow!".
  3. send them an email like: "Hey Ivan, you were trying to follow USER=ERIC. Just click this link to confirm it's really you!" (small print below: btw, if you DIDN'T try to follow Eric, you can just ignore this message!)
  4. click link in email, directs you back to the PAGE YOU WERE ALREADY ON, then just shows a notification like: "Hooray! You're now following USER=ERIC! (oh and btw, welcome back!)"

Now the user (A) is exactly where they were if they had already been logged in, (B) hasn't lost any context, (C) has been guided through every step.

If the user is NOT an actual user, then the "authentication" steps change.

For example, in Step 1 we checked the email address and found that it does NOT match a user in the database, so it's a SIGNUP. (we don't CALL it that though, we just DO it for them). So in step 2 the messaging isn't "welcome back! we sent you an email to confirm!".

Instead we might do something like: "Awesome! looks like it's your first time following someone! we sent you a quick confirmation email so that you'll be able to find all the accounts you follow in the future!"

then the email copy says: "To finish following User=ERIC, just click this link!"

clicking completes completes the user creation and verifies that the email address is valid. It then takes the user back to the SAME PAGE. Now it has a VERY brief "user onboarding" dialog that (A) tells the user a LITTLE bit about Daily Idea and (B) takes them back to the same context they were in before we interrupted them to authenticate them.

"Congrats! You are now following User=ERIC!

By the way, it looks like it's your first time here, so welcome! What do your friends call you? (Your Name) "

After that, show a message like: "Well welcome, Ivan!

Daily Idea is a site where you can browse other people's ideas or save your own! If you want more information about using the site, you can click the help icon in the upper right (make this flash). But for now, we'll let you get back to browsing!" (press ok, then it just goes back to the page they were on).


Basically there are a small, number of actions that an unauthenticated user may take that will requires us to authenticate them. Each of those actions should lead to a SPECIFIC sequence that EITHER logs them in (if they are a user) or "signs them up" (if we do not recognize their email). We should never have to ASK Them to choose "login or signup" -- we can always INFER that from the email address they type to authenticate.

Each of these flows should have language that is specific to the ACTUAL action they are taking and should take them back exactly to where they were when they were still anonymous, and complete their action AS IF they had already been logged in without requiring them to ever "press back" on their browser or "get lost" somehow in the flow.

Off the top of my head, this small set of actions a user might take that we require an authenticated user for, are:

  1. comment on an idea
  2. save an idea
  3. like an idea
  4. follow a user
Watson-B commented 3 years ago

@ezl mocked a quick prototype of what that flow would feel like for both.

The modals need some work, probably a little more show and a little less tell, but it will give a sense of how it would feel.

To test the "Already registered user" click on the Like action, and to test "New User" click on save. If you get to the end (back to the original page with the confirmation of the action occurring) click on the DI logo to reset.

https://www.figma.com/proto/FkptxrJSaBpU3mslMFnWm4/Daily-Idea-Mobile-Desktop-Copy?node-id=1047%3A15989&viewport=2211%2C-5404%2C0.3607136905193329&scaling=min-zoom

I may not be the typical user in this regard, but I am usually on my computer and then use my phone to validate 2FA, so my instinct is to attach a message about the user being able to reload the current page (on current device) after clicking the button in the email. Think that's necessary though? It just adds content to the modal, which might lead to more skipping if it's too dense.

ikosovec commented 3 years ago

I think we can close this one with all the new flows. Right?

vedmant commented 3 years ago

@ikosovec @ezl It just redirects to old login page, new auth flow is not used here. To do the same as with like/save it will require quite some work, plus probably new email templates for every action. If we do the same auth flow everywhere, maybe it makes sense to create a simple email template where just message replaced.

ezl commented 3 years ago

agreed. not ready for execution. @Watson-B and I have discussed "Follow" functionality, and we realize a lot more work is required. Removing this from dev kanban and reopening it in design kanban where it will be a placeholder for discussion.

this will eventually be closed and replaced by more thoughtful and direct instructions for execution.