Visual Representation Of Numbers In Minimal Space (Part 2)

After some further thought on my ring system from part 1, I decided that each ring shouldn't consist of ten pieces.  Each ring should consist of nine pieces.

Here are three reasons why:

1. You cannot fit the number ten into one place value.  Ten pieces should mean some kind of overflow into an outer ring.
2. With the way the system is now, I cannot use the number zero because each ring needs to have at least one piece in order for the user to know that there is a ring there.  If a user does not know that a ring is supposed to be in a certain location, they will misinterpret the number the system is trying to represent.
3. For larger numbers it is difficult to tell whether a ring has nine or ten pieces because the representation gets visually "busy". 

I decided to modify the system in two ways:

1. Each ring now has nine pieces.
2. A ring that is supposed to represent the number zero is now a continuous circle.

Here is the old representation of the number ten next to the new representation of the number ten:

Old 10

New 10

Which one is quicker to read?  The modified system has at least two benefits:

1. Representations of "zeros" actually look like zeros.
2. There is a crisp, visual distinction when a ring is full (or empty if you're pessimistic) that makes larger numbers easier to interpret.

So after all of that thought and modification, it turns out that my system isn't so practical.  I was correct in my previous assumption that my system might be difficult to read with larger numbers (too many rings).

Here are some examples:

1,219,481,632

1,905,050,212

1,628,402,560

1,656,228,427

1,090,540,523

878,576,028

854,733,186

76,512,244

506,638,468

663,987,316

Try counting the rings.  Takes awhile, doesn't it?  It turns out that humans are bad at counting large numbers of objects.  I created my ring system because I wanted quick comparison between large numbers.  And guess what?  It didn't answer my problems!  So back to the drawing board.

Why is it difficult for humans to compare large numbers?

1. Large numbers have to be compared column by column.  The more columns, the more comparison.
2. The eye has to go back and forth between each number several times.  A faster attempt at a comparison is more error prone as the person is very likely to lose their place and screw up the comparison.

New thought: what if, in the center, I put a count of the number of rings that are in the representation?

Pros:

• Users would quickly know that a representation with a larger number is greater than a representation with a smaller number.  Using a 64-bit unsigned integer, the largest count would be 20.  When using the count, the largest comparison between two numbers would involve only four columns (two each).  Humans can compare two to two pretty quickly.
• It wouldn't increase the radius of space that the system takes up.

Cons:

• This would increase the learning curve for understanding the system.
• Users would still have to count ring pieces if the counts were the same. 

Here are two examples of this idea:

Pretty easy to tell which number is larger, right?  Now tell me each number's value.  Go ahead, I'll wait.

So let me point out the obvious.  I need to be able to quickly compare numbers and large numbers take too long to compare.  

Let's narrow this experiment down to the confines of my game.  What do I really care about?  I planned on using this system to keep track of the generations of units.  

Quick background for how the game works: 

1. You start off with units.
2. Your units acquire points.
3. You spend your points to upgrade your future units.
4. Every time you spend points, the next generation of units is created.

Currently, DATABITS supports 50 live units per player.  I'm only concerned with comparing the local player's generations so I only need to compare 50 generations at most.  The only generations I care about are the ones with living units.  Ultimately (because it would be cool) I want to be able to constantly display what generation each unit is from, but doing so would look ugly when the numbers start to get large.

So what if I constantly ranked and displayed the relative age of the generations for the current living units?

What if I ranked them from oldest to newest?  With a max of 50 units, that's a number range of 1 to 50.  50 is a reasonable number for my system (or a standard textual form) to represent.

So if I had seven living units from multiple generations, let's say generations [1, 22, 65, 83, 83, 100, 340], they would be displayed as [1, 2, 3, 4, 4, 5, 6].

I want to keep a certain aesthetic in my game, and numbers look tacky, so I'm going to forego using a textual representation for a constant display.  I'm considering having a toggle-able display for the relative age of a unit (represented with my ring system).  Then I would couple that with allowing the user to select a unit and drill down to view its actual generation number in a textual representation.  However, I still want the user to be able to have an idea, with only a quick glance, of the actual difference in generation numbers (not just the rank).  So I'm going to throw in a color system. (To Be Continued).

Visual Representation Of Numbers In Minimal Space (Part 1)

Given an 8 x 8 pixel grid and only one solid color, I challenged myself to come up with intuitive, visual representations for the numbers one through ten while trying to keep at least one axis of symmetry.  These are the results.

        1        2         3        4         5        6         7        8        9        10

1)

2)

3)

4)

5)

6)

7)

8)

This was a difficult challenge.  While these icons might be functional, they aren't necessarily intuitive.  These are my notes on the results.

1) The icons for 1, 6, 9, and 10 break pattern.  There are two visual aids in determining an icon's value here.  The first aid being that a larger amount of positive space correlates to a higher value.  The second aid is a little harder to explain, but the pairs [2,3], [4,5], and [7,8] all have it.  If you were to duplicate the lower valued icon, rotate the duplication 180 degrees around the center, and overlay the duplication over the original icon, then you would get the higher valued icon.  This is not very intuitive and does not work for icons that have both vertical and horizontal symmetry.

2) The icons for 7 and 10 break pattern.  This series is very similar to the first series.  There are two visual aids in determining an icon's value here. The first aid being that a larger amount of positive space correlates to a higher value.  The second aid, once again, is a little harder to explain, but the pairs [1,2], [3,4], [5,6], and [8,9] all have it.  If you were to duplicate the lower valued icon, rotate the duplication 180 degrees around the center, and overlay the duplication over the original icon, then you would get the higher valued icon.  This is not very intuitive and does not work for icons that have both vertical and horizontal symmetry.

3) The icons keep two patterns.  The first pattern being that as value increases, so does the amount of positive space used in the icon.  The second pattern being that odd numbers only have vertical symmetry while even numbers have both vertical and horizontal symmetry.

4) This series is like the third series, but utilizes more positive space.  The icons keep two patterns.  The first pattern being that as value increases, so does the amount of positive space used in the icon.  The second pattern being that odd numbers only have vertical symmetry while even numbers have both vertical and horizontal symmetry.

5) The icons for 9 and 10 break pattern.  There are only visual aids in determining an icon's value here.  The first aid being that a larger amount of positive space correlates to a higher value.  The second aid is used in numbers 1 through 8.  The higher the positive space reaches, the higher the value.  1 is one pixel high, 2 is 2 pixels high, etc.  There were not enough vertical pixels to handle ten rows, so a pattern was embedded into the icon as it filled up.  Once I hit the eight vertical pixel, numbers 9 and 10 were created by filling in parts of the pattern.

6) The icon for 10 is the only icon that breaks pattern.  There are two visual aids in determining an icon's value here.  The first aid being that a larger amount of positive space correlates to a higher value.  The second aid is used in numbers 1 through 9.  The number of "dots" correlates to the value of the icon.  1 has one dot, 2 has two dots, etc.  These patterns all keep vertical symmetry.

7) This series is very similar to the sixth series, but better utilizes the natural movement of the eye.  This utilization of the eyes natural movement could be better implemented, but is slightly sacrificed for keeping diagonal symmetry.  The icon for 10 is the only icon that breaks pattern.  There are two visual aids in determining an icon's value here.  The first aid being that a larger amount of positive space correlates to a higher value.  The second aid is used in numbers 1 through 9.  The number of "dots" correlates to the value of the icon.  1 has one dot, 2 has two dots, etc.

8) This series is very similar to the seventh series, but better utilizes the natural movement of the eye.  This series does not have any symmetry.  The icon for 10 is the only icon that breaks pattern.  There are two visual aids in determining an icon's value here.  The first aid being that a larger amount of positive space correlates to a higher value.  The second aid is used in numbers 1 through 9.  The number of "dots" correlates to the value of the icon.  1 has one dot, 2 has two dots, etc.

While this challenge was an entertaining learning experience, I did have an underlying motive for it.  I wanted to intuitively represent large numbers in a minimal amount of space while still keeping a nice aesthetic.  An 8 x 8 pixel grid is not enough space to do what I wanted--especially because I wanted something more "circular" to fit in with the aesthetics of DATABITS.  What I really learned from this experience is that I need more space to work with!

To solve my problem I devised a ring based system.  Each ring represents a place value.  The rings are counted from the innermost ring to the outermost ring.  So the first ring would be the one with the smallest radius.  The first ring represents one column to the left of the decimal place, the second ring represents two columns to the left of the decimal place, etc.  The number of pieces each ring contains represents the number that would go in the corresponding column.  Here is an example of numbers 1 through 100.

There are multiple benefits to this method.  One benefit is that I have a practical system for numerical representation that will easily fit large numbers into relatively small circular spaces.  Another benefit is that, in comparison to textual representation, I save space on larger numbers.  Due to visibility, the minimum radius of a ring is 12 pixels long and each consecutive ring needs to have its radius increased by 2 pixels.

With my system, the width of the representation for a number in pixels is:

24 + (4 * (number of place value columns - 1))

With standard textual representation, the width of the representation for a number in pixels is:

(number of place value columns * the width of a character)

With large numbers, my system saves a lot of space in comparison to textual representation.

Let's assume that the width of a character in a standard font is 10 pixels wide.  My system would be saving space on any number with four or more place value columns.  So anything in the thousands or up.

The final benefit to my method that I will mention is that numbers can be quickly compared to one another. If there is a difference in radii, the physically larger representation will be representing the larger number.  If the radii are the same, starting with the outermost ring and going towards the innermost ring, a quick look at the pieces of the ring can reveal which number is larger.  Because the pieces are inserted into the bottom center of the ring and push the other pieces around the circumference (it helps to think of them as being balanced across the bottom of the ring), the achieved overall height of the ring pieces correlates to the value of the number they represent.  The higher the pieces reach, the higher the number they represent.

While I'll accept the argument that with too many rings my system might be difficult to read and could potentially lose some practical value, there is one thing that my system will always have above textual representation--and that is pleasingly symmetrical aesthetics.

...Continued Here...