2

I'm trying to combine sign up and sign in as nicely as possible. I want this to be easy for newbies and advanced users of computers.

I want this to be very, very simple. No radio buttons, no checkboxes, nothing to confuse the user. I only want them to enter an email and their password, then perhaps redirect them to a "setup your profile" page.

Right now this is what I have in mind:

Interact/Click/Tap on Sign up and it selects the E-mail input. When they blur/unselect the E-mail input, it sends a request to the database and basically asks "Does this user have an account". I can use that to give the user some kind of message about their sign up/sign in.

I like this approach because it's simple, but I don't know where to show the user if they're currently signing up or signing in. The sign in/sign up method should determine whether or not the user is signing up or in, so there is no need to worry about that.

How can I make the user aware, that they're either signing in or signing up? Many implement this with a radio button or checkboxes, but that cannot look good and would fill too much in a row.

2
  • I don't really see a question in here. What exactly is it you want an answer to?
    – JonW
    Dec 19, 2016 at 15:48
  • @JonW How I can make the user aware that they're either signing in or signing up. Many sites (including Amazon) simply pick "I already have a password/account". One email input and two for passwords (only one visible). I want to show something similar, but one a single row instead. I've edited my question. Dec 19, 2016 at 15:50

5 Answers 5

1

An interesting idea. I admit my first thought is that separate forms are necessary for the best clarity.

Nonetheless, here's a way one can handle both tasks with a single form.


mockup

download bmml source – Wireframes created with Balsamiq Mockups

Using XHR, once the user enters their email check to see if there's an account having that email address. If an account is found add some text to let the user know of that fact and change the "Get access" button to "Log in". If no account is found add text to let the user know that and change the "Get access" button to "Sign up".


And here's a one-liner version of the above idea.

mockup

download bmml source


Something that comes to mind about this method, is security. Someone trying to crack accounts can easily find out valid account email addresses. I don't know how much vulnerability that creates.

3
  • That's great and all, but this won't work for a row layout, which is key in this context. Dec 19, 2016 at 16:27
  • Right, I think it's important that there's plenty of info to clarify what action the user is taking. Dec 19, 2016 at 16:29
  • I completely agree, but making it as minimalistic (I hate using that word) and simple as possible is also key. Dec 19, 2016 at 16:30
0

I would suggest using JavaScript/jQuery to implement this. You can use the one line text based on your graphical representation:

Sign in now or <u>click here to Sign up</u> Username: _______ Password ________

If the user clicks click here to Sign up, you can then have the one liner change with any animation effect using fadeOut/fadeIn, or a slide left, slide top to bottom, etc to then display:

Create account with Username: ________ Password: ______ Confirm Password: ______ or <u>Sign In</u>.

Certainly change the wording to meet your needs.

I hope this suggestion gives you an idea of the direction you want to take.

5
  • I feel like that's a "good" way of showing the user, that we're now using signup and not signin. However, I honestly think it's going to look weird sliding an entire row out of the window. Even more on mobile, where this converts to columns. Dec 19, 2016 at 16:03
  • In order to properly break this apart on mobile using media queries, you can use span tags and supporting classes to have this display the way you want at specific viewport widths. As for sliding an entire row out of the window, you can fade out the sign in form with a fade in of the registration form, and set your transitions to be perhaps 75 to 150ms. Or use no transition at all and do an immediate swap from one form to another.
    – Pegues
    Dec 19, 2016 at 16:28
  • I don't like the idea of removing the entire row just to replace it with the exact same thing, just to give the user some kind of idea of what's going on. Sliding around the input elements doesn't seem very user friendly either. Dec 19, 2016 at 16:32
  • The only other thing I can suggest then is that you get rid of the registration (Sign Up) part of the form, and when the user enters their username and password (disregard confirm password for registration), the query will check to see if the user already has an account. If they do and the password is correct, the user is authenticated. If the query for username is returned as false, then the account is registered. Use something like the following: Login or Signup with Username_____ Password_____ and the Username and Password text boxes use placeholder text to conserve space.
    – Pegues
    Dec 19, 2016 at 16:36
  • Does the user know they're creating a new profile though? What should the form say? Sign in? Log in? That doesn't say much about "If you don't have an account, we will automatically create one for you". Dec 19, 2016 at 18:15
0

if you want to combine them in a same row that will really simple but the problem it will be unique rather than a conventional form which will make the users confused with the sign in/sign up process IMHO.

Anyway you could make the process this way to make clear for the sign up/sign in:

1.Hide the input first, Show only "You are not logged in yet! Sign up | Sign in?

enter image description here

2.When user clicks Sign up then show up the fields that you need to show to the user and vice versa.(this help the user notice the change after click the sign up/sign in). enter image description here

4
  • Thanks for the suggestion. I've always been taught, that I need to have inputs visible from start. Never hide them in the beginning, because the user will search for the inputs in vain. Sliding between the different tabs could work, but they are really 100% the same either way. Dec 19, 2016 at 16:30
  • Maybe you can just change the arrow into button that contains both of sign in and sign out? and remove the "sign up?" after "You are not logged in yet! then" Dec 19, 2016 at 16:42
  • I could change it so when the user clicks "Sign up?" it changes the text of the ">" to "Sign up" (register is better, though). Dec 19, 2016 at 18:16
  • I agree with you, "Register" is more conventional than "sign up" to the users. Dec 20, 2016 at 2:17
0

In my opinion it will be a good idea to keep SIGNIN and SIGNUP at two separate levels in visual hierarchy and not maintain them at the same level. As you have no restriction of space as far as web interface is concerned there is no need to cram up assets .

1
0

A sign-up is the first sign-in. The main difference between the two is the profile information the user enters. This could be left for later or in social media sign-in this might not actually be needed. If we would keep it to the minimum all is needed for a sign-up is:

  • Email
  • Password

So the design is the same the only difference is the response you give:

Access Web (enter email & password to sign-in or to create new account): email | password

  • "Logged in successfully"
  • "Confirm creating an account?" I believe you need to confirm this action, in a modal maybe
  • "The password is incorrect"

(The phrasing can certainly be improved)

1
  • Hmm I agree about that. Maybe I should rethink all of this. Dec 19, 2016 at 16:37

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.