Android/ iOS RPG Game UI

1. Android/iOS RPG Game UI CS 352, W12 Eric Happe, Daniel Sills, Daniel Thornton, Marcos Zavala, Ben Zoon

2. Project Overview The purpose of this project is to design a user interface (UI) for a mobile game applicationthat runs on various touch screen Android/iOS devices. The application in question is a Roleplaying-genre game (RPG) where the player moves a character in the world and performing turn-based events.

3. What's the problem? • There are thousands of games in the market that use Android/iOS touch screen capabilities for users to control the game. • Most have poorly developed UIs • Created with an attempt to create a control structure similar to gamepads used for console gaming. • There has been a lack of consideration of how to effectively design a touch control system that is engaging and satisfying for the players of these games Image Source: http://www.androidpit.com/en/android/blog?tag=Malware

4. How would this help Users? • By creating a usable UI, android and iOS market shoppers would have a larger variety of options as to which games to download. • The user would also have a more pleasing experience playing the game instead of experiencing frustration and anger due to the poor usability of the interface. Image Source: http://www.mrthaibox123.com/?p=1060

5. Target Users The target users for this project are people (gamers, students bored in class, etc.) who find it interesting to play fantasy RPG/action games that use Android/iOS touch screen capabilities for users to control the game and meet the following criteria. • Know how to use a general Android/iOS application. • Own and android phone or some way to run Android/iOS applications. • Have access to the network to download the game. • Do not have a disability that prevents them from performing common Android/iOS tasks (reading text and graphics, performing multi-touch gestures, etc.) • Can read English

6. User Input • Interviewed two users • Both users are “typical” college students • Both users own a smartphone device • Both users play RPG games • Both users prefer to play games in short sessions rather than long ones • User #1 does not like complicated interfaces • User #2 hates touch commands that are close to the physical device buttons • User #2 prefers simple character interactions • In conclusion: Both users prefer simple interfaces with straightforward commands

7. UI Evaluation: Planning • We want to make sure our users know how to equip weapons, use the “wheels”, and save the game. • We also want the user to remember what items, weapons, and spells are equipped. • Our UI elements must be away from the device buttons to avoid accidentally closing the application. • This also includes not cluttering the UI • Touch events and actions should be simple and intuitive to the user.

8. UI Evaluation: Results Using CogTool, we tested our users with the prototype of our UI: • Our users were able to find the main menu button and select it • Our users were able to find where items and weapons can be equipped • However, both users went to the Items menu first to equip weapons • The wheel menus, though confusing at a glance, were understood of their use • Because the menu buttons where highlighted, our users knew which menu they were in • Our users intuitively knew how to fight monsters and understood touch screen commands • Because our battle menu is different, our users criticized that the ‘menu’ button was misleading and should be called ‘battle menu’

9. Arranged Buttons in a way that would allow for better playability of the user. • Source: http://campuslife.asus.com • Bad designs that helped determine what would be the best way to arrange buttons.

10. Button Arrangement • Source: http://www.techwench.com/

11. Arranged Buttons on the top and mainly to the left side of the screen.

12. Button Highlights only after User clicks on it • Changed the way in which the user was given feedback from the buttons (menus) • Originally when a user would enter a menu there would be buttons that were auto highlighted. • confusion for user • Made user believe his options were restricted to highlighted buttons. • Found user was not being given the appropriate feedback trough user interview and evaluating the interface using Nielson's heuristics. • Violating the principle of feedback • Justify the new design of our menus with the principle of feedback

13. Easy way to undo/go back • Menus within the game have a easy way to . • Exit Button in every submenu • User allowed to go back if user decides that he went to the wrong menu. • Allows for easy exploring of the menu system • User does not get trapped on a menu where the only way to get out is to exit the entire game • Justify this design by Heuristic Evaluation and user interview observations • User control and freedom:the system supports a undo/redo option • Users found it simple to navigate trough the menus with exit and back buttons

14. Menu Consistency • Menus have consistent appearance throughout • Internal Consistency • Buttons all round and look more clickable • Chunking utilized to group like options • Main menu button removed during battle, replaced with specialized mini-wheel • Prevent users from doing some things during battle, such as saving

15. Colors / Background • Menu background was changed to a semi-transparent view of the game • Selected list items are now highlighted clearly

16. Selection Feedback • New large icon indicates the option the user has selected • Reduce previous confusion about this

17. System provides concepts from RPG games that are familiar to the user • Wanted to emphasize recognition vs. recall. • Better for the user to spend more time playing the game than spending time learning how to player. • If user can understand how to play easily then it is more likely that user will continue playing the game. • Determined this using Heuristics evaluation focusing on Match between system and the real world

19. Conclusion

20. Questions?