Biogenesis

Fight – Collect – Upgrade

UI Overhauling

Leave a comment

We faced some interesting choices the other day with our UI. Initially, we had planned our game to be primarily for the tablet, but wanted it to run on phones just as well. For most sections of our game, this was no issue, however when it came to UI it became apparent things would not be as simple.

The UI we had originally designed was compact, focusing on making it fit and work well on a smartphone, because we knew if it would work well there it would easily scale up to a tablet. This led to various issues with buttons and UI placement, and it came down to completely scrapping our UI and starting from scratch – we had nothing.

Image

Another issue we had was that because we were working with such a small screen size on the phones, it was very easy to accidentally click our buttons and the player would do things they didn’t want, so we had to add a bunch of confirm menus to try and remedy the situation. The result was not pretty.Image

For our new system we started from the ground up trying to get rid of buttons as much as possible and made sense. On a touchscreen device, buttons are somewhat counter intuitive – we knew we wanted to avoid them wherever possible. The question came down to figuring out controls and giving players the same range of options without mapping everything to obscure gestures that would be difficult to remember. Starting at the menu bar at the top, we moved it to the right side of the screen, made it smaller, and combined it with one of our other menus. In fact, we combined several of our menus and actions to work simultaneously. The less unique actions the player has to do, the less interface is needed.

Image

On the left is an example of how we were able to combine the Mammal’s rock pushing special ability (which used to require a special button press to activate,) with our new movement scheme. Now moving rocks is just a part of player movement. On the right we see how our insects will be able to burrow under a rock now, using the same movement scheme.

Image

This is a basic overview of how our new game screen will look. Almost no buttons (end turn in the upper right being an exception), and a much cleaner feel that will go along with the art style of our game much better anyway. Bringing up menus (from the top and the left) can be done with finger swipes, which is an intuitive action tablet users are already familiar with.

It can be a lot of work, but sometimes there is nothing for it but to start from the ground up and redesign some aspect of your game. Our old UI would have been functional, but players would have quickly gotten tired of how over protective the system was of their mistakes. The infamous “Are you sure you want to quit” prompt comes to mind, and I can say that in my life, I have only been grateful for that message a handful of times. Every other time I’ve wished it never existed. It really comes down to figuring out the potential consequence of the player doing an action they didn’t intend, how likely they are to make that mistake, and how “expensive” the cost would be to prevent them from doing it at all. For us, the cost was too great and our new system will give players a much more fluid play experience.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s