3

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"):

enter image description here

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

Thanks!

  • 1
    Can you help me understand why someone would want to highlight every 20th book, but not, for example, books 15–25? What is the action users will be performing after selecting the books? – Kit Grose Aug 21 '18 at 14:58
  • @KitGrose , sure, imagine a simple catalog in ecoommerce store where each product occupies the same space. This UI allows to style certain items differently, so catalog looks a bit more diverse and engaging. – Marvin3 Aug 21 '18 at 15:28
  • @Marvin3 Who is using this feature? Are you more of an ecommerce platform, providing space where sellers can customize their interfaces uniquely? – maxathousand Aug 21 '18 at 16:24
  • @maxathousand feature is used by designer, or developer or website administrator. So it should be not too technical... – Marvin3 Aug 21 '18 at 17:24
3

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

mockup

download bmml source – Wireframes created with Balsamiq Mockups

  • was about to say the same thing :) – Devin Aug 21 '18 at 19:52
1

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

enter image description here

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

  • Unfortunately, user doesn't know either how many books there are. For example there are thousand books and we need to highlight every third. – Marvin3 Aug 21 '18 at 15:44
1

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.

Microsoft Word print screenshot

1

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: checkbox solution

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.