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:
With standard textual representation, the width of the representation for a number in pixels is:
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 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.
No comments:
Post a Comment