WEBVTT 1 00:00:23.450 --> 00:00:26.240 Hello everyone, this is Jaegon Jang 2 00:00:26.240 --> 00:00:29.980 In this lecture, I will talk more about UI, UX design 3 00:00:29.980 --> 00:00:33.900 And prototype production, which are one of the key elements of 4 00:00:33.900 --> 00:00:35.900 Game planning and design 5 00:00:35.900 --> 00:00:39.980 The lecture's content will help students understand 6 00:00:39.980 --> 00:00:43.540 The basic principles of UI and UX and increase their understanding of the process of 7 00:00:43.540 --> 00:00:47.380 Creating and testing prototypes in actual game development 8 00:00:47.681 --> 00:00:51.481 Basics of UI/UX design 9 00:00:51.630 --> 00:00:56.299 As a learning topic, we will learn the basics of UI and UX design 10 00:00:56.459 --> 00:01:02.180 First, let's look at the definition and difference between UI and UX 11 00:01:02.180 --> 00:01:05.139 UI includes all visual and auditory interface 12 00:01:05.139 --> 00:01:09.580 Elements through which users interact with the game 13 00:01:09.580 --> 00:01:15.099 This can be considered to include UI expressions 14 00:01:15.099 --> 00:01:17.820 Such as buttons, icons, menus, HUD 15 00:01:17.820 --> 00:01:21.699 And heads-up displays that represent information that can be seen in the game 16 00:01:21.699 --> 00:01:25.099 UX refers to elements such as emotional response 17 00:01:25.099 --> 00:01:28.220 Flow of interaction, and accessibility 18 00:01:28.220 --> 00:01:32.459 That appear during the user's game experience 19 00:01:32.459 --> 00:01:36.300 UX is also a factor that determines the overall experience 20 00:01:36.300 --> 00:01:40.419 And satisfaction provided to users through games 21 00:01:40.419 --> 00:01:44.379 Usually, UI can be recognized as a part of UX 22 00:01:44.379 --> 00:01:47.860 And a good UI does not necessarily make a good UX 23 00:01:47.860 --> 00:01:52.339 But it plays a significant role in shaping the overall user experience 24 00:01:52.339 --> 00:01:55.459 So, let's find out how important 25 00:01:55.459 --> 00:01:58.580 UI and UX are in game design 26 00:01:58.580 --> 00:02:02.660 The UI and UX of a game significantly impact 27 00:02:02.660 --> 00:02:05.339 How easily and intuitively players can 28 00:02:05.339 --> 00:02:09.020 Understand and use the game's features 29 00:02:09.020 --> 00:02:13.020 User-friendly design increases player satisfaction 30 00:02:13.020 --> 00:02:16.380 And is used as an element to maximize the fun of the game 31 00:02:16.380 --> 00:02:19.380 Also, UI and UX provide preliminary explanations 32 00:02:19.380 --> 00:02:22.860 And guides to the system the developer wants 33 00:02:22.860 --> 00:02:25.899 To teach users in the game 34 00:02:25.899 --> 00:02:29.059 Therefore, these UI and UX become important elements 35 00:02:29.059 --> 00:02:31.779 In game design 36 00:02:31.779 --> 00:02:34.220 And can be seen as 37 00:02:34.220 --> 00:02:38.339 The most clearly experienced elements before the game system is implemented 38 00:02:38.339 --> 00:02:41.380 If users are sufficiently satisfied with these elements 39 00:02:41.380 --> 00:02:46.619 And access the system, the barrier to entry into the game will be lowerd 40 00:02:46.619 --> 00:02:51.259 Which will also serve as an opportunity to extend the game's lifespan 41 00:02:51.259 --> 00:02:55.860 Now, we will learn about the principles of UI and UX design 42 00:02:55.860 --> 00:02:58.740 This is the most important 43 00:02:58.740 --> 00:03:02.020 UI/UX Design Principle 1 First is clarity and ease of use 44 00:03:02.020 --> 00:03:06.779 Clarity means that all UI elements should be clear, easy to understand 45 00:03:06.779 --> 00:03:09.940 And allow players to easily access 46 00:03:09.940 --> 00:03:11.740 And use the game's core features 47 00:03:11.740 --> 00:03:14.699 If the design is unclear or difficult 48 00:03:14.699 --> 00:03:18.339 To use without these principles 49 00:03:18.339 --> 00:03:20.860 It may result in 50 00:03:20.860 --> 00:03:24.539 Users leaving the game before they even play it 51 00:03:24.539 --> 00:03:29.779 Therefore, if the UI elements of the various systems that the game is trying to convey 52 00:03:29.779 --> 00:03:33.940 Interfere with access to the system or are not recognized 53 00:03:33.940 --> 00:03:38.300 It is difficult for users to proceed in the direction desired by the game creator 54 00:03:38.300 --> 00:03:40.300 This may cause players to complain about the game 55 00:03:40.300 --> 00:03:42.699 Refund the game they purchased 56 00:03:42.699 --> 00:03:46.820 Or simply not play the game 57 00:03:46.820 --> 00:03:49.699 UI/UX Design Principle 2 Second is consistency and intuitiveness 58 00:03:49.699 --> 00:03:53.979 UI elements within a game must maintain consistent style and behavior 59 00:03:53.979 --> 00:03:57.580 This will allow players to quickly learn the game's interface 60 00:03:57.580 --> 00:04:00.500 And enjoy the game more effectively 61 00:04:00.500 --> 00:04:03.619 If already recognized UI elements behave differently 62 00:04:03.619 --> 00:04:06.300 In certain situations or are not immediately recognizable 63 00:04:06.300 --> 00:04:10.460 Unnecessary learning may be required and may cause inconvenience to users 64 00:04:10.460 --> 00:04:14.419 As mentioned above if a situation makes the user uncomfortable 65 00:04:14.419 --> 00:04:17.660 It may cause them to leae the game 66 00:04:17.660 --> 00:04:20.100 Or not play it anymore 67 00:04:20.100 --> 00:04:24.140 UI/UX Design Principle 3 Thirdly, the importance of user and visual feedback 68 00:04:24.140 --> 00:04:26.619 Instant feedback on the user's actions 69 00:04:26.619 --> 00:04:29.220 Further enhances the gaming experience 70 00:04:29.220 --> 00:04:31.420 For example, when a button is pressed 71 00:04:31.420 --> 00:04:34.700 Providing visual or auditory feedback 72 00:04:34.700 --> 00:04:38.619 Lets the user know that their action has been recognized 73 00:04:38.619 --> 00:04:41.940 Immediate feedback on what is perceived 74 00:04:41.940 --> 00:04:44.660 Can give users greater immersion 75 00:04:44.660 --> 00:04:47.940 And increase satisfaction with the game 76 00:04:47.940 --> 00:04:53.619 UI/UX Design Principle 4 Design and accessibility for different players must be considered 77 00:04:53.619 --> 00:04:57.420 Because games must be designed to be accessible 78 00:04:57.420 --> 00:05:01.059 To users of various ages, abilities, and cultural backgrounds 79 00:05:01.059 --> 00:05:03.179 Accessibility in UI design is 80 00:05:03.179 --> 00:05:05.820 An important factor in enabling games 81 00:05:05.820 --> 00:05:07.899 To reach wider market 82 00:05:12.380 --> 00:05:16.420 Next, we will look at the prototyping process 83 00:05:16.420 --> 00:05:19.299 Usually, the stages of game production are 84 00:05:19.299 --> 00:05:22.540 Pre-production, production, post-production 85 00:05:22.540 --> 00:05:25.260 It's divided into these three stages 86 00:05:25.260 --> 00:05:29.220 In the pre-production stage, ideas and prototypes 87 00:05:29.220 --> 00:05:32.700 are developed with focus 88 00:05:32.700 --> 00:05:35.779 The production stage reflects actual game development 89 00:05:35.779 --> 00:05:36.940 And new systems 90 00:05:36.940 --> 00:05:38.739 In the post-production 91 00:05:38.739 --> 00:05:41.540 The game's completion and polishing through QA 92 00:05:41.540 --> 00:05:43.940 You can think about it these stages 93 00:05:43.940 --> 00:05:45.980 Among them, in the pre-production stage 94 00:05:45.980 --> 00:05:49.299 Which can be seen as starting point, verifies the fun of the game 95 00:05:49.299 --> 00:05:51.899 It can be said that 96 00:05:51.899 --> 00:05:53.940 The prototype creates a basis for whether 97 00:05:53.940 --> 00:05:56.700 To move on to the production stage 98 00:05:56.700 --> 00:05:59.299 And this can be seen as the most important thing 99 00:05:59.299 --> 00:06:02.899 So, you might be wondering what the purpose of this prototype is 100 00:06:02.899 --> 00:06:05.660 And what steps it takes to develop it into a prototype 101 00:06:05.660 --> 00:06:09.019 This kind of prototyping is done in the early stages of game development 102 00:06:09.019 --> 00:06:11.339 To experiment with ideas, discover problems 103 00:06:11.339 --> 00:06:13.260 And make improvements 104 00:06:13.260 --> 00:06:15.140 So, this process generally 105 00:06:15.140 --> 00:06:17.899 Verifies fun, design modifications 106 00:06:17.899 --> 00:06:19.660 And user test 107 00:06:19.660 --> 00:06:22.579 The final balance adjustment is done 108 00:06:22.579 --> 00:06:25.019 These are various methods and tools 109 00:06:25.019 --> 00:06:28.299 For creating these prototypes 110 00:06:28.299 --> 00:06:31.700 The easiest way to do this is 111 00:06:31.700 --> 00:06:35.140 To start with a simple board game that can be played 112 00:06:35.140 --> 00:06:36.779 With paper and pen 113 00:06:36.779 --> 00:06:40.019 So, with Adobe XD Sketch, and Unity 114 00:06:40.019 --> 00:06:42.100 By using various visual tools 115 00:06:42.100 --> 00:06:44.260 Allowing to express it digitally 116 00:06:44.260 --> 00:06:47.100 Alternatively, simulation can be made possible 117 00:06:47.100 --> 00:06:48.739 By implementing an actual game 118 00:06:48.739 --> 00:06:51.420 Development is done with these things 119 00:06:51.420 --> 00:06:54.220 And these tools are actively used 120 00:06:54.220 --> 00:06:56.420 In practice because 121 00:06:56.420 --> 00:06:58.100 They help designers and developers 122 00:06:58.100 --> 00:07:01.579 Quickly visualize and test ideas 123 00:07:01.579 --> 00:07:03.339 So, you might be wondering 124 00:07:03.339 --> 00:07:06.179 How these prototypes are made 125 00:07:06.179 --> 00:07:09.140 The process of creating a simple game prototype 126 00:07:09.140 --> 00:07:11.660 Starts with implementing 127 00:07:11.660 --> 00:07:14.179 The basic gameplay mechanism and interface 128 00:07:14.179 --> 00:07:18.019 So, with the most important point of fun 129 00:07:18.019 --> 00:07:21.179 We attempt prototyping by simply 130 00:07:21.179 --> 00:07:23.420 Creating words and rules 131 00:07:23.420 --> 00:07:26.739 By improving the interface 132 00:07:26.739 --> 00:07:28.059 and UI aspects 133 00:07:28.059 --> 00:07:30.179 It can be said that 134 00:07:30.179 --> 00:07:32.380 It starts getting closer to the gameplay 135 00:07:32.380 --> 00:07:35.100 Therefore, this early-stage prototype is 136 00:07:35.100 --> 00:07:37.980 Designed to briefly visualize the core mechanism 137 00:07:37.980 --> 00:07:40.179 Verify its fun through play 138 00:07:40.179 --> 00:07:43.980 And gradually develop it through internal review and modification 139 00:07:43.980 --> 00:07:45.579 The most important thing in this regard is that 140 00:07:45.579 --> 00:07:47.540 The fun is verified through play 141 00:07:47.540 --> 00:07:51.019 Rather than unfolding with an idea in one's head 142 00:07:51.019 --> 00:07:53.579 Verifying through play is 143 00:07:53.579 --> 00:07:55.540 The most important thing 144 00:07:55.540 --> 00:07:59.019 To verify this gameplay mechanism 145 00:07:59.019 --> 00:08:01.100 You can start with a board game type 146 00:08:01.100 --> 00:08:04.660 Or create through a mode supported by 147 00:08:04.660 --> 00:08:06.660 A game such as StarCraft 148 00:08:06.660 --> 00:08:09.380 It is also produced by directly implementing it 149 00:08:09.380 --> 00:08:11.700 Using tools that enable simulation 150 00:08:11.700 --> 00:08:15.619 Through real-time development such as Unity Engine 151 00:08:15.619 --> 00:08:17.500 As you proceed like this 152 00:08:17.500 --> 00:08:19.859 You will wonder about 153 00:08:19.859 --> 00:08:20.980 Problems found int he prototype 154 00:08:20.980 --> 00:08:23.140 And how to solve them 155 00:08:23.140 --> 00:08:25.619 When making such a prototype 156 00:08:25.619 --> 00:08:27.540 Because they start from the idea stage 157 00:08:27.540 --> 00:08:31.579 Logical errors or exceptions are often found 158 00:08:31.579 --> 00:08:32.820 In early protoypes 159 00:08:32.820 --> 00:08:35.539 The process of resolving these issues found 160 00:08:35.539 --> 00:08:39.020 Can be seen as the most important part of game development 161 00:08:39.020 --> 00:08:41.500 There may be situations where it is found that 162 00:08:41.500 --> 00:08:42.940 Such a problem was 163 00:08:42.940 --> 00:08:46.580 Found as a mistake, and an attempt is made to hide it 164 00:08:46.580 --> 00:08:48.539 It is better to think of 165 00:08:48.539 --> 00:08:50.859 Finding this problem 166 00:08:50.859 --> 00:08:53.700 As giving room to resolve systematic errors 167 00:08:53.700 --> 00:08:55.500 And it also plays a role 168 00:08:55.500 --> 00:08:57.340 In preventing communication problems 169 00:08:57.340 --> 00:09:00.059 Between developers during actual development 170 00:09:00.059 --> 00:09:02.580 So as we continue to repeat 171 00:09:02.580 --> 00:09:04.419 On this approach of finding 172 00:09:04.419 --> 00:09:07.539 And solving these problems 173 00:09:07.539 --> 00:09:11.099 It becomes an opportunity to improve the way 174 00:09:11.099 --> 00:09:12.659 The game plays 175 00:09:12.659 --> 00:09:14.900 And provide a better user experience 176 00:09:14.900 --> 00:09:16.380 Through this process 177 00:09:16.380 --> 00:09:19.659 If the prototype has been verified internally 178 00:09:19.659 --> 00:09:22.539 With selected external users rather than internal users 179 00:09:22.539 --> 00:09:24.059 It should be tested 180 00:09:24.059 --> 00:09:27.820 This process is usually called FGT, Focus Group Testing 181 00:09:27.820 --> 00:09:30.140 You can think of it as a process of 182 00:09:30.140 --> 00:09:33.859 Conducting usability tests on specific external personnel 183 00:09:33.859 --> 00:09:37.020 Therefore, we collect a variety of feedback from players who are anonymous 184 00:09:37.020 --> 00:09:38.539 Or unfamiliar with the game 185 00:09:38.539 --> 00:09:40.500 Providing an opportunity to identify 186 00:09:40.500 --> 00:09:42.340 The game's strengths and weakness 187 00:09:42.340 --> 00:09:44.739 And it gives developers 188 00:09:44.739 --> 00:09:46.219 Rooms to improve it 189 00:09:46.219 --> 00:09:48.539 Through this FGT 190 00:09:48.539 --> 00:09:49.900 To evaluate the game 191 00:09:49.900 --> 00:09:53.780 You can get quantitative or qualitative indicators 192 00:09:53.780 --> 00:09:57.419 And have a reference point for with direction 193 00:09:57.419 --> 00:09:59.619 The game should be taken in the future 194 00:09:59.619 --> 00:10:02.099 In conclusion, before producing a game 195 00:10:02.099 --> 00:10:04.340 The process of verifying by prototype is 196 00:10:04.340 --> 00:10:06.580 Very important 197 00:10:06.580 --> 00:10:09.460 In this process, to obtain the indicators 198 00:10:09.460 --> 00:10:12.059 That game creators want and need 199 00:10:12.059 --> 00:10:14.460 They must know the concepts of 200 00:10:14.460 --> 00:10:16.700 UI and UX that can visualize ideas 201 00:10:16.700 --> 00:10:19.820 Based on this, creating a simple prototype is 202 00:10:19.820 --> 00:10:22.059 Internally, for verification of fun 203 00:10:22.059 --> 00:10:24.179 And externally, before the actual development 204 00:10:24.179 --> 00:10:27.580 Finding a reference point that suggests the direction of development 205 00:10:27.580 --> 00:10:30.859 It's a starting point for this 206 00:10:30.859 --> 00:10:34.500 I will conclude today's lecture on UI, UX design 207 00:10:34.500 --> 00:10:36.780 And creating prototype 208 00:10:36.780 --> 00:10:37.419 Thank you 209 00:10:38.641 --> 00:10:40.941 Basics of UI/UX Design What is UI? Includes all visual and audio elements of the interface through which the user interacts with the game 210 00:10:40.941 --> 00:10:43.241 What is UX? Includes elements such as emotional response, flow of interaction, and accessibility during the user's game experience 211 00:10:43.241 --> 00:10:45.241 UI/UX Design Principles Clarity and ease of use Consistency and Intuitiveness User feedback and visual feedback Consider design accessibility for a variety of players 212 00:10:45.255 --> 00:10:47.005 Prototyping process Purpose of Prototyping Purpose: To test ideas in the early stages of game development, discover problems, and improve them 213 00:10:47.005 --> 00:10:48.655 Prototyping process Start by implementing the basic gameplay mechanics and interface 214 00:10:48.655 --> 00:10:50.305 The initial prototype visualizes the core mechanism, verifies fun through play, and gradually develops it through internal review and modification 215 00:10:50.305 --> 00:10:51.805 Finding problems in prototypes can solve systematic errors and prevent communication problems between developers during actual development 216 00:10:51.805 --> 00:10:53.153 After internal verification through a prototype, FGT is conducted with selected external users