Practical Tutorial and UI Lessons We Learned From Our Game

A couple of months ago we Beta tested our language learning adventure game, “Immersia’s intro to French”. Here’s the improvement we had in the key engagement stats form the first month after launching our game Beta to the second: % of people who finished level 1 (about 20 minutes of play), level 2 (40 minutes) and % of people who finished the game (just over 1 hour of play)

Month1:

These stats actually lie. During the first months, many of our friends played the game with high engagement, so the real numbers were actually even worse (this is alo why initial traffic and registration rates was higher during the first month). From what we gathered, practically none of the “outside players” got anywhere near finishing the game.

And this is what happened:

We prepared for that moment for 4 months. A small indie team working night and day towards this one goal. we counted back with your finger on the mouse – 4!... 3!... 2!... 1!... Launch! Everybody were drinking up and high-fiving each other. And then the E-mails started arriving. “I don’t understand what to do!”, “Oh, I didn’t see that button there”, “It looks really nice, but I stopped playing after 3 minutes”. We’re not talking about some technical glitch. People didn’t seem to understand what we were doing at all! But it’s so simple… what are they, stupid?

Well, of course not. They just haven’t been looking at it for the past few months like you have. We knew we had a great game, but people just didn’t seem to get it. We tested everything on every possible device we could get our hands on. We checked for bugs and glitches that prevented people from playing, and didn’t find any. And here was the first thing we learned:

Lesson 1: Talk to your players (and how to talk to them)         

We started asking people around us what they thought, but they didn’t really know what to say. But it was only when we gave the game to complete strangers that we started getting results. And here’s a tip. Don’t show them what to do – you want to see how they’ll manage by themselves. But also – don’t sit next to them and stare at them – that would make them to nervous, and no one can play a game while being “tested”. The key is to sit next to them and look as if you’re dealing with something else, while in reality that’s exactly what you’re doing – testing to see how they manage by themselves. It was only when we started doing that that we started getting real and beneficial feedback.

Lesson 2: Your’re UI is not the place for clever puns. Keep things simple.

The first thing players had a problem with is the wording of our tutorial. Worrying the it will be too boring, we inserted what we thought will be funny word plays, but those ended up making what we really wanted to do. Here are a few example.

Because our game is browser based andworks with speech recognition, we needed the user to authorize the browser to access mic. We wanted it to be fun and breezy, so this is how it looked initially:

That was a bad idea. Our wording was too long and complicated. We knew what the page was for, but that didn’t. So we changed it, and kept only what was essential. Here’s how it looked after:

Simpler, clearer, and much less overwhelming. And that’s just one example. We did the same in 3-4 different places. The impact was amazing.  Another, shorter lesson was this: prefer lower case to upper case. Just look at this:

Vs. this:

Letters just stand out more, and you don’t have to make an effort to read what it says.

These first two changes were significant, but they were nothing compared with this third one:

            Lesson 3: Exlain using your UI, NOT by using words

Here’s where thing get a little tricky, but bear with me.

Immersia’s intro to French is a game for learning French. This is how it works:

And here is how it looked:

There are a few things you might have noticed.

One, the mic icon (3), which is a main feature, is small and also pretty far away from the text it refers to (1), and its color doesn’t stick out.

Second, there nothing to imply you have to click it, say the sentence, and click again. Because the action required wasn’t clear, we added an instruction screen:

We were pretty sure we made it as clear as day: step 1, step 2 – go!

Well it wasn’t. everything was upside down, the arrows were confusing and anyway – it was just too much text! So we tested a few options, and this was what we came up with:

The changes look minimal- but they made all the difference:

We dropped the “help screen” with its “words” and “arrows”, and tested it again. Once more we bothered people around us (by now we were talking to friends of friends of friends, and also random strangers. The reaction was almost anticlimactic. They didn’t go “WOW” at the new design. They didn’t cheer or looked at us with awe. They simply Understood what to do, every step of the way. We launched the new version and waited for the numbers to come and when they did, we couldn’t believe it. Finally, there world understood.

            Final conclusions: