0

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)

enter image description here

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.

enter image description here

  • Assuming the user selects a period of days OR hours OR minutes OR seconds, presenting them all together makes it seem like you have to use all four. – Eric Stoltz Dec 1 '15 at 23:41
3

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

mockup

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.

0

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.

  • This isn't always the case, especially when submitting the form can result in faulty data that has serious implications. I think this might be a case where it is better to require user input before submission. – Danny F. Sep 1 '15 at 21:54
0

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.

0

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

enter image description here

0

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?

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.