Last week, Tom Klimchak emailed me with a link to a counting box app he made for his son. He said he'd been inspired by Cory's post about Nathan's beautiful wooden cased Kid's Counting Box (above), so I asked Tom to write about how he developed the app and the things he learned while developing it. Here's his excellent essay — Mark
Last summer I read about Nathan's Kid's Counting Box (above) on Boing Boing and MAKE at about the same time I was teaching myself how to create iPhone apps. I'd bought myself a Mac for Father's Day a few months before and I had a bunch of ideas for little apps and was trying to decide which to start when I read about the electronic counting box.
There was something completely captivating about a beautifully crafted wooden box that uses a bright electronic display for such a simple and pure purpose as adding or subtracting one number to another. That being said, I think I would have ignored the Counting Box article if not for the impressive looking craftsmanship. It would never have caught my attention if it was just an LED display in a plastic project box, but the wood surface with the rounded joints just captured my imagination.I was one of those kids that loved to press the equal sign on the calculator over and over, watching the total slowly grow larger. My own 4-year-old son is the same way. As much as I loved the idea of making a Counting Box of my own I knew that my electronic and woodshop skills really weren't up to par for such an ambitious project.
I showed the box to my son and he said it looked "cool" and that put the gears in motion. I pieced together a simple little app in about 10 minutes that would add 1 or subtract 1 from a total and handed the iPhone to my son. He immediately grasped the concept and began hitting the green button like crazy, being fascinated whenever the leading digit changed. He was still playing and asking questions about the numbers 20 minutes later, so I figured it was something worth pursuing.
It was a neat little app, but it didn't have the same feel of wonder as a real wood Counting Box that you can hold in your hand. So I started working on the graphics. I originally tried a brushed steel background, but it looked like a weird alien calculator. I went back to the wood box theme.
Software is obviously different from tangible objects. There are limitations and advantages to each. I found that that a little turn dial doesn't work very well on a flat glass iPhone screen. Buttons work, dials don't.
Instead, I created a second window that shows the increment/decrement number and control that with arrow buttons. This also allows me to go beyond adding up single digits. Yes, it goes to 11. In fact, you can change the increment amount up to 100! If my son wants to add or subtract by 20 each time then he can. I also added a Zero button and have an option to allow negative numbers. Because it was all software it proved to be much easier (or so I imagine) than wiring up different circuits for minor function changes. When I saw my son getting bored pressing the increment buttons up to 100 I created a keystroke repeat which would kick in if he held the button down for several seconds.
I also noticed that if the red and green buttons didn't click and depress like real arcade machine buttons it seemed to throw off the experience. There was a missing tactile experience. But it isn't just all graphics. Acoustical design is just as important as seeing the buttons depress and spring back. These are things we take for granted, but every click and blip had to be designed and created by someone. I actually spent an alarming amount of time just walking around my house pressing in various buttons on appliances and paying attention to how they sounded. Now all the buttons depress and click at various and appropriate sound levels.
My wife didn't like the original wood background I'd mocked up, so I created a few different ones for her to choose from. They all looked pretty decent, so I decided to add a "design" component to the app where you could choose your background, number color and screen color of your own personal Counting Box. I tried to make all the colors and sounds as realistic as possible. I know there's a whole school of thought that says you should never create software to emulate real world devices but it seemed to add so much more warmth and interest and even familiarity to the app in the end.
I actually have some programming and scripting experience, but my last real computer science class was learning how to write Pascal on a VAX machine. Instead of trying to teach myself Objective C for the next 30 years I instead downloaded the free version of GameSalad. It doesn't require you to know a lick of code and it's great for projects like this. It probably only took me about 8 – 10 hours to create the things from start to finish (spread over 3 months!) with most of the work being play testing and graphic design.
It was an incredibly fun experience and one which our entire family shared. I'm probably going to create an iPad version soon, though I'm a little worried about the spacing of the buttons being too big for a child's hands. Software is great, but it can't change the physical size of the hardware it's run on. Maybe the Kindle Fire's small screen would lend itself to this a little better. If anyone has any other suggestions, I'd love to hear them. There's a fine line between overloading an app with features and making it easy enough for someone to use.
Counting Box Pro is 99 cents in the iTunes store
