Designing a User Interface for Musical Gameplay An Interactive Qualifying Project submitted to the faculty of WORCESTER POLYTECHNIC INSTITUTE in partial fulfillment of the requirements for the Degree of Bachelor of Science Submitted by: Tech Side: Hongbo Fang Alexander Guerra Xiaoren Yang Art Side: Kedong Ma Connor Thornberg Advisor Prof. Vincent J. Manzo Abstract A game is made up of many components, each of which require attention to detail in order to produce a game that is enjoyable to use and easy to learn. The graphical user interface, or GUI, is the method a game uses to communicate with the player and has a large impact on the gameplay experience. The goal of this project was to design a GUI for a music oriented game that allows players to construct a custom instrument using instruments they have acquired throughout the game. Based on our research of GUIs, we designed a prototype in Unity that incorporates a grid system that responds to keypress and mouse click events. We then performed a playtest and conducted a survey with students to acquire feedback about the simplicity and effectiveness of our design. We found that our design had some confusing elements, but was overall intuitive and easy to use. We found that facilitation may have impacted the results and should be taken into consideration for future development along with object labeling and testing sample size. 1 Acknowledgements We would like to thank Professor Vincent Manzo for selecting us to design an important feature of his game and for is support and encouragement throughout the duration of the project. We would also like to thank Dan Manzo for working with us in designing features that improved the quality of the GUI. 2 Table of Contents Abstract ........................................................................................................................................... 1 Acknowledgements ......................................................................................................................... 2 List of Figures and Tables............................................................................................................... 6 Executive Summary ........................................................................................................................ 8 Introduction and Background ..................................................................................................... 8 Methodology ............................................................................................................................... 8 Results ......................................................................................................................................... 8 Conclusion .................................................................................................................................. 9 Chapter 1: Introduction ................................................................................................................. 10 Chapter 2: Background ................................................................................................................. 12 2.1 General Principles of UI Design ......................................................................................... 12 2.1.1 Usability: ease of use, ease of learning ........................................................................ 12 2.1.2 Playability: A UI should be interactive, immersive and responsive. ........................... 12 2.1.3 Aesthetic: Appealing UI improves game play experience ........................................... 12 2.2 Types of Game UI ............................................................................................................... 13 2.2.1 Diegetic ........................................................................................................................ 13 2.2.2 Meta ............................................................................................................................. 15 2.2.3 Spatial .......................................................................................................................... 16 2.2.4 Non-diegetic ................................................................................................................. 17 2.3 Psychology of UI Design .................................................................................................... 18 2.3.1 Simplicity ..................................................................................................................... 18 2.3.2 Facilitation ................................................................................................................... 19 2.3.3 Placement and Appearance .......................................................................................... 19 3 2.4 Existing UIs ........................................................................................................................ 21 2.4.1 Minecraft ...................................................................................................................... 21 2.4.2 Skyrim .......................................................................................................................... 22 2.4.3 Counter Strike .............................................................................................................. 24 2.4.4 Assassin’s Creed .......................................................................................................... 25 2.5 General UI Development Procedure ................................................................................... 26 2.5.1 Step 1: On-screen information analysis ....................................................................... 26 2.5.2 Step 2: Design player actions and in-game feedback .................................................. 27 2.5.3 Step 3: Study target audience ....................................................................................... 28 2.5.4 Step 4: Start Design a preliminary UI .......................................................................... 28 2.5.5 Step 5: Testing ............................................................................................................. 28 Chapter 3: Methodology ............................................................................................................... 29 3.1 Task Analysis ...................................................................................................................... 29 3.1.1 Counter Strike: Weapon Selection ............................................................................... 29 3.1.2 Minecraft: Grid Layout ................................................................................................ 29 3.2 Artistic Development .......................................................................................................... 31 3.2.1 Early Development ...................................................................................................... 31 3.2.2 Later Development....................................................................................................... 32 3.3 Grouper Development ......................................................................................................... 34 3.4 Technical Description Features........................................................................................... 36 3.4.1 Flying ........................................................................................................................... 36 3.4.2 Rotating ........................................................................................................................ 36 3.4.3 Sorting .......................................................................................................................... 37 3.4.4 Saving and Loading ..................................................................................................... 38 3.4.5 Volume control ............................................................................................................ 41 4 3.5 Survey and Data Collection ................................................................................................ 42 Chapter 4: Results ......................................................................................................................... 43 4.1 Simplicity ............................................................................................................................ 43 4.2 Efficiency ............................................................................................................................ 45 4.3 Design ................................................................................................................................. 47 Chapter 5: Conclusion................................................................................................................... 50 5.1 Errors................................................................................................................................... 50 5.2 Future Work ........................................................................................................................ 50 Appendix A: Initial Design ........................................................................................................... 52 Appendix B: Survey Document .................................................................................................... 56 Appendix C: Raw Playtest Data ..................................................................................................