Select every Nth element or N element input

Question

There is list of things, for example books. User selects which books should be highlighted. We do not know how many books there are, so user uses index, for example:

• The second book should be highlighted. (#2)
• The 10th book should highlighted. (#10)
• Every sixth book should be highlighted (#6, #12, #18 ...)
• Every 20th book should be highlighted (#20, #40, #60, #80 ...)

I'm trying to design an input that should define this index, so it's clear to user what it does.

The best idea that I've come up so far is to combine dropdown and simple number input (so dropdown chooses if it is "second" or "every second"):

But it still feels wrong. Any tips on how to make it better?

Thanks!

Answer 1

One option that seems like it might work, inspired by repeating calendar events:

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

Answer 2

You said that you don't know how many books there are but it seems that the user does. You could in the first place ask how many books there are and then display all the numbers as a grid. So the user can select the right numbers

You might also provide selection shortcuts if you need them to be faster.

Answer 3

Instead of limiting them to one type or another, what about something like how printing works in Microsoft Word (among other applications). It gives a textbox and the user types in which pages they want to print, using commas to distinguish between different pages, and also allows ranges to be chosen (e.g. 7-10). This could be extended to accept every nth term by some syntax of your choosing, e.g. %6 will highlight every 6th book.

A user could then enter something similar to 1-4, 7, %10 which would highlight books 1, 2, 3, 4, 7, 10, 20, 30, etc.

This will require some extra work in terms of validating the user's input, and ensuring the values they enter are valid, as well as providing some sort of tooltip or placeholder to describe how the feature works. However, this is how most applications work in terms of printing, so shouldn't be too difficult for the user to understand. Screenshot of how Microsoft Word does it below.

Answer 4

I think your original solution is very good; probably the way I would have designed it myself.

If you want to avoid "hiding" the options in a drop-down menu you could use a checkbox but I'm not sure its function is clear enough: