Design for selection options

Question

I have a list of items in a select list with options. This list exists out of 3 options: 'None', 'Every x days' and 'Every month'. It's used to specify if a schedule has to be repeated and how many times.

What I have now works, but it's very ugly and doesn't seem to be the best user experience, in my opinion.

Does anyone has an idea to improve the user experience here? Maybe you've seen something like this earlier? Or you can edit my JSFiddle below.

Please keep in mind that I'm not asking for (free) code, but for some examples that could improve the user experience.

The JSFiddle to show what I have. I didn't gave it any CSS, so please don't judge me on the ugly interface.

Answer 1

Dropdowns have:

• PRO: no needless waste of screen real estate with long lists
• CON: a user action is required before the user can see what the options are

Dropdowns only really help if the list is long. 3 options is not a long list, and a radio button would make more sense in this case.

Something like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

With some additional UI features like:

• if the user clicks one of the input fields, the selected option will switch to this line
• if the second option is chosen (also through action above), any empty field will get default value of '1'

Answer 2

Your select only has three options which are mutually exclusive, so why not consider using radio buttons?

The default radio button should be set to None.

If you select another radio button, the UI should display the appropriate fields for that option (progressive disclosure).