Witch Twitch: UI without Text
We have recently released a cute colour matching game, Witch Twitch, on iOS & Android
Even though it's much smaller in scale comparing to our previous game, Rule with an Iron Fish, it was an important and somewhat experimental one for me as an UI/UX person.
Why? Because we purposely avoided any usage of text. (…well, aside from score digits and the title, obviously!) RWAIF was full of text and this time around, we wanted to go minimalistic. The benefit of having no text is that we don’t have to worry about localization, we don’t have to search for a font and deal with font file(s).
Here are the challenges and our approach in different area:
[HUD]
We needed to track the score and the timer. And my goal was to make them integrated into the game environment as much as possible. In other word, I wanted to avoid the typical “HUD look” where you see everything lined up at the top row with straight-on angle. Thankfully, my talented teammate already had the beautiful art ready for the gameplay area which was laid out in isometric view. So it came quite natural to me that we should also keep the HUD elements following that angle.
This was my earlier mockup:
As you can see, the timer (bottom-left), the score (top-right) and the play button (bottom-right) are all aligned in isometric angle. It was kind of neat, very compact looking, and not similar to the usual HUD you see in most of the games. We also were happy with hand-drawn style UI.
So that was implemented into the game. Now, after play-testing, we realized nobody really paid attention to the timer and the score. People were very much focused on where the monster and the wheel are.
This is our solution:
For the score, we have decided to put it to the top-left part of the screen. After all, that’s the more obvious placement. But we kept the angle. And we also added VFX every time you score, so you would look at the scoreboard - When you successfully match the colour, the monster banishes “poof!", and its soul (icon) will travel from there to the scoreboard which then will shake and count up and glow. We had to tweak the timing of the whole sequence a bit, but thanks to our talented programmer, it turned out to look and feel great.
Now, the timer. I first thought about integrating it above where the monster would appear. Maybe curved along the doorway where the monster will enter. But it didn’t feel right. So instead of having it as a visible timer bar, we made the monster to approach the wheel/cauldron little-by-little and made that act as a timer. (Thanks to the feedback from our friend at the indie dev meet up!) That was a good call - we now have eliminated another visible element from the screen, and the gameplay feels good.
[Tutorial]
There was not much to explain as a tutorial, luckily, other than telling the user to spin the wheel. So we did. :) A hand icon at the wheel to show at the very first time.
[Blurbs]
To add flavours, we decided to show some blurbs and barks by the witch and the monster. Without text, of course! And they also are angled. It was actually fun to come up with some gibberish, some with emotion, some associated with the action, all by icons and shapes :)
Here is the list of blurbs
All in all, I think we had a good set of challenges to tackle and I’m glad it worked out. Something to reference/utilize for our next title for sure.
