Motion Math Blog

Playing with Prototypes

 
Prototyping is one of the most important stages in the development of Motion Math’s games – the process to get our ideas from paper to something interactive and playable that we can test with children.

We recently ported our game Match to the web. Prior to this release, Match was only available on iPads and had very specific touch controls. In fact, the main interaction was to tap multiple tiles at the same time to “match” them together – if the tiles have equal value, they disappear. Our design challenge was clear – how would we transport the fun and ease of touching tiles on a screen to an interface that does not support touch?

We went through several stages of prototyping. To begin with, we built a basic version of the game screen that showed random matching tiles. We then started with a simple interaction – what if you just clicked each matching tile on the screen, then hit spacebar to check if those tiles matched?
Match Visual 1

This felt pretty good! Then we tried limiting matching tiles to pairs – every time you clicked two tiles, we would automatically check to see if the tiles matched, no need for spacebar.
Match Visual 2

After creating those prototypes, we started brainstorming other, wilder ideas. What if keyboard keys were assigned to each tile and you held them down to select matches?
Match Visual 3

What if you used the mouse to hover over a tile for a second to select it?
Match Visual 4

What if you simply mashed keys in the section of the keyboard that you thought would match the tiles? Or used the arrow keys on the keyboard to highlight different tiles?
Match Visual 5

Very quickly, we had eight control ideas for our first playtest with the Motion Math team. We spent time playing with each of the controls while writing notes and comments, and then we regrouped to talk about them. The clear winner was automatically submitting pairs of matching tiles. However, there was a problem; while it felt the most intuitive, we didn’t like how it limited our math problems to only two matches. We wanted to be able to give kids the challenge of finding 3 or 4 matching tiles at once. We threw around more ideas to modify this control scheme. We could hold down the shift key in order to select a third matching answer, or select multiple tiles and double click to submit. We prototyped these in a second round, but none of them felt quite right. However, doing this second round led us to our Eureka moment.

As we were playing with the new prototypes, we noticed a bug where you could sneak in a third matching tile if you were fast enough. It was so instinctive that we decided to formalize the behavior into a new prototype. If you found a third matching tile, you could chain it to the end of the matching pair, and you would have another half second to find a fourth matching tile, and so on. This allowed us to keep the intuitive feel of the autosubmit control, but added an element of fun to trying to chain together lots of matching tiles. As a bonus, we added more sparkles and effects as your matching chain got longer.

All the initial prototyping work was worth it – when we took Match to a classroom, we didn’t have a single student asking us how to play. Everyone loved the controls, they had a blast, and when they discovered that they could chain together lots of answers, the excitement in the room was clear (mostly because there was a lot of shrieking).

It was so important to spend the initial time prototyping all our ideas. While our final control scheme ended up being close to where we started, all the extra work sparked off more ideas, and gave us the certainty that we were moving forward with the right controls.

The web version of Match is now available at play.motionmathgames.com with a dozen representations of number and hundreds of levels about visual number recognition, visual addition, visual multiplication, addition, subtraction, division, and multiplication. Check it out!

Leave a Reply