NPS surveys generally take the format of:

enter image description here

The touch area of each selection seems to be pretty tight when I put my mockup on a phone... Is there a better design pattern that I could be using here for this type of input?

Other options I considered:


standard slider: http://opinionmeter.com.pk/wp-content/themes/om/images/TouchPointMobileScreeshots/iPadNPS-Large.jpg

fun slider: https://dribbble.com/shots/1641720-NPS-Survey-Interface/attachments/257028

Interaction wise, sliders could work because they can snap to discrete values. The sliding action makes it easier to fine-tune values than tapping since the user can adjust their input provided the slider gives appropriate feedback.

I didn't like this option because sliders tend to have a default starting value and I felt that this would bias the survey and many users may just submit the default value in order to bypass the survey instead of actually making a selection.



Pickers tend to have an empty or default field that the user must tap in order to bring up the picker UI. I couldn't think of something reasonable to put in that field... I think the interaction is much more straightforward with the picker than with a slider though... enter image description here

  • For the slider option, you could just make the default state unrecognized until the user interacts with it. Then they'd at least have to do something with it before progressing. Aug 20, 2015 at 16:48
  • Have you considered radial or semi-radial selection? I’m not sure, though, 11 steps aren’t too much for that, since 8 slices of pie are usually considered the sweet spot, but clocks show 12 hours after all.
    – Crissov
    Sep 20, 2015 at 21:26

3 Answers 3


1-to-10 entry can be accommodated on phone screen as long as you use zoom-in key interaction design to facilitate entry.

For NPS, I think it's important to display all 11 numbers in left-to-right sequence, and provide d a one-click way to pinpoint the exact number, otherwise you may inadvertently introduce biases towards certain range.

Below is a mock-up of 3-states: thumb-hover, thumb-down, and thumb-up. It's important to make sure during thumb-down, user can slide-left and right to select adjacent values.

(sorry, I forgot to add 0)

enter image description here


Mobile phones do not have a huge screen, even phablets! I think it is better to use a 5-point scale or likert from unlikely to very likely for instance. A10-point scale, as i see in the first pic, would be more complicated for users to complete. I use 7 or 5-point scales in ux artifacts like nps for many reasons, being odd scales better than even for analysis purposes.

  • 2
    I would love to! But NPS surveys use a standard scale for their analysis so changing the scale to be more ux friendly would make the data less meaningful :(
    – Lily
    Aug 24, 2015 at 18:38
  • Yes, that is right. That's why I was thinking in using another similar instrument and not Nps if it does not work. :)
    – maia
    Aug 25, 2015 at 3:08
  • As for the mobile input in nps, i would have the text input and below an array of buttons (those you tap and get selected) so one can tap the value instead of writing.
    – maia
    Aug 25, 2015 at 3:11

Keep people at the center of data collection. People easily relate to a 10 point scale. For example, all TV reality shows have a rating scale of 10. People subconsciously relate to brands using a 10 point scale. Although the conversation is open for debate, I have seen 10 point scales work best for research studies I have done in past.

Below are some screen shots on how you can present a 10 point scale on different devices.

Screen shot for NPS Sliders shown on different screen sizes

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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