Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question

4 Answers 4

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

share|improve this answer
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 '12 at 12:41
    
Haha good point, I dunno how I missed that one. –  Matt Rockwell Mar 14 '12 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 '12 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 '12 at 6:53
    
So do you mean that there is only a single field for each corresponding radio button? –  Matt Rockwell Mar 15 '12 at 11:07

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.
share|improve this answer
    
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 '12 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 '12 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 '12 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 '12 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 '12 at 13:16

IMO, this will work for your case.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this answer
    
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 '12 at 16:37

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.

share|improve this answer
    
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 '12 at 16:45
1  
That is the real answer ! –  Gildas Frémont May 3 '13 at 14:46

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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