Post news RSS Unique Gameplay Mechanics, and a Clean UI

In this article, we explain the importance of having a clutter free UI, and how Project: Order manages to do this.

Posted by on

One of the biggest challenged developers face is keeping the User Interface(UI) clutter free. An example of this would be Skyrim. Bethesda was able to successfully create an interface that is very functional and intuitive, and still be able to hold a lot of information in a small space. However, some may argue that those menus are difficult to navigate.

As a mobile game developer, this is a very important thing to get right. Many people can see the cluttered buttons and windows and leave the game because it appears to be too complicated to play. Many dungeon crawler style games on the App Store today are just like this. These types of RPG games need to give the player a lot of data to keep the game going. These are things like, health, mana, experience, level, pause, inventory, shops, and more. Then after having all of this information on the display, you still have to find room to put the controls at. In the end you have something very cluttered and difficult to play because you are trying to get all of this data on a few inches of screen space. Of course a lot of the problems can be solved by using a tablet, but not everyone has one, or brings it everywhere with them.

In Project: Order, we also have a lot of data we need to output to the player, as well as receive the input. By unlocking the camera movement, this means we need to have more screen space for yet another control. One of the ways we have been able to eliminate clutter is by our unique swipe controls. We've eliminated the popular spell bar, and replaced it with something much more efficient. In a separate menu, you can assign spells to 4 different slots. Each of these four slots will have a different gesture you make to cast that move. For example, to cast the move in slot one, swipe down. To cast the move in slot two, swipe to the left. You will control the direction of you attacks the same way you move and rotate the player, with the joystick.

In order for the player to be able to rotate the camera around, without accidentally attacking, we added the attack button. After locating the target you want to use the virtual joystick to move the player near the target. Then position the camera in the best possible position (as it normally would be), then press the attack button. The camera will be locked and you can now use gestures to strategically execute your attacks. After killing the target, you will automatically be taken out of attack mode and be put into the normal mode, allowing free camera movements.

A popular rule among UI designers is to try to keep people no more than 2 clicks away from the information they are trying to get. At the top right corner of the screen we have 4 buttons; Character, which indicated coins, inventory, and equipped items, Spells, including unlocked and locked spells, and the points available to spend. Quests, allowing you to view the quests you currently have and information about them, and Pause, which pauses the game and lets you change various settings, or quit the game.

In the top left of the screen we have the players level, experience earned, health, and more. We've designed a very unique way of displaying this information which we will reveal down the road, to IndieDB exclusively of course.

When you combine these great ideas, you get the UI of Project: Order. You'll have a large about of room to see the detailed environment, which is very important to us.

As promised, here is another screenshot:



Awesome! I like the ui!

Reply Good karma Bad karma+2 votes
SketchSoftworks Author

Thank you, it means a lot to us. I’m glad you like it; sorry for the late respond.

Reply Good karma+1 vote
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.