informa
/
6 MIN READ
Featured Blog

Practical Tutorial and UI Lessons We Learned From Our Game

We launched our game and got terrible reviews. This post is about how some minor yet priceless UI fixed dramatically changed the picture.

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:

  1. We give you a sentence in English. You have to translate it into French.
  2. To do that, you can click on a word and see it’s translation
  3. After you know what to say you have to click an icon to record, say the sentence out loud, and click it again to stop.
  4. If you got it right, you move on. If not, you have to check and try again.

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:

  1. We replaced the mic icon with an icon that had “RECORD” written on it (1), we made it bigger and moved it next to the text it referred to.
  2. We have a clear call to action: “Click record and say it in French”. Bolded, in italics, and clearly stated.
  3. The helping hint itself (3) appeares only after 8 seconds, after the user had a chance to look around and understand where he was.

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:

  1. The most important thing to gather from this, and probably the only thing we did right – Beta test. When we first launched we had an almost 90% bounce rate. I hate to think what would have happened if we were marketing it to thousands of players. 200 are more than enough to get initial stats.
  2. The illustration I gave were final results, but by no means were they easy to reach. Every change we made was the result of a team think-tank meeting, making a change and testing it with at least 6-7 people.
  3. Occam was right – the best solution is usually the most simple. We tried pop-ups, tutorial videos, narration.

Latest Jobs

Cryptic Studios

Remote
1.19.23
Senior Producer

Night School Studio

Los Angeles, CA, USA
1.09.23
Level Designer / Scripter, Games Studio

Fast Travel Games

Hybrid (Stockholm, Sweden)
1.09.23
Social Media / Community Manager
More Jobs   

CONNECT WITH US

Explore the
Subscribe to
Follow us

Game Developer Job Board

Game Developer Newsletter

@gamedevdotcom

Explore the

Game Developer Job Board

Browse open positions across the game industry or recruit new talent for your studio

Browse
Subscribe to

Game Developer Newsletter

Get daily Game Developer top stories every morning straight into your inbox

Subscribe
Follow us

@gamedevdotcom

Follow us @gamedevdotcom to stay up-to-date with the latest news & insider information about events & more