0

I am breaking down a large number such as 1022056271142522954 into adding the individual digits, and want to show the process of adding the digits. What I have now is this, which overflows onto multiple lines.

enter image description here

What would be a good way to show this which works across devices (mobile, tablet, and desktop)? I was thinking of maybe adding 4 numbers at a time perhaps, and align the equals sign on each level. Or, I could have 2 numbers added per line, but that would be n - 1 number of lines, which in this case is about 18 lines long. I have numbers which are going to be up to 256 digits long in some cases, though most are less than 10 digits. What is a good way to go about showing this process of addition in these cases?

Maybe I could just show it if it's up to a certain number of digits (say 5), and then just link to an example for longer digits, saying "We don't do the calculation because it's too long, but this is how you would do it".

Improve this question
3
  • 1
    Good answers already, but so different because it's guesswork as to why, how and by whom this is used. Is it possible to add more context?
    – jazZRo
    May 5, 2022 at 10:10
  • What kind of context should I add? This is to be used by all sorts of people interested in numbers, but who don't necessarily have fluency in math. So we want to show explicitly how calculations are performed in an easy way so you can visualize it in your head after you leave.
    – Lance
    May 5, 2022 at 10:17
  • 1
    That's the kind of context I meant 🙂 Can you also explain why people need this and need to memorize it? UX is about finding the right solution for people, but what exactly is their problem, what is their goal or what is it you want them to achieve?
    – jazZRo
    May 5, 2022 at 11:15

2 Answers 2

Reset to default
2

Are animations an option? If you want to show the process, then you could just display the number and add the digits below like this:

Keyframe 1

1022056271142522954
 1

Keyframe 2

1022056271142522954
  3

Keyframe 3

1022056271142522954
   5

...

Keyframe Last

1022056271142522954
                 60

Colorize the two added digits which result in the sum below. Colorize the digit in another color, too. A fixed size font would make things easier for display of the number.

Improve this answer
1
  • Excellent idea, thanks!
    – Lance
    May 5, 2022 at 10:05
1

Without knowing the context, only generic concepts or tricks can be pointed out:

  • Interpret the project as a game interface. There are too many similar elements with common points which allows creating a graphic system.
  • Reduce common elements to the minimum expression, for example, the operation +
  • Frame the figures, this allows to stick them as much as possible and easily differentiate them
  • Frame the total group to identify it as a unit
  • Use a condensed strong font, the advantage of not having descenders allows the use of a sufficiently large size facilitating visibility
  • Use a vertical or horizontal scrolling
  • Identify rows a b c d... as help to the user for searches or locating

enter image description here

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.