Friday, July 11, 2014

USER INTERFACE FOR MOBILE

When I was given the task to design the GUI for my first game, I didn't really have much resource to look upon. And after lot of trials and errors we did come up with something decent. Same process went with all the other games. You try and then you fix. However, few things became more obvious and with every new project we had a more clear vision for the GUI. Here are few of the things that might make your GUI better. 

Micro UI vs Macro UI
Most of our games are mobile, and since we did all our GUI without any prior experience in GUI, we decided to hire a guy who had experience in UI. The problem with the new artist was that he was from PC background. His GUI looked great on PC but when you see it on mobile it looked too clustered. Too many things happening all over the place. We couldn't blame him completely, our game had tones of features. However, his approach to the problem was very PC. PC handles micro tasks very well. Games like World of Warcraft and League of Legends are best examples of micro tasks. On the other hand the most micro thing you could do, on a mobile, was dial numbers. Ofcourse, this was before smart phones came out. With the introduction of smart phones, people tend to think that mobiles can handle micro tasks as well. It can but not with ease. Mobiles are still macro tasking devices. Which means you should always have interface that does macro tasks. Macro interface will bigger and fewer buttons. The interface shouldn't let you handle micro tasks in form of thousands of buttons. It should be organized into multi-tasking buttons, eg, start button changes to next and next button changes to exit and so on. 

Feature supporting form
I have always been a supporter of form with purpose( feature over form). GUI is the medium to communicate between hardware/software and the user. So ofcourse, feature holds the most importance over design. However, since you have a new variable of micro vs macro, once the features are finalized, the design takes over. Based on the macro design, sometimes it's important to tweak the functionality. That does not mean you have to competely change/remove the feature, it just means to fit the feature based on the design. Maybe automate few system, or reduce few steps. Best example is an iPhone over old smart phones with stylus and keypad. iPhone had all the features, even more than any other old smart phone, but it understood the macro tasking concept. One button to rule them all. 

Flow of nature
GUI is nothing but natural flow. I feel like having a redbull. If I have to go out to get myself a redbull, I'll probably skip it. However, if I'm going home and I saw redbull in the store on my way, I'll probably buy it. The concept is simple. Every pop up and every button is a result of not just the need but should be in my way. I know I have to upgrade my weapon, but I will only upgrade it before the match. Maybe that's when I'll use premium currency to get the upgrade done sooner. 

I need it now and here
Players don't want to go inside a menu with thousands of click just to ask for some item from a friend. Everything that a player would need should be in front of him. The GUI should be smart enough to provide the player with everything s/he needs then. Most iAPs happen because it showed up when it was needed. 
This point should not be confused with the point above. This point is addressing the immediate need, if it's not present there then, it probably won't change the flow of the game. Like save me, or ask a friend or use power ups. Being available then can increase the frequency of the usage. The point above is for things that you'll do it eventually, however you'll wait for it till the very last if it's not in the path. 

Consistency 
This one is universal. Every button, every text, every color have to be consistent. If the player has to keep thinking what a certain button does all the time, you just lost his game experience. Best GUI are those that are almost invisible. If i don't have to think about my navigation throughout the game, that's the best GUI ever. 

No comments:

Post a Comment