4

I want to design a 2 steps sign up screen:

  1. identification
  2. personal info

My question is regarding step 1. In this step the user will have to choose between ID or passport number. Once he choose, he will have to fill 2 fields: identification and name. So my dilemma is if I should put radio buttons next to the ID and pass and once one chooses it will open 2 input fields below the 2 radio buttons.

For example:

radio button 1
radio button 2

input field 1.x
input field 1.y

Is this behavior normal? Is there also another option?

Improve this question

4 Answers 4

Reset to default
1

Isn't it so that the ID number and passport number differs in syntax/length? This of course differs from where you live, but I know in Sweden they differ in length.

In that case you could simply inform the user that he can fill the identification field with either passport number or ID number and then programmatically distinguish what type of information it is.

This way you will skip one step/click in the sign up without losing any information.

Improve this answer
2
  • True. And I agree with everything you said above. this type of identification was an example. In my case I did the ID/pass in one field as input field 2 (since they differ in length) and the radio buttons are for client number or CC 4 last digits - as input field 1.
    – Milah
    Mar 14, 2012 at 16:45
  • 1
    That is the real answer !
    – Gildas Frémont
    May 3, 2013 at 14:46
1

IMO, this will work for your case.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1
  • I think that since the radio buttons are not that visible it will cause some load. I believe this option is more common in login/signup options
    – Milah
    Mar 14, 2012 at 16:37
1

Do it like this. Have all four elements visible at all times. If the field labels change depending on which radio button is selected, that's fine. At least this way the user will know where to fill out the additional information.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
6
  • 1
    The only problem I have with this is the alignment of the radio buttons. Horizontal alignment is hard to read. (msdn.microsoft.com/en-us/library/windows/desktop/aa511488.aspx)
    – Bart Gijssens
    Mar 14, 2012 at 12:41
  • Haha good point, I dunno how I missed that one.
    – Matt Rockwell
    Mar 14, 2012 at 12:59
  • Thanks. This is what I thought also (vertical), so basically you suggests that I will display one open as a default selected id right?
    – Milah
    Mar 14, 2012 at 16:35
  • @MattRockwell what if I will put the fields under each radio button? in order to keep the hierarchy? Is this ok?
    – Milah
    Mar 15, 2012 at 6:53
  • So do you mean that there is only a single field for each corresponding radio button?
    – Matt Rockwell
    Mar 15, 2012 at 11:07
0

Another possibility would be to really split it up into 2 steps.

  • In a first screen you just choose ID or Passport nr, then the user clicks "Next"
  • In a second screen the user needs to fill in the 2 input field, based on the identification method he selected in step 1.
Improve this answer
7
  • What would the user gain from splitting one step into two steps? I just can't see how this would be beneficial in any way, rather the other way around.
    – AndroidHustle
    Mar 14, 2012 at 12:29
  • Same reason MS uses "Wizards". What is a single task in the mind of a user (getting signed up), is split up into multiple steps. In this particular case, if this is the only information that needs to be filled in, it may be overkill. I leave that up to the person asking the question. I am not saying my answer is better than the other answers. I only suggested it as an alternative. In fact I think Matt Rockwell's answer is the best (upvoted).
    – Bart Gijssens
    Mar 14, 2012 at 12:38
  • I see your line of thinking, not sure it's really applicable in this situation though. Using Wizards is a good way to create order with a set of synchronized steps, where actions taken in previous steps often influence the following steps. In this case however, in my meaning, there's no real reason to separate it. In the worst case the user realizes that he chose the wrong input while entering the text fields. This will cost 5 clicks compared to 2 if you keep it on the same page. Just wanted to explain myself, didn't want to sound like I was just flaming your answer. Not my meaning at all.
    – AndroidHustle
    Mar 14, 2012 at 12:54
  • Mind that the number of clicks is not a good measure for usability (thatdanny.com/2008/11/16/… and uxbooth.com/blog/stop-counting-clicks). Secondly, the action in step 1 does influence step 2: the fields that the user needs to enter are different. I agree the difference is small, maybe too small.
    – Bart Gijssens
    Mar 14, 2012 at 13:01
  • It's not good to cut down on clicks in a way that compromises a feature, that's true. But still there's no need to add clicks where there's no need for it. And I'm not sure that I would say that the first step does influence the second step. If it really did influence the second step they would greatly differ between each other, here it's just a matter of labeling one text field. That could just as well be handled live, and the logic is easily taken care of by JS (or what ever platform the OP intends to develop for).
    – AndroidHustle
    Mar 14, 2012 at 13:16

Your Answer

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

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