{"id":594,"date":"2015-10-30T16:30:03","date_gmt":"2015-10-30T20:30:03","guid":{"rendered":"http:\/\/blog.bulletpattern.com\/?p=594"},"modified":"2015-10-30T16:31:25","modified_gmt":"2015-10-30T20:31:25","slug":"better-game-ui","status":"publish","type":"post","link":"http:\/\/blog.bulletpattern.com\/?p=594","title":{"rendered":"Better Game UI"},"content":{"rendered":"<p>I work on quite a few\u00a0games a year and over time this has added up to hundreds of games. During this time I have seen the same UI mistakes\u00a0over and over again. I want to share a simple improvement\u00a0we make\u00a0to improve game UI. I will be using\u00a0fake examples as to not call anyone out.<\/p>\n<h2>Main screen<\/h2>\n<p>First, let&#8217;s look at an example\u00a0main game screen.<\/p>\n<p><a href=\"http:\/\/blog.bulletpattern.com\/wp-content\/uploads\/2015\/10\/main.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-605 size-medium\" src=\"http:\/\/blog.bulletpattern.com\/wp-content\/uploads\/2015\/10\/main-169x300.png\" alt=\"main\" width=\"169\" height=\"300\" srcset=\"http:\/\/blog.bulletpattern.com\/wp-content\/uploads\/2015\/10\/main-169x300.png 169w, http:\/\/blog.bulletpattern.com\/wp-content\/uploads\/2015\/10\/main-576x1024.png 576w, http:\/\/blog.bulletpattern.com\/wp-content\/uploads\/2015\/10\/main.png 750w\" sizes=\"auto, (max-width: 169px) 100vw, 169px\" \/><\/a><\/p>\n<p>This is functional but it could be much\u00a0better. I get why developers do this \u2013 it&#8217;s easy &amp; flexible. A developer can create\u00a0a single button asset with a dynamic textbox and dynamically place the buttons. The number of buttons can easily grow and updating copy for changes and localization is easy.<\/p>\n<p>It\u00a0can be more\u00a0than just ease of development too. Sometimes\u00a0UI designers come from web or app design backgrounds or a game studio leans on their website designers for UI design. However, the rules for good game UI are\u00a0<em>very<\/em> different than\u00a0web\/app UI. The core concept that differs is that web\/app interface does not seek to suggest what users should do, game UI should do this <em>blatantly<\/em>.<\/p>\n<p><strong>To make better UI, ask the question, &#8220;What do you <span style=\"text-decoration: underline;\">want<\/span>\u00a0players to do?&#8221;<\/strong><\/p>\n<p>Do you want players to hit HIGH SCORES just as much as you want them to hit PLAY? No, of course not. Once you have your\u00a0answer, you have an idea of what element should\u00a0have dominance. The best thing to change is\u00a0the <span style=\"text-decoration: underline;\">size<\/span> of the\u00a0desired action input. This will work regardless of language, icons clarity, or color blindness. The larger size also draws players&#8217; attention best. You could\u00a0also change the color or shape.<\/p>\n<p><a href=\"http:\/\/blog.bulletpattern.com\/wp-content\/uploads\/2015\/10\/main1.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-609\" src=\"http:\/\/blog.bulletpattern.com\/wp-content\/uploads\/2015\/10\/main1-169x300.gif\" alt=\"main1\" width=\"169\" height=\"300\" \/><\/a><\/p>\n<p>There are numerous ways other to improve this. You can\u00a0add icons for people who cannot read (i.e. kids) or\u00a0non-english speakers to clearly delineate the &#8220;neutral&#8221; buttons.<\/p>\n<p>This isn&#8217;t too much more work. Instead of one dynamic text button, you make two \u2013 a neutral\u00a0button and a call-to-action button. On screens with no clear call to action, using all neutral buttons is acceptable. You can expand this concepts with a call-to-action button, a neutral button, and a &#8220;back&#8221; button, when you have numerous screens that flow back and forth.<\/p>\n<p>Now let&#8217;s look at UI issues on the &#8220;Level End&#8221; and &#8220;Pause&#8221; screens. I am lumping these together because they usually have the same issues.<\/p>\n<p>&nbsp;<\/p>\n<h2>Level End or Pause screens<\/h2>\n<p>Here is what I see too often. Again, this is a fake example.<\/p>\n<p><a href=\"http:\/\/blog.bulletpattern.com\/wp-content\/uploads\/2015\/10\/end2.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-613\" src=\"http:\/\/blog.bulletpattern.com\/wp-content\/uploads\/2015\/10\/end2-169x300.gif\" alt=\"end\" width=\"169\" height=\"300\" \/><\/a><\/p>\n<p>Again, a call-to-action is needed \u2013 what do want players to do?<\/p>\n<p><a href=\"http:\/\/blog.bulletpattern.com\/wp-content\/uploads\/2015\/10\/end11.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-615\" src=\"http:\/\/blog.bulletpattern.com\/wp-content\/uploads\/2015\/10\/end11-169x300.gif\" alt=\"end1\" width=\"169\" height=\"300\" \/><\/a><\/p>\n<p>If you are too pressed for time to make two buttons instead of one, at least\u00a0arrange buttons &#8220;in order of call-to-action&#8221;, in this case, home, level menu, restart, play\/continue.<\/p>\n<p>&nbsp;<\/p>\n<h2>Conclusion<\/h2>\n<p>Find what you want your players to do and make that the dominant interactive element! Making 2 buttons is not that much harder than making one and the clarity it provides players is worth it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I work on quite a few\u00a0games a year and over time this has added up to hundreds of games. During this time I have seen the same UI mistakes\u00a0over and over again. I want to share a simple improvement\u00a0we make\u00a0to improve game UI. I will be using\u00a0fake examples as to not call anyone out. Main [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-594","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/blog.bulletpattern.com\/index.php?rest_route=\/wp\/v2\/posts\/594","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.bulletpattern.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.bulletpattern.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.bulletpattern.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.bulletpattern.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=594"}],"version-history":[{"count":9,"href":"http:\/\/blog.bulletpattern.com\/index.php?rest_route=\/wp\/v2\/posts\/594\/revisions"}],"predecessor-version":[{"id":617,"href":"http:\/\/blog.bulletpattern.com\/index.php?rest_route=\/wp\/v2\/posts\/594\/revisions\/617"}],"wp:attachment":[{"href":"http:\/\/blog.bulletpattern.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=594"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.bulletpattern.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=594"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.bulletpattern.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}