{"id":485,"date":"2024-11-25T11:05:01","date_gmt":"2024-11-25T11:05:01","guid":{"rendered":"https:\/\/sites.wsagames.com\/ea3g23\/?p=485"},"modified":"2024-12-09T14:02:13","modified_gmt":"2024-12-09T14:02:13","slug":"week-9-interaction-controllers-ux-usability","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/ea3g23\/2024\/11\/25\/week-9-interaction-controllers-ux-usability\/","title":{"rendered":"Week 9 &#8211; Interaction, controllers, UX, usability\ud83c\udf10"},"content":{"rendered":"\n<h2 class=\"wp-block-heading has-text-align-center\"><span style=\"text-decoration: underline\">Defining Game UI<\/span><\/h2>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img fetchpriority=\"high\" decoding=\"async\" width=\"723\" height=\"1024\" src=\"https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-32-723x1024.png\" alt=\"\" class=\"wp-image-950\" style=\"width:551px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-32-723x1024.png 723w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-32-212x300.png 212w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-32-768x1088.png 768w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-32-1084x1536.png 1084w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-32-300x425.png 300w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-32-850x1204.png 850w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-32.png 1181w\" sizes=\"(max-width: 723px) 100vw, 723px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Game UI is an important part of the game&#8217;s appearance and overall user experience. <mark class=\"has-inline-color has-luminous-vivid-amber-color\">UI communicates the visual cues that help viewers follow the intended course of action in a game<\/mark>, e.g. a map of your games surroundings. UI language with transform with each platform: XBOX UI will need to integrate with the system and address its unique design points such as controller mapping. PC UI will need to keep in mind the keyboard, touchpad and mouse. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I did a bit of research using sketch.com&#8217;s <em>What is game ui? A complete beginner\u2019s guide to game interface design<\/em> post. A Game&#8217;s UI is integral to how the player interacts with the game. A poor UI will leave the player confused, frustrated or even leave the game. The UI bridges the interaction between the screen and the player, creating an in-between layer, the HUD. In the article, they state: &#8220;You can think of the HUD as an overlay that houses all sorts of UI elements. It\u2019s where the player will find most of the information they\u2019re looking for as they play the game.&#8221; <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Relating this to my game, I need my UI to be bubbly, vibrant and flashy. My goal is to capture the player&#8217;s attention while not being too overcrowded and overwhelming. A game&#8217;s UI I&#8217;d like to focus on is Fall Guys: Ultimate Knockout. It&#8217;s very colourful and compliments the music which hypes the player up for the experience. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-35-1024x576.png\" alt=\"\" class=\"wp-image-973\" style=\"width:500px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-35-1024x576.png 1024w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-35-300x169.png 300w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-35-768x432.png 768w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-35-1536x864.png 1536w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-35-850x478.png 850w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-35.png 1920w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading has-text-align-center\">What did I learn overall from this post?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To define 3 important parts of a UI:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Understand the 4 types of interface components (dietetic, non-diegetic, spatial, and meta)<\/li>\n\n\n\n<li>Good UI will have prototyping and reusable elements <\/li>\n\n\n\n<li>Focus on creating visual cues that will help the viewer understand their task<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This will help me pinpoint what I want to focus on in the UI.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading has-text-align-center\"><span style=\"text-decoration: underline\">UX in Games Thursday Lecture<\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This week, we had another talk from Oguz Doma. He gave us a lot of useful information about UX in Videogames. UX stands for the entire user experience and this encompasses usability, the emotional and sensory experience of your game. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">My notes are pretty self explanatory for what information I need to keep in mind to give the best UX. We did a few case studies of games such as <em>Cyberpunk 2077<\/em>, <em>Legend of Zelda<\/em>,<em> Portal (1 + 2)<\/em>. One thing they all have in common is that they all fit the aesthetic of the game. They suit the environment in which the game is set in. For <em>Cyberpunk 2077<\/em> as an example, the UI consists of cluttered text all over the screen, highlighting the confusing and consumerist nature of a hyper-capitalistic world driven by Hedonism and money. In this way, the UI contributes to the overall UX as it signals to the player the type of world they are living in.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the case study of Portal, one important reason on why it works is &#8220;Jakob&#8217;s 10 Usability Heuristics&#8221;. This is a set of 10 objectives that set Portal&#8217;s world apart, and make it fleshed out and immersive. This includes:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Visibility of System Status<\/li>\n\n\n\n<li>Match between the System and Real World<\/li>\n\n\n\n<li>User Control and Freedom<\/li>\n\n\n\n<li>Consistency and Standards<\/li>\n\n\n\n<li>Error Prevention<\/li>\n\n\n\n<li>Recognition Rather Than Recall<\/li>\n\n\n\n<li>Flexibility and Efficiency of Use<\/li>\n\n\n\n<li>Aesthetic and Minimalist Design<\/li>\n\n\n\n<li>Recognise, Diagnose and Recover From Errors<\/li>\n\n\n\n<li>Help and Documentation<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">These principles mainly apply to the Portal series, but there are a few that I&#8217;d like to study and put in my game. <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>User Control and Freedom &#8211; Users often perform actions by mistake. They need a clearly marked &#8220;emergency exit&#8221; to leave the unwanted state.<\/li>\n\n\n\n<li>Recognition rather than Recall &#8211; Minimise the user&#8217;s memory load by making elements, actions, and options visible. Avoid making users remember information.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Relating this to my game, my ideal goal is for users to know where they are going. When the user is looking for the main house to raid, they need to be able to identified the house without neccesarily being told where to go. I can do this through a checkpoint in the game world when the house is found. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I would also ideally like players to understand the patterns that the game has. This will be especially prevelant in the level loops. Each level will have the same game loop which players will grow to understand. You can find the level gameloops <a href=\"https:\/\/sites.wsagames.com\/ea3g23\/2024\/12\/01\/gameplay\/\">here<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Overall, this lecture was really useful for learning more about making the UX as understandable, simple and engaging for the player.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"740\" height=\"1024\" data-id=\"952\" src=\"https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-33-740x1024.png\" alt=\"\" class=\"wp-image-952\" style=\"width:448px;height:auto\" srcset=\"https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-33-740x1024.png 740w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-33-217x300.png 217w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-33-768x1063.png 768w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-33-1109x1536.png 1109w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-33-300x415.png 300w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-33-850x1177.png 850w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/image-33.png 1181w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"725\" height=\"1024\" data-id=\"953\" src=\"https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/1-725x1024.png\" alt=\"\" class=\"wp-image-953\" srcset=\"https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/1-725x1024.png 725w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/1-213x300.png 213w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/1-768x1084.png 768w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/1-1088x1536.png 1088w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/1-300x423.png 300w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/1-850x1200.png 850w, https:\/\/sites.wsagames.com\/ea3g23\/wp-content\/uploads\/sites\/2\/2024\/11\/1.png 1183w\" sizes=\"(max-width: 725px) 100vw, 725px\" \/><\/figure>\n<\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Defining Game UI Game UI is an important part of the game&#8217;s appearance and overall user experience. UI communicates the visual cues that help viewers follow the intended course of action in a game, e.g. a map of your games surroundings. UI language with transform with each platform: XBOX UI will need to integrate with&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[],"class_list":["post-485","post","type-post","status-publish","format-standard","hentry","category-weekly-summaries-1"],"_links":{"self":[{"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/posts\/485","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/comments?post=485"}],"version-history":[{"count":14,"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/posts\/485\/revisions"}],"predecessor-version":[{"id":993,"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/posts\/485\/revisions\/993"}],"wp:attachment":[{"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/media?parent=485"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/categories?post=485"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sites.wsagames.com\/ea3g23\/wp-json\/wp\/v2\/tags?post=485"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}