Entering numbers on a mobile phone can be cumbersome. Small touch areas on the keyboard and too many interactions are killing your conversion rate.

Traveling with two kids? Planning your next holiday shouldn’t be this dreadful. Avoid the depth of multiple dropdowns for picking if it’s one, two rooms or “other options”. Then select the number of adults, kids and specify the age of the children. You will end up with a high number of selects and a low number of conversion.

Designing the Input

You need to help to user enter a numeric value. It might be an integer, a decimal, a small number or a large number. Whatever solution you end up with, make sure to have large enough touch areas for the user to interact with the UI. This can be easily tested, just hand over the phone to your colleague and let him enter a number. Keep in mind that the user is on a hurry and usually wants to get things done fast.

Try testing your app on the go. While walking on the street, standing on train (not sitting) … Try using it while multitasking. If you can do things effortlessly, you’re in good shape. If some of the actions are hard to do, hone in on them and see what you can do to make it easier.

Interactions should be clear. It should clearly signal the user what he can and can’t do. It should always have an easy to follow next step.

Working with small values

If people have to enter small values, like the number passengers while booking plane tickets, use a stepper. This lets them adjust values easily with just a couple of taps. You can combine the stepper with a numpad for enabling quick entry of bigger numbers. The user will still be able to move to the right value with a couple of ticks, but also make larger jumps when tapping on the actual value.

See an interactive demo of the Stepper

Picking from a range

If the user needs to select from a range of values, you can use a slider or a scroller control.

See an interactive demo of using Sliders

The scroller looks and functions just like a select and works ok with smaller ranges. If the range is too big and the user needs to scroll from 10 to 1000000, go for something else. There are better alternatives. Consider using a numpad or a logarithmic, non-linear slider.

See an interactive demo of the Scroller

Free form

Sometimes you’ll have to give the user the freedom to just type the value in. The best way to do it is with a numpad. It is essentially a focused keyboard aiding the user to enter numeric values faster and easier than with a full keyboard.

See an interactive demo of the Numpad

Supporting variable format

Other times it might be necessary you’ll have to support multiple formats. Let’s take the imperial vs metric systems. You are trying to capture mass measurements. The user might prefer doing it in kilograms or pound. Provide a choice.

See an interactive demo of supporting Variable format

Your number one priority is to help your users make progress. Improve the usability of your apps and improve your conversion rates.

If you are looking for quick, no-hassle solutions that can be literally implemented in minutes, check out the products we provide at Mobiscroll.