Input Numbers on Mobile

Question

Some context first. I'm working on a mobile application for law enforcement agencies to track suspects in a real-time manner.

When launching a track session, users need to specify how often the system will obtain the suspect's location information. The value can be from 1 seconds to 30 days.

What is the best solution for users to input numbers in this context? I have 3 options:

Option 1: modal window

This option prevents users from making errors but requires long scrolling in modal window.

Values allowed for Days: (0-29)

Values allowed for Hours: (0-23)

Values allowed for Minutes: (0-59)

Values allowed for Seconds: (0-59)

Option 2: Keyboard

Instead of using a modal window, open the number pad upon user tapping on the input field. This option allows the user to input very quickly, but needs validation afterwards.

Option 3: Slider

This option is very straightforward but needs accurate actions.

Answer 1

What about using the numeric keypad with 2 digits plus a unit option. e.g:

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

It depends on your input values. If you need quick/approximate values (i.e. not exact like 1 day, 2 hours, 3 minutes and 4 seconds) this would work.

I'm not sure why the need to restrict the values to the ones you have mentioned. If a user enters in 24 hours, that is just as valid as typing in 1 day.

The only validation you'd have to perform is a value greater than 30 days. (You could automatically change a value higher than 30 days to 30 and flag the input with a warning).

You could even provide some helpful text to break down the higher order numbers (99 hours = 4 days, 3 hours).

Pros: easy to type in, quick to select, allows flexibility (24 hours vs 1 day) in input.

Answer 2

It's good practice to have a default value so as to always show feedback without requiring the user to dive deeper. (What that default would be should be researched with users and possibly a become a user-set preference.) With that in mind, the slider version works best. However, sliders can be difficult to precisely control especially using touch. Perhaps instead, up/down buttons near each number that accelerate when held. There are probably plenty of other options you could consider.

Also consider using coarser increments for seconds (such as 5 or 10 second increments) or consider not having seconds at all.

Answer 3

If you require exact times, use either text input or a drop-down.

If approximate times are acceptable, use a slider.

Personally, I'd opt for a dropdown as I think they are faster and less cognitive load, especially with small data sets or easily scannable lists such as sequential numbers.

Answer 4

Scrolling to 30: takes a long scroll. Not a good UX, IMHO.

Keyboard numpad: requires validation afterwards.

Slider: hard to use for accurate actions.

Solution: Build your own widget. That listed all possible numbers in one window.

Actually, this is the standard for choosing a date in a calendar.

Thus, you can create something similar

Answer 5

I'd suggest a text field with various allowable inputs.

• 1m10s, 1:10 = 1 minute, 10 seconds
• 1.5h = 1 hour, 30 minutes
• 36h = 1 day, 12 hours
• 10:30:5:12 = 10 days, 30 hours, 5 minutes, 12 seconds

I would ask, before implementing this, if to-the-second level of fidelity is truly necessary or more of a 'nice to have'. Though...for tracking a suspect, I'd almost argue the opposite...would anyone really want to track a suspect with gaps more than a day?