1

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.

  • need more context to help. what journey are you selecting those options in? you say it's ugly but it doesn't have CSS, so that's easily fixed. What don't you like about it specifically? – Midas May 10 '16 at 10:40
  • @Midas I don't think disappearing and appearing inputs by choosing something in a select is the best user experience, so I was wondering if someone has a solution to improve the user experience here – M Zeinstra May 10 '16 at 10:48
  • Take a look at how other applications do recurring appointments: ux.stackexchange.com/questions/91245/… – Midas May 10 '16 at 10:53
2

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:

mockup

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'
|improve this answer|||||
0

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).

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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