A good design of adding lots of numbers?

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.

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".

• 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? May 5 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. May 5 at 10:17
• 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? May 5 at 11:15

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.

• Excellent idea, thanks! May 5 at 10:05

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