0

In the application I am designing, there is a requirement to allow the user to build an equation by hitting buttons, depicting operators and variables. This equation builder must be displayed within a modal.

Now currently, I have mocked up a wide (400px) single line input box, where the equation is built and displayed as the user punches in the buttons. However, its being argued by the stake holders and front end developers to use a text area instead of the input box, so that if the equation is lengthy, it can wrap down to next line.

As per my understanding, showing mathematical equations in multiple lines is not user friendly. Could anyone help me out by explaining the best practices / a probable solution for showing lengthy equations on a page, which satisfies my use case?

Example -

y = mx + c

Versus

y =

mx +

c

1
  • Could you attach a Screenshot of your current mockup? As of now, it's far difficult to comprehend what your current idea is. Commented Sep 9, 2015 at 4:25

1 Answer 1

1

There doesn't seem to be studies on readability of mathematical equations. Best practices on showing long equations on a page I could find were from (La)TeX community, there is one on Stack Exchange: TeX - LaTeX Stack Exchange

From Handbook of Typography for the Mathematical Sciences by Steven G. Krantz.

In practice, it is best to disabuse oneself of the idea that a displayed equation belongs on one line, and instead to think in terms of displaying mathematics in multi-line chunks.

As there are no facts on readability of mathematical equations, You should base your design on what others have done, what are common practices and on personal intuition. It isn't the the definitive truth but the best solution based on current knowledge.

Personaly I prefer reading long equations on multiple lines. The following equation is much more readable than if it were written on one line.

enter image description here

Image source

There are also things to consider when dividing long equations especially when it is divided automatically, which textarea doesn't do, namely where equations are best to be divided.

The first choice is to break at a “verb” connective. Our last example showed breaks at = signs, and breaks at ≤ or ≥ or similar connectives are very natural and easy to read. But it is sometimes necessary to break at connectives like a + or − sign, or perhaps in the middle of a product of two large expressions.

[...]

First of all, it is a good idea to indent the second line, so that the reader’s eye is signaled of a continuation. Second, it is recommended to place the plus sign on the second line so that the reader knows that the line is a continuation.

[...]

Second, it is best to include the initial × on the second line so that the reader knows that the line is a continuation. Third, the multiplicative · is hard to read and too easily misinterpreted. Last, while juxtaposition of two expressions is commonly interpreted in mathematics to mean multiplication, that meaning is lost when the two expressions occur on different lines.

[...]

If the material in your display is grouped with parentheses ( ), or braces { }, or brackets [ ], then it is best to keep matching pairs on the same line. But if the expression between delimiters is quite long and complicated, then it may be necessary to break it.

Handbook of Typography for the Mathematical Sciences

If you could implement above rules on your equation insertion then you could use multiline insertion. If you can't and you use multiline insertion, the equation could be even more illegible than if it would be written on one line, even if the input starts to scroll.

Only way to be sure which is better is to test them with users or even just with your stakeholders.

1
  • This is a very logical explanation. I'm gonna mock it up and present it to the stakeholders. Thanks a ton! Commented Sep 9, 2015 at 19:38

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.