This is part 2 in a series of blog entries. If you haven’t read part one, you should do so, now: Post Mortem: Drag – Part 1
What really matters when designing a mobile game that makes you think
The three most important attributes you want to make sure your app has up its sleeve are effectiveness, efficiency and satisfaction. When spending their time on our app, we want people to have their expectations fulfilled and even exceeded.
Any game can easily be stuffed with funny graphics, quirky design and cute animations, but is that sort of distraction what people will expect when they are about to start a game in which they are supposed to face interesting thinking challenges?
It was pretty clear from the start that what our game really needs is a clean design that doesn’t tend to distract, efficient traversing between menus and just that little bit of glam to enhance the experience of achieving something in the game.
Shape it up!
A first step was a quick mockup of the in-game screen which merely had one task: give a first impression on what information must be communicated to the player and what all the components are which need to be available in the in-game screen.
The size of phone screens still follow a trend of getting bigger, yet the space available feels very limited when creating a game – the more important it is to use it effectively. We started out with clean shaped boxes which even in the first mockup felt too usual.
A 45 degree diagonal cut on the upper left and bottom right corner already felt a lot more dynamic. This step also led to the idea of making the game follow the directions those cut corners implied – a diagonal way of switching from one screen to another.
We really picked up on this idea of „chaining“ up the menus with each other – with this in mind, when you next start the app, maybe pay attention to how witty some screens connect through this system!
The right looks
What do we want the game to look like? What colors to use? Those questions needed to be asked and answered in the next step. While I first picked a violet color for the outlines and a green color for the background – the signature colors that should later be used in the app’s icon – we soon decided to pass the control of colors to the players – they know best which colors they like the most.
But in order to guarantee a crisp design without much distraction going on, we limited the visual colors to two. The outlines received a plain color while the background got a very subtle gradient in whatever color the players go with. For a pretty long time we had the app icon show the invert command in black with a grayscale gradient in the background. While we thought this would be the best idea as we’re not suggesting the players to pick a certain set of colors for the game. We soon came across the thought that it would also confuse them that the setting in which the app icon appears wouldn’t be possible to pick in the game itself, so back to purple and green we went!
Getting less and more abstract
When it comes to the game screen, you want to make sure the player has as little to read as possible – after all they downloaded a game, not an e-book. Also, text tends to distract, the less you need to display, the better. Fortunately the most important functions in-game have developed a strong symbolism throughout the years – making use of what we pick up when growing up.
Unsurprisingly a button showing a symbol in the shape of a house is therefore associated with taking you to the home menu if tapped. When we came up with all the symbols we needed, the next job was to break them down into their fundamental shapes – their very essence which still draws a clear line concerning what they are.
But there’s also a danger in getting too abstract. For example a house for the “return to main menu” button could be a square with a triangle on top, still you could also interpret that sort of shape as an up pointing arrow – so always make sure you’re not getting to vague with your designs unless confusion is intended.
When using TextMesh, every character creates a unique sprite to be rendered on the canvas, which means that at least four vertices are created per character – that is a whole lot of vertices for only a couple of words. Not the most performant thing to deal with, but fortunately TextMeshPro put an end to this. This tool creates fonts from a texture as some sort of “enhanced marterial” – implying a tilemap without actually being one.
This much more performant approach uses a shader and a generated texture which are referenced with one single texture, avoiding the need to generate run-time and guaranteeing perfect resolution. This way, many effects can be applied thanks to the shaders, also rich text was possible to be phrased in, granting the use of html tags.
Time for another image, right? But this part was mainly about text and the technique behind it,not the best sbject to support with an image…. so how about we have a look at our first finalized App Icon in comparison to the one we decided to go with for now?
Lost in translation?
Getting to the texts: We wanted to offer two languages to begin with: English and German.
As soon as more than one language is in use, trying to put the needed information for both languages in an almost equal count of characters turns out as one of the biggest challenges. But not only that: People are usually lazy when it comes to reading while they intend to play a mobile game – that is pretty legitimate, after all they didn’t download an e-book. So we also had to make sure that we use as few words as possible to deliver everything that needs to be said – twice since we’re using two languages.
Especially the in-game mini-tutorials had to use very few words as they were not given a lot of space on the screen. While some pieces of information felt very natural when put in few words, others were immeasurable pain to come up with – in the end I think we did a pretty good job, but hey – if your text-bulb shines brighter than ours, don’t hesitate to hit us up with your suggestions. 😉
Famous last words…?
You wouldn’t guess it: We paused the development of another app in order to realize this game because it would mean much less work than the app with which we began our journey as game developers – still, studying, working and other private projects gave us a pretty hard time to get things done, but finally we made it.
And don’t you dare to think the other app is abandoned – we picked up from where we left and we will make sure to have you excited in 2018, rely on that! We hope you enjoyed us summing up our work, our thoughts, the process, the struggles and so on!