android/ ios rpg game ui
DESCRIPTION
Android/ iOS RPG Game UI. CS 352, W12 Eric Happe , Daniel Sills, Daniel Thornton, Marcos Zavala, Ben Zoon. Project Overview. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/1.jpg)
CS 352, W12
Eric Happe, Daniel Sills, Daniel Thornton, Marcos Zavala, Ben Zoon
ANDROID/IOS RPG GAME UI
![Page 2: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/2.jpg)
PROJECT OVERVIEWThe purpose of this project is to design a user interface (UI) for a mobile game application that 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.
![Page 3: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/3.jpg)
• 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
What's the problem?
Image Source: http://www.androidpit.com/en/android/blog?tag=Malware
![Page 4: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/4.jpg)
• 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.
How would this help Users?
Image Source: http://www.mrthaibox123.com/?p=1060
![Page 5: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/5.jpg)
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
Target Users
![Page 6: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/6.jpg)
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
![Page 7: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/7.jpg)
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.
![Page 8: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/8.jpg)
UI Evaluation: ResultsUsing 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’
![Page 9: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/9.jpg)
• Source: http://campuslife.asus.com
Arranged Buttons in a way that would allow for better playability of the user.
• Bad designs that helped determine what would be the best way to arrange buttons.
![Page 10: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/10.jpg)
• Source: http://www.techwench.com/
Button Arrangement
![Page 11: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/11.jpg)
Arranged Buttons on the top and mainly to the left side of the screen.
![Page 12: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/12.jpg)
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
Button Highlights only after User clicks on it
![Page 13: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/13.jpg)
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
![Page 14: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/14.jpg)
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
![Page 15: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/15.jpg)
• Menu background was changed to a semi-transparent view of the game
• Selected list items are now highlighted clearly
Colors / Background
![Page 16: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/16.jpg)
• New large icon indicates the option the user has selected
• Reduce previous confusion about this
Selection Feedback
![Page 17: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/17.jpg)
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
![Page 18: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/18.jpg)
ELEMENT SELECTION• In our original design, the item/magic/enchant wheels would default to some element in
the wheel.
• Our new design defaults with no element selected, which requires the user to choose an element. This reduced confusion as to what element was actually in use.
![Page 19: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/19.jpg)
CONCLUSIONFrom our previous prototypes, we have made improvements to our user interface.
Evaluating our users gave us an idea of an interface RPG gamer can use
From prototyping, we are able to determine the button layout and touch commands for our users
Our core UI principles:
feedback (such as button highlighting)
visibility (finding the buttons)
Consistency (along RPG games)
We created a final prototype that follows these principles
![Page 20: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/20.jpg)
Conclusion
![Page 21: Android/ iOS RPG Game UI](https://reader036.vdocument.in/reader036/viewer/2022062520/56815f55550346895dce3473/html5/thumbnails/21.jpg)
Questions?