The making of a kid's app: Counting Box Pro

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

• [Roy Trumbull]

  Something worth considering is an abacus. No batteries. No wifi. No monthly charges. Kid’s get those worthless sliding bead frames; why not something truly useful? Back when simple 4 banger calculators were big bucks I learned how to use an abacus. Any kid past first grade can learn how to use one. Develop powerful number sense. Calculators are garbage in gospel out. 
  I’ve made counting boxes and even wheels of fortune. Fun to look at but that’s it.

• [sincarne]

  Love stories like this. Nice job, Tom!

• [bardfinn]

  This is a valuable tool for my three-year old. He’s just learning numbers and letter shapes.

• [penguinchris]

  I like the story, tracing the inspiration to final product and the key point – which is involving the kid in the development. It seems like such a boring app for grown-ups, but this really shows that sometimes you need to see things from a different perspective. I do think the wood box looks really neat, too, though as cynical Roy Trumbull notes it’s fun to look at but that’s it… unless you’re a kid, of course, which is the whole point!

  That said I’m disappointed in the quality of the graphics, despite all of the care that he obviously took (according to his story). I really don’t like when apps try to do this style of design – there’s a reason why people say not to have software emulate real objects, mainly because it will generally look like crap unless you’re an excellent designer and artist (and often, even then). For what it is it’s fine, of course – I am just picky about design (and my girlfriend is a graphic designer which makes me even more picky).

  Finally, the GameSalad software seems interesting – as a kid I used a similar piece of software back in the 90′s called Klik-N-Play (or something like that). Not surprised there’s an updated version of the same concept, but I hadn’t heard of it.

• [andsmi]

  This is cool. I had a similar experience with my daughter building a toy cash register app. She helped design it and it was all about sound and clicks and graphics. Not so cg what it did but what enabled her imagination. After the initial release we added money and had artwork done for different looks ofthe register. She always does the QA work and talks design with me.
  http://itunes.apple.com/us/app/cash-register/id348577367?mt=8

• [robuluz]

  I built a MAME cabinet and now I can’t get on it ever because my 4yo is too busy working on his Dangar or Raiden high score. We have to prise him off it for meals. Does that count? No I didn’t think so.

• [jhhl]

  Happy mutant counting app? You just said the secret word: 
   http://www.jhhl.net/iPhone/Enumero/

• [tylerkaraszewski]

  Why not just build the actual box? If you don’t know that much about electronics, stick an arduino in it. Yu can write the code in C and there are a million tutorials for running the display and such.

• [retepslluerb]

  Hmm… I’d try some modifications, though.  There’s lots of stuff on the display that isn’t needed most of the time. 

  One could do without the zero button by implementing swipe.

  Also, there’s no real need to have separate controls for the increment. Or at list separate control which are visible all of the time. Selecting it could change the round buttons into triangles. 

  Settings and info could be more subtle.  Either the app is aping a physical object or it isn’t. If it is supposed to  be physical, the 0 would stay, of course, but it’d turn the settings icon into a switch or something like that. And what’s the (i) for?  I can’t image that this app needs an information page. 

  It would  also make sense to co-opt the physical hardware buttons to be used for incrementation, but that’s not allowed by Apple. I usually defend this decision, but acknowledge that in this case it might have been useful to break that rule.

  Perhaps shaking the device could function as a plus-button. 

• [Noctilucent Studios]

  I am going to try this.

• [Mary Beth Wilkes]

  Fantastic app and a fun article!  Congratulations Tom!

• [neeljohnson]

  This app definitely look quite interesting and getting appreciation from kids is always a positive sign of your work as they are true with their praises.