I am creating a Physics calculator UI as part of a science project. It involves calculating a lot of values, from a given two or three values by the student. I have handled the coding part, and what is left is the arrangement of the buttons which calculate the values. After some thinking, I have shortlisted the following two cases:

Case 1: Here the three (or four) labels are set against their textfields. The user enters a value in any two and presses a common "Calculate" button. The button calls a method that searches the empty (null) field and the calls the required method to calculate the value. The returned value is then set as the value of the empty textfield. It is more simpler (for the user) and easy to use. But repeatedly adding/modifying values in the same set of textfields can be a pain. (clear buttons for each field, maybe, somehow so they're not as obstructive as the following case:)

Case 2: Here the three (or 4) labels are again set against their textfields, but with their separate "Calculate" buttons. Each button calls the required method and then sets the required value in its specific textfield. A common clear button for all maybe required.Case 1 or Case 2: a simple graphic representation

Here is a really simple graphic representation of the two cases (note that I'd created this on a friend's PC, and they didn't had anything except Paint)

I need the UI to be clean, un-sophisticated and fluid, something which is better in the first case, imo. But this has a small but nagging drawback of clearing fields separately (again, a button joined with and designed to look LIKE the textfield, to clear it? Is that a good idea?) The second sacrifices fluidity I want, but should be efficient to use.

Already thanking for your response.

  • 1 is much better. The user can follow a natural top-to-bottom flow. Case 2 would eg. force them to fill in third row before they can press calculate in the first row. Commented Jun 18, 2014 at 5:57

1 Answer 1


A few suggestions:

  1. Show a clear button in each field. Focus on the field after clicking so it is possible to directly type something else. I don't know if my example is the best way for right aligned numbers though.

  2. As soon as one (and only one) field is left empty, show a question mark besides it. "Calculate empty field" in conjunction with the question mark will make clear how to use the calculator.

  3. But if it is possible it may be even better to do the calculation while typing the second value. See example 2. A different color and/or an arrow can be used to distinguish the calculated value. No action is needed by the user so the calculate button can be omitted.

  4. Use descriptive button labels but keep them easy to scan. In my examples having a quick look at the first word will be enough.

Example 1 and 2

enter image description here enter image description here

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.