I have a system where I have to get a number, between 1 and 10, from the user in a web application. (The actual use case is the user has to say which group he is from, and group names are numbers from 1 to 10)

What design would result in the best user experience for something like this? A radio button?

enter image description here

A radio input with visual feedback on selected number?

enter image description here

Or maybe a normal select with redundant ("th Group") info?

enter image description here

Or another option?

  • Hi T., what is the context? – Johnny UX Aug 28 '14 at 14:41
  • I have to get the fiscal region (IRS related) where the user lives, which are numbered from 1 to 10 in my country (first region, second region, ..., tenth region) when the user signs up for the website. – t.pimentel Aug 28 '14 at 14:45
  • Wow, I would say away from this approach as it looks like a Likert scale which is commonly used for rating. Maybe a nice map would work or a drop-down. – Johnny UX Aug 28 '14 at 14:56

Avoid abstracting the label from the control wherever possible. That is, avoid separating the control and the label that describes the control's state because that forces the user to look in two different places in order to understand what's going on. Instead combine them so that the control clearly describes its own state.

In this particular situation, I would want to have the number directly above each of the radio buttons or use a custom control that presents this more elegantly, like the one below that was given as an example in another question (The best practices for a rating bar/slider/buttons).

enter image description here

  • Thanks for the answer! You think a radio button would be better in this case than a select with redundant info in this case? (Added a picture to the question with what I had in mind for the select) – t.pimentel Aug 28 '14 at 14:56
  • @t.pimentel I think if the groups have descriptive names a dropdown might be better but if they are just numbers I would use a radio list. – Matt Obee Aug 28 '14 at 14:57

How about this? Group is not redundant and also in line with the options.

enter image description here


I would also suggest you carefully consider the order of the values.

Ordering values from 10 to 1 (instead of from 1 to 10) leads users to give an higher average rating (you can find more informations in this answer I wrote a couple of days ago).

You may also want to have a look at the primacy effect:

a cognitive bias that results in a subject recalling primary information presented better than information presented later on.

  • This question is not about ratings, I'm actually trying to avoid that my interface looks too much like one, if I can. – t.pimentel Aug 28 '14 at 20:27
  • 1
    Sorry, I didn't get that - my fault. Thanks for giving me your feedback. – Eleonora Zucconi Aug 29 '14 at 13:19

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.