Interface design for Flip

If I have to choose the task that takes the most time for Flip, it’s without doubts the user interface / user experience. I go around everywhere with a tablet with the game loaded, and on every occasion I have, I ask people to try it and takes notes. And I take *Lots* of notes.

I’ve probably already tested it with 30 people, and there is not a single time where I do not notice some improvement to make. And it’s not only about changing fonts or colors, it’s about people understanding what is going on without me having to explain.

Piece rotation is the main (and only!) game mechanic, and the single most important thing to get right. And it is so hard… 🙂 It has been an issue since the beginning, and I’ve changed already 3 times how it’s handled. There are lots of tiny details, like the difference you feel when you grab it from top or bottom, or if you try to rotate or move directly to the destination, or how guiding lines or arrows might help.

The second most important thing is navigation through the interface. I notice that people ignore completely some options (like changing colors or asking for hints), and mistake others. And as I tell them when I ask for their time for testing: 99% of the times, if they don’t understand something it’s my fault, not theirs. A mistake many game developers make is to think that the players are stupid and if they don’t understand something is their fault. I believe that it is important to humble down and, when somebody does not understand something, think that it is you not communicating it correctly, and not the player being stupid. It’s not easy, and it requires much more work, but it pays.

For making things understandable, I prefer to opt for the mantra “show, don’t tell”. Unfortunately sometimes it’s quite hard to do it. First, because this is an abstract game, with a mechanic that I have not seen anywhere else, and I need to explain the rules and objectives. And second, because some ways to “show” things (mainly generating visual cues like moving stuff around, animating, changing colors, hues, etc.) require such amount of work that it becomes very hard to implement them, and I need to prioritize. Do I fix that bug with the broken rotation, or change the move counter to use an animation instead of a number? For example, a feature I have wanted to implement for a long time is making the solution animate towards the pieces, as to suggest that the pieces come from there, and there they must return. But I’ve seen people click on a piece and try to drag it to the solution, so making this feature understandable and not more confusing will be very hard. I’m not sure I have not the resources for that, so I opt for adding a sentence in the tutorial.


Here is the Unity Editor screen for the Game Scene. You can see almost all interface elements, except for the pieces themselves and the solution, as they are generated dynamically. It is possible to see that most interface elements are at the borders, especially the right one. Undo is on the left, based on the convention that right is forward and left is back. For the same reason, on the right are buttons that move you forward. This “navigation buttons” are also available at all times from the menu below, which is by default closed. Music and Sound are always shown and at a fairly standard location. You can also change these options from an Options menu, but I think it is important to be able to switch them off from within the game.

Most buttons appear only when required. Undo will only show after making the first move, and will fade away when there are no moves to undo. The Next Level, Puzzle, etc. appear only when a level is finished, and not all at the same time. For example, it makes no sense to show a “Next Puzzle” if you solved all the puzzles in the level, or a “Try Again” if you have just solved the level.

Their design is sober and monochrome. The human eye perceives better colors in the center of the view, and in the borders luminescence changes. This is also the reason for them to appear afterwards and not be always there, as the player will perceive a change in the borders and so notice them. But of course, the main reason is to avoid interface clutter.


Here you can see how the game looks when you just start a level. The text in the middle shows only for a second or two and then fades. It provides a quick objective for the puzzle type. As other puzzle types look different, even if the game mechanic remains the same, it is not so clear what the objective is, so this reminder will serve as a guide. As it fades away, it does not occupy any screen space. And it is small and to the point (remember that the game mechanic is seen in the tutorial level), so you already know what a “flip” is, and that what you must match is the solution on top. After the text disappears, the interface remains quite clean, and the only thing you need to see is the pieces.


After grabbing one, two animated guides appear, showing the possible directions you could move the piece, and the piece itself acquires a highlight.


And when you start the rotation, only the corresponding guide remains, a “drop point” indicator appears, and everything slowly fades the nearer you get to that point. All this small additions where the result of usability testing.

I’ve done testing in all kind of environments and with all kinds of people (graphic designers, accountants, secretaries, programmers, bar owners and patrons, carpenters, engineers, artists, and the list could continue). And I’ve seen how different people approach the interface in different ways, sometimes even completely opposite. So I know it is impossible to please everyone and make something intuitive at first glance, but I’m working hard to make something easy to understand. The good thing is that very few people had problems moving around after playing for a minute. In today games landscape, and specially in mobile, where there are tons of free options to play and discard, any difficulty will send players back and make them just ignore the game. That is a luxury I cannot afford.

There are tons of details I could discuss, and lots of things yet to improve. I hope to be able to make them before cash runs out. 🙂