1

I have two text boxes:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

This is to represent orbital information around a body, the apoapsis (A) is the point when you're at the furthest distance from the body, and your periapsis (P) is point of closest distance. What this means is that your A cannot be less than your P (though they can be equal, maybe never in the real world though).

So what it comes down to is when a user is entering this information, they should not be able to enter a value for A which is less than P or vice versa. If they attempt to, is it better for the change to be blocked, with some feedback, or intelligently switch the values of the two text boxes, and move focus to the appropriate text box, so the user can continue what they're doing?

  • Just curious, who is the target audience for this application ? – Mervin Johnsingh Jan 21 '14 at 7:51
  • @Mervin no target audience really, it's just more for me, practising stuff, and making random tools for the sake of having them, but I felt the question about the scenario was enough to ask :) – Psytronic Jan 21 '14 at 15:18
5

As the specific terms are used, just make it obvious, instead of relying on user's memory. It's recognition over recall heuristic. This visualization helps to support mental model and eliminate errors.
enter image description here

It's better to use animation when switching between fields.

5

A little icon will work wonders in helping people visually relate the value to the parameter.

I would also put the fields the other way around so that the smaller parameter naturally precedes the larger parameter in the correctly numerically sorted order.

enter image description here

And in the event of both fields being completed, then on the loss of focus show a message, with the offending values highlighted and offer to auto-switch them at a single click of the link.

enter image description here

That makes the ui seem smart and helpful without being too abrupt and demanding.

Having swapped the values, move the focus to the next box as normal.

I also added units (in brackets) to the fields so that users know what sort of value to enter - eg km, astronomical units, degrees, whatever.

It's important to prompt the user to swap the value rather than do it silently because you want the user to learn from their mistakes so they have more chance of getting it correct the next time.

In any case you the developer cannot guarantee that the values are wrong simply because they were transposed. It could have been a typo or simply a value for another field entered in the wrong box.

2

You can only prevent a wrong input by setting constraints to the input method. Like using sliders which adjust their position automatically and can not be moved into a wrong position. When using input fields either

  • tell the user what went wrong and keep him from proceeding to the next step: enter image description here

  • or force the user to see that the system changed (auto corrected) the value and its ok. enter image description here

  • You can just show message "bad values, corrected" and show new values in red until edited. Saves the checkbox. – user1306322 Jan 21 '14 at 10:44
  • Your right @user1306322. I didn't consider the checkbox behavior if the auto correction value gets changed manually. – uxfelix Jan 21 '14 at 11:04
  • If you think you can improve it by taking this into account, you can always edit your answer. – user1306322 Jan 21 '14 at 13:10
1

Only switch if you can confidently assume that the user has indeed put the A value in the P field and not managed to add a number or misplaced a decimal point due to clumsiness. If you do the switch then be sure to do what Google does when changing your search terms and explicitly tell the user what you did on their behalf. Also make it easy to reverse.

0

I like the suggestion presented by Alexey. Still, some additions:

I do not think you can actually block the entry of a number smaller or greater than some other number, because you'll have to deal with an intermediary state. Let me explain. In the basis, you have two states. Eiter the number entered is valid, or it is not. However, there is a third state, and that is if the input may become valid when the user is done editing the contents. For instance, say that your minimal value is 9, and the user enters a 1. Is that invalid? No, it is intermediate, as the user may next enter a 0 and thus have entered 10. The user had to pass though that intermediary state to reach the valid state.

I don't think there is a good way to determine if, as long as the input is numeric, it is not an intermediate state. More so if you take into account that the user can make mistakes entering the data or could be copy/pasting values from a system where the the decimal and thousands separator symbols are different that what you're expecting. Thus, you can't block it and have to allow the user to edit the intermediary value, as blocking would stop the user for actually reaching the valid state.

As for making sure the entered data is valid: simply provide some feedback on the currently entered data, and don't allow going to the next step while the entered data is not valid. Automatically resolving would, I think, be a source of errors. You could offer an easy way to swap the values though, if you think that that will be something that's needed frequently.

0

Is it a mobile or a desktop application? You may find different ways of doing it accordingly to the device size and capabilities. I will assume you work on a desktop computer.

It is a good option to show schemes that are more self-explaining than a bunch of text, just like Alexey suggests. Additionally, we could improve this by showing the distance directly on the scheme.

But what if your user still doesn't get it? 2 more options:

  • Show some information message next to the field so that user can have an answer to the question: what is this? It could be done by an icon or placeholder.
  • Show some contextual warning message in case the user tries to validate the form and the values are incorrect, or when the user loses focus on both text-boxes and their value is incorrect (so you can confidently say your user is done with this part of your form, and had it wrong).

So here wo go with some propositions: The default screen

When the user displays the info message (you can even underline the concerned arrow on the scheme): Info message

And the error message in case your user still gets it wrong: error message

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.