tag:blogger.com,1999:blog-26561115169592760842024-02-19T11:52:36.894-05:00Trials and ErrorsGames and grumbles once a month.Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.comBlogger37125tag:blogger.com,1999:blog-2656111516959276084.post-40914938424536426002017-10-02T06:00:00.000-04:002017-10-02T06:00:23.538-04:00Cuphead Usability Review<div class="separator" style="clear: both; text-align: center;">
<a href="https://compass-ssl.xbox.com/assets/57/2d/572dc161-0e1c-4ff2-ae9f-bfc4d03ecb08.jpg?n=Cuphead_GLP-Page-Hero-1084_1920x600.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="250" data-original-width="800" height="200" src="https://compass-ssl.xbox.com/assets/57/2d/572dc161-0e1c-4ff2-ae9f-bfc4d03ecb08.jpg?n=Cuphead_GLP-Page-Hero-1084_1920x600.jpg" width="640" /></a></div>
<br />
<br />
Cuphead is a classic run and gun game developed and published by StudioMDHR Entertainment. The player assumes the role of Cuphead, a character who unwisely makes a deal with the devil. Cuphead must collect the souls of the devil's debtors to retain his own.<br />
<div>
<br /></div>
<div>
The game's controls are simple - move, dash, jump, shoot, and switch weapons - it's the gameplay that's the difficult part. But there are a few places where the game struggles.<br />
<br />
So let's begin.<br />
<br />
First, there may be some sort of bug (or oversight) on the initial welcome screen. On the bottom, the words "Press Any Button" flash, but *any button* doesn't actually work (A, S, Q, and potentially some others).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh15tNjTHHE8WStYFj_LdzPrT4Ye_LCXZUWNWyqeS1MwKPtPPwOwRuRaEHP2o6IvGY0UyJWzdn4Z3d8Rmbloj3l1239l-tj7pWG-EiBgYREm8NrDyfaBIJ3rnVcPah-LIxZW7sQ3H1evZE/s1600/20171001133315_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh15tNjTHHE8WStYFj_LdzPrT4Ye_LCXZUWNWyqeS1MwKPtPPwOwRuRaEHP2o6IvGY0UyJWzdn4Z3d8Rmbloj3l1239l-tj7pWG-EiBgYREm8NrDyfaBIJ3rnVcPah-LIxZW7sQ3H1evZE/s640/20171001133315_1.jpg" width="640" /></a></div>
<br />
After the player starts the game, they are easily able to start a new game or continue. The game clearly shows the controls in the lower right hand corner. Once the player starts a new game, they're treated to a storybook that opens and tells the origin of Cuphead and his friend Mughead.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
In the storybook, any key will trigger the page to turn, including the right arrow (which is superimposed on the storybook). Once the story ends, their guardian Elder Kettle gives Cuphead advice. But now, the even though the dialogue has a right arrow on it, the right arrow does not trigger the dialogue to change.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxBtLaaYCC1HhguLe0XVzR1KcuC6uGWzz4fuEm8kzo-MUk9NXE60UeVUum0qS2bE7FXdp6AD_X3xJYjjMn2dZ_zu-Lr5FOkfOa23esEDNzeDRGEUEYdOTdyuxgcYAvZW2WPfMJG1_-Bsk/s1600/20170930181947_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxBtLaaYCC1HhguLe0XVzR1KcuC6uGWzz4fuEm8kzo-MUk9NXE60UeVUum0qS2bE7FXdp6AD_X3xJYjjMn2dZ_zu-Lr5FOkfOa23esEDNzeDRGEUEYdOTdyuxgcYAvZW2WPfMJG1_-Bsk/s640/20170930181947_1.jpg" width="640" /></a></div>
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8bigKV-00dezdfgPQQEt9i3Fa3gg1jeY3aRS2CwEdLDV3WOaiRg8_CCpVc9cZs53TKvlsA-n4bOIYhXBjMJNOSDEEOSP9317Blvb9l96dTbqmzwoQfjiV9kUrKYQ6DqO-Y6vVOArTc_M/s1600/exit.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="395" data-original-width="219" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8bigKV-00dezdfgPQQEt9i3Fa3gg1jeY3aRS2CwEdLDV3WOaiRg8_CCpVc9cZs53TKvlsA-n4bOIYhXBjMJNOSDEEOSP9317Blvb9l96dTbqmzwoQfjiV9kUrKYQ6DqO-Y6vVOArTc_M/s320/exit.jpg" width="177" /></a>This makes sense - the game's initial control scheme binds the arrow keys for movement, so if a player were to press the arrow key during dialogue, Cuphead would move. But from a user experience perspective, it's weird that every other instance of a key displaying on a screen (like on the left, Z for exit) will have an effect, <i>except </i>the right arrow key.<br />
<br />
The designers could've gotten around this design confusion by mapping the default movement keys to WASD (which <i>I believe </i>is a common control scheme, but I could be completely wrong), and mapping the right arrow as one of the means of advancing dialogue. From a <a href="https://www.polygon.com/guides/2017/9/29/16385062/cuphead-tips-how-to-fix-the-controls">Polygon PSA</a>, it sounds like MDHR could have thought through the control mappings for console and PC a little better.<br />
<br />
But even the controls to <i>change </i>the controls were a bit confusing. When I opened up the controls menu, it wasn't immediately apparent how to re-map the buttons (turned out it was use the arrow keys to navigate and press Z or enter to select the box, which in retrospect makes sense). But at first, because I hadn't been in this specific menu before, I wasn't sure what I needed to do. Initially I tried to use my mouse to click (but that didn't work, frustrating but understandable).<br />
<br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitZYjNNIdBs9JlY1YU1VOhGLMiBkfUzKUmAFJ-ZmuBrCgequxzUW1Va1Tp7zA9AoTs7kPAse2t8wt4SFC4XH-McV5hy9KdtSPBPVKndQfD6woCP5vONLlp7qjgWbWhXuAioL-NUOMa62I/s1600/20170930182654_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitZYjNNIdBs9JlY1YU1VOhGLMiBkfUzKUmAFJ-ZmuBrCgequxzUW1Va1Tp7zA9AoTs7kPAse2t8wt4SFC4XH-McV5hy9KdtSPBPVKndQfD6woCP5vONLlp7qjgWbWhXuAioL-NUOMa62I/s640/20170930182654_1.jpg" width="640" /></a></div>
<br />
Overall, those are my complaints - some buttons don't work, others work strangely. Not many errors to point out in this particular Trials & Errors post. I'm sure there might be some more usability issues further in the game... but it's so challenging that I haven't gotten past the first area. So those will have to wait.<br />
<br />
Finally, some recommendations/comments for MDHR.<br />
<br />
<ul>
<li>It's a super small detail, but on the initial welcome screen, consider making it such that the "press any button" is true. Currently, certain keys will not trigger the start screen.</li>
<li>It would have also been nice to map multiple keys to the same action, just as the game does behind the scenes (both Z and the Enter key will prompt interactions). </li>
<li>Consider setting the default mapping for PC to WASD, and allowing the right arrow to advance the dialogue.</li>
</ul>
<div>
___________</div>
<div>
<br /></div>
<div>
Thanks to my readers! I know it's been a long time since I last wrote (almost a year) - I just needed to take a long break from writing. I have a full-time job in user research (not games user research) and probably too many hobbies, so I didn't have the mental energy to find games to write about (and then actually write about them). But I'm back!</div>
<div>
<br /></div>
<div>
Let me know if you have any game suggestions. The next one up is a second round of feedback on Pokemon Go, which I'm told has changed a lot since I reviewed it last year. Feel free to reach out on Twitter (@keshiekay) if you have any ideas!</div>
</div>
Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com6tag:blogger.com,1999:blog-2656111516959276084.post-71651439984955171572017-09-17T16:08:00.001-04:002017-09-17T16:08:51.662-04:00Trials & Errors to Resume in OctoberHello, readers.<br />
<br />
And long time no chat. I needed to take a long break from Trials & Errors, but I'll be starting it back up again in October. Have any games you'd like me to review? Feel free to provide them in the comments, or on Twitter @keshiekay.<br />
<br />
Thanks, and chat soon -<br />
KelseyAnonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-90891700959438599682016-12-18T16:04:00.001-05:002016-12-18T16:04:27.199-05:00The Evolution of UI: An Exploration of the Elder Scrolls Series<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-forQwtTj5I0jKyDG4DZhpRAIAcoJGTVHuJHy1sHjbKqKlLV3upI5MYjm2OAOUwfOYcfCP8zYEMOh0RlKyVMZistcLYvVOWt5oHwqlbOjetgi-VvCI4HkgjxGt8KAhqWdkda1voFfTPs/s1600/TheElderScrolls.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-forQwtTj5I0jKyDG4DZhpRAIAcoJGTVHuJHy1sHjbKqKlLV3upI5MYjm2OAOUwfOYcfCP8zYEMOh0RlKyVMZistcLYvVOWt5oHwqlbOjetgi-VvCI4HkgjxGt8KAhqWdkda1voFfTPs/s640/TheElderScrolls.png" width="640" /></a></div>
<br />
<br />
The Elder Scrolls series, by Bethesda Softworks, has been in the gaming scene since 1994. In the past 22 years, the game's graphics and user interface have changed tremendously, from The Elder Scrolls Arena (1994) to The Elder Scrolls Online (2014). This post explores how the interface has changed over time and with new technology.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
The first two installments in this series, The Elder Scrolls Arena and The Elder Scrolls II: Daggerfall (1996), were made for MS-DOS only, and featured similar UIs. Both Arena and Daggerfall displayed their main UI on the bottom of the screen, taking up approximately the same space. With the icons in Arena, players could draw/sheathe their weapon, steal, check their status (poisoned and such), access their spells, see their journal, rest, or view a world/local map.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQjVkZ9bxi64WnSX6BZLT1VciVQGV2WYpZB9vG_WkBHDH9EgEos49AyeFnwM4Gve6k8IqFGhhamVo5Vk3tJ3KBCkBx_nU566chYks7qe-fECMCtKYLx77DYRDsr-ylBnPRbs9NDkY5AM/s1600/Elder-Scrolls-Arena-et-Daggerfall.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="194" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiQjVkZ9bxi64WnSX6BZLT1VciVQGV2WYpZB9vG_WkBHDH9EgEos49AyeFnwM4Gve6k8IqFGhhamVo5Vk3tJ3KBCkBx_nU566chYks7qe-fECMCtKYLx77DYRDsr-ylBnPRbs9NDkY5AM/s640/Elder-Scrolls-Arena-et-Daggerfall.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Left, The Elder Scrolls Arena (1994) ; Right, The Elder Scrolls II: Daggerfall (1996)</td></tr>
</tbody></table>
Daggerfall made a few changes, including adding an 'interact' icon that displayed how the player could interact with the world in front of him/her (talk, observe, pick up objects, steal/unlock). Daggerfall also allowed players to access their inventory by clicking on the money bags icon in the UI or by pressing F6. This was an improvement upon Arena, in which the player could only access their items by clicking on their character's portrait and then navigating to the 'Equipment' sub-menu.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsLz_NMSPJvy6n6LlVgLhIChDz93_xs1wnu9cexNzkYStQ9f4iXu0dGtymO4TuHVvyrVYj_TtpYaxiDmrSYLgdKig2eiJoB8THY4GEmKuFx9JY-RgM6h6pnOj5dNyt2Wci5pIr8oPtRTc/s1600/arena-dagger-inventory.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsLz_NMSPJvy6n6LlVgLhIChDz93_xs1wnu9cexNzkYStQ9f4iXu0dGtymO4TuHVvyrVYj_TtpYaxiDmrSYLgdKig2eiJoB8THY4GEmKuFx9JY-RgM6h6pnOj5dNyt2Wci5pIr8oPtRTc/s640/arena-dagger-inventory.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Arena's inventory included all items in a list, and Daggerfall's segmented out item types.</td></tr>
</tbody></table>
<br />
Daggerfall also improved upon inventory management, allowing players to more clearly see which items they had in their inventory and to separate items by type (weapons & Armor, magic items, etc.) Players could view the stat improvements of their items by equipping items and watching the numbers floating next to their characters grow or shrink. The next installment in the series, The Elder Scrolls III: Morrowind (2002), again changed the look and feel of the inventory.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4BJNNhjChIefEwLf1jqc1wB1tehdQ79FF4apHXpEbqrQOisdPysU2FNIu8k62I3y88Fuwy30eUY35KWo_D_d5kane2z6On4b3D6PDTFoVFGpYTBiPUsAgsGf3_ZvnWluuF3AI4jGLpU/s1600/morrowind_inventory.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="295" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB4BJNNhjChIefEwLf1jqc1wB1tehdQ79FF4apHXpEbqrQOisdPysU2FNIu8k62I3y88Fuwy30eUY35KWo_D_d5kane2z6On4b3D6PDTFoVFGpYTBiPUsAgsGf3_ZvnWluuF3AI4jGLpU/s400/morrowind_inventory.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Morrowind inventory window, on top of the map</td></tr>
</tbody></table>
While Morrowind kept the full-body demonstration of a character's equipment, it removed the floating numbers and the necessity of equipping an item to view its bonuses. Instead, a player could hover her or his mouse over a item to view its stats before deciding whether to equip it. Morrowind also kept Daggerfall's addition of separating out item types (All, Weapons, Apparel, Magic, Misc.)<br />
<br />
Morrowind took a very different approach to how it displayed the inventory and other sets of information. Unlike its predecessors, which displayed maps, character sheets, etc. full-screen, Morrowind put all of its information sets in adjustable, windowed boxes. Players could see all of their information sets simultaneously if they so desired. Players could not, however, press a key to open only one of these windows - unless the player had toggled off certain windows, it was all or nothing.<br /><br />
Morrowind also changed the interaction feature significantly, shifting the action from <b>direct </b>(the player presses a button to set whether they're in talk or steal mode) to <b>contextual</b>. In the first few minutes, the player learns she or he can press Spacebar to open doors, talk to NPCs, and pick up items. Instead of requesting player input, Morrowind determined what type of interaction mode the player was in, and changed the effect of the Spacebar accordingly.<br />
<br />
The implementation of contextual buttons in Morrowind may not have stemmed from Bethesda's innovation, but instead from necessity and a changing market. The new millennium ushered in an age of console gaming, with the release of the Playstation 2 in 2000 and the XBox in 2001. Morrowind was the first Elder Scrolls game designed for consoles - and contextual, multi-purpose buttons were necessary for console games.<br />
<br />
One interesting part of Morrowind's UI design is the difference between the PC and console version.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix5zIwl_U-0ETDgh0a52rs_KGAhvpk0eK6ijOT_MbEXE0VInbQ0Ed5LTb8KK7nl4PGlY1Am42bWdu6bhgyPjWCv-2shMFqNW9Cb4KreeQd7x6QcJSBrOxJqWmVjUV5Nih3NxG8tdy4xrU/s1600/xboxvcomputer.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix5zIwl_U-0ETDgh0a52rs_KGAhvpk0eK6ijOT_MbEXE0VInbQ0Ed5LTb8KK7nl4PGlY1Am42bWdu6bhgyPjWCv-2shMFqNW9Cb4KreeQd7x6QcJSBrOxJqWmVjUV5Nih3NxG8tdy4xrU/s640/xboxvcomputer.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">PC, left; XBox, right</td></tr>
</tbody></table>
<br />
The designs are so different, they almost look like different games. The PC's design was simply not practical on the console, and thus a new design was made. Players could open a specific menu and then toggle between menus with the left and right triggers.<br />
<br />
Morrowind's successor, The Elder Scrolls IV: Oblivion (2006), was clearly designed with a console-first perspective.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEdtvfSci0DcHn8CRyuR3sXYmVZWI_ybu8MA4_1Bf2Ogf5C1DZFBDthXP4xgxHPEE7zw_Dc0lpCsW6QoknbrxmrmwBmF74WRy8Orcs5qMis_rigWrnMiqrepG_89GnMCLWolrSXfNmV8Y/s1600/20161218123808_1.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEdtvfSci0DcHn8CRyuR3sXYmVZWI_ybu8MA4_1Bf2Ogf5C1DZFBDthXP4xgxHPEE7zw_Dc0lpCsW6QoknbrxmrmwBmF74WRy8Orcs5qMis_rigWrnMiqrepG_89GnMCLWolrSXfNmV8Y/s400/20161218123808_1.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Oblivion Inventory Example</td></tr>
</tbody></table>
Oblivion condensed information sets, removing the player's ability to change window sizes and pin information to the screen. Instead, players could access information all in one panel (the "Journal") if they pressed Tab.<br />
<br />
The Journal's design - tabs with sub-tabs - lent itself to controller navigation. Console-based players could use the left and right triggers to access the main navigation (resources, items, spells, map), and left stick to navigate the sub-tabs.<br />
<br />
Some* PC gamers were frustrated by the change and console-focused design. In Morrowind, their information was one click away - and now they had to navigate multiple menus. Oblivion also had few keybindings for PC menu navigation. While there were technically keybindings to main Journal sections (F1 for character, F2 for items... etc.), there were no bindings available for Journal sub-sections. <i>(*Well, at least one. I found a <a href="https://sites.google.com/site/damicat/whyoblivionsucks">rant about Morrowind vs. Oblivion</a> I found interesting.)</i><br />
<br />
Oblivion made other changes to the UI as well. The game revived and adapted Arena's item list format into a sortable table and displayed important item information in columns (which previously could only be viewed by hovering the mouse over an item). Placing items in a table format better allowed players to view and compare objects in their inventory.<br />
<br />
The Elder Scrolls V: Skyrim (2011) returned fully to lists for its inventory management, much to the chagrin of PC gamers. Skyrim's modding community came to the rescue and created SkyUI, a PC-friendly UI. SkyUI retained Oblivion's sortable table format.<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtyFsSjlRWOekrI-F34nlf9jr7pp67hD7qF20vqQb-2JEVPJoynx5szERGMpS2D0notZ-jFc10o3hyKo__gaadgntkS0PYxtkpI9ATnn61UVXxyFJdEVvDLJPc4fFM6xiV4YdImzLBsRw/s1600/Skyrim_inventory.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtyFsSjlRWOekrI-F34nlf9jr7pp67hD7qF20vqQb-2JEVPJoynx5szERGMpS2D0notZ-jFc10o3hyKo__gaadgntkS0PYxtkpI9ATnn61UVXxyFJdEVvDLJPc4fFM6xiV4YdImzLBsRw/s640/Skyrim_inventory.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Console version left, PC version right</td></tr>
</tbody></table>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Skyrim also had logical keybindings for PC gamers: M for map, J for Journal, I for Inventory, versus having players press the function keys. Like in the PC version of Morrowind, players could again access menus separated from the main journal. The PC version of The Elder Scrolls Online (2014) took an approach similar to the SkyUI setup and also increased the number of keybindings a player can use to access information.<br />
<br />
In summary, The Elder Scrolls has aged well over 22 years. It has kept true to its action-adventure spirit, and has kept key elements of the HUD in each design. Every release of The Elder Scrolls has shown a player's health/mana/stamina and some navigation method (compass or mini-map) as the basic HUD. Check out how the HUD has evolved over time.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjn9qrVxBZWblhfzuf-dS6FUVmMvbJzfpT7MzMpwS5J39Xkw9Tpo5ya3P6ynqQGfdfFz984kbTL3wlH_5S_B7cCUrIfrQR1uUQA5Pbxgi0Gn4FSWvILO73xq7awWTuWr4B6IW6JDaquks/s1600/Elder-Scrolls-Arena-et-Daggerfall.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjn9qrVxBZWblhfzuf-dS6FUVmMvbJzfpT7MzMpwS5J39Xkw9Tpo5ya3P6ynqQGfdfFz984kbTL3wlH_5S_B7cCUrIfrQR1uUQA5Pbxgi0Gn4FSWvILO73xq7awWTuWr4B6IW6JDaquks/s640/Elder-Scrolls-Arena-et-Daggerfall.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The Elder Scrolls Arena (1994), left; The Elder Scrolls II: Daggerfall (1996), right</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXSo9ngrVGIqpWUrq3lCLhgfx4OZTh7zZ5ixmB1_G5QNx_GisP7_NeFpVyIwk3Hk2jt9yS9rDpKnq19j4PUyHd-5SZgwaDCLmWC-8BEoHnnOyvNUJzZYEPDdHgN99kcykj8A84ZGiz1Io/s1600/morrowindvoblivion.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="226" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXSo9ngrVGIqpWUrq3lCLhgfx4OZTh7zZ5ixmB1_G5QNx_GisP7_NeFpVyIwk3Hk2jt9yS9rDpKnq19j4PUyHd-5SZgwaDCLmWC-8BEoHnnOyvNUJzZYEPDdHgN99kcykj8A84ZGiz1Io/s640/morrowindvoblivion.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The Elder Scrolls III: Morrowind (2002), left; The Elder Scrolls IV: Oblivion (2006), right</td></tr>
</tbody></table>
<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOaQNw3-RAlunvEHyITdgbfes2gYf9N-60h_HG6LIdm8q_5MMX9dEOUbi2zfMaG7vzsAD9JKKbh1YaNBg1nqZKZ5_F2zUi9jfa826L4HJFTmmkYrZMpxVy1RAWJg-vSI-tifTdcS2CWhk/s1600/skyrim-eso.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOaQNw3-RAlunvEHyITdgbfes2gYf9N-60h_HG6LIdm8q_5MMX9dEOUbi2zfMaG7vzsAD9JKKbh1YaNBg1nqZKZ5_F2zUi9jfa826L4HJFTmmkYrZMpxVy1RAWJg-vSI-tifTdcS2CWhk/s640/skyrim-eso.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The Elder Scrolls V: Skyrim (2011), left; The Elder Scrolls Online (2014), right</td></tr>
</tbody></table>
<br />
With rumors swirling of The Elder Scrolls VI in the next few years, we'll see what kind of UI the future holds.<br />
<br />
__________<br />
<br />
Thanks for reading! That was a doozy of a post to write, but it was fun to go back in time and see how interfaces have changed over time, and to think about what the design decisions might've been. I was especially surprised to see the stark difference between the PC Morrowind and XBox Morrowind. I also chose not go into detail for ESO or to review Battlespire or Redguard just to keep it brief. Well, relatively brief.<br />
<br />
Now if you excuse me, I need to go kill some dragons. I'll see you in the New Year!Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-40427792557029081102016-11-27T08:56:00.002-05:002016-11-27T08:56:45.714-05:00Usability & Car Accidents: Thoughts After a Fender BenderAnd now for a break from our scheduled programming about video games, about something completely different: car accidents. Over the Thanksgiving holiday weekend, my boyfriend and I got into a car accident halfway through our 8 hour drive from Western New York. It was a minor fender bender, where our front bumper swung open like a door and our left headlight got smashed, and their car got a small dent. No one was hurt, and the other car drove away from the accident fine. We coincidentally had the accident right in front of an auto body shop, and the super-nice mechanics shuffled around their full garage to accommodate us, inspected the damage, and implemented some quick-fixes (zip-tying our bumper back on and replacing our headlight and turn signal). We then drove four more hours home in a very unhappy car.<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGmWyFVNdVMQ2P7PVSESTxk41PczF7uBEoOOG_Trc7bweBbRjerSISWGBTdc9fpdi1_-L3u7RWo43APFvzCNykgcslMsU821ro8C5xBmClwyin8An9omDvqjNcyWNbNXYIRJ6VQ3lDKT0/s1600/sad_car.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGmWyFVNdVMQ2P7PVSESTxk41PczF7uBEoOOG_Trc7bweBbRjerSISWGBTdc9fpdi1_-L3u7RWo43APFvzCNykgcslMsU821ro8C5xBmClwyin8An9omDvqjNcyWNbNXYIRJ6VQ3lDKT0/s640/sad_car.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The aftermath on our car. Not too bad.</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
This post is about part of the experience post-accident. Having never been in an accident before, I wasn't entirely sure what to do, besides call the state police and exchange insurance information with the other driver (although they left before I could get a cell phone number). So I did what any Millennial would do and Google "what to do after a car accident." One of the first things that comes up is call one's car insurance company. </div>
<div>
<br /></div>
<div>
So I call the 'claims' number on our insurance card (somehow we hadn't received one for 2016, so this one was from 2015)... and I get a message roughly saying "hey answer this survey to enter a drawing to win a free cruise to the Bahamas!" There was no way to <i>skip</i> the survey from the phone options, so I took the survey. The chipper automatic voice then told me I had won, and should press 1 to accept the trip to the Bahamas. Uninterested, confused, and still shaken from the crash, I pressed 2 thinking that would be the 'no, actually bring me to the claims service.' The phone then hung up. I double checked the number on the card, so either the card's number was outdated or printed wrong, or there's <i>actually </i>a survey at the beginning of the insurance company's claim line. <b>If it is actually the case that a survey precedes the claims process on this insurance company's claim line, that is horrendous usability. </b></div>
<div>
<br /></div>
<div>
Since the claims number evidently wasn't working, or had bad usability or whatever, I called the customer service line instead. Then I had to patiently wait to listen to all the options, figure out which ones to select, and then wait for someone to answer.</div>
<div>
<br /></div>
<div>
I'm curious whether car insurance companies have done testing to figure out "hmm, which questions do our customers have right after getting into a car accident?" It's entirely possible that they've done such testing for their website or mobile apps - but I'm not going to download a mobile app over 4G just to see if they have a FAQ to see "what to do and what information to get after an accident." At that point, my boyfriend and I were still pretty shaken up. </div>
<div>
<br /></div>
<div>
And it makes me wonder how much testing has gone into automated phone systems, where you can either state your answer or use the key pad to select a choice. How do the companies come up with the list of options? I just wish there was a line on my insurance card that said "this is the line to call directly after calling the state police/an accident." When I'm upset, I have less cognitive processing power to figure out what "claims" means and what information I will be expected to provide.</div>
<div>
<br /></div>
<div>
Working in the finance industry, the most I've come into contact with designing for human sadness is determining how to delicately design for customers who have recently lost a loved one, and now must transfer assets. Grief is an entirely different emotion than shock, and I'm curious how designers account for creating systems and designs that are easy enough to understand and process even when a user is overwhelmed.</div>
<div>
<br /></div>
<div>
I'm sure there's been lots of design of emergency pamphlets (like in airplanes) and instructions for medical equipment (talking defibrillators) - but what about for situations that are further away from the institutions (in one's personal car - there's no safety officials around to guide you)?</div>
<div>
<br /></div>
<div>
/sigh</div>
<div>
<br /></div>
<div>
Anyways, I think that's the end of my rant for now. I'll resume my regularly scheduled programming next month with more video game usability reviews. If you know any games I should review, please let me know!</div>
Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com1tag:blogger.com,1999:blog-2656111516959276084.post-1227651399063898672016-10-31T06:00:00.000-04:002016-10-31T21:24:34.098-04:00Tips and Tutorials: The Usability of In-Game Guidance<div class="separator" style="clear: both; text-align: left;">
From single-key side-scrollers like <a href="http://adamatomic.com/canabalt/">Canabalt</a> to flight simulators, video games are complex. As such, over time, game designers have created ways to teach users how to control and play their games. Some of these methods require extensive effort on the player's part, like reading a manual, wiki, or having to Google answers undefined keywords. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEEGCEloChHzDboSOUdoASm6SoSRisdXXETI-ss3VTv-Ify5BLl-Ieba2l_IMqaLyw0an8rME7cWj3APNo2qQKyPjtw0SgvubHqj6Zkx_IX5mj_V_kG5O40GjiR3FCv7J3mbnk3iVodcM/s1600/zeldamanual.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="427" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEEGCEloChHzDboSOUdoASm6SoSRisdXXETI-ss3VTv-Ify5BLl-Ieba2l_IMqaLyw0an8rME7cWj3APNo2qQKyPjtw0SgvubHqj6Zkx_IX5mj_V_kG5O40GjiR3FCv7J3mbnk3iVodcM/s640/zeldamanual.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Boo. Hiss. (I dislike reading manuals for games)</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div style="text-align: left;">
Other games have tutorials so unobtrusive and integrated that they hardly feel like tutorials at all. Tutorials come in all shapes and sizes and range from being short and subtle to mind-numbingly long and ham-handed. Unless you're a very selective or lucky gamer, you've probably run into at least one frustrating tutorial.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
To me, it seems that many players have developed an aversion to tutorials. And some developers, seeing this trend, have either cut their tutorials out completely or skipped steps to shorten the tutorial length. As a usability-specialist, this trend concerns me.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
In this blog post, I'll give examples of game tutorials that I found to be particularly good or bad, and explain how learn-ability and usability go hand-in-hand.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b><span style="font-size: large;">Tutorials & Education</span></b></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
In my view, the main goal of a tutorial is to answer these questions:</div>
<div style="text-align: left;">
<ol>
<li>What should I be doing?</li>
<li>How do I do it?</li>
<li>Why should I do it?</li>
<li>When should I do it?</li>
</ol>
</div>
<div style="text-align: left;">
As <a href="http://game-wisdom.com/critical/teaching-game-mechanics">others</a> have discussed before me, these questions ought to be answered for each important game element, and the tutorial structured in such a way that concepts build upon each other and information is presented as the player needs it. There are a <a href="http://www.gamasutra.com/blogs/JoshBycer/20161011/283049/How_to_Improve_Education_via_Game_Tutorials.php">variety of methods</a> that game designers can use to teach their game, which I won't cover here.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
A game that does <i>not</i> answer all of those four questions, or teach important concepts progressively, can be incredibly difficult to learn, let alone master. One game that I've played recently that does not make learning easy is Stellaris.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<b><span style="font-size: large;">You're On Your Own, Kid</span></b></div>
<div style="text-align: left;">
Stellaris, by Paradox Interactive, is a 4X strategy game which revolves around space exploration, warfare, and diplomacy. As the architect of a grand space empire, there's a lot to learn - how to build ships, research technologies, settle new planets, manage solar systems, and more. It's a shame that Stellaris only teaches you a fraction of what you need to know. </div>
<div style="text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikmwci8KnkOKvPnxYIjyhTTXZoM2OM_FZdyNFMAbsBJn74-lLAKu-wg4WZ7AlvtVwLgWUiYoJfs-CfONfw_zaWlKPbMnXS2fkhsSj44dbodJ5LnbCxmLxPNgdzyuuz54m94i-3ZEvg22E/s1600/20160813200457_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikmwci8KnkOKvPnxYIjyhTTXZoM2OM_FZdyNFMAbsBJn74-lLAKu-wg4WZ7AlvtVwLgWUiYoJfs-CfONfw_zaWlKPbMnXS2fkhsSj44dbodJ5LnbCxmLxPNgdzyuuz54m94i-3ZEvg22E/s640/20160813200457_1.jpg" width="640" /></a></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Although Stellaris has a small tutorial-bot that acts as an adviser in the early game, the tutorial content isn't even <i>close </i>to comprehensive enough to fully learn the game. The main issues with Stellaris' tutorial content are that it doesn't teach information progressively and does not answer the four main questions: what should I be doing, how do I do it, why should I do it, and when should I do it.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Take for example the first tutorial box that Stellaris provides:</div>
<div style="text-align: left;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Egc1Qbp_5EVW7yl0r4zLPc_yh_RFtW2Q9HInYpac2NOpreS46NWRV-XeRDxJDAKlskLS4P50v4zpjX6mDV2qUq_rH3uDCw2dT3cEuCrEWUqe-d_PVcJVMnvO6_zoepKh7O3xl_BLBDs/s1600/20161023115726_1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="302" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Egc1Qbp_5EVW7yl0r4zLPc_yh_RFtW2Q9HInYpac2NOpreS46NWRV-XeRDxJDAKlskLS4P50v4zpjX6mDV2qUq_rH3uDCw2dT3cEuCrEWUqe-d_PVcJVMnvO6_zoepKh7O3xl_BLBDs/s400/20161023115726_1.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Maybe I updated my keybindings, but F5 doesn't show the Situation Log - F3 does.</td></tr>
</tbody></table>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Once I pressed F5, I saw the following screen <i>(which is NOT the Situation Log! But I didn't know that at the time)</i>. And since I wasn't directed to the Situation Log, the bot's next instructions about planets and sectors made no sense to me.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeFp44FjlRJJ2o7sObRUSHLbJN8qXdH79ToX7VoVLIxRl9rWLTbw5MmZgHXByYdr8DtY6F8ncew8szlKwEwBUIxOFGPTOjZmLhwHf4oSy_qjlpzHqAGS0KJl9Tiw6EOmwvRogj4ALOz4k/s1600/20161023115733_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeFp44FjlRJJ2o7sObRUSHLbJN8qXdH79ToX7VoVLIxRl9rWLTbw5MmZgHXByYdr8DtY6F8ncew8szlKwEwBUIxOFGPTOjZmLhwHf4oSy_qjlpzHqAGS0KJl9Tiw6EOmwvRogj4ALOz4k/s640/20161023115733_1.jpg" width="640" /></a></div>
</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
The first time I encountered this disconnect, I remember being very confused: had I clicked the wrong button? Is this the mission list? Because the instruction went to the incorrect place, the tutorial flow was presented to me in the wrong order, disrupting my learning. But let's say that the tutorial had currently instructed me to press F3 instead of F5. I would've seen this instead.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCR6mZmxC2hUknEhSsOoY6g45-Oy6Byq74n8Q-S5zdLB8pXlhBAZz9BUrE1X9OtdocPNSddtoBnto7S0c8n9UF_vboCORoLOiPKdLCXQpromij5siY7IRsAXqp8s9nF_3BpK6RosZvs9Q/s1600/20161030113111_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCR6mZmxC2hUknEhSsOoY6g45-Oy6Byq74n8Q-S5zdLB8pXlhBAZz9BUrE1X9OtdocPNSddtoBnto7S0c8n9UF_vboCORoLOiPKdLCXQpromij5siY7IRsAXqp8s9nF_3BpK6RosZvs9Q/s640/20161030113111_1.jpg" width="640" /></a></div>
<br />
<br />
<br />
If the player successfully navigates to the Situation Log, s/he will learn the What, How, and some of the Why for Science Ships, but Stellaris doesn't give much direction from there. The tutorial tells the player s/he can select the vessel either by clicking on the ship itself or selecting it in the Outliner <i>(which isn't helpful information at this time, because while the Tutorial Bot is active, the Outliner panel is automatically hidden.) </i>If a player selects a Science Ship as the tutorial suggests, s/he will learn a little more about what Science Ships do... but after that, direct guidance is rare<i> (I believe there's one much later with sectors).</i><br />
<br />
The only way a player learns about the game after the Science Ship lesson is to explore what messages come up when s/he clicks on a unit or a menu. And while, sure, messages like the following Leaders tip are informative, they aren't <i>helpful </i>or <i>educational</i>.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMnALJ68ga5oafCQXPBHwBv1QgPq2PXWp5P8zi3jW9J6iSD_iI32oKbxtvyiE0u7QphYPNhR0iJNhXUXJnUl0n3FzzJ7ox7hjnCKVxlVta53xIU9K_jWbp_Vf2pxPEzvXuvXB2WnT7e_A/s1600/leader_tab.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMnALJ68ga5oafCQXPBHwBv1QgPq2PXWp5P8zi3jW9J6iSD_iI32oKbxtvyiE0u7QphYPNhR0iJNhXUXJnUl0n3FzzJ7ox7hjnCKVxlVta53xIU9K_jWbp_Vf2pxPEzvXuvXB2WnT7e_A/s400/leader_tab.jpg" width="400" /></a></div>
<br />
The above tip answers none of the vital tutorial questions: what should I be doing, how do I do it, why should I do it, and when should I do it. (<i>If you're curious, the answers are 1) Assigning leaders to various posts to make your empire more efficient. Each leader gives some kind of bonus or discount; 2) </i><i> It makes your society more efficient and has other various bonuses; 3) </i><i>use this panel and click the 'Recruit' button; 4) Whenever you need a bonus and can spare the Influence to get a Leader.) </i><br />
<i><br /></i>
By not encouraging players to click on menus in a certain order and experience the tutorial in a set and organized flow, the tutorial makes the learning experience jarring and incomplete. This is deeply frustrating, because the player may be <i>hours </i>into a game when s/he learns about the ship builder and why it's important and only after her/his fleets have been blasted to smithereens by enemy fleets<i> (or in my case, I didn't realize that I needed a mix of large and small ships in a fleet, I thought I could just have beastly battleships. Oh well.)</i> <br />
<br />
Perhaps in an effort to not make players to feel hand-held or babysat, Paradox decided to allow players to move through tutorial tips in a free-form manner - which is not conducive to progressive learning. Stellaris' tutorial flow is like a poorly-structured math class -- it teaches multiplication before addition. Sure, you're still learning basic math, but since addition is the foundation of multiplication, the student can't actually learn what s/he needs to be successful in mathematics.<br />
<br />
Stellaris is a fun game, once you get the hang of it, but Paradox Interactive doesn't make the game easy to learn. It's 'Full Tutorial' which I've described here isn't a true tutorial, in my mind - it's a series of fragmented tool tips. And it doesn't work for such a complicated game.<br />
<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<b><span style="font-size: large;">Here, Let Me Help You</span></b><br />
<br />
Conversely, there's Offworld Trading Company (can you tell I like space-themed games?) which has a very good set of tutorials for players. They separate the tutorials into two sections: Learn to Play and Practice Games.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOrDjbrz_ARuUkh6UnBr-5K1UX5aiE9Qh2cPbRBu48dBjj1e2DFqp56LMwoODij-W13TO3FMa4JoPYcUlElBCZb8bXuA0RYs1h7WJJXkZyq8WiN9lLTzagUkwHButO8GqeSvLfXB4T1OQ/s1600/20161030123752_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOrDjbrz_ARuUkh6UnBr-5K1UX5aiE9Qh2cPbRBu48dBjj1e2DFqp56LMwoODij-W13TO3FMa4JoPYcUlElBCZb8bXuA0RYs1h7WJJXkZyq8WiN9lLTzagUkwHButO8GqeSvLfXB4T1OQ/s640/20161030123752_1.jpg" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
The Learn to Play games teach concepts progressively, with each tutorial building upon the basics established in Business Building Seminar. The first tutorial teaches you the backbone of building a business: gathering resources for production. It starts off with describing what the cubes represent and look like, and then steadily building upon that knowledge.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo_uE-LADWqgAb8dentFlyg_-yxDNPFbLUAnMPs95x1zLamXRwOp8yhNJkoPYi9X4jf5xDQ9Dv9Uwkov_VV2sKy_pOEMA7xqKoqmT96n8hfAhCoKXF2-CfTdgcu44Ulkjc7XLFDCvY-II/s1600/20161030124648_1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo_uE-LADWqgAb8dentFlyg_-yxDNPFbLUAnMPs95x1zLamXRwOp8yhNJkoPYi9X4jf5xDQ9Dv9Uwkov_VV2sKy_pOEMA7xqKoqmT96n8hfAhCoKXF2-CfTdgcu44Ulkjc7XLFDCvY-II/s640/20161030124648_1.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">One cool thing that this tutorial does is that the 'continue' buttons are important questions that players might not know to ask, but will need answered. That's a clever way of teaching.</td></tr>
</tbody></table>
After the Tutorial Bot teaches the player what the cubes are, it gives the player an objective of building mines and reveals and illuminates unlocked buildings. As the tutorial progresses, the left bar populates more as the player learns what each building looks like, needs to function, and does for the player. <br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNBPuPe2dGi9iOw6OMXg8uxEF9JmNorUtl6VRQmQ45ayQY-XlkOhiPMvOifpSaqGiIMqmmdc-_VWMkmM73TrwX0j5y_l3IufYa__zslBFBzSVfuguKiloEj86LbxSmLT2ISsr5Qj4JNFE/s1600/20161030124657_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNBPuPe2dGi9iOw6OMXg8uxEF9JmNorUtl6VRQmQ45ayQY-XlkOhiPMvOifpSaqGiIMqmmdc-_VWMkmM73TrwX0j5y_l3IufYa__zslBFBzSVfuguKiloEj86LbxSmLT2ISsr5Qj4JNFE/s640/20161030124657_1.jpg" width="640" /></a></div>
<br />
<br />
Although some player may balk at the concept of such a structured tutorial, I love it. The game explain all the information the player needs to know in the ideal order, explaining the what, how, why, and when in an easy-to-learn way. If you're a developer and want to experience a well-done tutorial, I recommend picking up Offworld Trading Company. It's a fun game and a good example.<br />
<br />
<b><span style="font-size: large;">Deconstructing Rules to Chunks</span></b><br />
<br />
Now, I'm certainly no expert in learning, but one thing for game designers to consider in their tutorials (because really, you need <i>something, </i>even if it's just one line of text saying 'press X to jump) is how they should structure their lesson. Think of it again as that wonky math-class: you want to teach addition before multiplication.<br />
<br />
Before you build a tutorial, you need to be able to answer this question: what game element is the primary foundation of my game? You can think of it like a tech tree: what must the player learn to be able to win the game?<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrJXdC1k2hMChMb5uYgjh_DpBpHeMe8khNrdcki8FiKLUAYSg5fI0fS_Xu_qIRAzaIlvh4mUKyi3l7MfPErzp8r0QlP1Ra0mQM7aLA642-GIQcdC9unMeWBuDw4Cma9P11HZkmEYIa_TY/s1600/Civ_Tree_2.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrJXdC1k2hMChMb5uYgjh_DpBpHeMe8khNrdcki8FiKLUAYSg5fI0fS_Xu_qIRAzaIlvh4mUKyi3l7MfPErzp8r0QlP1Ra0mQM7aLA642-GIQcdC9unMeWBuDw4Cma9P11HZkmEYIa_TY/s1600/Civ_Tree_2.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Example of a tech tree (techincally civics, but close enough) from Civ VI</td></tr>
</tbody></table>
<br />
The creators of Offworld Trading Company determined that the most important element in their game is identifying resources. Once the player can identify resources, s/he can learn how to build mines to collect those resources. Once the player knows how to build mines, s/he can learn how to generate electricity and other resources to keep those mining stations running. And so forth.<br />
<br />
When building your tutorial, it may be helpful to think of it in that way - if you were to make a tech tree where each element is something the player has to learn, what's the order and structure of the tech tree? It maybe a difficult task to undertake, but a helpful one.<br />
<br />
<b><span style="font-size: large;">Final Thoughts</span></b><br />
<br />
All in all, it's tricky to make a tutorial that pleases everyone, as every individual learns differently. But it's very important that you <i>try. </i>As you construct your tutorial, ask feedback from family and friends along the way about whether the structure makes sense, and if they have questions. It'll go a long way.<br />
<br />
_________<br />
<br />
Sorry for the long wait in between posts! I've been super busy recently, and it's really only been possible to write once a month. Plus, this specific blog post took me two Sundays to write since I kept getting interrupted. Ah, well. Is life. Thanks for reading!Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com1tag:blogger.com,1999:blog-2656111516959276084.post-5240882790728461212016-09-26T06:00:00.000-04:002016-09-26T06:00:14.781-04:00We Happy Few (Alpha Gameplay) Usability Review<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCaCvf25r4pRToltgQmdSEl_aYc2fU2PmjDoD5EDwz7u6zZroAiHJYJ_zB6jaHg8av7fEQaBiuRFVZy15wjB2ch_re1SodBhIS3xJ6zOmyzEXC34_MQ2-DQMCDsYrKa7_EhI6qyBT17Zs/s1600/wehappyfew.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCaCvf25r4pRToltgQmdSEl_aYc2fU2PmjDoD5EDwz7u6zZroAiHJYJ_zB6jaHg8av7fEQaBiuRFVZy15wjB2ch_re1SodBhIS3xJ6zOmyzEXC34_MQ2-DQMCDsYrKa7_EhI6qyBT17Zs/s640/wehappyfew.jpg" width="640" /></a></div>
<br />
<br />
We Happy Few, by Compulsion Games, is a rouge-like, survival-horror game set in a retro-futuristic and dystopian world. The creators cite <i>Brazil </i>(1985) and "medication nation" culture, where every conceivable problem can be solved with a pill, as sources of inspiration.<br />
<br />
The alpha is well-polished and enjoyable, with room for improvement in how it explains saving.<br />
<span style="font-size: large;"><b><br /></b></span>
<span style="font-size: large;"><b>Saving Options</b></span><br />
One of the first things I do in every game is edit the settings (usually the mouse sensitivity is way too high for my tastes).<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqf-L3F6hFdJfyoRUamcX4drhs9ktKM67-ZPeWIVpRCnNUtwpfFpjh7TAr1Csk1j61dCCuWqNcPWrNQl6N9D7emr0J-CNOTLDoLvzZ5yv2D-tWNgWRnb13xOtim09maB7WIGMjfLAXYsc/s1600/20160925091352_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqf-L3F6hFdJfyoRUamcX4drhs9ktKM67-ZPeWIVpRCnNUtwpfFpjh7TAr1Csk1j61dCCuWqNcPWrNQl6N9D7emr0J-CNOTLDoLvzZ5yv2D-tWNgWRnb13xOtim09maB7WIGMjfLAXYsc/s640/20160925091352_1.jpg" width="640" /></a></div>
<br />
<br />
Here, I decreased my mouse sensitivity, and looked for the 'Accept' button like I had seen in the initial game setup (when it asked me whether I wanted permadeath on). I couldn't find one, so I pressed 'Enter.' When I pressed Enter, the Mouse Smoothing toggle switched. So I knew it wasn't that. Beyond pressing Enter, I couldn't determine how to 'Accept,' so I pressed 'Back.' No luck there, so I pressed 'Resume.'<br />
<br />
After a few rounds of settings changes, and trying to figure out how or if the game was indicating settings saves, I determined that the way WHF displays both settings saves and in-game progress saves is by flashing an icon on the screen, like below.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8lIX0lSQLausiEeagXY6Buat6H3s4VXksTMS0VdPQLyyNY_QnxaJTJSuon9rAzd76NaXo5INOjbxK68dwBRxJzg80MZcY2pPwAblMy7Quphb_NACz5YYldGiyNhYEw5u-eLnpv0-EHHs/s1600/1b8fdd.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8lIX0lSQLausiEeagXY6Buat6H3s4VXksTMS0VdPQLyyNY_QnxaJTJSuon9rAzd76NaXo5INOjbxK68dwBRxJzg80MZcY2pPwAblMy7Quphb_NACz5YYldGiyNhYEw5u-eLnpv0-EHHs/s640/1b8fdd.gif" width="640" /></a></div>
<br />
Although I had seen the icon appear earlier, and have been trained that 'blinking/animated icon = progress saving indicator,' I did not, and do not, associate a blinking saving icon with my settings changes. To me, a blinking icon means that the game thinks it's time to save my progress because I've reached some kind of checkpoint, or I just pressed a save keybinding. A blinking icon is a subtle message that says, "Hey, you've made some progress, good job you!" I do not associate saving settings with this icon because saving settings does not indicate progress, it indicates preference.<br />
<br />
<b>Recommendations</b><br />
<br />
<ul>
<li>It's pretty clear that the menu hasn't really been designed yet (which makes sense since it's just an alpha), but I very strongly recommend that one of the first changes you make for the menu is adding some kind of button that says 'Accept.' Otherwise changing one's settings is a frustrating experience.</li>
<li>Once you do add an Accept, consider allowing 'Enter' to be a way to accept a change.</li>
<li>A question - if I go into a menu, make some changes, and then press Esc a few times to exit the menus, did my settings save successfully? I would think that they wouldn't, but I'm not sure (because there's no Accept button).</li>
</ul>
<br />
<b><span style="font-size: large;">Comments and Questions</span></b><br />
<b><br /></b>
For the most part (the savings thing really being the issue), We Happy Few is fine from a usability standpoint (the benefit of having a User Researcher on staff. Hi, Morgan!). There are a few things that were big enough to catch my attention, but too small to write an entire section about. I'll compile those here.<br />
<br />
<u>Keybindings</u><br />
One of my first thoughts about the keybindings is "why do they have two default bindings for the crouch action?" For non-gamers, the Control key is often used in FPS for the crouch action -- and that worked in WHF. But in the very beginning, the player is encouraged to use 'C' to crouch. It's OK to have two keys do essentially the same thing (I did notice that Control is a temporary crouch, while it's held down, vs. 'C' is until it's pressed again), but it's a little strange to have duplication there.<br />
<br />
The other thing about using 'C' to crouch is that 'C' is often used in other games to look at one's Character page (which on the image below would be the first ( ? ) circular tab). Although the game encourages the player to press Tab to see the in-game menu, most typical bindings for this menu work. ('I' for inventory, 'M' for map, 'J' for journal. I was a bit surprised by 'B' for crafting, but I'm not sure what else it would've been.) Since those bread-and-butter bindings work, I'm surprised that 'C' is used for something other than looking at one's character.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjYK_FNVCCZwqp9GU8H1EUpADxafVJopEvQlcyyJ5NBNJiicunKKxg2adLpYjkGzRhWrVf8sDRluwqDi68bxxaEyAEdpe2rplhBuqpwm-20OLJ7FZUDn5fmIVh1ZYotc_4Z0Wkj4z9Qfo/s1600/20160925103140_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjYK_FNVCCZwqp9GU8H1EUpADxafVJopEvQlcyyJ5NBNJiicunKKxg2adLpYjkGzRhWrVf8sDRluwqDi68bxxaEyAEdpe2rplhBuqpwm-20OLJ7FZUDn5fmIVh1ZYotc_4Z0Wkj4z9Qfo/s640/20160925103140_1.jpg" width="640" /></a></div>
<br />
I'm also a bit torn about whether y'all should have some kind of hover text (or whatever) over the circular tabs to indicate what the shortcuts are for those pages- the design is currently very clean, but if We Happy Few is a player's first excursion into the gaming world, she or he may not know those common keybindings.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<u>Equipping Items</u><br />
<u><br /></u>
The first time I opened the inventory, I had absolutely <i>no clue </i>how to equip an item or get it to be in my quick-equip section. This might be due to the location of the explanation text - it's currently hidden in the corner, and unless your mouse is hovering over something, you don't see this explanation text. Honestly, I was confused enough about how to quick-equip that I attempted to click and drag something from my inventory to that box. Because I was confused, the item iconography confused me -- I thought that the gear icon on the 'Metal Bits' hover explanation could have been a settings gear that would let me quick equip or change some kind of setting. But of course, as I tried to move my mouse over, it would disappear, because it's not a settings gear. <b>I'd honestly recommend changing that gear icon to something else - it's commonly used as a settings icon, and even if that's not how it works here, it can be interpreted that way.</b><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVHpmL1cQ0limcROUCFFLKg82IazoUWG1GIsT7ITsQk4Keq9lI518JYTGTc3mUGnlFfTexVapkZy8foqOy9607PE-pkxTyGe0hramSi8CtzWYrJ44E1MOSFrv0UD7l16TbL8gWhWSThI/s1600/metal_bits.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="370" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVHpmL1cQ0limcROUCFFLKg82IazoUWG1GIsT7ITsQk4Keq9lI518JYTGTc3mUGnlFfTexVapkZy8foqOy9607PE-pkxTyGe0hramSi8CtzWYrJ44E1MOSFrv0UD7l16TbL8gWhWSThI/s640/metal_bits.jpg" width="640" /></a></div>
<br />
<u>Location of Saving Indicator</u><br />
<br />
It's weird that the flashing saving icon appears in the same location as the Date & Time - I didn't see it immediately in part because I think I didn't expect to see it in the same location as Date & Time. I'm also used to seeing it in the bottom-right, but maybe that's just what I'm used to.<br />
<br />
<u>Water Pumps</u><br />
<br />
When one is at a water pump, up to two messages can appear: 'Hold [ E ] to drink from Water Pump' or Hold [ V ] to Fill Container from Water Pump.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1bBGIvmNZq2b4i8LUGhNsn7xj2FmgoYyHq1piqBZDTCYzR54keSF83hVzb9-oxzdi53BrVymrUSGw8aPIMxlVAB99ko5nGFuroSk3ggRwe4Auo01OZjiu09WGZocsw3ixofXp6MGrMC0/s1600/20160925102259_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="354" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1bBGIvmNZq2b4i8LUGhNsn7xj2FmgoYyHq1piqBZDTCYzR54keSF83hVzb9-oxzdi53BrVymrUSGw8aPIMxlVAB99ko5nGFuroSk3ggRwe4Auo01OZjiu09WGZocsw3ixofXp6MGrMC0/s640/20160925102259_1.jpg" width="640" /></a></div>
<br />
The first time I encountered a Water Pump, I was a little confused, because I had forgotten that I had picked up a canteen, and because it said 'Hold [V] to Fill Container' and not 'Hold [V] to Fill Canteen' I wasn't sure why I was seeing this message. And at first when I pressed it, and no container appeared in my hands, I thought I had received the message in error (until I heard the sound effect of a container filling).<br />
<br />
One comment/critique I have here is that those sentences are quite verbose. The Flame in the Flood handles this well - when the player has a Jar and is at a Water Pump, she or he sees the prompt "[ E ] Fill Jar", and then the player holds down E until the little circular progress icon around the E shows that the Jar has finished filling. If the player does <i>not </i>have a Jar, the prompt is "[ E ] Drink." (I'm pretty sure. I'm not near a water pump right now in the game, so I can't confirm.) I feel like that's a more succinct and elegant solution.<br />
<br />
The Flame in the Flood also uses the 'Hold to Interact' method - but only points out that the player needs to hold down [ E ] in the first few minutes. After that, there's just a small progress indicator around the [ E ] button, rather than saying Hold every time. That's also a more elegant solution.<br />
<br />
<b><span style="font-size: large;">Final Thoughts</span></b><br />
<br />
Even though it's only in its alpha state right now, We Happy Few is a lot of fun and I highly recommend the game. It's wonderfully creepy and well-crafted.<br />
<br />
Thanks for reading!Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-59644459299604195192016-09-12T06:00:00.000-04:002016-09-12T06:00:00.197-04:00League of Legends (Tutorial) Usability Review<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJM4i2Z1zbsSfpYLhRTZRdubCgUeIgiBo2iEJUOHVMWVfsdYEG4XQ23rwlSPyt68wW6clxABVj0Tb5jl8BAny3RhvZeu-P4-mtnnsGH9K2cFEsjMyG5svb_O_NsPnhJQrl3oF8GC2WUJJN/s1600/league-of-legends-logo-wallpaper-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJM4i2Z1zbsSfpYLhRTZRdubCgUeIgiBo2iEJUOHVMWVfsdYEG4XQ23rwlSPyt68wW6clxABVj0Tb5jl8BAny3RhvZeu-P4-mtnnsGH9K2cFEsjMyG5svb_O_NsPnhJQrl3oF8GC2WUJJN/s640/league-of-legends-logo-wallpaper-2.jpg" width="640" /></a></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">League of
Legends, by Riot games, is a third-person MOBA using three games modes:
Summoner's Rift, Twisted Treeline, and Howling Abyss. There are two tutorials.
After the first tutorial, players can choose to do another tutorial-like
training. If they accept, players select one of three “champions” who each have
unique abilities. Teams consist of 5 players with the goal of destroying the
opposing team's nexus.</span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">With over </span><a href="http://www.riotgames.com/our-games"><span style="color: #1155cc; font-size: 12.0pt; line-height: 115%;">67 million</span></a><span style="font-size: 12.0pt; line-height: 115%;"> players every month, it is a </span><a href="http://igcritic.com/a-comparison-of-three-mobas/"><span style="color: #1155cc; font-size: 12.0pt; line-height: 115%;">top</span></a><span style="font-size: 12.0pt; line-height: 115%;"> game for any MOBA player. With such high playing
traffic, it is important to assess the usability of the game’s tutorial. Although
I have some previous experience with MOBAs (Heroes of the Storm), the steep
learning curve of League of Legends was slightly overwhelming. </span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">After
completing the tutorial for the game, I was brought to another tutorial level
as an introduction to “Summoner's Rift”. Unlike the first tutorial, which
teaches you the basic mechanics of the game, the second tutorial has you play
with 4 other bots against the AI. </span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">The primary
usability problems with the tutorials involves the character loadout screen and
item-buying mechanism. The first loadout screen has many voice/text
introductions to what everything on the screen does. Some of the information is
easily forgotten as it is not yet applicable, such as the “Runes” and
“Masteries” tab. </span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<br />
<div class="MsoNormal">
<b><span style="font-size: 12.0pt; line-height: 115%;">Character Loadout Screen </span></b><o:p></o:p></div>
<div class="MsoNormal">
<b><span style="font-size: 12.0pt; line-height: 115%;"><br /></span></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO_K-3bN5CFva0i-Tod0H1faFTSdV0CM56ALkyd_ETBDNXWsBmnOH_qsy9yLQjIOguq0c5Mu0koeykHISXuBAbKvKhZDPwDRM2tgT7DENXb9XQTGeH4NggS3mdb9eWP1zfJNFcL6n1wE0z/s1600/Selection+screen.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO_K-3bN5CFva0i-Tod0H1faFTSdV0CM56ALkyd_ETBDNXWsBmnOH_qsy9yLQjIOguq0c5Mu0koeykHISXuBAbKvKhZDPwDRM2tgT7DENXb9XQTGeH4NggS3mdb9eWP1zfJNFcL6n1wE0z/s320/Selection+screen.PNG" width="320" /></a></div>
<div class="MsoNormal">
<b><span style="font-size: 12.0pt; line-height: 115%;"><br /></span></b></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">After
accepting the battle training tutorial, I was brought to the above screen. By
the time I finished selecting my character and waiting to play, there had been
17 information boxes accompanied by voice instructions. </span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">This felt
slightly overwhelming, although it did help that I had to select “Continue” on
most boxed in order to progress, so I could take in most of the information at
my own pace. By the time I was ready to play, I felt only slightly less
confused than when I began. </span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">The issue of
the vague information about such items as “Runes” and “Masteries” combined with
trying to figure out the previous information regarding selecting spells made
it overwhelming. This is because selecting a spell prompts the instructions to
move forward before you can select two spells. </span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">Although
there are only two spells available for the first game, there is no intuitive
confirmation that tells the player they have selected the spells. I had been
waiting for something to tell me I had selected the spell I clicked on. Because
of this, I was stuck trying to ensure that I had selected two spells and
ignoring the information that the tutorial had moved on to. The images below
demonstrate this chain of action.</span><o:p></o:p></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWIudDNxbOO3_ZIaafRR2GR8xs88sq1VWo0lqhZq3vuk8osP97j65aLzEY9oh1H_hYrhWa4ZE69wBfZORs4voaf2oyv-kYDx7EEbtT5Gesv6gIeMWE1SKHppRbkQLfhax4POEa7X8lqhQZ/s1600/Spells.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWIudDNxbOO3_ZIaafRR2GR8xs88sq1VWo0lqhZq3vuk8osP97j65aLzEY9oh1H_hYrhWa4ZE69wBfZORs4voaf2oyv-kYDx7EEbtT5Gesv6gIeMWE1SKHppRbkQLfhax4POEa7X8lqhQZ/s320/Spells.PNG" width="320" /></a></div>
<div class="MsoNormal" style="text-align: center;">
<span style="font-size: 12.0pt; line-height: 115%;">Spell
Explanation</span></div>
<div class="MsoNormal" style="text-align: center;">
<span style="font-family: "nova mono"; font-size: 12.0pt; line-height: 115%;">↓</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7AbA1PhPCow80MEY2D0vVjSHLpPg7Bh3dysSvykx5g1grMXgEAapRmjFCA-CLV4TKT-2JZ4L66qIAzr-fgsSBm9RHBjdfiJh2mHab_rE8tzelfVxvkk2YTeRPVBPRtfCrXN1ddXPSPLZw/s1600/spells+2.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7AbA1PhPCow80MEY2D0vVjSHLpPg7Bh3dysSvykx5g1grMXgEAapRmjFCA-CLV4TKT-2JZ4L66qIAzr-fgsSBm9RHBjdfiJh2mHab_rE8tzelfVxvkk2YTeRPVBPRtfCrXN1ddXPSPLZw/s320/spells+2.PNG" width="320" /></a></div>
<div class="MsoNormal" style="text-align: center;">
<span style="font-size: 12.0pt; line-height: 115%;">Select Spell</span><o:p></o:p></div>
<div class="MsoNormal" style="text-align: center;">
<span style="font-family: "nova mono"; font-size: 12.0pt; line-height: 115%;">↓</span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM9pbNc2ycDrCSdmQjf5Bi2w89YpEHe8N_lOGV33pYAY-FlB_rIQhe2x66oDnZmFahADtFAO2MHn60Ut5F8AXIkgyQAclVl88qEBAIkE6JPtRbTDVOIU9D2uVwBahRJzvifix6iGX3AyFB/s1600/spell+3.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM9pbNc2ycDrCSdmQjf5Bi2w89YpEHe8N_lOGV33pYAY-FlB_rIQhe2x66oDnZmFahADtFAO2MHn60Ut5F8AXIkgyQAclVl88qEBAIkE6JPtRbTDVOIU9D2uVwBahRJzvifix6iGX3AyFB/s320/spell+3.PNG" width="320" /></a></div>
<div style="text-align: center;">
<span style="font-size: 12pt; line-height: 115%;">Selecting
first spell</span></div>
<div style="text-align: center;">
<span style="font-family: "nova mono"; font-size: 12.0pt; line-height: 115%;">↓</span></div>
<div class="MsoNormal">
<o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif57vvHngLCw4vWkRjTKiBDFal8YGapapJCXkraUK9PTKRlkQru7s7L2fXUzX-vHSVFCwZCdKmxkGuBMrVSKllbwsCdgoPTbde7gGXIjNDCGm_ccENtGlVcO827mW3bdup4MbsgFU1-5bP/s1600/spells+5.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif57vvHngLCw4vWkRjTKiBDFal8YGapapJCXkraUK9PTKRlkQru7s7L2fXUzX-vHSVFCwZCdKmxkGuBMrVSKllbwsCdgoPTbde7gGXIjNDCGm_ccENtGlVcO827mW3bdup4MbsgFU1-5bP/s320/spells+5.PNG" width="320" /></a></div>
<div class="MsoNormal" style="text-align: center;">
<span style="font-size: 12.0pt; line-height: 115%;">Immediately
after selecting first spell</span><o:p></o:p></div>
<div class="MsoNormal" style="text-align: center;">
<span style="font-size: 12.0pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">Rather than
a notification indicating the spell you had selected, the number “1” is shown
on the first spell icon that is selected. After this selection is made, the
number “2” is shown on whatever spell icon you select subsequently. This is
slightly confusing since the spells selected do not give confirmation nor are
they highlighted. </span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><span style="font-size: 12.0pt; line-height: 115%;">Recommendations:</span></b><o:p></o:p></div>
<div class="MsoNormalCxSpMiddle" style="margin-left: .5in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-size: 12.0pt; line-height: 115%;">●<span style="font-size: 7pt; font-stretch: normal; font-variant-numeric: normal; line-height: normal;"> </span></span><!--[endif]--><span style="font-size: 12.0pt; line-height: 115%;">Continue to the information boxed to
use “Continue” button in order to allow the individual progression throughout
the tutorial. (<b>Moderate</b>)<o:p></o:p></span></div>
<div class="MsoNormalCxSpMiddle" style="margin-left: .5in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-size: 12.0pt; line-height: 115%;">●<span style="font-size: 7pt; font-stretch: normal; font-variant-numeric: normal; line-height: normal;"> </span></span><!--[endif]--><span style="font-size: 12.0pt; line-height: 115%;">Highlight the spells that were
selected or include some sort of confirmation.(<b>Moderate</b>)<o:p></o:p></span></div>
<div class="MsoNormal">
</div>
<div class="MsoNormalCxSpMiddle" style="margin-left: .5in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-size: 12.0pt; line-height: 115%;">●<span style="font-size: 7pt; font-stretch: normal; font-variant-numeric: normal; line-height: normal;"> </span></span><!--[endif]--><span style="font-size: 12.0pt; line-height: 115%;">When instructing the player to select
items (such as spells), wait for the player to select both spells before moving
on to the next instructional piece. (<b>Severe</b>)<o:p></o:p></span></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;"><br /></span></div>
<div class="MsoNormal">
<b><span style="font-size: 14.0pt; line-height: 115%;">Purchasing items</span></b><span style="font-size: 14.0pt; line-height: 115%;"> </span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">The biggest
issue is the lack of information on improving your champion through purchasing
items, especially when players buy items in real-time. After completing the
initial tutorial and moving into the battle training phase, I had minimal
knowledge of what items to purchase. </span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">After
playing the battle training for several minutes, I noticed I had less kills
than the other bots I was playing with. Using the tab button to look at my kills/deaths/assassins,
I noticed that the other team members had more items than I had. </span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">After going
back to the base to purchase more items, I was not sure which items to
purchase. My ignorance, combined with pressure of purchasing items in real-time
exacerbated the stress of quickly selecting an item. </span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
</div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">I thought
the most reasonable thing to do would be to start at the top and select items
from each line moving downward since each line below the last had one more
item, giving it the look of progression. Notice the arrows between items. I
found these easy to miss partly because I was eagerly looking for any way to
categorize items and partly due to wanting to select an item as quickly as
possible so I could get back to the action. It was also easy to gloss over the
text located above each row of item icons that explain what purchasing these
items will help upgrade.</span><o:p></o:p></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkFlU7U_dac4ekw7zNJOORwvlLI7JH9VaxJyLgfbaTpa2AApEJHe-QpzFkCo6YSygdIh-JhUu1d_AC-dGZRXs-EMZupprhbuXhNGFfkJcZZ87jaGluIslLAFOOhdr3tOc8MuJHfPY7dC6h/s1600/item+selection.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="236" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkFlU7U_dac4ekw7zNJOORwvlLI7JH9VaxJyLgfbaTpa2AApEJHe-QpzFkCo6YSygdIh-JhUu1d_AC-dGZRXs-EMZupprhbuXhNGFfkJcZZ87jaGluIslLAFOOhdr3tOc8MuJHfPY7dC6h/s320/item+selection.PNG" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal">
<b><span style="font-size: 12.0pt; line-height: 115%;">Recommendations:</span></b><o:p></o:p></div>
<div class="MsoNormalCxSpMiddle" style="margin-left: .5in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-size: 12.0pt; line-height: 115%;">●<span style="font-size: 7pt; font-stretch: normal; font-variant-numeric: normal; line-height: normal;"> </span></span><!--[endif]--><span style="font-size: 12.0pt; line-height: 115%;">Fit somewhere into the first tutorial
that items affect each hero differently and certain types of heros may want to
focus on certain items over others. (<b>Minor</b>)<o:p></o:p></span></div>
<div class="MsoNormalCxSpMiddle" style="margin-left: .5in; mso-add-space: auto; mso-list: l0 level1 lfo1; text-indent: -.25in;">
<!--[if !supportLists]--><span style="font-size: 12.0pt; line-height: 115%;">●<span style="font-size: 7pt; font-stretch: normal; font-variant-numeric: normal; line-height: normal;"> </span></span><!--[endif]--><span style="font-size: 12.0pt; line-height: 115%;">Have items displayed in a way that is
categorized so the player can easily tell which category an item belongs to,
such as highlighting the text above each item row. Right now it blends in with
the dark background. (<b>Moderate</b>)<o:p></o:p></span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b><span style="font-size: 14.0pt; line-height: 115%;">Final Thoughts:</span></b><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">Overall, the
league of Legends tutorial does a decent job at introducing new players to the
game. It would be ideal for players to have more of a chance to further their
skill level and understanding of the game prior to jumping in with other
players. </span><o:p></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;">The current
setup between the formal tutorial and the PVP option helps players in this way:
by forcing players to work up to level 3 before being allowed to play PVP.
Players are allowed to play with other teammates against AI’s until they level
up, giving them more of a chance to familiarize themselves with the game. As a
MOBA player, I’m excited to keep playing and learn more about the game!</span><o:p></o:p></div>
<div class="MsoNormal">
<span style="font-size: 12.0pt; line-height: 115%;"><br /></span></div>
Anonymoushttp://www.blogger.com/profile/02524157329842554443noreply@blogger.com20tag:blogger.com,1999:blog-2656111516959276084.post-56191976015777813692016-08-22T06:00:00.000-04:002016-08-22T06:00:34.119-04:00Quern - Undying Thoughts (Kickstarter Beta Release) Usability Review<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_iSUuPt07TOE1sunEh_Texfh3FSaH_29CjXwRhAm3ZGr8QoNgJ-gkTjoTj8sBI3sysqFzX0iQSI0LfOmvx2VS4vDGExx2rdWCpj1MRFHOT8f_WayoO_2xZfPtRYxWmNL89-Ec01T1Q0/s1600/Quern.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_iSUuPt07TOE1sunEh_Texfh3FSaH_29CjXwRhAm3ZGr8QoNgJ-gkTjoTj8sBI3sysqFzX0iQSI0LfOmvx2VS4vDGExx2rdWCpj1MRFHOT8f_WayoO_2xZfPtRYxWmNL89-Ec01T1Q0/s400/Quern.jpg" width="400" /></a></div>
<br />
<br />
Quern - Undying Thoughts is a first-person puzzle game in which the player explores the past and present of a legendary island. Released for Kickstarter supporters who backed at the beta level, the game already has a healthy Facebook group for Quern BETA testers where players can ask for puzzle hints or clarifications about the game.<br />
<br />
As with most games I've tested in beta, Quern has clean gameplay, with less focus placed on menu navigation and clarification. This post will mostly cover clarification, while avoiding spoilers (at least I'll try).<br />
<br />
<b><span style="font-size: large;">Settings and Setup</span></b><br />
<br />
On the main loading screen and in-game, the player has access to a Settings screen. In it, she or he can toggle between four options: Gameplay, Graphics, Audio, and Controls.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxbRSXG3XAA7HgVjH1gtaNaW1SxTb6ljNz6t7uASx7dKotzPVCEjSsx-GbXqWq0jIm58AYEDnAZwrdDiPygNq0aWQmgzPYr1vNd9fWkPQfW1uoqE6aDUjbLbD0MI3F2O814Op1ZlUzXQo/s1600/quern_settings.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="492" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxbRSXG3XAA7HgVjH1gtaNaW1SxTb6ljNz6t7uASx7dKotzPVCEjSsx-GbXqWq0jIm58AYEDnAZwrdDiPygNq0aWQmgzPYr1vNd9fWkPQfW1uoqE6aDUjbLbD0MI3F2O814Op1ZlUzXQo/s640/quern_settings.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gameplay Tab in Quern's Settings</td></tr>
</tbody></table>
<br />
There are a few basic problems with this menu and default setup.<br />
<br />
<b>Font Treatments</b><br />
<br />
First, I'd like to commend Quern for using appropriately-sized fonts -- in many of my reviews, I've covered how a game uses too-small font. Quern doesn't have this problem, for which I am thankful. My eyes thank you, Zadbox Entertainment. But, beyond that, there is room for font improvement. There are a few problems with the font faces and treatments that Quern uses.<br />
<br />
One place where the font treatment can be improved is in its selectable headings, as shown in the above picture. Depending on one's screen brightness and contrast, or whether a player has a visual impairment, it may be difficult to determine which tab (Gameplay, Graphics, etc.) is selected, because the font difference between an active tab and an inactive tab is so slight. In interface design, it's a good practice to duplicate visual treatments that indicate whether something is selected. An example of duplicating selection visuals is actually present on the screen - on the far-left menu, the Settings selection has a thin line that Ts out on the Settings main screen. That T helps illustrate that Settings is selected.<br />
<br />
Another place that could use improvement is the font-face that Quern uses. Depending on the quality and resolution of one's screen, serif fonts can be more difficult to read. There's inconclusive research about the legibility of sans-serif vs. serif font on a screen, but it's the <a href="http://thenextweb.com/dd/2011/03/02/whats-the-most-readable-font-for-the-screen/">current practice</a> to use sans-serifs font in the event that someone has a bad monitor.<br />
<br />
<i>Recommendations:</i><br />
<br />
<ul>
<li><b>Medium Priority:</b> Instead of using color to denote whether a header is selected, consider using font type (bolding a font that is selected) and implementing another visual indicator of selection.</li>
<li><b>Low Priority:</b> Consider changing your menu font to a sans-serif font. This isn't necessary - as users won't be spending a ton of time in menus - but it could be a low-effort fix.</li>
</ul>
<div>
<br /></div>
<div>
<b>Applying Changes</b></div>
<div>
<b><br /></b></div>
<div>
Another confusing element in the settings is figuring out how to apply changes. On the 'Settings' tab, there's text at the bottom that says 'Apply Changes,' but on the Graphics tab, there's a button that says 'Apply Changes.' I had trouble finding the Apply Changes on Settings, but found it easily on Graphics.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOCDte56wrAO6sVwhQ3th7bNOj7NZ8_d_cN4BxmjT_oighaoYicG6FKc874lDuBu2OCZI-yUT8V9u9dskkI3ay7GmKXTrSFYyTJtZR1qQvoe0pABcj_7ZFlZ9giMuMq5zApQDiXo_LOcs/s1600/20160821094807_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOCDte56wrAO6sVwhQ3th7bNOj7NZ8_d_cN4BxmjT_oighaoYicG6FKc874lDuBu2OCZI-yUT8V9u9dskkI3ay7GmKXTrSFYyTJtZR1qQvoe0pABcj_7ZFlZ9giMuMq5zApQDiXo_LOcs/s640/20160821094807_1.jpg" width="640" /></a></div>
<div>
<br /></div>
<div>
<i>Recommendation </i></div>
<div>
Keep consistent with how you allow users to apply their changes - and I'd recommend going with the button approach. In my experience testing designs, a button is generally a better call to action than just text (with 'better' meaning people find the buttons more quickly and accurately than just a link). You may also want some kind of notification that reads "settings applied" after the player presses 'Apply Changes.' After pressing 'Apply Changes' on the Settings tab, I wasn't sure if it worked or any of the changes had been enabled. This seems like a <b>low-priority</b>, but easy fix.</div>
<div>
<br /></div>
<div>
<b>Motion-Sickness Enabled</b></div>
<div>
<b><br /></b></div>
<div>
As I've written about before in this blog, I'm prone to video game motion sickness. So far, I've only been able to play Quern in fits and spurts due to feeling queasy, even after adjusting all of the settings (screen brightness, disabling head bob, and turning off motion blur).</div>
<div>
<br /></div>
<div>
<i>Recommendation</i></div>
<div>
One recommendation I have for the developers is to either have the game default to having head-bob off and motion blur very low, or have a checkable button that changes the settings to prevent motion-sickness for those who are prone. Because I suffer from motion-sickness, and it's a truly bad experience, I'd put this as a <b>medium priority</b> issue. Many players may not suffer from game-induced motion-sickness, but it's a real fun-killer for those who do.</div>
<div>
<br /></div>
<div>
<b><span style="font-size: large;">Interactivity</span></b></div>
<div>
<br /></div>
<div>
Quern does a decent job of teaching the player how and when she or he can interact with the world, but there is room for improvement. </div>
<div>
<br /></div>
<div>
<b>Icon Transparency</b></div>
<div>
<br /></div>
<div>
At the beginning of the game, Quern clearly explains what the player can do in the environment. As shown below, in the first minute, the player sees floating text that tells the player what she or he can do in the world (namely, click to read the letter).</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu-q-aqaDZOYqAcOFC826e6YUh3td6MriNVCwa5axLJNbNiCT_Up8QlHO5UCaNHC18mINnEE7rBLYv4H4D2AuKC7S3RIJ8hi8yCEeXMSYAE2-YsFQAikRkRjxKovgHVw0ZP4W7JPsz8DM/s1600/click_to_read.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="408" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu-q-aqaDZOYqAcOFC826e6YUh3td6MriNVCwa5axLJNbNiCT_Up8QlHO5UCaNHC18mINnEE7rBLYv4H4D2AuKC7S3RIJ8hi8yCEeXMSYAE2-YsFQAikRkRjxKovgHVw0ZP4W7JPsz8DM/s640/click_to_read.jpg" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
But without the floating text, it would be more difficult to determine what to click on or what was interactive. Part of the reason for this is the transparency of the cursor. If you look closely on the above picture, you may see a small circle with an eye on it. That cursor indicates that the player can read something. If you're unable to see the cursor in the above picture, here it is blown-up, next to the icon that indicates nothing is interactive. </div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj91fsrhj5DlC1hAfYLhrcp4Co2u8aJxFevbTw_hyphenhyphenjAfm0LVkUaFy0WSU4sXajHqMttmjLNKoMV4dF9Ctj1uJouqgZsAF5gVTVVnSmOLWdVivEkTbMdZFk3NlTdhKY1EaYYxp3GuYu9zHc/s1600/cursor_change.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj91fsrhj5DlC1hAfYLhrcp4Co2u8aJxFevbTw_hyphenhyphenjAfm0LVkUaFy0WSU4sXajHqMttmjLNKoMV4dF9Ctj1uJouqgZsAF5gVTVVnSmOLWdVivEkTbMdZFk3NlTdhKY1EaYYxp3GuYu9zHc/s400/cursor_change.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Inactive on left, active on right.</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
<i>Recommendation</i></div>
<div>
Since showing floating white text every time something can be picked up or read would be unimmersive, consider making the cursor (eye icon, or hand icon, or whatever other icons there are) more opaque to help the player more easily identify when she or he can interact with an item. I'd recommend this change as <b>low-priority</b> because it's not a game-breaker, but it would definitely improve quality of life.</div>
<div>
<br /></div>
<div>
<b>Inventory Manipulation</b></div>
<div>
<b><br /></b></div>
<div>
Another way Quern can improve interaction clarity is to more clearly explain that a player can manipulate the items in his or her inventory. During my first pass at the game, I either didn't process the entire sentence at the bottom of the screen - "Click to rotate or interact with items" - or interpreted "interact" as just another word for rotating (rotating an item technically is interacting with it).</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxdMeeVw5QuFCB-lcfypuf1tkAktnv-OPjRvS0gjnC9EGWY8FBo1OTxysnGiaSxFdLdbF9JCzUfLZOlrTx949qMsPqjmLCiaOhLoCbrWjKqLzSwNxa3clBvNAe03zEg1nMtxC-qmnqccE/s1600/20160821111927_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxdMeeVw5QuFCB-lcfypuf1tkAktnv-OPjRvS0gjnC9EGWY8FBo1OTxysnGiaSxFdLdbF9JCzUfLZOlrTx949qMsPqjmLCiaOhLoCbrWjKqLzSwNxa3clBvNAe03zEg1nMtxC-qmnqccE/s640/20160821111927_1.jpg" width="640" /></a></div>
<div>
<br /></div>
<div>
As such, when I came to the first puzzle door, I had no idea how to complete the puzzle and had to go to the Quern Facebook group to ask for help. Having to ask for help on something so simple made me feel like a bad/stupid player - but as a user researcher, I know this feeling is a result of confusing design, not my ability. </div>
<div>
<br /></div>
<div>
<i>Recommendation</i></div>
<div>
I'd recommend implementing some visual indication (besides text) that the player can manipulate as a <b>high-priority </b>issue - I was frustrated enough with the game that I had to quit it before seeking help, and it left a bad taste in my mouth. My recommendation here is to implement something similar to Tomb Raider's (2013) inventory management, which more clearly displays that the user can interact with the item by bolding a left-aligning the text to more clearly emphasize it. </div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn0TSSex5-sScMljZCjEk7zdRhphyphenhyphenvfA9UM6NHaWJNMRhBgUp0VY-Xi0y4IpeoD7qzI2wv567QCAKILrSI0J3NBGgCyTv97z9yHqeluKqngczv2BTzCvgyJLd89-jFfGDDIV0N-EISwS0/s1600/tomb_raider_image.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="https://archaeologyoftombraider.files.wordpress.com/2013/08/2013-04-13_00101.jpg" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn0TSSex5-sScMljZCjEk7zdRhphyphenhyphenvfA9UM6NHaWJNMRhBgUp0VY-Xi0y4IpeoD7qzI2wv567QCAKILrSI0J3NBGgCyTv97z9yHqeluKqngczv2BTzCvgyJLd89-jFfGDDIV0N-EISwS0/s640/tomb_raider_image.jpg" title="" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Artifact viewer from Tomb Raider (2013)</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
<br /></div>
<div>
Another way that Quern can make the interactivity of items more clear is to enable the cursor to hand-icon in the inventory, like below, when the player's mouse is over something they can manipulate (like rotating elements of an item). </div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlhEcAc4Gl26sy3_gHfKHsKMlS_7t0FPK9fzlMJSnQYK3oiV4x-JlZDKwL1k0v5iJT5MrzKOu9sLV02MDt1tEvRbsxWOQATQORegfP83oYdZvmiVe7uO0eGHnLt3VCWcCEyFpqW-ptios/s1600/cursor_change2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlhEcAc4Gl26sy3_gHfKHsKMlS_7t0FPK9fzlMJSnQYK3oiV4x-JlZDKwL1k0v5iJT5MrzKOu9sLV02MDt1tEvRbsxWOQATQORegfP83oYdZvmiVe7uO0eGHnLt3VCWcCEyFpqW-ptios/s400/cursor_change2.jpg" width="400" /></a></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
<br /></div>
<div>
That way, it's more clear that the player can manipulate the item. Of course, one consideration is that the hand icon has already been associated with the 'pick up' action - but I don't think it's too much of a stretch to also make the icon indicative of being able to manipulate an item. </div>
<div>
<br /></div>
<div>
<b>Lack of Microinteractions</b></div>
<div>
<br /></div>
<div>
Another element of Quern that was confusing was the lack of microinteractions when a player could not interact with the environment. For example, at one point in the game, the player can find a lock-box. When the player hovers the mouse over the box, the icon changes to the gear icon, which has been established to be one of the 'you can interact with this if you have the right tool/item' cursors.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi971mJvtgzt-6Gq-9hsfhlz5xESYY_47C2GBTd0zYf3AcgrlI8xE9YgJIOOTSqlwX5AQbclu2HUBXcrngz8nRpWWZcTXZ-pdyclrbAKMSip1HqV3KywM69FGCNT-EifpMuzjlEwR_noMo/s1600/locked_box.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="540" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi971mJvtgzt-6Gq-9hsfhlz5xESYY_47C2GBTd0zYf3AcgrlI8xE9YgJIOOTSqlwX5AQbclu2HUBXcrngz8nRpWWZcTXZ-pdyclrbAKMSip1HqV3KywM69FGCNT-EifpMuzjlEwR_noMo/s640/locked_box.jpg" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
Because there's an icon-laden cursor, and I've already associated icon-laden cursors with 'click here, something happens,' it's an unexpected and surprisingly frustrating experience for nothing to happen when I click on it. </div>
<div>
<br /></div>
<div>
<i>Recommendation</i></div>
<div>
Though it's clear that I'm missing the right piece to open the box, I wish there were some kind of auditory indication that I can't currently open the box (like a rattling box noise, a locked sound, I don't know). I'd recommend implementing some kind of indicator as a<b> low-priority</b> issue - I can get used to nothing happen, but it's not a satisfying experience. I'd recommend you add an auditory of visual indicator before a wider release.</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div>
<b><span style="font-size: large;">Browsing Letters</span></b></div>
<div>
<br /></div>
<div>
In Quern, the player must rely on letters left by an archaeologist to solve the puzzles. Depending on the puzzle, the player may need to switch between two letters to solve a puzzle. Currently, the only way to switch between letters is to open the letters menu (L), click 'Browse Letters', and then select a different letter from a queue on the bottom.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAdt-0IWJmoBPzeY4nf839hb24qONtHWNZi_q91m2imRF7jz4Oxiddn9yS5fDJ3FVH_qr4xwFqDWhyphenhyphenOUxShfv6czDpyiISTQveDetpM2WoczgcqhGVirV_O-C4mJB2Luksv5k7hQFAtsU/s1600/20160821120404_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAdt-0IWJmoBPzeY4nf839hb24qONtHWNZi_q91m2imRF7jz4Oxiddn9yS5fDJ3FVH_qr4xwFqDWhyphenhyphenOUxShfv6czDpyiISTQveDetpM2WoczgcqhGVirV_O-C4mJB2Luksv5k7hQFAtsU/s640/20160821120404_1.jpg" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
This is a rather clunky implementation if the player needs to switch between looking at letters and then interacting with the puzzle.</div>
<div>
<br /></div>
<div>
<i>Recommendation</i></div>
<div>
Consider implementing some other way for the player to switch letters besides clicking 'browse letters.' For example, you could do something like this instead, where the letters are numbered in a carousel.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZC473pyWx9oYcRORDEpzP3n0ZKiCkTA9-A35VeOuMkW_7VFvyRjFzNqj8BxQAWn3WwHdloUKeuMIGlLjZy41ukuDeIOtN9GjHOjQSzt11tss661N1tXVKVqMJo6sjbOcp7jt37gMtKpc/s1600/20160820201018_1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZC473pyWx9oYcRORDEpzP3n0ZKiCkTA9-A35VeOuMkW_7VFvyRjFzNqj8BxQAWn3WwHdloUKeuMIGlLjZy41ukuDeIOtN9GjHOjQSzt11tss661N1tXVKVqMJo6sjbOcp7jt37gMtKpc/s640/20160820201018_1.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Somewhat like this, but better. I'm not a designer.</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
This way, players could look at and switch letters more easily. To switch which letter is in the center, the player could either press the letter's number (so if I press 5 on my keyboard, 5 would be centered on my screen) or click on that letter to center it. When a player gets a new letter, it becomes the one in the center, with the older letters to the left. There are probably easier methods to implement, but this is one way to make switching and seeing letters easier. I'd say changing this is a<b> low to medium priority</b> issue. I haven't gotten far enough in the game to gauge how often the player needs to switch between letters, but in the first half hour, it was enough to be an issue. </div>
<div>
<br /></div>
<div>
<b><span style="font-size: large;">Final Thoughts</span></b></div>
<div>
<b><span style="font-size: large;"><br /></span></b></div>
<div>
I feel like Quern is going to be a great puzzle game, but until I get the motion-sickness settings right for me, I'm not able to have fun. Which is super disappointing. But when it comes out for a wider beta, I bet a lot of folks will enjoy Quern. With a few usability fixes, this is going to be an even better game.</div>
<div>
<br /></div>
<div>
<i>(Oh, one final-final thought, remember to remind players to walk with WASD! New players don't always know that!)</i></div>
<div>
<i><br /></i></div>
<div>
<i>____</i></div>
<div>
<i><br /></i></div>
<div>
Hi, folks! Thanks for your patience. I know it's been a while since I wrote. July and August were and are busy months, with lots of work at work (I'm covering for someone who's on maternity leave) and a family wedding in early August. I think for the time-being, I can commit to one blog post a month, two if possible (but currently not probable, until work slows down a bit). Anyways. I'm thinking I'll review Stellaris at some point, although I've been playing it so much that the usability issues aren't as apparent. Maybe I'll have the self-control to put it down. Maybe.</div>
<div>
<br /></div>
<div>
Again, thanks for reading! Let me know if you have any comments in the comments, or on Twitter @keshiekay.</div>
<div>
<b><span style="font-size: large;"><br /></span></b></div>
<div>
</div>
</div>
Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-55685679883852105822016-07-11T06:00:00.000-04:002016-07-11T06:40:31.839-04:00Pokémon Go Usability Review<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT38ji6UIIiW-EMKo7tgp-7vTWAuxXRdpIzHO-NmM4Zt8x7mT7y3ixbreLnw86WM8S75p9RjZJYNlK5hicprmnXMv1td25UK9L0SzRI_jL5CaOYvK3Of6VrgQvXB5jW7IaVVvwia6Ojbs/s1600/pokrmongobanner.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT38ji6UIIiW-EMKo7tgp-7vTWAuxXRdpIzHO-NmM4Zt8x7mT7y3ixbreLnw86WM8S75p9RjZJYNlK5hicprmnXMv1td25UK9L0SzRI_jL5CaOYvK3Of6VrgQvXB5jW7IaVVvwia6Ojbs/s400/pokrmongobanner.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
Pokémon Go has arguably captured the hearts and minds of Millennials, harkening back to the mid-90s when the Pokémon craze first hit. Free on iOS and Android, the game encourages players to wander their towns or explore new terrain (such as the areas near bodies of water) to find different types of pokémon.<br />
<br />
Though this game has broken records as the <a href="http://www.ign.com/articles/2016/07/07/pokemon-go-is-the-top-grossing-app-on-the-us-app-store">highest-grossing free to play game</a> on iOS, and has between <a href="http://nintendonews.com/news/mobile/pokemon-go-super-effective-google-play-app-store/">1 - 5 <i>million</i> downloads </a>on the Google Play app store, there are still many issues (usability and otherwise) that Pokémon Go displays. Since many news sources have covered the game's widespread <a href="http://www.polygon.com/2016/7/7/12123750/pokemon-go-server-issues-ios-android-fix">server outages</a>, <a href="http://www.idigitaltimes.com/pokemon-go-problems-fix-unable-authenticate-trainer-club-progress-gps-and-other-544335">account troubles</a>, and other <a href="http://www.forbes.com/sites/davidthier/2016/07/07/ios-android-nintendo-pokemon-go-review-day-one-bugs-monsters-and-glitches/#7b3bd60b315e">nasty bugs</a>, I'll stick to the usability issues.<br />
<br />
The game's most prevalent and painful usability issue is that beyond showing the player that they need to swipe a pokéball to catch a pokémon, and can only interact with a gym once they're level 5, Pokémon Go does not spend the effort to teach players the game. Which is surprising, because there isn't too much to the game.<br />
<br />
Post-onboarding (entering your age, speaking with Professor Willow about where pokémon are found, and choosing your avatar), there are seven elements of the game: finding pokémon, acquiring pokémon, improving pokémon, acquiring items, using items, interacting with gyms, and shopping. Of these elements, shopping within the micro-transaction store is the easiest to intuit.<br />
<h3>
<br />Gotta Catch 'Em All</h3>
<br />
Finding, catching, hatching, and powering up or evolving pokémon comprises the majority of the game. Of these, finding and catching are the most confusing.<br />
<br />
<u>Finding</u><br />
<div style="text-align: right;">
</div>
The primary method of acquiring pokémon is walking around your area until you run into a pokémon. Though it's never explained, <a href="http://attackofthefanboy.com/guides/pokemon-go-guide-leaves-mean/">players have intuited</a> that rustling leaves on the ground mean that a pokémon might appear in that location. The other means of finding pokémon is by using the tracker in the lower right hand corner in the screen, which displays which three pokémon are the closest to your location.<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTAGxp8bEJiKHUEcNltwQG75yd_ytuSRj5_9kjuQXmtfu6mxIEvWu1JecpclZ2XoJy9-uXe5-922xeXHBHzhHNXS5CtbL8wLGiPEN-vwcqsSVq2ZXxN7N2qPuQgc2LXelb6rc95s08cqk/s1600/fade620f1d37312" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTAGxp8bEJiKHUEcNltwQG75yd_ytuSRj5_9kjuQXmtfu6mxIEvWu1JecpclZ2XoJy9-uXe5-922xeXHBHzhHNXS5CtbL8wLGiPEN-vwcqsSVq2ZXxN7N2qPuQgc2LXelb6rc95s08cqk/s320/fade620f1d37312" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Lower tracking bar</td></tr>
</tbody></table>
<br />
The pokémon appear in this bar are between 50 to 200 ft. from you, with <a href="http://gaming.stackexchange.com/questions/272531/what-do-these-steps-in-pok%C3%A9mon-go-mean">each footprint equating to ~50 ft</a>.<br />
<br />
<div style="text-align: left;">
</div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzLiLwXvz-nXMyNqwlZ4hjKYUbU8GsSqNg8aK3dbEAyNVtTpkG2vSzlDWQU96-b-MCu7_7fqnadJesX_AjI2Y3kjG7u92vcBdoQIsyoBHXMn5FZDaMwLVSBFArIBYRdcejgW703huY_qc/s1600/3bbb75cd714e1d3" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzLiLwXvz-nXMyNqwlZ4hjKYUbU8GsSqNg8aK3dbEAyNVtTpkG2vSzlDWQU96-b-MCu7_7fqnadJesX_AjI2Y3kjG7u92vcBdoQIsyoBHXMn5FZDaMwLVSBFArIBYRdcejgW703huY_qc/s320/3bbb75cd714e1d3" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Quarry-specific tracker</td></tr>
</tbody></table>
If the player is interested in tracking a <i>specific</i> pokémon, she or he can tap on the tracking bar (which occasionally flashes, potentially to draw initial attention to its presence), and then tap on one of the pokémon to track that <a href="https://www.youtube.com/watch?v=2sj2iQyBTQs"> displayed in the first trailer</a>) is that tracking a pokémon becomes a confusing game of hot and cold, where you don't see whether you're going in the right direction until you've walked ~five car lengths. While that means you're walking more, which is both healthy and productive, it can be frustrating because the pokémon you were hunting may have run away while you were going in the wrong direction. In trying to come up with more efficient ways to estimate distance to one's quarry, players have come up with <a href="https://www.reddit.com/r/pokemongo/comments/4rt0t0/this_is_the_correct_way_of_tracking_nearby_pokemon">various theories</a> (proven or disproven) to potentially make the hunt easier. While consensus is that one can track distance to a pokémon by watching pokémon re-order on the tracker modal, there seems to be a desire for a more straightforward way to track closeness.<br />
<br />
My primary recommendation here is to consider making the tracker bar flash when the player is going in the correct direction of their quarry - or at least explain <i>why</i> it flashes periodically.<br />
<br />
<u>Catching</u><br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwBZjKx7dbFJ6GC8z0HMAxDCuK2s7dFE5bRr0mnxS_8sVMOwg8y8O81OyHJvaVHFmvYyjLVaCuoQx90FgdYO1_h41Jz5Z6gpC7Og2M0tQEGvMi31C8BMYhlzZ8oohx1cekVkPNr43lY0Q/s1600/2a7c5825d503299" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwBZjKx7dbFJ6GC8z0HMAxDCuK2s7dFE5bRr0mnxS_8sVMOwg8y8O81OyHJvaVHFmvYyjLVaCuoQx90FgdYO1_h41Jz5Z6gpC7Og2M0tQEGvMi31C8BMYhlzZ8oohx1cekVkPNr43lY0Q/s320/2a7c5825d503299" width="180" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">A spearow joined me at Starbucks.</td></tr>
</tbody></table>
<br />
Once the player has found a pokémon, they then have the option to catch it. In the brief onboarding tutorial, the player is taught that they need to tap on a pokémon on the map to gain the option to catch it.<br />
<br />
While the player is taught that they need to flick the pokéball within the white circle to catch it, the game does not explain the purpose and significance of the inner circle. According to <a href="https://support.pokemongo.nianticlabs.com/hc/en-us/articles/221957648-Finding-and-Catching-wild-Pok%C3%A9mon">Niantic's support page for the game</a>, the redder the inner circle is, the more difficult it is to catch, and the smaller the circle is, the easier the pokémon is to catch. Since this isn't explained in the game, I've read multiple articles about how to play the game with conflicting answers (but I'll trust Niantic's, seeing as they made the game).<br />
<br />
The other elements about catching that aren't explained are using items and how to get catch bonuses. For example, the player can get "nice throw!" or "curveball" catch bonuses -- but how one gets these is not explained.<br />
<br />
Of all parts of the game, I would say that the pokémon catching mini-game of tossing the pokéball is the most fun -- I just wish it had been explained better.<br />
<br />
<b>Recommendations</b><br />
<br />
<ul>
<li>Explain in an in-game tutorial that the player shoot shoot for a smaller circle for better chances.</li>
<li>Explain how a player can get the 'nice throw' or 'curveball' bonuses - if there's a specific goal I should be meeting to do that, I'll start altering how I toss.</li>
</ul>
<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-5M-RYLooCPanZbOSREbPxgrdsWqmHqADZA_FS03qvCOQw6QByBQyOyKBIKo81PC3Q9Otd_rXyVgYuReI62Qa2932E-13F1C3r6xlXxFmqz62dempVUY2pImLKHdlrBntoPO1syAKGSU/s1600/3f2fc4c6c1a9cd7" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-5M-RYLooCPanZbOSREbPxgrdsWqmHqADZA_FS03qvCOQw6QByBQyOyKBIKo81PC3Q9Otd_rXyVgYuReI62Qa2932E-13F1C3r6xlXxFmqz62dempVUY2pImLKHdlrBntoPO1syAKGSU/s320/3f2fc4c6c1a9cd7" width="180" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Autocorrect names my catches.</td></tr>
</tbody></table>
<u>Hatching</u><br />
<br />
Another way to gain pokémon is to hatch them. One of the items that players can acquire during their travels are eggs -- but while the game clearly notes when one has acquired an egg, it's not immediately clear how one incubates eggs. Over the last three days, when I've run into other new players, some asked how to incubate eggs.<br />
<br />
To reach acquired eggs, the player needs to go to their list of pokémon, and then either tap on the 'EGGS' tab or swipe (which I discovered accidentally). Accessing this area is not clear or quick.<br />
<br />
Once a player has found the egg section and has acquired at least one egg, she or her has the option to incubate the egg to hatch a random pokémon. Eggs are associated with a specific distance -- the longer the distance (2 km, 5 km, 10 km), the more rare the pokémon.<br />
<br />
<div style="text-align: right;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9tVhUmj6FD_lAZ4gwouPJGEZanuuFEp05xv0hKtFVJqRbFIZeLL0MnN8X9fPcg0iMt5CgK-SQrTvA29Gc2sgNiI9Djts3jUN35hjT5qIPvsLW-zwKmj_e84dLnVUpCFORRFzPrZwItI8/s1600/c7cf539a8fcf474" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9tVhUmj6FD_lAZ4gwouPJGEZanuuFEp05xv0hKtFVJqRbFIZeLL0MnN8X9fPcg0iMt5CgK-SQrTvA29Gc2sgNiI9Djts3jUN35hjT5qIPvsLW-zwKmj_e84dLnVUpCFORRFzPrZwItI8/s320/c7cf539a8fcf474" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
The player starts out with one incubator with unlimited uses, otherwise he or she can buy additional incubators from the store with three uses. An important thing to note -- that I didn't realize and I thought there was a bug -- is that when incubators are in use, they are greyed out and you are unable to select them. So if you want to be incubating all of your eggs simultaneously, you need to buy a steady stream of incubators from the store. (Which for me is dangerous, because I'm what the game industry calls a whale -- I get addicted to games and spend a lot of money on F2P games).<br />
<br />
<b>Recommendations</b><br />
<br />
<ul>
<li>Consider allowing players to tap on any egg icons when they're acquired (and appear in the right side of the screen), which will then take them to the egg menu.</li>
<li>Instead of greying out the incubators, consider saying 'in use' instead.</li>
</ul>
<br />
<u><br /></u>
<u>Evolving & Powering Up</u><br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXCj3F9Kw-Pak5XQxHfeT06ARNIOgiH-ZBe9CLwaVxHQC7s1c9sgK0dXpOBAgyuWp_k1pYy7pWib5Q5g8gyzdbG6C-7f-iBhFFASsu-RkDP1i5oPgi8DFAClJt9XUOXkCTG9Nxq9-mG64/s1600/1c70001bdee91a" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXCj3F9Kw-Pak5XQxHfeT06ARNIOgiH-ZBe9CLwaVxHQC7s1c9sgK0dXpOBAgyuWp_k1pYy7pWib5Q5g8gyzdbG6C-7f-iBhFFASsu-RkDP1i5oPgi8DFAClJt9XUOXkCTG9Nxq9-mG64/s320/1c70001bdee91a" width="180" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Information for Exeggcute</td></tr>
</tbody></table>
After a player has acquired a pokémon, they are brought to a screen like the one of the left, which shows the pokémon's information, including its health, type, and where it was caught. From this page, the player may also have the option to power up, evolve, or transfer their pokémon to gain more candies.<br />
<br />
Overall, I'd argue that this screen is mostly clear: showing a pencil next to a name is an oft-used design treatment to show an editable field, and throughout the app, interactable buttons are a green color, and uninteractable buttons are greyed out. Because they do this consistently throughout the app, including in account creation, it's pretty clear when the player has the resources to power up or evolve their pokémon.<br />
<br />
The one main place I see room for improvement on this screen is the location of the Transfer button. The transfer button is the last item on this page, and even if one scrolls down to the bottom immediately to transfer, they're forced to scroll a little bit more after a map lazy loads and moves the location of the transfer button. Since transferring a pokémon is actually a significant portion of the game, I'm surprised that it comes <i>after</i> a map that shows where you caught the pokémon.<br />
<br />
<b>Recommendations</b><br />
<br />
<ul>
<li>Consider switching the locations of the map and transfer button -- since transferring is a really integral part of the game, and looking at a map isn't the locations ought to be reorganized.</li>
<li>Consider allowing players to start another power-up from the black screen where it shows the powered-up pokémon's new stats. That way, the player doesn't have to tap back and forth between screens.</li>
</ul>
<br />
<br />
<h3>
Gaining and Using Items</h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEEX8bF64STO4o60Cg8uGVTV9lVEonEuZZiB-t6FhQA0ogX9VViePGcgOpUj6EgTjHEQb3McmwJqb8OUYM7vFjEjN-V95G29kC8tBy2dtcuJGwIhL2MgvgogUMG9WHGACUn2jIbvY15Xo/s1600/b31be6f9a328a36" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEEX8bF64STO4o60Cg8uGVTV9lVEonEuZZiB-t6FhQA0ogX9VViePGcgOpUj6EgTjHEQb3McmwJqb8OUYM7vFjEjN-V95G29kC8tBy2dtcuJGwIhL2MgvgogUMG9WHGACUn2jIbvY15Xo/s320/b31be6f9a328a36" width="180" /></a>Another core part of the game is acquiring and using items. After the player has been taught how to catch a pokémon, she or he is encouraged to go find a pokéstop, where the player can gain items. Professor Willow shows the player what a pokéstop icon looks like, but then leaves him or her to figure out how to <i>use </i>a pokéstop.<br />
<br />
Here's a quote from a friend of mine, another new player:<br />
<br />
<blockquote class="tr_bq">
<span style="font-size: small;">"Maybe I missed the instructions somewhere, but the first time I went to a pokestop, I couldn't figure out how to get items from it. It was very disappointing and I left empty-handed. :( "</span></blockquote>
If the player taps on either Menu > Settings > Quick Start or Menu > Tips, she or he will be shown a brief tutorial that explains how to interact with a pokéstop. But if the player doesn't, then it's not clear how to gain items from a stop.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0d63zKJ9n8ROVAez8dAkO6DRIG233xTQwWsNpq3ZZ_1h87C_53CGRS7RAAUhjHXelJ8X9ZTILmqKTuwQGYc0wKv-2iJWPUCdyrktjR_h9zI8KRoTnxrW6viRhO-2i4PMGZFReUS2Ovr8/s1600/86f23fdc3bb85b3" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0d63zKJ9n8ROVAez8dAkO6DRIG233xTQwWsNpq3ZZ_1h87C_53CGRS7RAAUhjHXelJ8X9ZTILmqKTuwQGYc0wKv-2iJWPUCdyrktjR_h9zI8KRoTnxrW6viRhO-2i4PMGZFReUS2Ovr8/s320/86f23fdc3bb85b3" width="180" /></a>Once a player has gained items, she or he has the option through the menu to access the items screen. The interactions are relatively clear through this <i>not </i>clear is using items.<br />
<br />
Say one of your pokémon has taken damage. You may tap on your collection of potions, and are then shown an array of pokémon who are not at full health. For a fairly long time, I thought the way to heal a pokémon was to repeatedly tap on the potion icon, then tap on the pokémon that needed healing. It was not clear to me that because I'm in the potion screen, that I don't need to tap on the potion icon to use it.<br />
<br />
<b>Recommendations</b><br />
<br />
<ul>
<li>Consider changing how the tutorial is presented -- when a player reaches a pokéstop for the first time, show how she or he can interact with the pokéstop.</li>
<li>Clearly explain how using items work -- once you figure it out, it's <i>okay</i>, but it's not immediately clear what to do.</li>
<li>Allow players to swipe left to right or right to left on a pokéstop image - it doesn't really make sense why one needs to swipe a specific way.</li>
<li>Also, it's not entirely clear how to use an incense - to activate it, on needs to tap on the incense - tapping anywhere else gets out of the screen.</li>
<li>Why is it that one can discard items during a catching mini-game? We're not able to pick any up (right now, at least), so it doesn't make sense that we can discard. My sister accidentally discarded some of her berries this way.</li>
</ul>
<br />
<br />
<h3>
Interacting with Gyms</h3>
<u><br /></u>
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZgQYEVHaxH_R32iIVzbTMW2eOIIkk2ZstbRobnwCcVAy1e6oGof77Bk8ay9IxtucbtMch1GNisuV347s9LPq5t89s0Jw5l2VC4uFuf7H98KWfwPDax0kBkMsSbU72HVawrCvqFZ8FSv0/s1600/d4ebd7c6944599a" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZgQYEVHaxH_R32iIVzbTMW2eOIIkk2ZstbRobnwCcVAy1e6oGof77Bk8ay9IxtucbtMch1GNisuV347s9LPq5t89s0Jw5l2VC4uFuf7H98KWfwPDax0kBkMsSbU72HVawrCvqFZ8FSv0/s320/d4ebd7c6944599a" width="180" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Buggy gym battle :-(</td></tr>
</tbody></table>
Another fundamental part of the game is defending and attacking gyms. In the quick start tutorial (which, again, is hidden) you learn what the different icons are on the gym and how to dodge attacks, but you're never taught <i>how </i>to attack.<br />
<br />
After reading through a few tutorials, I learned that in order to attack, one must tap on an enemy pokémon repeatedly, and that attacking builds up your own pokémon's ability to use a special attack. In order to use a special attack, one presses and holds to unleash the attack.<br />
<br />
Other unexplained gym elements are what does the 'person icon' (below the CP 523 in the adjacent image) mean? Does that mean two other players were actively defending that gym when I was there? Did that mean two other players had placed pokémon on that gym?<br />
<br />
My recommendation is that Niantic create a detailed and timely explanation of how one interacts with gyms. Once a player chooses a team at a gym, she or he should be introduced to how to fight (attack, special attack, dodge) and raise the prestige of their color's gym. Currently, it's a baffling experience. And please, please fix that 1 HP bug! It's rage-quit levels of frustrating.<br />
<u><br /></u>
<u><br /></u>
<br />
<h3>
Shopping</h3>
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhho-9yhSPMFPLeykSNpKsAWWFQnkXj20hxrLOt7WhVpI2YM_EcjPzO6VyMjuaLhOZRIPvSiRt15w0LoL6fmyLOS_G8wquPUQxc8xr4bMDL9sZNyIa-8Gj8rYFg-eue973PkL1kj5nx1sU/s1600/c3acba1ef7faa60" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhho-9yhSPMFPLeykSNpKsAWWFQnkXj20hxrLOt7WhVpI2YM_EcjPzO6VyMjuaLhOZRIPvSiRt15w0LoL6fmyLOS_G8wquPUQxc8xr4bMDL9sZNyIa-8Gj8rYFg-eue973PkL1kj5nx1sU/s320/c3acba1ef7faa60" width="180" /></a>Overall, using Pokémon Go's shop is pretty clear. It's easy to read what the options are in the store, to see how much they cost, and confirm that you <i>really </i>want to purchase something so that a player doesn't accidentally make purchases they didn't intend.<br />
<br />
Really the only thing that <i>isn't </i>crystal clear is the shield in the upper right hand corner of the store. After digging around, I learned that shield is a way to gain coins for the store, and the amount one acquires is based off of how many gyms the player has a pokémon defending. One can get this coin bonus once a day.<br />
<br />
My recommendation for the shop is to explain this feature up front, the first time a player goes to the shop. I believe it's clear that there's a timer after the player taps on the icon, but what the icon means should be explained before a player feels the urge to purchase coins.<br />
<br />
<br />
<br />
<br />
<h4>
<b>Other Usability Concerns</b></h4>
<br />
Before writing this post, I crowd-sourced other usability concerns and questions from my friends. Here are a few.<br />
<br />
<blockquote class="tr_bq">
<span style="font-size: small;">"I'd also complain about the way you log in. I've got 2-step authentication on my Google account, and that means I need to enter a code every time I want to log in. The app doesn't seem to save your credentials the way any other application would, so it's a pain to enter in my email address, password and code each time I open it."</span></blockquote>
<blockquote class="tr_bq">
<span style="font-size: small;">"There's a radar-like pulse coming from your character, which you'd think would work like radar -- that is to say, giving you pings and little clues as to where the Pokémon are. So far, though, the rustling leaves are the only way to tell where the Pokémon are likely to be, and there's no guarantee that being in that area will lead to an encounter. There are also sparkles and glowing specks of dust rising and falling on the map, but so far I haven't seen that visual effect have any relevance."</span></blockquote>
<blockquote class="tr_bq">
<span style="font-size: small;"><br />"I'm also annoyed that you can't change your clothes after you choose team color, but they're clearly options for team colors but you don't know anything at the point when you choose clothes." </span></blockquote>
<blockquote class="tr_bq">
<span style="font-size: small;"><br />"What does AR mean (in catching) top right? I don't want to click it because I'm focused on not losing the pokemon!" (explained) "Confusing. Isn't that what the battery saver option is for? And it doesn't save your settings so I have to click battery saver every time when I log in, and turn off the music."</span> </blockquote>
<br />
<br />
<br />
<br />
--------------<br />
<h3>
Final Thoughts</h3>
All in all, I'm enjoying Pokémon Go. As of writing this, I have 57 pokémon and am at level 13. I'm hooked. But just because I'm hooked doesn't make it a fantastic game. The game has great potential, but at the moment it's almost too frustrating to play. I know multiple people who downloaded the game, played it some, and then said that they're uninstalling until some of the more egregious bugs are fixed. For those who want a reason to go outside and get exercise, and meet new people, consider playing, but you may want to wait a bit for the issues to be worked out.Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com3tag:blogger.com,1999:blog-2656111516959276084.post-54275768357995701502016-06-27T06:00:00.000-04:002016-06-27T06:00:15.176-04:00Fingeance Usability Review<div class="separator" style="clear: both; text-align: center;">
<i>Guest post by Hannah Murphy.</i></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHQrGbeQmJKlG_8fN5aaNqKyzwwcusYxmIFz_DvFRFc8YK_QnLGnWgWSLtk3QV6qw_IWbdpfUWGIPpMlGI6nFeaBquC8j4x0pc_hQtZWBzDN5qAuaE9z4odvWfUYxF9n_dsvcaXbsaDZ4/s1600/fingeance.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="338" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHQrGbeQmJKlG_8fN5aaNqKyzwwcusYxmIFz_DvFRFc8YK_QnLGnWgWSLtk3QV6qw_IWbdpfUWGIPpMlGI6nFeaBquC8j4x0pc_hQtZWBzDN5qAuaE9z4odvWfUYxF9n_dsvcaXbsaDZ4/s640/fingeance.png" width="640" /></a></div>
<br />
<br />
Fingeance, by Escape Industries, is a 4-player shoot-em-up game in which the fish (you) are trying to get back your gills that have been taken from you. The game relies heavily on a teamwork dynamic which requires strategically choosing which characters to play, as some play different roles.<br />
<br />
The game is to be released in early 2017. Although there is much to be done, the game is still quite polished. The two main problems are the <b>overwhelming text</b> and the <b>team dynamic awareness </b>aspect of the game.<br />
<br />
<br />
<h3>
<b>Overwhelming Text</b></h3>
<b><br /></b>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN3ew4z4n5UzpjXUofckrvMpxI17L8fq1iVvtmAn7qMczz9uCS_ndEg61iXZ4oV-AQ_X2u2vh-O5MVFWWH2aVbZcfHf9XpIJ6fHAVr1LaTDgohDfpnmAnIHgbuJyY5I-7eDsjp-X9JoVc/s1600/fingeance2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN3ew4z4n5UzpjXUofckrvMpxI17L8fq1iVvtmAn7qMczz9uCS_ndEg61iXZ4oV-AQ_X2u2vh-O5MVFWWH2aVbZcfHf9XpIJ6fHAVr1LaTDgohDfpnmAnIHgbuJyY5I-7eDsjp-X9JoVc/s640/fingeance2.png" width="640" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<div>
After you’ve chosen your characters and have completed the first level, you’re shown the screen above. The screen above has three players, but ideally would have four. Players felt overwhelmed by the options and confused at the same time as to what items, known as gadgets, do for them. </div>
<div>
<br /></div>
<blockquote class="tr_bq">
A: “I guess I was a little confused as to which abilities boosted my current gadgets and which changed my gadgets. I guess it did say. I don’t know, I guess I didn’t read that.” </blockquote>
<blockquote class="tr_bq">
A: “This says gadget free but it’s the same color. I guess it doesn't change the gadget it makes bullets freeze”</blockquote>
<div>
<br /></div>
<div>
The most important take-away from the above quote is that the player did not read the options. People don’t like to read if they don’t have to. And when it’s not clearly shown what information is priority, players aren’t sure where to start and will instead choose to read information arbitrarily.</div>
<div>
<br /></div>
<div>
<b>Recommendations</b></div>
<div>
<ul>
<li>One recommendation is to use icons/heuristics. Images that everyone universally knows could be useful so they can bypass having to take the time and cognitive energy to read more than they have to.</li>
<li>An example would be to use a “+” sign to demonstrate that an item related to healing properties. The downside of this recommendation is that it would have to be tested in order to ensure players understand what icons stand for. </li>
<li>Another recommendation is to enlarge the highlighted areas and limit the amount of text so players can more easily process what they’re looking at. (Medium priority)</li>
</ul>
</div>
<h3>
Team Dynamic Awareness</h3>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1H4yLDWKsxJa8CjiNj2NMqt-bUpOA5Y0SaxmAypPj_F32NTSsVhNW1Rv4xF4gybk5yv8B5_fIZmdlpx_u1ANJoH1Zmzm7R7wFglB1cl4Mw4NN3PyOlLHx7xGBvqscenBXPn8EaKIYEKI/s1600/fingeance3.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="281" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1H4yLDWKsxJa8CjiNj2NMqt-bUpOA5Y0SaxmAypPj_F32NTSsVhNW1Rv4xF4gybk5yv8B5_fIZmdlpx_u1ANJoH1Zmzm7R7wFglB1cl4Mw4NN3PyOlLHx7xGBvqscenBXPn8EaKIYEKI/s400/fingeance3.png" width="400" /></a></div>
<div>
When choosing beginning characters, it’s not obvious that different selecting different roles matter. There’s is no initially incentive to choose a healer and a tank. It’s assumed that players will know that they should be choosing different roles in order to work together. This may not always be the case. I would not necessarily know the difference between a “tank” and a “bruiser” or “assault”.</div>
<div>
<br /></div>
<div>
All players observed were familiar with team dynamic games. All admitted that they did not initially understand that teamwork was a critical part of the gameplay. This could lead to completion issues and player frustration. </div>
<div>
<br /></div>
<div>
<b>Recommendation:</b></div>
<div>
<ul>
<li>I recommend including an initial blurb that encourages players to select varying characters and by doing so will help them best achieve their goal (Medium priority).</li>
<li>An example would be when players are initially selecting their characters, a blurb pops up that succinctly explains that teamwork is imperative. This could be done by emphasizing different character roles by moving them above the paragraph that explains each gadget so it’s located under the name, making it easier to see.</li>
</ul>
</div>
</div>
<h3>
<b>Final Thoughts</b></h3>
<div>
<div>
<br /></div>
<div>
⦁<span class="Apple-tab-span" style="white-space: pre;"> </span>Player A had 12 deaths, B 15 deaths, and C five deaths. This is a large variance. Perhaps consider what an ideal range of deaths would be. If the current players are all experienced and are still dying this often, perhaps some changes to health should be considered. </div>
<div>
<br /></div>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNk1Pr5NpLwT8Na_jefSDwvaw_otreB_ho6nsrrvzION6HFcEt8d_SGP7S1ilwXVvx3UWqQX6Q94lsO8GZCAw0IS-wrtGJsbNtFxonqVVT2Rfe0RAy12TbJCPkDNYHCK_dTnDfm9GYhnY/s1600/fingeance4.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNk1Pr5NpLwT8Na_jefSDwvaw_otreB_ho6nsrrvzION6HFcEt8d_SGP7S1ilwXVvx3UWqQX6Q94lsO8GZCAw0IS-wrtGJsbNtFxonqVVT2Rfe0RAy12TbJCPkDNYHCK_dTnDfm9GYhnY/s320/fingeance4.png" width="320" /></a>⦁<span class="Apple-tab-span" style="white-space: pre;"> </span>While I was watching gameplay, I noticed that some characters look extremely similar. This, combined with the fast pace of gameplay makes it difficult to differentiate the characters. Consider contrasting the colors more by making one dark blue and the other teal.</div>
</div>
<div>
<br /></div>
<div>
<div>
⦁<span class="Apple-tab-span" style="white-space: pre;"> </span>Finally, consider prioritizizng learning. Currently players are learning as they go. By not explaining more about characters and goals on the front end, this takes away from quality gameplay since players are learning while playing. Gameplay would run smoother is players were not forced to multitask and given a short introduction at the beginning.</div>
</div>
<div>
<br /></div>
<div>
<div>
<br /></div>
<div>
⦁<span class="Apple-tab-span" style="white-space: pre;"> </span>The shop menu shows the “Close” button on the right. Consider moving this to the left, swapping it with the 'Purchase' button. Since people move from left to right as they read this should help make the flow feel more natural when purchasing items.<br /></div>
<div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwJj7FiQ2Ao29SGW9HTHU6BhtEiKZVG81NxkD0gNI4SQSLlEiyxZ0j7ydEt5-fhPiPdixg1oH5EcpsnaT1n8ayPVn3H8PZfvaADVwpDHYYw_pnN4nIKjwqoH9V5A1LFVCdI7t6CCtVmE/s1600/fingeance5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuwJj7FiQ2Ao29SGW9HTHU6BhtEiKZVG81NxkD0gNI4SQSLlEiyxZ0j7ydEt5-fhPiPdixg1oH5EcpsnaT1n8ayPVn3H8PZfvaADVwpDHYYw_pnN4nIKjwqoH9V5A1LFVCdI7t6CCtVmE/s640/fingeance5.png" width="640" /></a></div>
</div>
</div>
<div>
<br /></div>
<br /><h3>
<b>Summary</b></h3>
Fingeance needs some work on clarity and efficiency when it comes to communicating character traits and upgrade details to it's audience. With some changes, the game will be more accessible to less experienced players. Overall, the game looks promising and I look forward to watching it grow into an even better game.<div>
<br /></div>
<div>
____</div>
<div>
<span style="background-color: white; color: #212121; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 19.5px; text-align: center;"><br /></span></div>
<div>
<i><span style="background-color: white; text-align: center;">Hannah Murphy is a</span> User Experience Researcher, video game lover, runner, and board game enthusiast. She's been playing all sorts of games for as long as she can remember, with her favorite game of all time being The Legend of Zelda: Ocarina of Time. If you're wanting to inquire about a game review, feel free to reach out to her on <a href="https://twitter.com/h_jmurphy">Twitter</a> or check her out on <a href="https://www.linkedin.com/in/hannahmurphy1">LinkedIn</a>.</i></div>
Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-85594668898192870962016-06-20T06:00:00.000-04:002016-06-20T06:00:07.148-04:00Legion TD 2 (Pre-Alpha Demo) Usability Review<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI16PcOOL1XWomXdiZaa2k49rmQ_UPS6q8L2sR8e5Y-4kLph-67loRDCieJMLr_Ji8ZLDYWHeseltWKK3aDh7yn0j0OOZXUWJdo1axQAWUnj9njzg1oKpyC9BsSGzvccX1gyJkGEQgyLQ/s1600/legiontd2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI16PcOOL1XWomXdiZaa2k49rmQ_UPS6q8L2sR8e5Y-4kLph-67loRDCieJMLr_Ji8ZLDYWHeseltWKK3aDh7yn0j0OOZXUWJdo1axQAWUnj9njzg1oKpyC9BsSGzvccX1gyJkGEQgyLQ/s640/legiontd2.png" width="640" /></a></div>
<br />
<br />
Legion TD 2 is a tower-defense game in which the player controls minions and mercenaries to defend their king from opposing armies. Currently in pre-alpha, the player jumps straight into the action: right from the get-go, you have 180 seconds to set up a phalanx to defend your king. Wave after wave, balance your resources to position yourself correctly for late-game as the waves get more difficult.<br />
<br />
As demos go, Legion TD 2 is looking fairly shiny and clean. Even though there was no tutorial, I picked up the game (fairly?) quickly. And while I'm sure the team will eventually make a tutorial, there are a few places where I certainly had questions, or I have some concerns.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB1w-mYg7hEc2pqxCOC4GVZbQ4pcQ7_azO9bk8oQfO-__wMYCOiQZuGZtICGpJdMfNKdkslNNyf_knMkta5tH-C1WhUGQG2HZnTnLeuOhsZuSSGJLR_34ASLlp8LpWoRkraChMb12W6xE/s1600/20160617215041_1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB1w-mYg7hEc2pqxCOC4GVZbQ4pcQ7_azO9bk8oQfO-__wMYCOiQZuGZtICGpJdMfNKdkslNNyf_knMkta5tH-C1WhUGQG2HZnTnLeuOhsZuSSGJLR_34ASLlp8LpWoRkraChMb12W6xE/s640/20160617215041_1.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">173 Seconds to go before the first round...</td></tr>
</tbody></table>
<br />
<h4>
<b>Font Face & Legibility Is Good Overall</b></h4>
One of the comments I often have for early access games is that their font is difficult to read, or their UI elements are unexplained. Right from the start, I was able to hover over the icons to learn what they were. Font size is good.<br />
<br />
The only places where I'd caution you on font are your combat alerts, the 'creatures remaining' text near the wave counter, and the resource bar below the action bar.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAYNzOMu_bkz7nYpx_QxGJS2oh8-C60EI1jfkZGecWbD7D_yjFR67_oeYap0af07DP4wfV_5Gj2VP9bFHRUHqHaZd7eWPrYV4uzjWaxgzNS04K5RP5PGPAXzv8r0tpnPvEi3oV7FOgy-Q/s1600/alerts.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAYNzOMu_bkz7nYpx_QxGJS2oh8-C60EI1jfkZGecWbD7D_yjFR67_oeYap0af07DP4wfV_5Gj2VP9bFHRUHqHaZd7eWPrYV4uzjWaxgzNS04K5RP5PGPAXzv8r0tpnPvEi3oV7FOgy-Q/s640/alerts.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Alert text during Wave 5.</td></tr>
</tbody></table>
The varying font colors don't seem to make sense (why is Magic in pink? Armor weight in brown? Remaining enemies in grey?), and the lighter colors are very difficult to read over the road. I don't know how vital these messages are (do I really need to know if it's a Magic attack? Not sure.), but if the player ought to pay attention to them, they ought to be more legible.<br />
<br />
Second, the text next to the wave counter is difficult to read -- it could be that the text is too narrow, and the contrast between the black and red too low. Either way, it's hard to read.<br />
<br />
Third, the resources bar is very small, in comparison to the rest of the UI. Since resource management seems to be a large part in planning one's army, I'd expect the resource bar to be larger.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEu0KXgz8spSGuWggrXuX2wSWI0VWmu9qGM01JjVyTse1QLGyr4eFI3l2_MSgMu-LjeGvGbk7J7xTvHtRtNgcuz0TQcL7c4-hw6KQWiRDUgcn5z3b2fAY6bqLyzzmxPOvFmz7sShTmyJU/s1600/resources.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEu0KXgz8spSGuWggrXuX2wSWI0VWmu9qGM01JjVyTse1QLGyr4eFI3l2_MSgMu-LjeGvGbk7J7xTvHtRtNgcuz0TQcL7c4-hw6KQWiRDUgcn5z3b2fAY6bqLyzzmxPOvFmz7sShTmyJU/s1600/resources.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Resources Bar</td></tr>
</tbody></table>
<br /><blockquote class="tr_bq">
Recommendations</blockquote>
<ul>
<li>Consider adding some kind of translucent background behind the text to show contrast between the alert text and the environment. </li>
<li>Consider changing the font size or placement of the 'X creatures remaining' - it's difficult to read currently. Alternatively, if it's not entirely necessarily to constantly see how many monsters are remaining, consider implementing what Path of Exile does: in chat, one can type /remaining to see how many monsters are remaining in that area. But maybe it's better to know at all times what's left -- I'm not sure.</li>
<li>Consider increasing the font size of these resources, and potentially make this bar more prominent. I understand that that UI is currently a placeholder -- but I would recommend making this bar stand out more, considering its importance.</li>
</ul>
<br /><br />
<h4>
<b>Where Did The Mercenaries Go? </b></h4>
One question I had after buying mercenaries was, "wait, where did they go?" Because buying a basic fighter or worker had an immediate effect, I expect to immediately see the mercenaries appear next to the Barracks. Instead, it looked like the mercenaries I bought appeared closer to my king, in the "beacon" area? That wasn't at all what I was expecting, so I bought quite a few more mercenaries than I intended.<br />
<br />
<blockquote class="tr_bq">
Recommendation </blockquote>
After a player buys a mercenary, include some kind of visual effect. If they can't appear adjacent to the town or barracks, have some other kind of visual effect that shows that the purchase went through successfully. In your tutorial, you'll need to explain that you don't place your mercenaries -- that wasn't clear to me, and I honestly couldn't them on the map after I bought them.<br />
<br />
<h4>
<br />Explain Terminology & Mechanics</h4>
One thing to be aware of is that not all players know what "tanky" or "squishy" means in descriptions. If you're familiar with games, you know these things, but consider that not all of the people who will pick up your games will understand those terms. Instead of using shorthand terms, be sure to elaborate. For example, "tanky" can be "strong fighters who can take a lot of damage before falling." Or something.<br />
<br />
In addition, when you eventually make the tutorial (which I strongly recommend you prioritize before the closed beta), be sure to explain all of the controls (yes, even right click to move).<br />
<br />
<blockquote class="tr_bq">
Recommendation </blockquote>
Remember that not all of your players are starting out with your knowledge of the genre, and design accordingly.<br />
<br />
<h4>
<br />Confusion About Map Setup</h4>
Another question I had was about why my fighters moved(/teleported?) near the king after they defeated the wave. I wasn't sure why they did that, and I didn't really want to relinquish control of them. I tried to select all of them simultaneously and right click to move them into the right lane -- but I couldn't do that. It felt somewhat bad to have to relinquish control and watch what happened during a round. Maybe that's just how the demo is designed, but I hope eventually I'd have more control about where my fighters go intra-round. Otherwise I feel helpless.<br />
<br />
The other thing about map setup was I got a notification: "Don't leave your area." I'm not sure what my 'area' is. The entire left lane? Can I not move anywhere else? Why not? Aren't my mercenaries in the right lane? Why can't I have my fighters join them?<br />
<br />
<br />
<blockquote class="tr_bq">
Recommendation </blockquote>
If players aren't allowed to let their fighters leave a specific area during a wave, make sure that they have something else to do to occupy themselves. In addition, if you haven't considered this already, think about animating wave-survivors flying/walking/running to the bridge before the king. Having that animation would help show where the fighters are going -- otherwise it's easy to lose them.<br />
<br />
<h4>
Team Differentiation</h4>
One other issue that I had in Legion TD 2 was differentiating between my team and my opponents. Consider the following picture, for example:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQfNgLL3luiKzeHPfERZvuIWtsxnc2Mk_w8Y3pLH1bpYVtbxMpz63w8Bqrtz1ZuLlTGp1WNMA7poVCxGYeZ37-8xQNchqMRKynEeBv6fzRN7ytuPxwzIFyGrHBXhuKkw-nnrnFwaBQMl4/s1600/health_bars.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="310" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQfNgLL3luiKzeHPfERZvuIWtsxnc2Mk_w8Y3pLH1bpYVtbxMpz63w8Bqrtz1ZuLlTGp1WNMA7poVCxGYeZ37-8xQNchqMRKynEeBv6fzRN7ytuPxwzIFyGrHBXhuKkw-nnrnFwaBQMl4/s320/health_bars.png" width="320" /></a></div>
<br />
<br />
<br />
Which are the enemy creatures? Which are my creatures? Who's winning? I'm not sure, entirely. Team differentiation is also difficult on the mini-map,<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbzT40BqGpuOg1VQpQC89-U4Dhphr5HkaCuYjAwCNhXkWCnFiovRnxvzQ3PsCp7-bKwBsemhT8wHuHjr1R_nLhyDvbybCpb1jmA1UqJQjMm8hnjzf3sY7A-Xw7OhyphenhyphenxV2zaEcdDMZJFv3M/s1600/minimap.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbzT40BqGpuOg1VQpQC89-U4Dhphr5HkaCuYjAwCNhXkWCnFiovRnxvzQ3PsCp7-bKwBsemhT8wHuHjr1R_nLhyDvbybCpb1jmA1UqJQjMm8hnjzf3sY7A-Xw7OhyphenhyphenxV2zaEcdDMZJFv3M/s1600/minimap.png" /></a></div>
<br />
In the map, my fighters are pushing back on yellow's wave of monsters. Considering the size of the mini-map, and the trapezoid on top of the mini-map, it's tricky to see what cluster of monsters is mine. And woe be to those who are colorblind!<br />
<br />
<blockquote class="tr_bq">
Recommendation </blockquote>
<br />
<ul>
<li>Consider changing the health bars of enemy units to be red to black, and friendly units green to black. That way, one can tell who's winning. If you plan on having color-blind settings, green can become blue and red can become orange. There's a good Reddit thread <a href="https://www.reddit.com/r/DotA2/comments/38s0si/need_some_help_from_colorblind_people/"><u>here</u> </a>about changing Dota 2's settings to be more colorblind-friendly.<br /></li>
<li>Consider giving enemy teams different shapes, in addition to colors. For example, red could always be red diamonds; yellow is yellow circles; green is green triangles; blue is blue squares. That way, a color-blind player is better able to tell units apart on the mini-map.</li>
</ul>
<div>
<br /></div>
<blockquote class="tr_bq">
Final Thoughts</blockquote>
<div>
<ul>
<li>Make sure to explain combat icons! I didn't cover that in a section, because I assume you'll cover it in a tutorial.</li>
<li>The idea of upgrading a basic unit (the Aqua Spirit) into something else wasn't immediately clear to me -- I stumbled on that feature, and I'm not sure why I would want to do that as a player. </li>
<li>Initially, I didn't realize that buttons 1 - 5 were essentially opening up different menus from which I could select more fighters/mercenaries -- I thought they were things I could place as well. I learned my mistake pretty quickly, but I thought I'd share that initial train of thought.</li>
<li>Overall, a great first start at a demo!</li>
</ul>
<div>
_________________________<br /></div>
Like the new shiny coat of paint on the blog?</div>
<div>
<br /></div>
<div>
Sorry for the long delay between writing! I was in Texas earlier this month for an interview, and then have been busy with other stuff since them. Busy bein' an adult. Or something. Next week I'll be sharing a guest post! Exciting stuff!</div>
<div>
<br /></div>
<div>
Until then, thanks for reading. </div>
Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-59273772518047104262016-05-23T09:00:00.000-04:002016-05-23T09:00:11.703-04:00Three Days Usability Review<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTxNHJvCjuR68vcZW7koiX4OCb6S6jDVJwtQQ9jrURx_i0Iy0e2I6Uc8Zebyw8x8wyBm4AOKCSZBkf0K0jKE6hG2KBaW0-xl1s2kqLHZEFHfQiYgqu-Z_ysGIB6F5q7-lrEK15v68qX1I/s1600/header.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="297" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTxNHJvCjuR68vcZW7koiX4OCb6S6jDVJwtQQ9jrURx_i0Iy0e2I6Uc8Zebyw8x8wyBm4AOKCSZBkf0K0jKE6hG2KBaW0-xl1s2kqLHZEFHfQiYgqu-Z_ysGIB6F5q7-lrEK15v68qX1I/s640/header.jpg" width="640" /></a></div>
<br />
Three Days, by Gore Pixel Games, is a survival game in which the player has 72 hours to escape an island contaminated by deadly mutation agent called SCP. Collect resources and craft items to build a boat to flee before the island is bombed to prevent the spread of SCP to the mainland.<br />
<br />
As an Early Access game, there's a lot of work to be done in Three Days. The game's primary problem is that its tutorial is not an effective teaching tool, and leaves the player stranded and confused.<br />
<br />
<br />
<h2>
Tutorial Tells, Not Shows</h2>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij_LvHHmk18qU4ewMrZXc63er1VEP8K9Fe9Is3hTCHvkjjscP7YR0HRMOGKSCifH7KONX9n1t47TiQt-iNdrJ7bInySsNndivWMCFCj6tD6S7Y-IcHDPKpA13xV5woZDl8TZQUqOL5VKc/s1600/20160521190628_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij_LvHHmk18qU4ewMrZXc63er1VEP8K9Fe9Is3hTCHvkjjscP7YR0HRMOGKSCifH7KONX9n1t47TiQt-iNdrJ7bInySsNndivWMCFCj6tD6S7Y-IcHDPKpA13xV5woZDl8TZQUqOL5VKc/s640/20160521190628_1.jpg" width="640" /></a></div>
<br />
When you start a game, you're first shown a tutorial. It goes through the basics of the game -- eat enough food, drink enough water, and keep yourself at a good temperature. The better your mood, the more quickly you move. And as you level up, you can get perks.<br />
<br />
This is fine, as it's showing the player different elements of the screen, it moves the white box and arrow to very clearly direct the player's attention.<br />
<br />
But while I might <i>intellectually </i>know that I need to craft shelter before it's night, and that clicking and dragging two items together will create a new item, the intervening steps are a mystery to me.<br />
<br />
The problem with Three Days' tutorial is that it <i>tells </i>me how to play the game, but doesn't <i>show </i>me how. I've played about an 30 minutes of this game, and I have yet to make it through one night. In each game, I've lasted an average of 2 minutes and 15 seconds. That's a <i>lot </i>of deaths.<br />
<br />
My recommendation is to create a tutorial that, instead of giving the player paragraphs to read, provides step-by-step instructions to guide the player up until s/he levels up and needs to allocate a perk point.<br />
<br />
For example, after the player has read the prompt about the island being destroyed soon, the character's thought bubble might say, "Hm, I should create spike traps to defend against monsters at night. I wonder if I can find flint and sticks on this island." The game would then guide the player though the making and setup of the spike traps, as well as guide players through maintaining the health of their character (when chopping down a tree, the character might say, "Oh, an apple! Yum.")<br />
<br />
The reason why I recommend this step-by-step process is because for some (I'd argue most), reading about a process isn't enough. One needs to be taught step by step how to play a game.<br />
<br />
I know that currently the dev is planning on shortening the tutorial (I think it's great that he keeps a <a href="https://trello.com/b/dRljW40c/three-days-game">Trello</a> to mark down what the changes are, and let users mention bugs), but I'd argue that the tutorial doesn't necessarily need to be <i>shortened</i> as it does need to be altered to <i>show </i>players how the game works. Going through the steps (and getting right into the action) may help make the tutorial feel shorter.<br />
<br />
<b>Recommendations</b><br />
<br />
<ul>
<li>Consider changing the tutorial so that the fundamentals are taught through the character's thought bubbles, rather than paragraphs of text. <b>(High priority)</b></li>
<li>Show that pressing space or E will eat food -- I saw this in Trello, but I had no idea it existed in-game. <b>(High priority)</b></li>
<li>I suggest you read <a href="http://gamedevelopment.tutsplus.com/tutorials/the-many-ways-to-show-the-player-how-its-done-with-in-game-tutorials--gamedev-400">this article about tutorials</a>.</li>
</ul>
<br />
<h3>
Final Thoughts</h3>
<ul><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB1Fxbm0EbnnMe7uvZ-Cq9wDPgpawjpQsN91I5VQ-TQaS5ANZY4-fza_8a4mV3azLqVEqgu6h_oYsCM9c2qVA97f_6hPTHmflIfBdedhP4TRalDQbVZVbHQUH8qAui0s9fnAVqmUTgVv4/s1600/HUD.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;"><br /></a><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPrLF_ElDzn6cn-bW6m3NjJXGIeOArjjjWG-yeOKX04HmWKMQUrhKfJ1kJYGsNc7XDCUjHHfgfoTAEqX8v-UuQAqqRADkD-5izif_j2Gd4nrxPR_CdE58YaaElXMTtM0101U59I7TUcJc/s1600/output_SvbQ5a.gif" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPrLF_ElDzn6cn-bW6m3NjJXGIeOArjjjWG-yeOKX04HmWKMQUrhKfJ1kJYGsNc7XDCUjHHfgfoTAEqX8v-UuQAqqRADkD-5izif_j2Gd4nrxPR_CdE58YaaElXMTtM0101U59I7TUcJc/s400/output_SvbQ5a.gif" width="400" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB1Fxbm0EbnnMe7uvZ-Cq9wDPgpawjpQsN91I5VQ-TQaS5ANZY4-fza_8a4mV3azLqVEqgu6h_oYsCM9c2qVA97f_6hPTHmflIfBdedhP4TRalDQbVZVbHQUH8qAui0s9fnAVqmUTgVv4/s1600/HUD.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;"><br /></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPrLF_ElDzn6cn-bW6m3NjJXGIeOArjjjWG-yeOKX04HmWKMQUrhKfJ1kJYGsNc7XDCUjHHfgfoTAEqX8v-UuQAqqRADkD-5izif_j2Gd4nrxPR_CdE58YaaElXMTtM0101U59I7TUcJc/s1600/output_SvbQ5a.gif" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em; text-align: center;"></a>
<li>Make sure you're proofreading your dialogue - in the beginning sequence, "destabilize" is misspelled.</li>
<li>Consider slowing down, or removing, the animation of the buttons and title on the main screen. It's distracting, because it's not clear to me what I should be clicking on when everything is competing for my attention. You can keep the background animation of the chickens/island, but animating the words is too much.</li>
<li>You might also consider reducing the number of buttons to click on here on the main screen -- if I'm not able to interact with the crafting pages, end cut scenes and such (I assume that's why they're grey), why am I seeing them on the main screen? Also, "Endless Mode" and "Tutorial" are sub-sets of "Start," so why have three separate buttons that all Start in some way?</li>
<li>I was looking at the crafting chart, and not in a million years would I have guessed that jam + sticks makes a torch. You might want to consider some other material besides jam.</li>
<li>You don't use space effectively on the screen. The text is huge (which is great), but you could forego most of the text with a more icon-driven design. Take for example, the HUD or The Flame in the Flood (shown below). This design clearly explains one's status without crowding the screen with text. The benefit of this design, versus your small bars with text, is that the status is far more prominent on the screen. If you want inspiration, check out this game.<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB1Fxbm0EbnnMe7uvZ-Cq9wDPgpawjpQsN91I5VQ-TQaS5ANZY4-fza_8a4mV3azLqVEqgu6h_oYsCM9c2qVA97f_6hPTHmflIfBdedhP4TRalDQbVZVbHQUH8qAui0s9fnAVqmUTgVv4/s1600/HUD.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto; text-align: center;"><img border="0" height="302" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB1Fxbm0EbnnMe7uvZ-Cq9wDPgpawjpQsN91I5VQ-TQaS5ANZY4-fza_8a4mV3azLqVEqgu6h_oYsCM9c2qVA97f_6hPTHmflIfBdedhP4TRalDQbVZVbHQUH8qAui0s9fnAVqmUTgVv4/s400/HUD.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The Flame in the Flood HUD</td></tr>
</tbody></table>
</li>
<li>Your crafting chart is confusing as all get-out. Click to zoom? And then when you're no longer clicking it zooms out? Plus, the lines are baffling, and woe be to anyone who's colorblind. Using color alone to mark which lines are which isn't considering players who are colorblind.<br /><br /><div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6s8gz-LIog6ws_veseYdzdiJ38jkoqPQz6XKqRteZ3-fw5LA2UbUPIyJraO7_sV93zYXut57zT00zDDHDgrufOd16ORuTUMfPULta1_YvIZoOF5kLQ_1Iwj5QP790edtUeEN_h9gG6oY/s1600/20160522100021_1.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6s8gz-LIog6ws_veseYdzdiJ38jkoqPQz6XKqRteZ3-fw5LA2UbUPIyJraO7_sV93zYXut57zT00zDDHDgrufOd16ORuTUMfPULta1_YvIZoOF5kLQ_1Iwj5QP790edtUeEN_h9gG6oY/s640/20160522100021_1.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Three Days Crafting Guide</td></tr>
</tbody></table>
Why not just have the scroll wheel have an effect, or a (+)/(-) on the screen? Or you could consider doing something like Civ V where the tree is scrollable. That way you don't have the problem of not seeing all parts of the crafting tree, and you can get rid of the need for color in marking which elements go together.<br /><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img src="http://well-of-souls.com/civ/images/bnw_tech1.jpg" height="344" style="margin-left: auto; margin-right: auto;" width="640" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Civ V Technology Tree</td></tr>
</tbody></table>
</li>
</ul>
<br />
<br />
<ul>
<li>When you die, I didn't realize that clicking on the corpse of your character would restart that level. Is that a feature or a bug? If a feature, you should mark it with a "Try Again" button or something.</li>
<li>Also when you die, you have "Exit Game" instead of "Main Menu," even though you also explain on the screen that clicking the button will return you to the menu. Why not just change the name of that button to "Main Menu" or whatever? Exit Game makes me think I'm going to return to my desktop and close the game.</li>
<li>Other confusing thing:<b> </b>why is a -1 shown when you're deconstructing trees/rocks/whatever? Do resources have HP? It's more confusing than it is helpful. I can already see that the durability of the resource is decreasing with the purple bar.</li>
<li>Consider changing how items are combined -- clicking and dragging can be an accessibility issue. Here's a passage from <a href="http://gameaccessibilityguidelines.com/ensure-that-multiple-simultaneous-actions-eg-clickdrag-or-swipe-are-not-required-and-included-only-as-a-supplementary-alternative-input-method">Game Accessibility Guidelines</a>:<br /><span style="color: #cccccc;"><br /></span><h1 class="page-title heading-color" style="background-color: white; border: 0px; font-stretch: inherit; margin: 0px; padding: 11px 0px 12px; position: relative; vertical-align: baseline;">
<span style="font-size: small;"><span style="color: #666666; font-family: Arial, Helvetica, sans-serif;"><span style="font-weight: normal; line-height: 1.1em;">Ensure that multiple simultaneous actions (eg. click/drag or swipe) are not required, and included only as a </span><span style="font-weight: normal; line-height: 35.2px;">supplementary</span><span style="font-weight: normal; line-height: 1.1em;"> / alternative input method:</span></span></span></h1>
<div style="background-color: white; border: 0px; color: #777777; font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 26.4px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Holding something down rather than tapping causes difficulty for one group, and moving in a precise direction causes problems for another, so combining the two into a drag or swipe multiples the issue.</div>
<div style="background-color: white; border: 0px; color: #777777; font-family: HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 26.4px; margin-bottom: 1.7em; padding: 0px; vertical-align: baseline;">
Other people rely on and enjoy these controls and find simple controls frustrating or less intuitive, so if you can, allow both.</div>
</li>
</ul>
<div>
_________________________</div>
<div>
<br /></div>
<div>
Apologies for the short post! Busy these days. I've got choir, jujitsu, rock climbing, D&D, and board game stuff going on. And work. That too. I'll try to keep up with the schedule, though!</div>
<div>
<br /></div>
<div>
I'll also be writing a bit more about usability as a whole, as I did with the two prior posts. I've been saying I'd for a while write about designing a game with usability in mind, but I feel like I need to read more up on accessibility literature to really give that topic justice. I'm going to start reading <a href="http://gameaccessibilityguidelines.com/">http://gameaccessibilityguidelines.com/</a>.</div>
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-77500594654561539142016-05-09T09:00:00.000-04:002016-05-09T09:00:09.251-04:006 Usability Lessons Learned From PAX East<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MIRdktZ1x1O1S8DeKHs9dCy11WgR63BemrxZ-qv0Zk2Gbjlr3LZVKHaZ_MXqZU8O06i0YAt6fT1T_g2rZzJPmh0EcttZPk1K6etaBEsa2OBeUQBX_1y-vG_2Etw6NNIffE78rrd9RiE/s1600/pax.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-MIRdktZ1x1O1S8DeKHs9dCy11WgR63BemrxZ-qv0Zk2Gbjlr3LZVKHaZ_MXqZU8O06i0YAt6fT1T_g2rZzJPmh0EcttZPk1K6etaBEsa2OBeUQBX_1y-vG_2Etw6NNIffE78rrd9RiE/s640/pax.png" width="640" /></a></div>
<br />
<br />
PAX East was much louder and cooler than I expected. Last month, I got the opportunity to attend as both a general convention-goer (Saturday) and as a volunteer (Sunday) with Perception by The Deep End Games.<br />
<br />
In my last post, <a href="http://trialsanderrorsux.blogspot.com/2016/04/guerrilla-usability-for-game-developers.html">Guerrilla Usability For Game Developers</a>, I recommended that developers try to get usability feedback at conventions. Now, having done this myself, I have some tips and tricks on how to conduct quick-and-dirty qualitative tests at conventions.<br />
<br />
<br />
<ol>
<li><b><span style="font-size: large;">If you can, get a neutral observer. </span></b><br />In general, people are averse to hurting others' feelings. As such, there are times where an individual might have criticism about a product, but may be reluctant to divulge their thoughts in fear that they'll hurt someone's feelings.<br /><br />If you want to get a broader spectrum of positive and negative feedback, consider recruiting a neutral observer - a friend who hasn't worked on your game but is willing to help you out at the booth. That person should not wear clothing branded with your game's name, to further emphasize that they're not involved in the development of the game.<br /><br />Why? When interacting with players at your booth, that neutral observer can honestly tell the players that they didn't have anything to do with making the game, and that candid feedback, positive or negative, is welcome all the same. By not wearing branded clothing, the neutral observer reinforces that they're not directly connected with the game.<br /><br /><i>(In addition, allowing a neutral party to conduct the usability research allows you to focus on running the booth as a whole.)</i><br /><br />Probably an hour into my volunteering, I was watching a player who had ample criticism about the demo and was very articulate in his frustrations. Afterwards, another volunteer remarked that that player was the first person to voice negative comments about the game. What's important to note is that <i>unless you are directly asking for negative feedback, and express that it's not going to hurt your feelings,</i> it's unlikely you'll hear a ton of criticism. I noted that just because he hadn't heard negative feedback before probably wasn't because no one else before that player had criticism. <br /></li>
<li><b><span style="font-size: large;">Moderating limit of two. </span></b><br />In the very beginning of my shift, I wasn't sure how many players I could watch at once. Once I got into a rhythm, though, I found out that I could moderate two players simultaneously if they were sitting adjacent to one another. Trying to moderate three at once was very difficult and led to a drop-off in the quality of my observations.<br /><br />Later, when players had different start times on the games, I found it to be much more difficult to moderate two players simultaneously (radically different problems in early and mid-game that I wanted to probe on). Once the start times were so out of sync, I started watching only one person at a time.<br /></li>
<li><b><span style="font-size: large;">Similar start times.</span></b><br />If you can, try to get them to start the game at roughly the same time. Getting the players to start at the same time allows you to give your spiel about "I'm a neutral observer, tell me how you really feel" only once. This was far easier earlier in the day, when the line wasn't too long.<br /></li>
<li><span style="font-size: large;"><b>Scrap talk aloud and focus on body language.</b></span><br />While the talk aloud method works great in the lab, it's so loud at a convention that it's nigh impossible to hear what players are saying. Instead, be on call if they have a question about something and watch your players' body language. Some players slightly shake their heads when they're frustrated, or lean in slightly when they're having difficulty reading something. One of the players I watched had a clear tell for frustration -- his fingers would flare out and up off the mouse for just a second and he would tense up.<br /><br />It was beautiful. When body language is clear, it's easier to probe on thoughts that the participant didn't initially feel like/think to share with the researcher.<br /><br />Unlike in a lab, where you can more easily see a participant's face, you'll need to focus more on the head, shoulders, and hands of the player.<br /><b><span style="font-size: large;"><br /></span></b></li>
<li><span style="font-size: large;"><b>Consider exit interviews.</b></span><br />Later in the day, conducting orderly usability sessions will be naught but a dream. If you weren't able to watch a player go through the game, consider conducting exit interviews as they leave to get their candid feedback. One of the other volunteers redirected players done with the demo to me so that I could get their feedback & quotes.<br /></li>
<li><b><span style="font-size: large;">Don't make usability testing a whole-day event.</span></b><br />I volunteered to help from 9am - 3pm, but by ~noon I had found all of the usability issues I was going to find. I lost track of how many players I spoke with or watched, but it was far, far over the 5 people one technically needs to get 75% of usability issues. If you're paying your neutral observer, consider only making her or his shift a few hours (or have their role shift a few hours into the event).<br /></li>
</ol>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/proxy/AVvXsEhpJR3LH-YKoaC7jbVs-uwJFbiAaDn_dn46OXCKM0yJm6TZN3_qFIUFirZXsPPAkFmvge8ZQNRa5GgxrqgC9WJG2O1o1Y0yzLdUIoCfLKQV-nbRXeCTLo90IMaH7sZzRqXFUMCSdQfac60lxgHuuPMTtu2VKEPGrzJWAyE4DNAOFvkazDPC7ZwADGfzTagyec_PP05UGWJieLAEqrcyGlj5FwjwBtjFpnv6MCZINaUddf5J3utQxuQ2Tcf9pqW5lJvoZMU7p2TWzSvJpxzUTXmQ9qAcI2EFSSm4FJ8ApSbdhnmqjuhoJzcLedZ7=s0-d-e1-ft&fit=max&v=1462367719&auto=format&q=92&s=6983667973c63d682a00d310da3ca3b2" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEhpJR3LH-YKoaC7jbVs-uwJFbiAaDn_dn46OXCKM0yJm6TZN3_qFIUFirZXsPPAkFmvge8ZQNRa5GgxrqgC9WJG2O1o1Y0yzLdUIoCfLKQV-nbRXeCTLo90IMaH7sZzRqXFUMCSdQfac60lxgHuuPMTtu2VKEPGrzJWAyE4DNAOFvkazDPC7ZwADGfzTagyec_PP05UGWJieLAEqrcyGlj5FwjwBtjFpnv6MCZINaUddf5J3utQxuQ2Tcf9pqW5lJvoZMU7p2TWzSvJpxzUTXmQ9qAcI2EFSSm4FJ8ApSbdhnmqjuhoJzcLedZ7=s0-d-e1-ft&fit=max&v=1462367719&auto=format&q=92&s=6983667973c63d682a00d310da3ca3b2" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Photo of the Perception setup (credit: The Deep End Games)</td></tr>
</tbody></table>
<br /><div>
All in all, a great experience. Thank you Bill Gardner, and the rest of Deep End Games, for letting me tag along. </div>
Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-53234127276622778242016-04-18T05:51:00.002-04:002016-04-18T06:00:24.892-04:00Guerrilla Usability For Game Developers (Part 1)Dear Game Developers:<br />
<br />
As a player, have you ever been so frustrated with a game's controls that you've quit it? Have you ever found a tutorial so unclear that it's more efficient to watch Twitch streamers than to go through the process yourself? Have you ever downloaded a game mod to increase font sizes or fundamentally alter the UI?<br />
<br />
If so, you're not alone. And if not, you're lucky. Many products -- games, apps, and websites alike -- contain elements that make them hard to use or understand. Anything that makes a product harder to use is a "usability issue."<br />
<br />
Usability issues lurk in many products, but while larger companies may have the resources to hire professional user researchers, smaller companies may not be able to do so. But that doesn't mean you need to go without usability testing -- there are multiple methods and tests that a single developer can conduct.<br />
<b><br /></b>
There are two types of user research to identify usability problems: qualitative research and quantitative research.<br />
<br />
<blockquote class="tr_bq">
<b>What Is Qualitative Research? </b>To break it down to its simplest part, qualitative research answers "why." For example, what do players think of my tutorial, do they like it? Dislike it? Why? It provides insights into where players are struggling and how one might address or fix those issues. </blockquote>
<blockquote class="tr_bq">
<b>What Is Quantitative Research? </b>Very simply, quantitative research answers "how." A common approach to quantitative research is A/B testing, which pits designs against each other. A research question for an A/B test could be: "How much faster, if at all, do players complete a tutorial if I place the tooltips on the left versus the right?" I'll go over A/B testing, and other quantitative tests, in "Guerrilla Usability For Game Developers (Part 2)."</blockquote>
<br />
<h2>
<b>Guerrilla Qualitative Research </b></h2>
Qualitative research allows you to listen and understand what players think about your game, and why they have that opinion. Professionally, there are many types of qualitative research tests that a researcher can use (1:1 lab studies, card sorting, diary studies, and more), but to keep your research cheap, you'll want to focus on 1:1 in-depth player interviews. (I'll go over this in a bit).<br />
<br />
Now, when you've decided that you want to test your game qualitatively, there are four things you need to ask yourself. Blogger David Peter Simon explained it well in his post <a href="http://www.uxbooth.com/articles/the-art-of-guerrilla-usability-testing/">"The Art of Guerrilla Usability Testing"</a>:<br />
<br />
<ol>
<li><b>What </b>shall we test?</li>
<li><b>Where</b> will we test?</li>
<li><b>With whom</b> should we test?</li>
<li><b>How</b> will we test?</li>
</ol>
<h3>
What Shall We Test</h3>
Testing can be done at any phase in the design cycle. Only have your UI design sketched out on index cards? Fine. Have a fully functioning prototype? Awesome.<br />
<br />
But "what shall we test" goes beyond "what type of resources do we need to run a test?" In terms of game development, it's "what game element do we want to focus on right now?"<br />
<blockquote class="tr_bq">
<br />
<b>Scenario: </b>You've developed a lot of your game, and have started working on a tutorial. So far, you've designed a tutorial such that the tutorial text always sits on the right side of the screen, and updates when a user completes an action. You're confident that this will make sense to users, but you decide to test it just in case.</blockquote>
<b><br /></b>
<br />
<h3>
<b>Where Will We Test</b></h3>
What you're testing will affect where (and with whom) you can test.<br />
<br />
Want to test a mobile game? Consider bringing it to your local DMV and ask people if they'd be willing to play your game and give feedback on it while they wait. Want to test a computer game, or get feedback on a few designs sketched on paper? Bring your ideas to a coffee shop and ask people if they'd be willing to help you. Want to test a console game? Get feedback from players at conventions when they try their game.<br />
<br />
<blockquote class="tr_bq">
<b>Scenario: </b>You bring a copy of your game to Starbucks and ask a few players to give feedback on the tutorial.</blockquote>
<br />
<h3>
With Whom Should We Test?</h3>
If you're in a public space, find friendly-looking strangers who don't look to be rushing elsewhere. At the DMV and coffee shop, you're not necessarily going to find the types of people who would play your game after it comes out. But it's often people who <i>aren't </i>gamers who give unique feedback -- a regular gamer might know that WASD will move their character, but if a game is lacking a tutorial or feature that explains movement, a non-gamer might have no idea how to move their character.<br />
<br />
If you're at a convention, you'll likely get people like your target population to test the game. When possible, it's good to test with these types of people -- but keep in mind the thoughts and concerns of non-gamers matter, too.<br />
<br />
In addition, <i>how many </i>users you test with matters, too. Research suggests that running 5 participants will catch 75% of your usability issues -- after 5, you begin to have diminishing returns.<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="Increase in proportion of usability problems found as a function of number of users tested" height="238" src="https://media.nngroup.com/media/editor/alertbox/20000319-user-testing-diminshing-returns-curve.gif" style="margin-left: auto; margin-right: auto;" width="400" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><a href="https://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/">"Why You Only Need to Test With 5 Users"</a> by Jacob Nielsen<br />
<br />
<div style="text-align: left;">
<br /></div>
</td></tr>
</tbody></table>
There are times when you should run more than 5 participants -- so I suggest you read the article linked in the graph above.<br />
<br />
If you're not comfortable approaching strangers, <b>consider enlisting the help of acquaintances, or friends of friends</b> -- people who aren't as concerned about your feelings when giving criticism about your game.<br />
<h2>
<br /></h2>
<h3>
How Shall We Test?</h3>
<div>
There are a few ways to run a 1:1 player interview -- and it depends on the kind of feedback you're looking for. To get overall feedback about what the participant is thinking, use a "think-aloud" protocol to gauge what players are thinking. To get feedback about whether participants can find or do something, use a "task-based" test to identify problems with certain elements of your game. Of course, these two protocols can be combined into one.</div>
<div>
<br /></div>
<div>
<blockquote class="tr_bq">
<b>Scenario: </b>You test your tutorial with 5 people at Starbucks. Three of them do not see the tutorial immediately on the right side of the screen, instead inquiring aloud how they learn to play the game. Four of them says that the font on the tutorial box (once they see it) is too small and hard to read. </blockquote>
</div>
<div>
<br /></div>
<h2>
Running a 1:1 In-Depth Interview</h2>
<div>
But running a qualitative study is more than just asking people what they think about your game -- a study is designed. Using the scenario listed above, I'll give you an example of what one could do to design a test.</div>
<div>
<br /></div>
<div>
<h3>
<ol>
<li>Identify Research Question<br /><span style="font-weight: normal;"><span style="font-size: small;">Question</span><span style="font-size: small; font-weight: normal;">: </span></span><span style="font-size: small; font-weight: normal;">What do people think about the current version of the tutorial? Is it easy to use?</span></li>
<li>Identify Testing Location<br /><span style="font-size: small; font-weight: normal;">There's a local coffee shop nearby that should work. I'll go on a weekend so that people aren't necessarily rushing to or from work. </span></li>
<li>Design Research Study<br /><span style="font-size: small; font-weight: normal;">I want to know what people think of the tutorial, so I'll ask them to talk aloud about what they're thinking as they're going through it. If they ask about where tutorial text is, I'll ask, "Where would you expect it to be?" I'll also ask use some task based scenarios, so I'll ask: "Imagine you wanted to read the previous tooltip. How would you do that?" or "Imagine you want to disable the tooltips. How would you do that?" In addition, I'd also ask whether they thought the tutorial was complete, or if they thought it was helpful.</span><br /><span style="font-size: small; font-weight: normal;">Before bringing the study to Starbucks, I'll conduct my study with a friend/family member and time how long it takes. If it's more than 15 minutes, I'll cut down the study to the more essential parts.</span></li>
<li>Run Study<br /><span style="font-size: small; font-weight: normal;">I'll bring my computer to the coffee shop, ask people whether they'd be willing to test and give them an estimate of how long the test will take (< 15 minutes, I'm not paying people so they won't necessarily want to take too long). Offer to buy them coffee/food in exchange. Give them a <a href="http://www.usability.gov/how-to-and-tools/resources/templates.html">consent form</a>, let them know that they can stop at any time, and tell them that you want their honest feedback.</span><span style="font-size: small; font-weight: normal;">I'll ask open ended questions, like: </span></li>
<ul>
<li><span style="font-size: small; font-weight: normal;">What are your thoughts on this?</span></li>
<li><span style="font-size: small; font-weight: normal;">Is there anything here that's confusing to you?</span></li>
<li><span style="font-size: small; font-weight: normal;">Do you have a favorite thing about what you've seen here?</span></li>
<li><span style="font-size: small; font-weight: normal;">Do you have a least favorite thing about what you've seen here?</span></li>
</ul>
<li>Analyze Results & Develop Solutions<br /><span style="font-size: small; font-weight: normal;">After I've spoken to 5 participants, I'll go through my notes and look for patterns. What kinds of things did people like and dislike? How many individuals had trouble with a specific area? Did the participants have any particular feedback on how to improve the tutorial? After finding the patterns, I come up with some ways to fix what the participants mentioned. </span><span style="font-size: small; font-weight: normal;">But it's important to note that not all feedback is helpful, and not all feedback should be included. <span style="font-weight: normal;">When you're analyzing results, look for patterns and repetition -- just because one person said that she or he wants a feature doesn't mean it's worth including. </span></span></li>
</ol>
</h3>
<h2>
Things To Keep In Mind</h2>
</div>
<div>
I must give words of caution: when you put your game in front of players, <b>you will get criticism, and not all of it constructive. </b>One of the most difficult parts of conducting user research as a designer is accepting criticism gracefully. When someone criticizes your game, they're not insulting you and they're not (necessarily) calling your baby ugly -- they're offering honest feedback. And <b>honest feedback is what you need.</b></div>
<div>
<br /></div>
<div>
As you're running a 1:1 test, if someone gives negative feedback, don't insult them. Don't say, "no, you're doing it wrong." Pretty much, in a usability test, the only things a designer should say are the open-ended research questions, any tasks you've prepared, and any probing questions like, "What specifically do you not like about that?" If they ask you a question about certain elements of the game, don't answer it. If they say something mean about it, don't say something mean back. It's difficult to do, but it's necessary. </div>
<div>
<br /></div>
<h2>
Summary</h2>
In summary, guerrilla usability testing can be used to get quick and dirty feedback on your game, at any point in the design cycle. Qualitative testing requires developers to put aside their feelings and ask for honest feedback, without getting defensive in return. <br />
<br />
<br />
Finally, here are a few additional things to keep in mind: <br />
<ol>
<li>When selecting your participants, try to get a balance of who you recruit. Don’t recruit all men, or all women -- even though you might not be talking with people who are big gamers, your target demographic will include all genders.</li>
<li>If you’re using a computer to test, consider installing a program that records audio and the screen. <a href="https://www.xsplit.com/">XSplit </a>is a good choice. This way, you can look back through the videos and refresh what people said and did.</li>
<li>If/when a person asks you, a "how do I" question (how do I jump, which button should I press to run, etc), reflect the question back to them. "Which button do you think you would press to run? Why?"</li>
<li>If at any point in the study someone is no longer talking aloud, feel free to remind them to talk aloud. </li>
</ol>
<br />
In Part 2, we’ll discuss how you can use tools like SurveyMonkey to quantitatively test the efficacy of specific game elements and compare different designs.<br />
<br />
<br />
____<br />
<br />
Want to learn more about usability testing? Check out these other resources:<br />
<br />
<ul>
<li><a href="https://www.youtube.com/watch?v=0YL0xoSmyZI">"Guerrilla Testing With Usability Cafe"</a>, YouTube Video.</li>
<li><a href="http://www.usabilitycounts.com/2011/01/04/four-steps-to-great-usability-testing-without-breaking-the-bank/">"Four Steps to Great Usability Testing (Without Breaking the Bank)"</a> by Patrick Neeman</li>
<li><a href="https://www.nngroup.com/articles/talking-to-users/">"Talking With Users During A Usability Test"</a> by Kara Pernice</li>
<li><a href="http://www.uxforthemasses.com/usability-testing/">"Usability testing tips, helps, and guidelines"</a> on UX For the Masses.</li>
</ul>
<br />
<br />Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-87775555669228217472016-04-04T06:08:00.000-04:002016-04-07T15:06:42.360-04:00Wolcen: Lords of Mayhem Usability Review<div class="separator" style="clear: both; text-align: center;">
<img src="http://cdn.akamai.steamstatic.com/steam/apps/424370/header.jpg?t=1459246354" /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
WOLCEN Studio's Wolcen: Lords of Mayhem is a hack and slash action RPG strongly reminiscent of Diablo II, Path of Exile, and Torchlight. Currently in early alpha, the game is rough-hewn stone -- it has a good shape, but little polish. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both;">
Wolcen has gone the safe route, mostly, by not reinventing the wheel of the main UI. Compare the following images:</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoycaYgzve5Byd1eZeKHZdirxq3bjKQOmr6q7imMT2VljiSuJdcmIttpWDflKarK3S-nEHnOtLP0kaa7Vwy_9NeTJRoNRRU2cX3z-UrIDGHLt5qITwH8-43vIiJm5sK9FXeQD2FLsinzg/s1600/wolcen+bar.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="88" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoycaYgzve5Byd1eZeKHZdirxq3bjKQOmr6q7imMT2VljiSuJdcmIttpWDflKarK3S-nEHnOtLP0kaa7Vwy_9NeTJRoNRRU2cX3z-UrIDGHLt5qITwH8-43vIiJm5sK9FXeQD2FLsinzg/s640/wolcen+bar.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 12.8px;">Wolcen: Lords of Mayhem Ability Bar</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinJKtj_c9-b8wkjqajnj8Igex49gecDy89uzMIjFnVchU_ZzlK3eqeSqYEcRDTCO8G8DQMSVwQpkVFojULhKIv0twtOwf5s37FY5zbx7WJ4SiHvCO6zFO8vHTdEBNPaduFKioTp54THN8/s1600/Cut+D3+-+Edited.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="118" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinJKtj_c9-b8wkjqajnj8Igex49gecDy89uzMIjFnVchU_ZzlK3eqeSqYEcRDTCO8G8DQMSVwQpkVFojULhKIv0twtOwf5s37FY5zbx7WJ4SiHvCO6zFO8vHTdEBNPaduFKioTp54THN8/s640/Cut+D3+-+Edited.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 12.8px;">Diablo III Ability Bar</td></tr>
</tbody></table>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEa33AJGV6A1H3-ArRtBwdhcN8Xh0Cm18zALT6PAojmnkFfqMgThGSzfWo3i_3bkHN6v8rJLHrsfxZgIQKE47x1g1kfAFCsEjkqYknUkuuSI32ROQVF2vrmxRvYpojHx-a_ejog5Vbf88/s1600/Torchlight+-+Edited.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEa33AJGV6A1H3-ArRtBwdhcN8Xh0Cm18zALT6PAojmnkFfqMgThGSzfWo3i_3bkHN6v8rJLHrsfxZgIQKE47x1g1kfAFCsEjkqYknUkuuSI32ROQVF2vrmxRvYpojHx-a_ejog5Vbf88/s640/Torchlight+-+Edited.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 12.8px;">Torchlight II Ability Bar</td></tr>
</tbody></table>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuHQMrtzKZWpmckG9x5raiZsHbZFBly062XDGKqWxbb3Y-Rtt10Z9A28dPvcd1GkxM7waWu3IysGuNsxusfIyGXGcLslMwafOiZANJCa2xKDHnWftZBgFQH0v9_Tek04VAKZw0NPXWzBs/s1600/Cut+Path+-+Edited.png" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="86" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuHQMrtzKZWpmckG9x5raiZsHbZFBly062XDGKqWxbb3Y-Rtt10Z9A28dPvcd1GkxM7waWu3IysGuNsxusfIyGXGcLslMwafOiZANJCa2xKDHnWftZBgFQH0v9_Tek04VAKZw0NPXWzBs/s640/Cut+Path+-+Edited.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 12.8px; text-align: center;">Path of Exile Ability Bar</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
But where Wolcen does diverge, usability concerns follow.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2 style="clear: both; text-align: left;">
Usability Concerns: Skills and How to Add Them</h2>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Where Wolcen struggles the most is how it displays and explains to users how to allocate and understand their skills. There are two types of skills: passive and active skills. The player gains active skills by finding and reading ability books -- and active skills gain 'experience' when used that then level those abilities up. Passive skills are acquired whenever the player levels up, and are not leveled up by use<i>. </i></div>
<div class="separator" style="clear: both; text-align: left;">
<i><br /></i></div>
<div class="separator" style="clear: both; text-align: left;">
There are a few issues with how Wolcen explains and displays its passive and active skills.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="clear: both; text-align: left;">
Adding To Shortcut Bar</h3>
<div class="separator" style="clear: both; text-align: left;">
Shortly after finding the first ability tome in the starting area, the player is presented with tutorial text that reads: "Lightning attacks are effective in water. Use the (S) key to assign Hands of Power in your Skills Bar." When I pressed (S), I expected the game to then allocate the lightning attack to (1) in my shortcut bar automatically. <i>(It didn't.)</i></div>
<div class="separator" style="clear: both; text-align: left;">
<i><br /></i></div>
<div class="separator" style="clear: both; text-align: left;">
What happened was that the game opened an Active Skills pane, shown below.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0RWoRmicYK12SvsVCWCTks0d37aL6N6YFFMDH_dkOtMTG-FMdD1KICLJwwr7lC1scANKplN1BZ0nTbHko7GQj1Ebb4YCn18d4YwsqReLqjixPII9CxdDLMYeYBMjqoZpTTgizxMFi2iE/s1600/S_power.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="462" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0RWoRmicYK12SvsVCWCTks0d37aL6N6YFFMDH_dkOtMTG-FMdD1KICLJwwr7lC1scANKplN1BZ0nTbHko7GQj1Ebb4YCn18d4YwsqReLqjixPII9CxdDLMYeYBMjqoZpTTgizxMFi2iE/s640/S_power.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Active Skills pane</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: left;">
Since the Tutorial box was still open when the Skills pane opened, I didn't see the skill bar behind it. So, when trying to assign the Hands of Power skill, I was clicking on the main skill bar, not the one hidden behind the tutorial pane (which is the correct way to assign). Thus it took me longer than I'd care to admit to correctly assign abilities to my skill bar.</div>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: left;">
<b>Recommendations</b></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul>
<li><b>High Priority: </b>Consider heavily redesigning the Active Skills page. Instead of having users click on any of their abilities, and then click on the skill bar, explain to them that they need to click and drag (or something) the icon into their skill bar.</li>
<li><b>High Priority: </b>Remove the copy of the skill bar from the Active Skills pane. The duplication of the feature is more confusing than it is helpful.</li>
<li><b>High Priority:</b> Make sure that your tutorial panes close after the player has completed that action! Part of the reason I didn't see the skill bar here at first was because it was hidden behind the box.</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="clear: both;">
Unexplained Active Skill Elements</h3>
<div>
When an active ability is ready to level up, the player has the choice of leveling up that ability's Power Level or Utility Level.</div>
<div>
<br /></div>
<div>
... I have <i>no idea </i>what this means, and what in-game effect it has. Does upping its power level make it do more damage? What does utility even <i>mean </i>here?</div>
<div>
<br /></div>
<div>
In addition, the ability explanation pane, on the right of the "Active Skills" pane below, has other elements and icons that are not elaborated upon. For example, what are the three numbers above the ability description? Why is one of them red? Why is there an 'axe' icon on the screen? An hourglass icon?</div>
<div>
<br /></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibYGdX6jQOZ4fxlEcwdGd39Stv_0PbK-NFIjij4547z_pnIzXSJn8ymPtoqwO-SgpIfGsj02FHKZrRCr-H_ht9XJ439djMN_gj9JOYvIMJEzTsNfgTH_gE_akO7AijmZm5aXiI8LwYAOA/s1600/20160402173404_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibYGdX6jQOZ4fxlEcwdGd39Stv_0PbK-NFIjij4547z_pnIzXSJn8ymPtoqwO-SgpIfGsj02FHKZrRCr-H_ht9XJ439djMN_gj9JOYvIMJEzTsNfgTH_gE_akO7AijmZm5aXiI8LwYAOA/s640/20160402173404_1.jpg" width="640" /></a></div>
<div>
<br /></div>
<div>
These elements are not explained anywhere, so far as I can tell. And they should be.</div>
<div>
<br /></div>
<div>
<b>Recommendations</b></div>
<div>
<ul>
<li><b>High Priority: </b>You <i>really </i>need some kind of tutorial that explains or teaches all aspects of the leveling process (what is the difference between power level v. utility level; what do the icons mean; why are there many different numbers shown on the description pane, etc)</li>
<li><b>Low Priority: </b>Explain why the ability types ('Brutality,' 'Frost,' 'Lightning') matter; why do you have separate tabs for them?</li>
</ul>
</div>
<div>
<br /></div>
<div>
<h3 style="clear: both;">
Passive Skill Navigation</h3>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP3ji9QvG1U62mxCse9oWvVhlROnO6PNdxbEEg1_Y7AaPphp2wjritNFdTzCsbCVAUjzNJ3UHfhErJAfso8bbk5vmIBhk1qqfvLoIXIV9T8aCccjwJFQBhcBTx_jt7vd09J7q9Avbc524/s1600/20160403121911_1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="446" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP3ji9QvG1U62mxCse9oWvVhlROnO6PNdxbEEg1_Y7AaPphp2wjritNFdTzCsbCVAUjzNJ3UHfhErJAfso8bbk5vmIBhk1qqfvLoIXIV9T8aCccjwJFQBhcBTx_jt7vd09J7q9Avbc524/s640/20160403121911_1.jpg" width="640" /></a></div>
<div>
<br /></div>
</div>
<div>
At the moment, there are five categories of passive skills: Protector, Rogue, Warrior, Wizard, and Utility. Since the game aims to allow players to have as much character and class customization as they want, players can choose from any of these categories. As such, if a player wants to compare two options, they need to tab back and forth in order to compare. </div>
<div>
<br /></div>
<div>
What I'd recommend is doing something closer to Path of Exile.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.blitzbeyond.com/wp-content/uploads/2013/05/poeskillstree.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.blitzbeyond.com/wp-content/uploads/2013/05/poeskillstree.jpg" height="249" width="640" /></a></div>
<div>
<br /></div>
<div>
POE shows all abilities on the screen simultaneously. The player can mouse over an icon to read its ability. The nice thing about Path of Exile's approach is that it allows for immense customization, and also enables the player to select and view an ability path before they confirm it completely (so if they decide they don't want to take two specific abilities, and haven't yet pressed "Apply" they can undo their choice.)</div>
<div>
<br /></div>
<div>
The other recommendation I have is to make your categories "Offense," "Defense," "Survivability," and "Utility" instead. The game can give a character a class based on their passive selections; but players can choose whichever abilities they want without choosing a class themselves.</div>
<br />
<br />
<h2 style="clear: both; text-align: center;">
<div style="text-align: left;">
Final Thoughts</div>
</h2>
<div class="separator" style="clear: both; text-align: center;">
</div>
The game is promising to be a good combination of Skyrim and the Diablo series. With the goal of ample character creation options (currently unavailable in the alpha) and the beginnings of an open-world layout, I'm excited for Wolcen to progress.<br />
<div>
<div>
<b><br /></b></div>
<div>
<b>Recommendations</b></div>
</div>
<div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhit2Lg1ODaBH9sdGQ0OTXSkjnTczG7tksnGGIK_uH4MHRGN32FpnLy0ph4etPM8wHIWOnnUrw99IlgaWciq53KaFa-Qstk2Vp0ryZFoY03dhHh0fF-yHz26drZ1SzgANsDAi445bEdoAY/s1600/health_on-to.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhit2Lg1ODaBH9sdGQ0OTXSkjnTczG7tksnGGIK_uH4MHRGN32FpnLy0ph4etPM8wHIWOnnUrw99IlgaWciq53KaFa-Qstk2Vp0ryZFoY03dhHh0fF-yHz26drZ1SzgANsDAi445bEdoAY/s200/health_on-to.jpg" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Health on top of character panel</td></tr>
</tbody></table>
<ul>
<li><b><b>High Priority:</b><span style="font-weight: normal;"> Currently, the player's Health bar blocks out content on the Character information panel. Consider changing the screen such that the Character panel is alwa</span><span style="font-weight: normal;">ys on top. </span></b></li>
<li><b>High Priority: </b>Implement an openable "objective" pane that more fully explains what the player should be doing.</li>
<li><b>High Priority:</b> If implementing an objective pane isn't possible for the near future (too resource intensive), consider having the main character give some exposition as he's starting the dungeon (he got captured by ____ for _____ reason). Or something. The exposition should come before the objective is given.</li>
<li><b>High Priority: </b>Add the 'Shift' key's role into the control map. Like in other games, pressing the Shift key roots a character in place for attacking. This isn't on the control map; if you've played a similar game before you know it -- but it's not explained here.<br /><b><br /></b></li>
<li><b>High Priority: </b>Consider making the Ability Score (+) button more prominent on the character screen - it's currently hard to find.</li>
<li><b>High Priority: </b>Consider allowing players to press "Apply" or "Confirm" when adding new skill ability points after leveling up. They might want to see how increasing/decreasing a certain stat will affect their other stats. If they do not "Confirm" their selection, the points are not allocated.</li>
<li><b>High Priority: </b>Get someone to edit/proofread your English translation & grammar. There are a lot of errors & strange translations that need to be addressed.</li>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDt8j13b9QJraR3KCVfRX3i4WqaUfa8IhXvEZraz6CFBbyzSKvN-G8lDdoLFXUIANQ_K4dChqlDmzIwiEU99KfA5jhnmruMu9xiUBUtyjvEQTKRv3wiyn1I4grMEqIydiEkAVxShIMf88/s1600/music_bars.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="96" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDt8j13b9QJraR3KCVfRX3i4WqaUfa8IhXvEZraz6CFBbyzSKvN-G8lDdoLFXUIANQ_K4dChqlDmzIwiEU99KfA5jhnmruMu9xiUBUtyjvEQTKRv3wiyn1I4grMEqIydiEkAVxShIMf88/s320/music_bars.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Music settings bars.</td></tr>
</tbody></table>
<li><b>Medium Priority:</b> Consider un-hiding the arrows next to these settings bars and having them always be visible next to the bars; the interaction will be far clearer and less error-prone</li>
<li><b>Medium Priority:</b> The font of the 'Mission Successful' pane is hard to read. Consider changing it.<br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixhcREWWVqBUZGfuFKrsdhRmp4TODbtbTxumW5NmdM1rhY2eQfJQNQUqpD0aBY2y-sBHHzzABDIlvWEkFBNub66_nm-i6lwOT2Vc1G9QEWceptoSanjY2IwSPcsLVkx47by_K2Twlc-uQ/s1600/mission.png" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixhcREWWVqBUZGfuFKrsdhRmp4TODbtbTxumW5NmdM1rhY2eQfJQNQUqpD0aBY2y-sBHHzzABDIlvWEkFBNub66_nm-i6lwOT2Vc1G9QEWceptoSanjY2IwSPcsLVkx47by_K2Twlc-uQ/s1600/mission.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The shadowed font here, especially the white outline around grey, makes this pane difficult to read.</td></tr>
</tbody></table>
</li>
<li><b>Low Priority:</b> As you have on other settings pages, give the active settings bar (whatever you've most recently selected) an orange/yellow/whatever you have treatment</li>
<li><b>Low Priority:</b> I'm not sure if this is a translation issue, but "Intelligence" is typically the word games use that influence the player's access to and efficacy with magic. "Power" is a synonym of Strength, and to a degree, Constitution, so in-game I wasn't sure which attribute would increase my mana pool. I'm consider renaming that to "Intelligence" just to be consistent with user expectations.</li>
<li><b>Low Priority:</b> Add quest/merchant symbols to minimap. I saw that there's a merchant with a blue * above his head. Make sure that emblems like that also appear on the minimap.</li>
</ul>
<div>
<br /></div>
</div>
<div>
_____________</div>
<div>
<br /></div>
<div>
Apologies for missing my second post last month, folks! I was busy with my sister's wedding. It was an outdoor wedding in Florida, and it rained the entire weekend (Thursday, Friday, Saturday [wedding], Sunday). It was beautiful, though. Thanks again for reading!</div>
Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-37802971823851962372016-03-14T06:03:00.000-04:002016-03-14T18:20:32.147-04:00Stardew Valley Usability Review<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNz2Wp1CmV94pM2bQvxu34GZkh7uJPJjS7DLy_z_351sWhbmIZv9XKy8hgRhYC3BtBgQtZvAXGBDxcAs1Xu9v7bFkw_oqOzPGU5ZYzTyOgLSfCxMzSpaymhZ7PJcxY648zSJLxkmY89H8/s1600/stardew_valley.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNz2Wp1CmV94pM2bQvxu34GZkh7uJPJjS7DLy_z_351sWhbmIZv9XKy8hgRhYC3BtBgQtZvAXGBDxcAs1Xu9v7bFkw_oqOzPGU5ZYzTyOgLSfCxMzSpaymhZ7PJcxY648zSJLxkmY89H8/s640/stardew_valley.jpg" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Stardew Valley is a farming-simulation RPG highly reminiscent of Harvest Moon and Animal Crossing (and I'm sure others that I haven't played). Created by one developer, ConcernedApe, the game is a charming and polished labor of love. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
From a usability perspective, aspiring developers can use Stardew Valley as an inspiration. While there are a few recommendations here and there for the developer, this post is mostly about what Stardew Valley does correctly and why those methods work. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2 style="clear: both; text-align: left;">
Character Creation</h2>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWO5Wc1jF5WVms1HzfSuniqpED3AUaZLkIehMwSUbTCeC-stJnv6LI7FGhUS-0QngR1HESGdFWTpbuYKrIHkZ2TjuQlKkIkxKBohC-zhhdY1cRgd_ygbLRp2pBQTI-h6Z1Jw15ynxxcEM/s1600/valley1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWO5Wc1jF5WVms1HzfSuniqpED3AUaZLkIehMwSUbTCeC-stJnv6LI7FGhUS-0QngR1HESGdFWTpbuYKrIHkZ2TjuQlKkIkxKBohC-zhhdY1cRgd_ygbLRp2pBQTI-h6Z1Jw15ynxxcEM/s640/valley1.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
After pressing, 'Start' on the main page, the user sees a character creation screen. On it, the user can enter their character's name, farm name, sex, and so on. For other developers, there are some key elements here that this screen accomplishes:</div>
<ul>
<li><b>Text Elements</b><br />The window's text is well-sized and colored, making filling out the character creation section easy. The red treatment of 'Favorite Thing' makes it clear that the user needs to pay attention to that text field - and when something has been entered into that field, the font color changes and the 'OK' button lights up. The layout and font styling makes this window easy to understand.</li>
<li><b>Customization Selection</b><br />The arrows and sliders are easy to read, and the character elements (hair, shirt, etc) navigation is cyclical (ex. item 1 --> 2 --> 3 --> 1, etc) making it easy to view all of the options<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9_C7qhEFI2A7skQ6fJEfnSuW_Wd1HHn1VO6q8Yar-WE_ljCcR166QyOqOMJVoTqha8-X9Ll0nx-8rRPOZ_1_5um7J0u-GBvpPsjAn-BJXzRiP-HCvYdNXA_Hrki2rtxkx3ffuxlhB1lw/s1600/circle_arrow.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9_C7qhEFI2A7skQ6fJEfnSuW_Wd1HHn1VO6q8Yar-WE_ljCcR166QyOqOMJVoTqha8-X9Ll0nx-8rRPOZ_1_5um7J0u-GBvpPsjAn-BJXzRiP-HCvYdNXA_Hrki2rtxkx3ffuxlhB1lw/s1600/circle_arrow.png" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 12.8px; text-align: center;">Arrow from The Sims</td></tr>
</tbody></table>
. The only arrow treatment that was unclear was the arrows on the character portrait. Since the arrows next to the hair/shirt etc. navigated between different options, I wasn't sure what the arrows on the portrait did. Once experimenting, it made sense (the arrows rotate the portrait), but when I think 'rotate' I think of circular arrows, like the one shown.</li>
<li><b>Icon Usage</b><br />The window uses clear, basic icons that don't need explanation (cat or dog; male or female; random generator). The only potential issue with the icons is the placement of the random icon (the die) - I didn't find it until just reviewing the screenshots now (if you didn't immediately see it, go back and find it). It's not a <i>vital </i>feature, so it's not the end of the world if it's not easily found. Other clear uses of icons are on the main screen itself -- the eighth-note icon indicates that clicking on the icon will affect the music, and the two boxes in the upper right are shorthand (at least on PC) for making a screen windowed. </li>
</ul>
<div>
<b>Recommendations for ConcernedApe: </b>nothing high priority here - you could keep the arrows and random icon as is and it wouldn't be the end of the world. They'd be enhancements at best.</div>
<div>
<br /></div>
<div>
So, new devs, the lessons you can take away here are thus:<br />
<br /></div>
<div>
1) <b>Use intuitive icons.</b> When <i>you</i> first think of that concept, what do you imagine? Brainstorm four or five different options. If you've seen the icon used frequently in other games <i>in the same context</i> (the six-sided die in character creation, for example), it's a pretty safe bet -- otherwise, draw out the different options you brainstormed and run them by a group of people (go for at least seven, if you want to be even more thorough, do an online survey). An example question would be, "Below are six images. When you think of the concept of 'randomness,' which of these image/s, if any, most fit with your mental model of 'randomness'?" And then you'd have a few different options to show, as well as an answer that's "none of these images fit my mental model of randomness."<br />
<br /></div>
<div>
2) <b>People are curious; let them explore. </b>In character creation, or other places where users are encourage to select one element from a list of options, make navigating between options as easy as possible. Stardew Valley's arrow setup (1 --> 2 --> 3 --> 1, as mentioned before) makes exploring the options easy. Other games that I've reviewed do ( 1 -- > 2 --> 3; 3 <-- 2 <-- 1) which hampers exploration. Basically, when you have a list that you want users to select from, make that list circular.<br />
<br /></div>
<div>
3) <b>Make sure your text is legible.</b> I can't stress this enough. Make sure your font is easy to read on a screen (sans serif font face) and is greater than 10 pt. font if it's vital text; don't use light text on a light background; don't use more than two different font faces in your game, and when you <i>do</i>, make sure they're in different contexts... there's just so much. If you're not sure if something is legible, bring your game to a coffee shop or something and ask for feedback. Be open to criticism. Just because you know what it says doesn't mean other people can read it. </div>
<br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2 style="clear: both; text-align: left;">
Teaching the Game</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2KfRrGkrSsXy1H5oKX4SibAVZ2n4J9PGRALzlcXPW7BdCXgo7DnXnpWk6krG6tbygFuwzSsifNYpaFPjW7D029xdACbB60Wp5wTBmoQWNnx6YSYnNJtDOfYi0Gzs-oZ5F72wfktYW88/s1600/exclaim.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg2KfRrGkrSsXy1H5oKX4SibAVZ2n4J9PGRALzlcXPW7BdCXgo7DnXnpWk6krG6tbygFuwzSsifNYpaFPjW7D029xdACbB60Wp5wTBmoQWNnx6YSYnNJtDOfYi0Gzs-oZ5F72wfktYW88/s640/exclaim.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
As soon as the player's character wakes up on the first day, brief tutorial elements are shown on the screen. They're clearly evident on the screen due to content on the black background, and on the right side, the arrow below the ( ! ) bounces until the player interacts with the exclamation point.<br />
<br />
What Stardew Valley does correct here is not distract the player with too much visual information. The size and placement of the tutorial information (WASD, etc) makes it easy to find (visually, players would look at the middle of the screen first, then left to right), and then to direct the user's attention to the ( ! ) a moving element is used (captures attention). The other thing that the screen does correctly is that hovering over the elements creates a hover-popup to explain the content (so hovering over the ( ! ) shows that pressing 'F' will open the Journal). <b>Lesson for devs:</b> use contrast (light on dark) and movement to capture users' attention during the tutorial. Show one thing at a time so the learning path is linear.<br />
<b><br /></b>
<b>Recommendations for ConcernedApe: </b><br />
<br />
<ul>
<li>Consider changing the name of right-click to 'Interact.' Since right-click has so many effects (opening doors, eating, picking up items), you're not really <i>checking </i>anything (with the exception of mail), you're really interacting with the world. Plus, renaming it will remain consistent with the naming conventions of other recent games.</li>
<li>Consider moving all of the tutorial information ('E' and equipping items) inside the building -- once you go outside, there's so much visually going on that I completely missed those other instructions -- only on my second play-through did I notice the second half of the tutorial. </li>
</ul>
<br />
<h2>
Unclear Elements</h2>
Though I'd say 95% of Stardew Valley is clear, there were two elements that confused me: dropping items, trashing items, and eating.<br />
<br />
For discarding, it wasn't clear to me immediately how to drop an item on the ground. I thought that I would be able to discard an item from the generic item bar on the screen (so selecting an item in the item bar with the arrow keys, and then left clicking on the ground) but this didn't work. Apparently one needs to open the item menu, and then click on the background behind the screen. This wasn't intuitive.<br />
<br />
For trashing, it took me a while to find the trash can on the screen. Though it's a good size, its placement off of the main window made me think that there wasn't a way to trash, because it wasn't immediately evident. It's not the end of the world if you don't move it -- players will find it eventually, but it's good to know that it isn't immediately clear how to trash.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzjHdvPhxmYKRLbzRIbOsCvw_TRWjY4uskl1EcADQwW1o0p69TCG84dvpS_YsZDV0cl4ncA2KXDnSXE3RyRGpc6e2lhs-2R8Vfw5f25v4FokD_LMqvQuhJ_Ost2oNy6g8tEnTaVxGNwa8/s1600/E.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzjHdvPhxmYKRLbzRIbOsCvw_TRWjY4uskl1EcADQwW1o0p69TCG84dvpS_YsZDV0cl4ncA2KXDnSXE3RyRGpc6e2lhs-2R8Vfw5f25v4FokD_LMqvQuhJ_Ost2oNy6g8tEnTaVxGNwa8/s640/E.png" width="640" /></a></div>
<br />
But eating was the most baffling of it all -- in order to eat an item, the player must select the item, then right click on their character with that food selected (another instance where 'check' doesn't really make sense). I'm not sure how this could be made more clear (I tried selecting the food and then left-clicking on the energy bar) -- it could just be right clicking on the item while it's in your item bar -- having to click on your character is a little much.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Recommendations:<br />
<br />
<ul>
<li>Consider re-working how discarding occurs; since it's very easy to fill up one's inventory early-game, the ability to discard something and then pick it up is very helpful. Consider allowing players to discard straight from the item bar.</li>
<li>Consider moving the location of the trash can to be below the 'Organize' button. It's a little strange that it's not right next to the item section. You could even add a 'Discard' icon there, too.</li>
<li>Consider making it such that players can eat food without needing to right click on themselves. It's not a clear interaction.</li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<h2>
Final Thoughts</h2>
<br />
All in all, a charming game. I can see why it's so highly rated on Steam -- I'll go leave a rating myself. Thanks, Jeff, for the recommendation!<br />
<br />Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com6tag:blogger.com,1999:blog-2656111516959276084.post-12948628399974558222016-02-29T06:48:00.000-05:002016-02-29T06:49:57.139-05:00Evolution Usability Review<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFN0BnfSq0Uslfs1-NPlPxAyC2O7EOu67FBcIHKiRydqq-u6MXgv3TwHLIiTF7fnRhXrtPSIs4LqCcPWvUSidA2N5kDupZlkDqqPHQ9siEGrz4vPvTt-QM9IaLydnsdsOSV4HKrPUIBLY/s1600/Evolution_Banner2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFN0BnfSq0Uslfs1-NPlPxAyC2O7EOu67FBcIHKiRydqq-u6MXgv3TwHLIiTF7fnRhXrtPSIs4LqCcPWvUSidA2N5kDupZlkDqqPHQ9siEGrz4vPvTt-QM9IaLydnsdsOSV4HKrPUIBLY/s640/Evolution_Banner2.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Evolution is an Early Access Steam game where the player controls a pool of primordial beings and watches them evolve. Watch cells navigate in tidal pools, fighting to survive and socialize with others of its kind. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Evolution's primary issue is that it hardly explains how to play the game. And while it <i>technically </i>has an information pane that covers elements of the game, the content is not in-depth enough to cover actual gameplay. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2 style="clear: both; text-align: left;">
Screen Elements</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdskEe-Z1Z70j9PYpYOayVKPHyL2Ty2a1H-OjIgs9camlKZUpqeT1c6Dk3y8XCMiMjFwSpz_VHa2EGgq04Wfe7L2ifm2QIhcZlDQITMQnvRgvVQ-hc-M3Rfy4YTT42lOh7HOtcnoWwh3o/s1600/2016-02-27_00006.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdskEe-Z1Z70j9PYpYOayVKPHyL2Ty2a1H-OjIgs9camlKZUpqeT1c6Dk3y8XCMiMjFwSpz_VHa2EGgq04Wfe7L2ifm2QIhcZlDQITMQnvRgvVQ-hc-M3Rfy4YTT42lOh7HOtcnoWwh3o/s640/2016-02-27_00006.jpg" width="640" /></a></div>
<div>
<br /></div>
<div>
When a player first logs into a new game of Evolution, he or she will see a dark screen with three panes popped out: an information pane (lower left), a creature pane (upper right), and a settings pane (lower right), and a colorful... something... in top-center.</div>
<div>
<br />
I'll break these down one at a time, because each of them has their own issues.<br />
<h3>
<br /><b>Information Pane<br />____________________________</b></h3>
The information pane has four main elements: the primary tabs showing the different game levels, sub-tabs listed under specific level tabs, the small blue information icon, and a button that says "Online Help." The issue is that the information pane raises more questions than it answers.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIiPUGwNtMSaUbxIV6crKEF7-4Dz46FUo9GpFARisN5gOV0fBl19rxEaS0WyEcr-5VJ4PUspqsUgq6RtDTV5GrFUmSEwusewDpdm53x5fvpaeKWms7-q4Cg-wWfltQ2_aBgzaeo-IckD4/s1600/game_tabs.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIiPUGwNtMSaUbxIV6crKEF7-4Dz46FUo9GpFARisN5gOV0fBl19rxEaS0WyEcr-5VJ4PUspqsUgq6RtDTV5GrFUmSEwusewDpdm53x5fvpaeKWms7-q4Cg-wWfltQ2_aBgzaeo-IckD4/s640/game_tabs.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Primary Game Tabs</td></tr>
</tbody></table>
<b>What does the green treatment mean?</b><br />
Under two of the game levels are green underlines. One (under Primordial) is bold, and has serifs pointed downwards. The other (under Tidepool) is not bold and has its serifs pointed upwards. The bold underline suggests to me a few things: <br />
<br />
<blockquote class="tr_bq">
<i>1) That I'm in the Primordial (Soup) level</i>... but the Tidepool underline strikes that suggestion out (plus, I can see in the lower right corner of the screen that I'm in the Tidepool level). </blockquote>
<blockquote class="tr_bq">
<i>2) That Tidepool is a creature stage chronologically after Primordial Soup</i>Because I'm in the Tidepool stage, and Primordial is also underlined but treated differently, I must have progressed past the Primordial Stage. But, with Battle Arena listed last, this also isn't the case.</blockquote>
<blockquote class="tr_bq">
<i>3) ???</i>I really have no idea.</blockquote>
.<b>..What does the <i>turquoise </i>treatment mean?</b><br />
<br />
<b><br /></b>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj42HcGNYPbyoUbQ9RfCA4qaseiNDC33fgVgv101t3kATabTbMZgVxXamXMJGKvwGYOW7m7UuUcKnyaMZmKuMNLZBCzzZp7VoVs9YLwvnFicKhtuVFbhVi9aCxXUqeRQUeagOhRMtjpD9I/s1600/sub_outbreak.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj42HcGNYPbyoUbQ9RfCA4qaseiNDC33fgVgv101t3kATabTbMZgVxXamXMJGKvwGYOW7m7UuUcKnyaMZmKuMNLZBCzzZp7VoVs9YLwvnFicKhtuVFbhVi9aCxXUqeRQUeagOhRMtjpD9I/s1600/sub_outbreak.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sub-Tabs</td></tr>
</tbody></table>
I thought that the turquoise treatment meant that section is selected, but in the image above, the explanation text talks about the Outbreak level. So does the green treatment mean that's what section I'm in? If so, why wasn't I seeing anything about Tidepool before?<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9qKDcZVQbwaQ4CqdHqcthfDgp-FbFpFKsnOguVEkMIhTdYbhKYlC6yd5zvA59es-JDHn9Y_rEYG3UVPhNcH-zQMcbdnvJIcWxBp6nsa0DX0ICXBHkdXdTJrCU2kXoLQH4WYbXCJUDzqQ/s1600/DNA.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="444" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9qKDcZVQbwaQ4CqdHqcthfDgp-FbFpFKsnOguVEkMIhTdYbhKYlC6yd5zvA59es-JDHn9Y_rEYG3UVPhNcH-zQMcbdnvJIcWxBp6nsa0DX0ICXBHkdXdTJrCU2kXoLQH4WYbXCJUDzqQ/s640/DNA.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Creature Sub-Tab</td></tr>
</tbody></table>
<br />
And then even <i>later</i>, in the Creature sub-tab, all of the sub-tabs are the turquoise color. And all of the DNA tabs (DNA, Structure, Sensor, etc) are the turquoise color. So, I really don't know what that means.<br />
<b><br /></b>
<b>Why are all of the game levels listed?</b><br />
<b></b>Is it important for the player to know the specifics of Laboratory when they're in the Tidepool level? It's now evident that this is meant to be a universal panel across levels -- but when I'm in a level, I don't really care about what the goals of other levels are.<br />
<br />
<b>How do I close the information pane?</b><br />
I eventually found this out -- either by using a keyboard shortcut or pressing the blue ( i ) in the upper right of the information pane. That action, clicking the ( i ) to minimize and maximize the pane, really isn't clear.<br />
<br />
<h3>
<i>Recommendations</i></h3>
<br />
<ul>
<li><b>High Priority: </b>Consider adding a 'Tutorial' level where you explain what everything means (rather than having the player hunt through the information pane to learn the game). In that level, teach them the controls one step at a time (so for example, the first step could be selecting and moving an organism). Once they've successfully completed a task, have them move onto a new one. Show, don't tell.</li>
<li><b>High Priority: </b>Increase the font size on sub-tab and body text (with the exception of the Overview text). It's really hard to read the information panel.</li>
<li><b>Medium Priority: </b>If you create a tutorial level (which I highly, highly recommend), collapse your full information panel (with design changes) into a menu option (like a 'Help' option). And instead, when a player enters a level, they see that level's goal & reminder text for what certain elements mean. But players shouldn't have to read a novella to play the game.</li>
<li><b>Medium Priority: </b>Be consistent with how you use the green and blue treatments and think about what each version conveys. For example, changing the visuals of a tab from others (highlighting it, bolding it, underlining, etc) suggests that that tab has been selected or activated. If both the green underline and the turquoise mean something is selected, choose either green or turquoise to be your 'activated' state.</li>
<li><b>Medium Priority: </b>Considering changing the ( i ) button to a + / _ symbol, to more clearly show that the menu can be opened and closed. If you start a level with the information pane open, (with the _ symbol in the upper right) they'll know that it's an information pane and that they can minimize and maximize it.</li>
</ul>
<div>
<br /></div>
<div>
</div>
<br />
<h3>
<b>Creature Pane<br />____________________________</b></h3>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiipeVgZBQ8N5vmgW4s0aBwqz5B3vuE0eR_M9ccu1wpjGD67vRN7M_Mlq0-neTMJlriSG9M01Ludm5PA4eGMldtHhoBnkZzc4tm8p-jiniNsWd6j0APlyLiKbHW5JExR3Y8KG5UmoT1C9s/s1600/Creature_Pane.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="224" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiipeVgZBQ8N5vmgW4s0aBwqz5B3vuE0eR_M9ccu1wpjGD67vRN7M_Mlq0-neTMJlriSG9M01Ludm5PA4eGMldtHhoBnkZzc4tm8p-jiniNsWd6j0APlyLiKbHW5JExR3Y8KG5UmoT1C9s/s320/Creature_Pane.png" width="320" /></a>On the left and right sides of the main screen, a player can see a creature screen. But, like much in the game, it's not explained (unless you read the information novella, and even then not everything is explained). Here are my questions:</div>
<div>
<br /></div>
<div>
<b>What do each of the colorful bars mean?</b></div>
<div>
I think green is health, which may or may not refill when a creature eats? But the red bar refills when a creature eats meat, so it might be that the green bar refills when the creature eats plants? What is the blue bar? White? It's really not clear...</div>
<div>
<br /></div>
<div>
<b>What does the moving green line on the left DNA structure mean?</b></div>
<div>
During the game, a small green line (pictured above) moves up and down on the creature pane. It doesn't go entirely top to bottom, but hovers between to places for a bit, and then moves. I have <i>no </i>idea what this signifies, if anything. It could just be a decoration?</div>
<div>
<br /></div>
<div>
<b>Why would you kill a creature?</b></div>
<div>
It doesn't yield meat for other organisms, so I wonder what the point is. Plus, the font size is tiiiiny.</div>
<div>
<br /></div>
<div>
<b>What do lock and target do?</b></div>
<div>
I assumed that lock would track the creature (so when it swims out of your field of vision, the camera would follow it because it's locked on). But it acts more like the creature's stats are pinned on your screen. This isn't clear.</div>
<div>
<br /></div>
<div>
<b>Which creature panel, left or right, is the creature you currently have selected?</b></div>
<div>
I can't tell which is which.</div>
<div>
<br /></div>
<div>
<b>Why do some organisms suddenly have a blue box around them, even when you haven't clicked them?</b></div>
<div>
And then I believe a creature panel appears, but I don't know why. Are these highlighted creatures important somehow?</div>
<div>
<br /></div>
<div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4BtiXFGRYKp4UT6k2sSdHSpepaOg4AQz_T1WldBqRgNwFot1UFaLCDbAq-ZRPIW3fidoxwm_QbFz54Gbzomzit0pIWvSZRVzesytrxDYp3-fVB7VzVv5AJdjXLlAqQ__3AGkFbPqJGAE/s1600/two_circles.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4BtiXFGRYKp4UT6k2sSdHSpepaOg4AQz_T1WldBqRgNwFot1UFaLCDbAq-ZRPIW3fidoxwm_QbFz54Gbzomzit0pIWvSZRVzesytrxDYp3-fVB7VzVv5AJdjXLlAqQ__3AGkFbPqJGAE/s320/two_circles.png" width="229" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Green circle elements</td></tr>
</tbody></table>
</div>
<div>
<b>What information on the creature pane is really necessary to know?</b></div>
<div>
Does the player need to know both the age and generation of the organism? The species number and the creature number? What does 'New' even <i>mean</i>?</div>
<div>
<br /></div>
<div>
<b>What is the relationship between energy and on-screen effects?</b></div>
<div>
I read in the information pane that when a creature's energy is full, they reproduce (or something). Is that related to the green circle elements that appear occasionally around an organism? I don't know what the green circles mean -- I've been guessing that they have something to do with creating an organism chain (so lots of nuclei connected by a small line). So maybe when you get the big green half circles to line up with another organism, they evolve into another organism... or something? No idea.</div>
<div>
<br /></div>
<div>
<br /></div>
<h3>
<i>Recommendations</i></h3>
<div>
<ul>
<li><b>High Priority: </b>Have an icon next to each of the colorful bars to show what that bar is -- currently, anyone colorblind could have significant difficult discerning what those bars are and what they mean.</li>
<li><b>High Priority:</b> Increase your font sizes on the creature pane (with exception of the 'Creator' line and the 'Creature' number, if you decide to keep the latter).</li>
<li><b>Medium Priority:</b> Please, please explain what those green circles/symbols around creatures are. Very confusing. Cool looking, but confusing.</li>
<li><b>Medium Priority: </b>Add numbers to the colorful bars. If any of those colorful bars are Energy/Health/what have you, you could add the numbers onto the bars themselves to free up space in the creature pane.</li>
<li><b>Medium Priority: </b>If any of the information on the creature pane isn't really relevant to that current creature's survival, I might remove it from the creature pane.</li>
</ul>
</div>
</div>
<h3>
<b>Settings Panel<br />____________________________</b></h3>
<div>
One of the more self-explanatory elements of the game is the Settings panel -- although an equalizer icon might be better fitting than a gear (because you have all the sliders anyways).</div>
<div>
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihKW1JrSaFehHAYAHpDgMpGs-RcbJxM28eiXd1vV13KQggZGmx2hvz1frPkTvOi9L2-yZkIt5P_wdfsHmp2aWq98BS6YbjgBkJ9kjXy_Yy04Pk3Wt0TZERrPe3Kgtbuq7ChX3OQe0AtPY/s1600/settings.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihKW1JrSaFehHAYAHpDgMpGs-RcbJxM28eiXd1vV13KQggZGmx2hvz1frPkTvOi9L2-yZkIt5P_wdfsHmp2aWq98BS6YbjgBkJ9kjXy_Yy04Pk3Wt0TZERrPe3Kgtbuq7ChX3OQe0AtPY/s320/settings.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Settings Panel</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: left;">
My only recommendations for this panel are to increase the font size, to possibly change the icon from a gear to an equalizer, and increase the contrast between un/selected slider elements (so the right side of the 'Food' slider would be darker because the slider hasn't reached it). Right now the contrast isn't high enough (so it's a bit difficult to read). </div>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<h3>
<b>'Colorful Something'<br />____________________________</b></h3>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKsN4cj5XK0rUWXov1ArK-Y_uvCrOH-g07foSwz58PTRUhThTVV9QVR8N2fhXiMFAaIgNkeCKynlSKHWyKJNuZjRGu3gprzKF5XwrMicuKzhAU5-XQHrZdMs5u412yS4twdSecaCCDf4k/s1600/upper_bar.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKsN4cj5XK0rUWXov1ArK-Y_uvCrOH-g07foSwz58PTRUhThTVV9QVR8N2fhXiMFAaIgNkeCKynlSKHWyKJNuZjRGu3gprzKF5XwrMicuKzhAU5-XQHrZdMs5u412yS4twdSecaCCDf4k/s1600/upper_bar.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Top Bar</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: left;">
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: left;">
I honestly have <i>no </i>idea what this means. I'm assuming the different colors represent different colored organisms, but I don't know what the little red squares below the colors mean. Plus, I feel bad for anyone colorblind. This <i>really </i>needs explanation, and potentially icons to go along with the the colors -- I definitely know that my brothers (who are red-green colorblind) would have a lot of trouble with the red green all the way on the left and the dark red/puke color all the way on the right.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h3 style="clear: both; text-align: left;">
<b>Various Other Recommendations</b></h3>
<div class="separator" style="clear: both; text-align: left;">
</div>
<ul>
<li><b>Low Priority:</b> Once you click on a game level for the first time, the three options are 'Continue,' 'Restart Level,' and 'Main Menu.' If it's a player's first time on that level, 'Continue' and 'Restart Level' shouldn't be options -- it should be 'Start Level' or 'New Game.'</li>
<li><b>Low Priority:</b> On the opening screen, the yellow text over 'Outbreak' has a spelling error. It should be "Very Early Preview," not "Very Early Prievew."</li>
<li><b>Low Priority: </b>Within the Outbreak description text, you're missing some commas --> "No worries, these creatures can't possibly infect every single living thing on Earth. Well, probably not, anyway."</li>
<li><b>Low Priority: </b>On the main screen, the player can see bits of the info pane (lower left), the two creature panes (upper left and right) and the settings pane (lower right). Since these are uninteractable on the main menu, don't show them. It's confusing. </li>
</ul>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitIUcez5bwjfwYFD8A24_IsVqxyt7edFNTnX0DBr-Wjw31U4aZEUMvq_BeB-s0ttx7rZeTIJ31AbKlelpPV-qQEMtVgHl6SvpyNeXO7xjnU6wcShn-kE7V185vJJOSlZX4Elgr7e7k0KM/s1600/2016-02-27_00001.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitIUcez5bwjfwYFD8A24_IsVqxyt7edFNTnX0DBr-Wjw31U4aZEUMvq_BeB-s0ttx7rZeTIJ31AbKlelpPV-qQEMtVgHl6SvpyNeXO7xjnU6wcShn-kE7V185vJJOSlZX4Elgr7e7k0KM/s640/2016-02-27_00001.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Opening Screen</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<h3>
<b>Final Thoughts<br />____________________________</b></h3>
<div>
<b><br /></b></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
I might come back to review this game again at another point in its development -- there's a lot of content to write about in the Outbreak and Laboratory levels -- but I have work to do this weekend (I've had jury duty, so I've been needing to work on my projects out of the office). So, comments on those other levels will have to wait.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7yyt-Idn0hkY-myHLD9p2_W3DBd1E4uZC6A56zq1xo7uRvFqrEwYVGVFe3ccSpkUVFi8GhVAtghaK-79qjzk52wppMG9A8NHrCwB75WHZqHcd7XW5yLKcSQACtKs5BnmT_vxxORCBJ6o/s1600/2016-02-27_00019.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7yyt-Idn0hkY-myHLD9p2_W3DBd1E4uZC6A56zq1xo7uRvFqrEwYVGVFe3ccSpkUVFi8GhVAtghaK-79qjzk52wppMG9A8NHrCwB75WHZqHcd7XW5yLKcSQACtKs5BnmT_vxxORCBJ6o/s640/2016-02-27_00019.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Screenshot of Laboratory Level</td></tr>
</tbody></table>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1gK014oWDU7-vk-D_GhvqRv5c2jjI6457k0rEneJcTEkzGNvgNsTa_kNaPQzdb9qQfrWu9548TC7LQvX2kPQZel0-tKzt9ZGGsWMFpBJrZdfd-csjfYzQKC0RFmhXxmrQIy7SNVVSxU/s1600/2016-02-27_00020.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC1gK014oWDU7-vk-D_GhvqRv5c2jjI6457k0rEneJcTEkzGNvgNsTa_kNaPQzdb9qQfrWu9548TC7LQvX2kPQZel0-tKzt9ZGGsWMFpBJrZdfd-csjfYzQKC0RFmhXxmrQIy7SNVVSxU/s640/2016-02-27_00020.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Screenshot of Laboratory Level</td></tr>
</tbody></table>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUexqW3lLCTCrybEy3g0wNH_mIzs28amACnWxWSEft3bav2XoNS5Ml6Z6CjglBe0spyURwoFnsG2B-g9GbkWZ0-ri3ZeVNW7xkDz2GSwdRWMyK3Lqw82J7AWD7LeVXJ3UbWj6IaVvzts/s1600/2016-02-27_00021.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsUexqW3lLCTCrybEy3g0wNH_mIzs28amACnWxWSEft3bav2XoNS5Ml6Z6CjglBe0spyURwoFnsG2B-g9GbkWZ0-ri3ZeVNW7xkDz2GSwdRWMyK3Lqw82J7AWD7LeVXJ3UbWj6IaVvzts/s640/2016-02-27_00021.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Screenshot of Outbreak Level</td></tr>
</tbody></table>
<br />Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com1tag:blogger.com,1999:blog-2656111516959276084.post-62757858248422322142016-02-15T09:00:00.000-05:002016-02-15T09:00:15.020-05:00Roguelands Usability Review<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI0ylXTruFenH-MmvAI2ZJwz8gEERfe7D-ZKRrLqTSmO76qgvmutHKgzMFW7vGL9g6hrp9Oqtb4uZIerkx7lGj2JqEI1qJ6qEMUZfb4jrzcgZahN6TpcQX8AENybaXucl5WZOvAIUmg4M/s1600/Roguelands.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="296" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI0ylXTruFenH-MmvAI2ZJwz8gEERfe7D-ZKRrLqTSmO76qgvmutHKgzMFW7vGL9g6hrp9Oqtb4uZIerkx7lGj2JqEI1qJ6qEMUZfb4jrzcgZahN6TpcQX8AENybaXucl5WZOvAIUmg4M/s640/Roguelands.jpg" width="640" /></a></div>
<br />
<br />
Roguelands (aptly named) an action-adventure, rogue-like platformer in which you play as a galactic cadet exploring planets and gearing up to ultimately take on The Destroyer, a creature which threatens your world. The game is Early Access on Steam and currently has "very positive" reviews on Steam.<br />
<br />
My primary criticisms for Roguelands aren't what I usually mention -- its font color, type, and sizes are fine (and its dialogue format nostalgic, if you played JPRGs), its UI is intuitive, and its controls easy to pick up. <br />
<br />
The place where Roguelands has the largest room for improvement is in player onboarding and crafting.<br />
<br />
<h2>
The First Few Screens</h2>
The first few minutes of the game are self-explanatory -- on the main menu, you can click Play, Data, Options, and Quit. Clicking on 'Play' shows you seven Empty save slots -- and when you click on one, you're led to the character creation screen.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLuT9opfsT4PUoPiQDZ7z5cyrf7_bFxhK24yzDFZ4GfQDG4AgP0Dw5A4zSVjSxA-PfpContn-pam3nf_-xi90TuPKffeBQlZZuNBXN0gPWXA-dbcgIcXy0bbJdBLqJn4LPUlmnwuNtfgA/s1600/2016-02-14_00024.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLuT9opfsT4PUoPiQDZ7z5cyrf7_bFxhK24yzDFZ4GfQDG4AgP0Dw5A4zSVjSxA-PfpContn-pam3nf_-xi90TuPKffeBQlZZuNBXN0gPWXA-dbcgIcXy0bbJdBLqJn4LPUlmnwuNtfgA/s640/2016-02-14_00024.jpg" width="640" /></a></div>
<br />
This screen was easy to figure out - clicking on each button had a predictable effect, and the 'Stats' icons had a mouse hover effect so that I could learn what each meant. No too much to much to elaborate on here, but I have a fair number of recommendations/enhancements that don't require length paragraphs to explain.<br />
<br />
<b><br /></b>
<b>Recommendations:</b><br />
<br />
<ul><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsh4uXIHr-NfaKWFAx6Icu11L5y9RnOnVVOg52MSptOeJlQAwKDZG3b64dEvfEVnDC5oZ0ux6glarpQCcdovKVQZ5TyepGXiv2oC51Tau-SX-fHbMsHZdnui7d7etNwYVZEkpnW0szdl0/s1600/output_S5gfqa.gif" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsh4uXIHr-NfaKWFAx6Icu11L5y9RnOnVVOg52MSptOeJlQAwKDZG3b64dEvfEVnDC5oZ0ux6glarpQCcdovKVQZ5TyepGXiv2oC51Tau-SX-fHbMsHZdnui7d7etNwYVZEkpnW0szdl0/s320/output_S5gfqa.gif" width="320" /></a>
<li><b>High Priority: </b>Stabilize the initial menu/setup screens by either eliminating the movement of the buttons or slowing down the movement speed of the background.<br /><br />Having both a scrolling background and slightly moving platform buttons is disorienting. I'm prone to getting motion sick when playing video games -- and I feel the risk of getting sick when on those initial screens.<br /></li>
<li><b>Low Priority: </b>Consider allowing 'Esc' to be used in the initial setup screens (such as in the Race Selection screen).<br /><br />Enabling 'Esc' in the Race Selection screen will save time in the instance that the player doesn't want to change their character's race after reading the other abilities. It's weird to press 'Confirm' for something that's already in place. Plus, in the game itself, you use 'Esc' to close menus -- so why not do it here, too?<br /></li>
<li><b>Low Priority: </b>Consider allowing both left and right clicking on the Character Creation menu to allow players to more easily cycle between options.<br /><br />Currently, there are six types of Allegiances that a character can take. If I left click and see the Church of Faust, but decide I want to be The Galactic Fleet, I have to left click six more times to return to The Galactic Fleet option. Allowing for cyclical navigation will save the user time.<br /></li>
<li><b>Low Priority: </b>Add a kerning in the Variant field, "Variant:1"should be "Variant: 1"<br /></li>
<li><b>Low Priority:</b> Consider adding a mouseover effect for the character class type and character allegiance.<br /><br />While the names are super cool, I want to know more about what those mean. Sure, they might not have a stats effect -- but I don't want have to Google the game's lore to learn about what I'm selecting. </li>
</ul>
<br />
<br />
<h2>
Starting the Game</h2>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinICOBIhL4AZaQKMAaVw56xoZad8iumaX15SLKzTBL17Wx8C82rx_NwMiPVpPezVvQqpIkg0xBIL9pflREpHJHwG_H-roYFrZnc-9pUf_8lEESZqfFP2-UvH-Zp8mLaXFigIRJHe64Lf8/s1600/transporting.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinICOBIhL4AZaQKMAaVw56xoZad8iumaX15SLKzTBL17Wx8C82rx_NwMiPVpPezVvQqpIkg0xBIL9pflREpHJHwG_H-roYFrZnc-9pUf_8lEESZqfFP2-UvH-Zp8mLaXFigIRJHe64Lf8/s320/transporting.jpg" width="209" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
After creating your character, you appear in a space ship and can navigate with WASD. The game also clearly illuminates what items you can interact, as a 'W' appears above your character's head. Simple enough. But once I had explored the space station and talked to all the NPCs, I couldn't figure out how to get off the ship. I first went to my character's computer, which showed two location options: the Desolate Canyon and the Deep Jungle.<br />
<br />
Since this computer was showing me where I could go, I assumed that the way to get off the ship was on this computer screen, and that 'Select' would display a 'Teleport' option.<br />
<br />
This was not so.<br />
<br />
It turned out that in order to get off the ship, I needed to go to what I thought was another computer, but was actually a portal. When I stood in front of it, it said 'Hostile Zone,' which I assumed (incorrectly) was some sort of multiplayer arena.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglagP3UJcDjhyHt1rTPURlz1WxZlfnTlbo7TP83QvW4sfYEPyGCUavCeQWgTipQS2S8lsXOusWTrWAiz_kmeas2io_jIJpAcN6JfbjRWJHwVOudA5OxrrtcKD-v2P6XLhKqe13OUg2pSw/s1600/deepJungle.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglagP3UJcDjhyHt1rTPURlz1WxZlfnTlbo7TP83QvW4sfYEPyGCUavCeQWgTipQS2S8lsXOusWTrWAiz_kmeas2io_jIJpAcN6JfbjRWJHwVOudA5OxrrtcKD-v2P6XLhKqe13OUg2pSw/s320/deepJungle.png" width="223" /></a>It was only when I selected 'Deep Jungle' that I saw the connection between the computer and the Hostile Zone machine -- when the Deep Jungle was selected, the screen's color changed from orange to green.<br />
<br />
This led to my first death -- I teleported to the Deep Jungle, and being woefully undergeared, I died my first death. A horrible, terrible death. Alas, poor Bubba, I barely knew thee.<br />
<br />
My next dozen lives were spent in the Desolate Canyon, and could be attributed to two things: me not understanding the level's puzzle traps, and a woeful lack of health packs.<br />
<br />
For the latter, I was <i>desperate </i>to find health packs, but I couldn't find a way how. They were infrequently in treasure chests, and all of my attempts at alchemy failed.<br />
<br />
What I discovered, through Googling how to get health packs, was that I was using the alchemy station <i>completely </i>wrong.<br />
<br />
When in the alchemy station pane, shown below, the player is able to place three items in crafting slots, and then press the potion button in order to craft. When that happens, the alchemy pane shows a green bar, that swiftly decrements back down to zero, after which the crafting fails. What I assumed was that I only had to press the potion button once, and that if the items were a viable combination, I would receive a potion. I wasn't sure what the green bar represented.<br />
<br />
It turns out that the player needs to press the potion button multiple times in quick succession in order to receive a viable potion, if the player's recipe was correct. This process was not clear to me, not only because I wasn't sure of the green bar's purpose, but also because there was no notification telling me that my crafting had failed. As such, I thought I was putting in an invalid combination of materials, not engaging with the alchemy station correctly.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh5e_2HVxcsuYYR7DDmG_4BcUU5aIOFHLKJ2KVIxyvsJ-ImCMkA6d1-4cSwxy1ex5FXqZzW1rGD44g0zTNcIjcfxVX3cixOJRAXbOtWwRA4JZWzGmjSNsmLf_xI893beLVprZ_vOecEec/s1600/2016-02-14_00027.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh5e_2HVxcsuYYR7DDmG_4BcUU5aIOFHLKJ2KVIxyvsJ-ImCMkA6d1-4cSwxy1ex5FXqZzW1rGD44g0zTNcIjcfxVX3cixOJRAXbOtWwRA4JZWzGmjSNsmLf_xI893beLVprZ_vOecEec/s640/2016-02-14_00027.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Screenshot with an alchemy station pane.</td></tr>
</tbody></table>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
Once I knew how to create potions, the early game got significantly easier, and after that point, there weren't game elements that tripped me up.<br />
<br />
<b>Recommendations:</b><br />
<br />
<ul>
<li><b>High Priority: </b>Consider changing how you display the progress bars for crafting.<br /><br />Currently, it's very unclear how crafting works from the existing visual language. While in retrospect the progress bar makes <i>some </i>sense, it is not intuitive enough to pick up without some explanation. One way to potentially make the crafting mini game clearer is to add percentages on the bar, and have the number decrease over time. That way, it's more clear that one must press the potion button multiple times in order to craft successfully.<br /></li>
<li><b>Medium Priority: </b>Clearly display crafting failure from not getting the bar to 100%.<br /><br />This will help reinforce that the potion creation was not due to an incorrect material combination, but from player action.<br /></li>
<li><b>Medium Priority: </b>Change either the teleporter's image or hover text in the space station.<br /><br />If changing the image, change it to the same planet icon used in the computer's planet selection page. But my recommendation would be to keep your formatting consistent. Since the teleporters at the end of each level have the next area's name as the hover text, I'd do the same here just to be clearer.<br /></li>
<li><b>Low Priority: </b>Consider changing the layout of the very first Desolate Canyon trips so that the Tip text is to the right of the player, rather than under him or her.<br /><br />Because the tip text is below the player's avatar, they may be less likely to see it initially and will miss out on gathering materials until they spot the tip (this was the case for me). I'd potentially recommend making the very first part of the first canyon area lower down (so that they need to jet pack up), and then moving the tip text to the right, under the ledge so that there's better findability.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBR1gvvmQN8hHJWbXf7bTynTyPONuY47zrzhKWors1L0wO4lHysGzY0bodw4CNtaEhEFu-8HWYm4AB16wywDyBVYApyDWfAwuOcM8sbnAYrYw3LM3NCddaJRfjPSLsWLgnShM5PSENwqs/s1600/2016-02-14_00026.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBR1gvvmQN8hHJWbXf7bTynTyPONuY47zrzhKWors1L0wO4lHysGzY0bodw4CNtaEhEFu-8HWYm4AB16wywDyBVYApyDWfAwuOcM8sbnAYrYw3LM3NCddaJRfjPSLsWLgnShM5PSENwqs/s640/2016-02-14_00026.jpg" width="640" /></a></div>
</li>
</ul>
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<h2>
Final Thoughts</h2>
<div>
Roguelands is a thoroughly fun game, and I'll certainly be playing it in the future. Let me know if you get it -- the game has multiplayer! :) </div>
Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-48360272206601373902016-01-30T10:28:00.001-05:002016-01-30T10:28:27.405-05:00Sins of a Solar Empire: Rebellion Usability Review<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNOrd-L2VvHKCVrdnbsoT9jQmbwzd46_VRt3-TISs0tPHvUDOeLQC_1OEcJIzCe51x6RJPRKrKOACjzdS5HnhdQbG8UYbJnUeQFAehGaA3pwpmNUpCG1DhFyG_2YYcadddY-7ynxZP898/s1600/SinsofSolarEmpire.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNOrd-L2VvHKCVrdnbsoT9jQmbwzd46_VRt3-TISs0tPHvUDOeLQC_1OEcJIzCe51x6RJPRKrKOACjzdS5HnhdQbG8UYbJnUeQFAehGaA3pwpmNUpCG1DhFyG_2YYcadddY-7ynxZP898/s400/SinsofSolarEmpire.png" width="400" /></a></div>
<br />
Explore, expand, exploit, exterminate -- Sins of a Solar Empire: Rebellion is a true 4X game. Released in 2012, the game still has a healthy following and mod community, with modders focused on changing the game's lore and maps to reflect Star Wars, Star Trek, Battlestar Galactica, Halo, Stargate... and more.<br />
<br />
Overall, Sins is a solid game -- since I bought it ~three weeks ago, I've played 39 hours <i>(thanks, Zeal, for the recommendation!</i>). But there are certainly some usability elements where mods or game updates could make a difference.<br />
<br />
Namely, Sins' issues rest in legibility, finicky notifications, and difficulty zooming into to planets.<br />
<br />
<h2>
Legibility</h2>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcMnCg7WXsKEwUm-SBY3jukJvgWMpVysNKBCziKfd_iKZjKQHWZ0mYy9Oca8tTE-bkHAVbVnLpyZhwNUsdpI8TbPJx1q-HHFi3zjHorpqm4I9yNczMtDHOvu5SmHE9BEXR_DqAi89_t_c/s1600/opening_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="361" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcMnCg7WXsKEwUm-SBY3jukJvgWMpVysNKBCziKfd_iKZjKQHWZ0mYy9Oca8tTE-bkHAVbVnLpyZhwNUsdpI8TbPJx1q-HHFi3zjHorpqm4I9yNczMtDHOvu5SmHE9BEXR_DqAi89_t_c/s640/opening_tutorial.png" width="640" /></a></div>
<br />
Sins, especially in the tutorial series, has an issue with font size. In this game, the yellow font color works both thematically (<span style="font-family: inherit;"><span style="background-color: white; color: #252525; line-height: 22.4px;"><span class="Latn" lang="fr" xml:lang="fr">à la Star Wars) and practically, where other font colors may be difficult to read on a starry background. Sins' font <i>size</i>, however, is way too small -- to the point where the modding community has made mods to increase the font size. </span></span></span><br />
<span style="font-family: inherit;"><span style="background-color: white; color: #252525; line-height: 22.4px;"><span class="Latn" lang="fr" xml:lang="fr"><br /></span></span></span>
<span style="color: #252525;"><span style="background-color: white; line-height: 22.4px;">Recommendations:</span></span><br />
<br />
<ul>
<li><span style="color: #252525;"><span style="line-height: 22.4px;">Add a setting in the Options/UI features to increase the font size throughout the game -- with except of sizes to the left of the world/ship/scuttling picture in the main UI bar (shown above). </span></span></li>
</ul>
<h2>
<span style="color: #252525;"><span style="line-height: 22.4px;"><br /></span></span><span style="color: #252525;"><span style="line-height: 22.4px;">Finicky Notifications</span></span></h2>
<div>
<span style="color: #252525;"><span style="line-height: 22.4px;">There are many notification announcements in Sins. Notifications for combat, for successful planet exploration, for completed construction... and so much more. As such, the notification bar becomes overwhelming very quickly. In the tutorial, players learn that they can view more the most recent notification by hovering their mouse over the correct notification card (planet, construction, diplomacy, conflict) by left clicking, and that they can cycle through these notifications by left or right clicking. The </span></span><span style="color: #252525; line-height: 22.4px;">issue is that because notifications come in so quickly (especially as you're expanding), it's hard to keep track of which notifications you've looked, and it's too easy to accidentally cycle past important notifications by clicking. Plus, it's easy to for a notification to "fall off" the queue (~10 are listed at a time) if there are so many notifications incoming at a time. </span><br />
<span style="color: #252525; line-height: 22.4px;"><br /></span>
<span style="color: #252525; line-height: 22.4px;">And if the player wants to view the location of the notification's event (for example, completed construction), the player must press space bar to move the camera above the planet (not in planet-vision). This feels unintuitive -- for some reason, it feels like one ought to be able to double click on a notification to see its location, but that then cycles the notifications. </span></div>
<div>
<span style="color: #252525;"><span style="line-height: 22.4px;"><br /></span></span>
<span style="color: #252525;"><span style="line-height: 22.4px;">While, over time, the player may become accustomed to the ebb and flow (well, torrent) of notifications, here are some recommendations for making the notifications less overwhelming.</span></span><br />
<span style="color: #252525;"><span style="line-height: 22.4px;"><br /></span></span>
<span style="color: #252525;"><span style="line-height: 22.4px;"><b>Recommendations:</b></span></span><br />
<br />
<ul>
<li><span style="color: #252525;"><span style="line-height: 22.4px;">Potentially lower the number of events that generate verbal notifications, or at least allow the user to specify which announcements they do/don't care about. For example, the announcement "Explorers have found natural resources on this planet" could be removed -- while sure, that's nice to know -- it doesn't have direct and immediate bearing on the situation. It would still be good to have in the notification frames, but doesn't need to be verbalized by the announcer/AI voice.</span></span></li>
<li><span style="color: #252525;"><span style="line-height: 22.4px;">Potentially don't allow users to open a notification frame by left clicking -- only allow the frame to open by pressing space bar. This would prevent players for accidentally clicking past the notification they want to read.</span></span></li>
<li><span style="color: #252525;"><span style="line-height: 22.4px;">Just as the planet icons flash when there's an enemy in your gravity well, it may be good to have other flashing notifications above planets (such as for construction). This may reduce the number of notifications that the user must interact with (so one doesn't need to open a notification pane to see where construction has just been completed.)</span></span></li>
</ul>
</div>
<div>
<span style="color: #252525;"><span style="line-height: 22.4px;"><br /></span></span></div>
<div>
<h2>
<span style="color: #252525;"><span style="line-height: 22.4px;">Moving the Camera</span></span></h2>
</div>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQO7oHjcUjcjEcGLN_kjKMOdjlbUEZqGs9riGWO1wGzuLicm67KfBo0VWxITw4hPi4bZ6yaILBx1ZOOnAFKUVJ5VYGaZI5e8S-ZkrUmFPGXhYXdvT7si5-bgOqeIrALq8yhMgeFhWzFMA/s1600/2016-01-24_00004.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQO7oHjcUjcjEcGLN_kjKMOdjlbUEZqGs9riGWO1wGzuLicm67KfBo0VWxITw4hPi4bZ6yaILBx1ZOOnAFKUVJ5VYGaZI5e8S-ZkrUmFPGXhYXdvT7si5-bgOqeIrALq8yhMgeFhWzFMA/s640/2016-01-24_00004.jpg" width="136" /></a><span style="color: #252525;"><span style="line-height: 22.4px;">If there were one aspect of Sins I could change, it would be making camera transitions smoother. When interacting with notifications, such as "your planet is being attacked," the player can press space bar to then be brought to that planet. But it's quite difficult to shift between two planets that are under attack, or really just quickly zip from planet to planet to monitor their progress. For example, if two of your adjacent planets are being attacked, you need to scroll out, move your mouse over to the adjacent planet, and then scroll in. As such, it's difficult to micro-manage your own armies -- and when you need to spend so much time entering and exiting planet-vision, combat can feel tedious. </span></span></div>
<div>
<span style="color: #252525;"><span style="line-height: 22.4px;"><br /></span></span></div>
<div>
<span style="color: #252525;"><span style="line-height: 22.4px;">Sure, the side bar (shown right) creates a way to quickly look at the number and types of units stationed at a planet, but does not make zooming in and out of a planet any easier.</span></span><br />
<span style="color: #252525;"><span style="line-height: 22.4px;"><br /></span></span>
<span style="color: #252525;"><span style="line-height: 22.4px;">In addition, it's not clear how to navigate a ship through a wormhole. On some maps, players can send their ships through a wormhole to travel to new galaxies. In order to do this, the player must navigate their ship into the middle of the wormhole (I found this out through the might of the Great Goog), and then scroll out to see adjacent galaxies. The player must then hover his or her mouse over one of the planets within a specific galaxy (no easy task), and then zoom in to individually select a planet to send their ship/s to. It's fun to expand to other galaxies, but it's a pain to have to scroll in and out of each galaxy (and then hover over a planet, then scroll back in, etc) in order to keep track of your empire.</span></span><br />
<span style="color: #252525;"><span style="line-height: 22.4px;"><br /></span></span>
<span style="color: #252525;"><span style="line-height: 22.4px;"><b>Recommendations</b>:</span></span><br />
<br />
<ul>
<li><span style="color: #252525;"><span style="line-height: 22.4px;">Allow for easier zoom into a planet, potentially by double-tapping the space bar</span></span></li>
<li><span style="color: #252525;"><span style="line-height: 22.4px;">If a player has sent a ship to a wormhole, and then attempts to path it to a planet/star in a distant galaxy, automatically move that player's ship to the center of the wormhole</span></span></li>
<li><span style="color: #252525;"><span style="line-height: 22.4px;">Potentially make a way to quickly switch between planets -- so you press a key combination to shift between the last three planets viewed in planet vision</span></span></li>
</ul>
<div>
<span style="color: #252525;"><span style="line-height: 22.4px;"><br /></span></span></div>
<h2>
<span style="color: #252525;"><span style="line-height: 22.4px;">Final Thoughts</span></span></h2>
<div>
<span style="color: #252525;"><span style="line-height: 22.4px;">I took a week-long break in between starting and finishing this post because, as I've now learned, it's bad to over-play a game when you're trying to review it for usability issues. The more I played, the more I 'forgave' troublesome elements, and the less I saw them as issues. Sure, in any (well, most) program, a user can learn how to navigate the fiddly bits and overcome complicated usability aspects -- but that doesn't mean that the usability issues aren't <i>there.</i></span></span></div>
<div>
<span style="color: #252525;"><span style="line-height: 22.4px;"><i><br /></i></span></span></div>
<div>
<span style="color: #252525;"><span style="line-height: 22.4px;">Well, I've learned my lesson. From now on, I'm not going to play more than three hours of a game before finishing a review. Or I at least need to return to writing it after some time so that my brain isn't as muddled with forgiveness. Or something.</span></span></div>
<div>
<span style="color: #252525;"><span style="line-height: 22.4px;"><br /></span></span></div>
<div>
<span style="color: #252525;"><span style="line-height: 22.4px;">Thanks again for reading! I hope you all had an excellent January, and are expecting an excellent February. </span></span></div>
</div>
<br />
<span style="font-family: inherit;"><span style="background-color: white; color: #252525; line-height: 22.4px;"><span class="Latn" lang="fr" xml:lang="fr"><br /></span></span></span>
Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-27039273680980924892016-01-11T06:31:00.000-05:002016-01-11T06:31:47.974-05:00Shoppe Keep Usability Review<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj6GVlp6pgRV0U-mp_uNdJAtjJrRab-9EGKlWVOb6DWvLOc8qUC_KiNZCtInGQA8jR-Ek1CbMP4_iMMgT4RqkFaOaclnPud_3RqEhuqOlZ1K1LndtNfIl6Gu1O479KK4IY1ih5eONX3cw/s1600/ShoppeKeepHeader.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="170" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj6GVlp6pgRV0U-mp_uNdJAtjJrRab-9EGKlWVOb6DWvLOc8qUC_KiNZCtInGQA8jR-Ek1CbMP4_iMMgT4RqkFaOaclnPud_3RqEhuqOlZ1K1LndtNfIl6Gu1O479KK4IY1ih5eONX3cw/s640/ShoppeKeepHeader.png" width="640" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
In Shoppe Keep, an Early Access Steam game, you play as the main merchant in a small medieval town who sells a variety of goods to adventurers. Furnish your store, order and price goods, slaughter shoplifters (I paid good money for that Health Potion!), and craft new items to sell in the store. Since there's no (apparent) way to speed up time, the game is almost zen, as you must wait real-time for customers with creative names such as "Dick Butthead" to saunter in and purchase items. And, though I'll be covering quite a bit in this review, the game can be quite fun (and I believe has earned its 9/10 rating on Steam). </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
The usability problems Shoppe Keep displays are inconsistency, legibility, a lack of 'guard rails,' and unexplained elements. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<h2 style="clear: both; text-align: left;">
Inconsistency</h2>
<div class="" style="clear: both; text-align: left;">
Probably the most inconsistent element of SK is its font usage. Playing through the game, one will see at least five different fonts throughout the various menus and text bodies. While font inconsistency doesn't necessarily make a game harder to play, it's good form to keep font faces constant throughout a product.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCMRJ38sWeNOafxqnqn6hXL1QcKyqFc8aT_AbJs9XtMW4NLEhA324lfJcJVXNqopeT4nIVWEAwV2XFj537SrMQN0sMo0Qt27Z4lWDtQyj7vujS4HLx5BuHUN9Wib5v2WIwlAej7whBgzg/s1600/Various_Fonts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCMRJ38sWeNOafxqnqn6hXL1QcKyqFc8aT_AbJs9XtMW4NLEhA324lfJcJVXNqopeT4nIVWEAwV2XFj537SrMQN0sMo0Qt27Z4lWDtQyj7vujS4HLx5BuHUN9Wib5v2WIwlAej7whBgzg/s400/Various_Fonts.png" width="400" /></a><br />
<br />
Another element of SK's inconsistency is that it breaks from traditional UI elements. For example, when the user first opens the game to input their Shoppe Keep's name, they see two buttons in the pop-up. But the left button, which reads "Enter your name," isn't a button. While it does give the visual clue that you can click on it, the format doesn't immediately read as "this is where you will be able to type in your name." Of course, once you click on the button, your typing cursor is shown, but up until that point it isn't immediately clear what'll happen once you click on the name button.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitWL1VFkeeb4VtyWe3tFjugVRaARnOrkm7tE94aFc6gZsvXix8aADZSDRMbzPXCGZYcbM3Pl3-tLbhx8n_BxgkEsne46wmQWH09bEhsFgwb6de4a70UQZK8fylj8iLSeacafOPORehCYE/s1600/Screenshot+2016-01-10+at+9.20.34+AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="78" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitWL1VFkeeb4VtyWe3tFjugVRaARnOrkm7tE94aFc6gZsvXix8aADZSDRMbzPXCGZYcbM3Pl3-tLbhx8n_BxgkEsne46wmQWH09bEhsFgwb6de4a70UQZK8fylj8iLSeacafOPORehCYE/s400/Screenshot+2016-01-10+at+9.20.34+AM.png" width="400" /></a></div>
<br />
SK also falls into a familiar in/consistency trap -- re-using the same key to perform different functions. In SK, it's guaranteed that <i>something </i>will happen when the player presses Q, but what happens depends on which stance (combat, shoppe keeper, building, cleaning) the Shoppe Keep is in . So the fact that something will happen is consistent, but the effect is inconsistent.<br />
<br />
While re-using the same key means that the user has to learn fewer keys and shortcuts, in the end it results in wasting some of the player's time. For example, one might be in the cleaning stance, and want to open the Order menu, but has to press (1) to change stances and then Q to open the Order menu. Sure, requiring two steps means that the user can't accidentally open the Order menu in combat -- but safeguards could be put in place such that the player is not able to open the Order menu while in combat.<br />
<br />
<b>Recommendations</b>:<br />
<br />
<ul>
<li>Choose two fonts and stick with them. Use one for menus and one for text bodies. Make sure the fonts are legible (more on this later).</li>
<li>Instead of making the "Enter your name" bit look like a button, make it look like a traditional textbox and have a flashing cursor in it. That gives a good visual cue without confusing the user as to why it's a button.</li>
<li>Consider adding shortcuts to open menus, rather than having Q be the catch-all. For example, "O" could open "Order," "S" could open "Skills," etc. Allow these to be pressed regardless of stance.</li>
</ul>
<div>
<br /></div>
<h2>
Legibility</h2>
<div>
Now, this is a topic that I've touched upon in many a post. SK isn't the most illegible I've seen -- I think Karos Returns takes the cake on that one -- but there's certainly room for improvement. </div>
<div>
<br /></div>
<div>
For example, one of the main font styles that SK uses is a white, old-fashioned font face.</div>
<div>
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHOnC4FzBN3xGOfgZhoG2xFLwLo1dFCzhzl91CZFnjmdqWQ8HbSEDwMoUcK4nUuJ8Uyu9HQwYkxh_0md9_35sUUan1H4lPV-NzPNMYwt-mXqVmG4GhwMA8PqAX-bP3xgWWL-eLJZMXB6A/s1600/Screenshot+2016-01-10+at+8.37.17+AM.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHOnC4FzBN3xGOfgZhoG2xFLwLo1dFCzhzl91CZFnjmdqWQ8HbSEDwMoUcK4nUuJ8Uyu9HQwYkxh_0md9_35sUUan1H4lPV-NzPNMYwt-mXqVmG4GhwMA8PqAX-bP3xgWWL-eLJZMXB6A/s320/Screenshot+2016-01-10+at+8.37.17+AM.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">My favorite part of this is that "greatness" is spelled "grateness." <br />
Is grateness an excellent cheese grater? Who knows.</td></tr>
</tbody></table>
<div>
While I understand wanting to include a thematic font face for a medieval game, SK sacrifices clarity for theme. Written on a light-peach background, the font is very difficult to read. If the font were bigger, and the background a different shade, this might be easier to read. But I wouldn't advocate for keeping this font -- or the formatting. Light on light is difficult to read -- and when reading is the only way to learn the game (I'll get to that), the designer needs to make reading as easy as possible.</div>
<div>
<br /></div>
<div>
One other location where legibility was an issue was the Ordering menu (shown below). Showing the hands while browsing the menu is a cute <i>idea, </i>but the font angle of purchaseable items is hard to read. </div>
<div>
<br /></div>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1wdC01Uf5TWRuNSU_dPb2E1XJ1PVq91fdlCIyA6RhWKTi-9H8Gt9jbr0zHyZHrG7YJdGCY-hQxadgVaErija7yaAnkcUsc3Jka93DlSEDldR8kH0DrElJn_PjOsAOjJoxgO1zppISOs0/s1600/2016-01-09_00011.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1wdC01Uf5TWRuNSU_dPb2E1XJ1PVq91fdlCIyA6RhWKTi-9H8Gt9jbr0zHyZHrG7YJdGCY-hQxadgVaErija7yaAnkcUsc3Jka93DlSEDldR8kH0DrElJn_PjOsAOjJoxgO1zppISOs0/s640/2016-01-09_00011.jpg" width="640" /></a></div>
<div>
<br /></div>
<div>
<b>Recommendations:</b></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ5R-1rxIIsnDwZZaQFSw9AG5OjNwJyLl9-Ds4u5OqaaVDPRkdv3NNzEUfk05c93HXRMuB0Ihe6o7iPKx80I_ZyGV6nOVEVk9Sn4-qpnYsJwBE6QT1DCdhMNln1tXUbN-cxFO9_6eOMd0/s1600/0755-Cicero-Verrine-Orations-Manuscript-1476-9.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="http://theremnanttrust.info/wp-content/uploads/2013/06/0755-Cicero-Verrine-Orations-Manuscript-1476-9.jpg" border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ5R-1rxIIsnDwZZaQFSw9AG5OjNwJyLl9-Ds4u5OqaaVDPRkdv3NNzEUfk05c93HXRMuB0Ihe6o7iPKx80I_ZyGV6nOVEVk9Sn4-qpnYsJwBE6QT1DCdhMNln1tXUbN-cxFO9_6eOMd0/s320/0755-Cicero-Verrine-Orations-Manuscript-1476-9.jpg" title="" width="320" /></a></div>
<div>
<ul>
<li>Ditch the light-on-light font. If you want to use a parchment look/feel, check out classic manuscripts such as the one shown here and try to replicate that feel</li>
<li>I'd recommend also swapping out the old-fashioned font you're using in text bodies for something more modern. Sure, you're reducing some of the theme, but it's more important that your users can read. Using fancier font is fine for menu text (such as on the main screen)</li>
<li>Don't use yellow as a highlighting -- or font -- color (as done in the tutorial text). It's hard to read on both light and dark backgrounds. Try a different color.</li>
<li>Flatten the Order menu so that the font isn't angled. You can keep the clipboard look while still making the menu easier to read. </li>
</ul>
</div>
<h2>
Lacking Guard Rails</h2>
<div>
While trial and error is one way to learn a game, it's not always the best to let players fall into traps that they can only escape by restarting their saved game. </div>
<div>
<br /></div>
<div>
For example, my first game, I didn't know I had to place furniture before I could sell items. So I used up all my gold buying items, and then couldn't actually put them down to sell them. I couldn't recover any of that gold, so I needed to restart the game. </div>
<div>
<br /></div>
<div>
I was doing pretty well in my second game, and eventually had enough money to purchase armor. This time I knew how to place pedestals to display wares -- but the game wouldn't let me place the armor on the pedestal. I had, again, spent all of my money buying items -- and wasn't able to sell my stock. Fatal. </div>
<div>
<br /></div>
<div>
In games with low stakes, it's okay to let players make these kinds of mistakes. But SK requires a lot of grinding to unlock new items -- so needing to re-start your game is devastating. </div>
<div>
<br /></div>
<div>
<b>Recommendations</b></div>
<div>
For a game like SK, I'd recommend putting in what I'll call guard rails, or really safeguards against players making fatal mistakes.</div>
<div>
<br /></div>
<div>
One way that SK can address my first mistake -- buying items before placing furniture -- is to redesign the tutorial to provide context-sensitive tool-tips. As soon as the user loads into their first game, begin the tutorial, and tell the user how to access the build menu (and switch placeable items, which took me a long time to figure out). After they've placed furniture, show them how to open an Order, tell them about the wait time, and then show them how to raise/lower these prices. While all of this information is in the tutorial menu, walking the player through these steps aids learning.</div>
<div>
<br /></div>
<h2>
Unexplained Elements</h2>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFdurhIuUNE2dVTL1xnBgARdRa6EjIDBZDLOmdspSdHxKScJqOu6kUI7NA8cPoH6oYJ5_bb-nN8QWwQKLrn2skjYK47kJaI6jZQsnNxx2sfivEBLrzWFp9WSwQWyWVo4We4YsJGooEBs/s1600/Screenshot+2016-01-10+at+10.30.44+AM.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFdurhIuUNE2dVTL1xnBgARdRa6EjIDBZDLOmdspSdHxKScJqOu6kUI7NA8cPoH6oYJ5_bb-nN8QWwQKLrn2skjYK47kJaI6jZQsnNxx2sfivEBLrzWFp9WSwQWyWVo4We4YsJGooEBs/s1600/Screenshot+2016-01-10+at+10.30.44+AM.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">???</td></tr>
</tbody></table>
<div>
Maybe I didn't read the tutorial well enough, but there were quite a few parts of SK that I didn't understand. For example, what <i>is </i>the K bubble? There's already an XP bar, so I don't know what the K does. Is it related to my shop's appeal? How do I increase my shop's appeal?</div>
<div>
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="clear: left; float: left; margin-bottom: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWJGnZ2cCtY4Qbeo_HQ2lNngCKxshEant19XxxiU3tv2VRZwrbON7SPghngavP_Wh-K_x8ChVbZceJDgUAD0HgWM_YbALWdIPzX3ogxba8lEhZ0ZAfq5-sF-O7g1Lk2R8woLL4nuAjAZo/s1600/2016-01-09_00010.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto; text-align: center;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWJGnZ2cCtY4Qbeo_HQ2lNngCKxshEant19XxxiU3tv2VRZwrbON7SPghngavP_Wh-K_x8ChVbZceJDgUAD0HgWM_YbALWdIPzX3ogxba8lEhZ0ZAfq5-sF-O7g1Lk2R8woLL4nuAjAZo/s320/2016-01-09_00010.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">WHAT IS THIS?</td></tr>
</tbody></table>
<div>
How do I get a cauldron to make new items? How do I get seed packs to grow my own plants to sell? How do I unlock new furniture so I can sell armor and weapons? </div>
<div>
<br /></div>
<div>
What are skill trees, and why do I want to use them? </div>
<div>
<br /></div>
<div>
Why do I want to do quests, and how do I turn them in? Are there smaller quests that I can do (that don't require crafting fancy items? That seems like a late-game quest). </div>
<div>
<br /></div>
<div>
I think this is one of the instances where I could've browsed community forms or the related Wiki, but I prefer it when I don't need to do research in order to play a game. I don't like having to pop out of immersion to understand how to succeed.</div>
<br />
<h2 style="clear: both; text-align: center;">
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Final Thoughts</div>
</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiYhl_bwBEAUrTyseCWbaBClBw3hDtGA1zy99TPIcgltD9XK2S1m1KQgp8-yGXDnZOZHKL6QseWNfD8bPbZsP5p-dEmfDCQEwSG0KSJW8NHC0vwmTcyrcCannETRo9q3nle1uuwl1gAdE/s1600/2016-01-09_00028.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiYhl_bwBEAUrTyseCWbaBClBw3hDtGA1zy99TPIcgltD9XK2S1m1KQgp8-yGXDnZOZHKL6QseWNfD8bPbZsP5p-dEmfDCQEwSG0KSJW8NHC0vwmTcyrcCannETRo9q3nle1uuwl1gAdE/s640/2016-01-09_00028.jpg" width="640" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: left;">
Shoppe Keep is a fun game, with room for growth in how it teaches and displays information. I wish there were a way to speed up time (those customers walk soooo slowly!) or other ways to spend time when waiting for customers to appear. </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
But before SK's final release, the designers really need to spell-check the game. There are a lot of spelling errors peppered throughout. For example, "grateness" should be "greatness," "aparently" should be "apparently," "cant" should be "can't"... there's just so much. My final recommendation to SK's team would be to go through all text with a fine-toothed comb and pick out all the spelling errors. Accuracy helps your game look polished and complete.</div>
<br />Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-89692301679901588702015-12-22T08:20:00.002-05:002015-12-22T08:20:55.096-05:00HiatusApologies for the radio silence!<br />
<br />
I've been busy this December, and really since late September, so I haven't had much time to write. Here's what I've been up to:<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkiZaubfFOgY8yFUeTARF9AFEgN1P8da59AawB-26PdYrXlxUGULUSknkuo2XewSR5_HlRKYmVf5oOWDr8wg_lzTpe_oQ8HEhH67dQIkCgS0APGlbAdYqmgQmsIu9XjdkAOPxoajFQo3A/s1600/CQkhUA9WsAEfPiU+%25281%2529.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkiZaubfFOgY8yFUeTARF9AFEgN1P8da59AawB-26PdYrXlxUGULUSknkuo2XewSR5_HlRKYmVf5oOWDr8wg_lzTpe_oQ8HEhH67dQIkCgS0APGlbAdYqmgQmsIu9XjdkAOPxoajFQo3A/s640/CQkhUA9WsAEfPiU+%25281%2529.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">View from my desk.</td></tr>
</tbody></table>
<br />
<br />
<br />
I started a new job as a User Experience Researcher with Fidelity Investments in Boston in late September, so I've been busy learnin' and getting up to speed with a myriad of tools and methodologies. I've decided that UserZoom is annoying, and have learned that anything that can go wrong probably will when you're moderating or seconding usability tests. To be honest, being a Dungeon Master/Game Master for Pathfinder games taught me some valuable skills that I've been using in my professional life -- namely dealing with uncertainty (best laid plans and all that), improvising, devising creative solutions for complex problems, and knowing when to help participants and when to let them struggle.<br />
<br />
Also since late September I've been involved in a performance called the Boston Christmas Revels. Today is performance 12 of 17. Over the last four days (12/18 - 12/21) we've had seven shows. I'm in the picture below (all the way to the right with the plank and a sweet bonnet.) We've been getting great reviews from the critics, so that's nice.<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGpALlUz9-SYxRMn1HUqW7sIfs5jUj0ifzF91zIXjWVxwOgCZzvX_Vh1mGPEMWv4CK6gp57H7WcweTjn3pbXj1GWQRogeMXvT4vKWWx_G8BP4HfFJtCuuuK-oJ6MImtqOgQpWBsRWsHaE/s1600/12374904_10153354048332775_707852164576178184_o.jpg" imageanchor="1"><img border="0" height="424" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGpALlUz9-SYxRMn1HUqW7sIfs5jUj0ifzF91zIXjWVxwOgCZzvX_Vh1mGPEMWv4CK6gp57H7WcweTjn3pbXj1GWQRogeMXvT4vKWWx_G8BP4HfFJtCuuuK-oJ6MImtqOgQpWBsRWsHaE/s640/12374904_10153354048332775_707852164576178184_o.jpg" width="640" /></a><br />
<br />
<br />
I've also been working on a board game in my spare time -- whatever and whenever that is -- and have been making decent progress on that. My friends and I have been working pretty steadily on it since February, but we're now starting to involve a graphic designer and potentially an artist starting in January. Here's a picture of a playtest below taken at the Game Makers' Guild in Boston a few months back. The game is a co-op, resource management, survival game set in the post-apocalypse that sets itself apart with its sheer difficulty -- similar to Pandemic, the game hard to win, but the struggle is part of the fun. Hopefully by summer we'll have a print and play version of the game available for the public to play. Right now it's paper prototypes and clip-art. If you're interested in learning more about the game, you can check us out on <a href="http://www.facebook.com/omengames">Facebook</a> or <a href="http://www.twitter.com/omengames">Twitter</a>.<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYX-25s8rMMoU7p05aZcb1GuGnBpt0WQ908bVtRmYpH6_KZKk_kXE3FOGRnr8JpLhAA5VbDfK46GoKcGbcjDBdgVkswbF-mK0S2lH8BApmTjUpzk9-nR7eZGO-rOAE4MURzZi-v_Y6FfQ/s1600/boardgame.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYX-25s8rMMoU7p05aZcb1GuGnBpt0WQ908bVtRmYpH6_KZKk_kXE3FOGRnr8JpLhAA5VbDfK46GoKcGbcjDBdgVkswbF-mK0S2lH8BApmTjUpzk9-nR7eZGO-rOAE4MURzZi-v_Y6FfQ/s640/boardgame.jpg" width="640" /></a></div>
<br />
I haven't had time for my other hobbies -- painting, namely, but also D&D -- but I guess that's the sacrifice for having too many other hobbies and obligations. Alas, alack.<br />
<br />
I hope all of you are doing well, and that you're having excellent holidays. I'll be back to a regular schedule in 2016 (!!!). If you'd like me to test out any particular games, feel free to ping me on Twitter (@keshiekay). On the docket are potentially:<br />
<br />
<ul>
<li>Evolution</li>
<li>The Magic Circle</li>
<li>Offworld Trading Company</li>
<li>Roguelands</li>
<li>Shoppe Keep </li>
<li>The Talos Principle</li>
<li>Fallout 4 </li>
</ul>
<div>
Or if you know any designers who might want some feedback, feel free to send them my way! I love giving feedback to those who are hungry for it.</div>
<div>
<br /></div>
<div>
Thanks again.</div>
Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-90293423061372560712015-11-23T09:00:00.000-05:002015-11-23T09:00:07.155-05:00Paper Shadows: Co-Creation Session<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYepMq41LKyvcX05fklJWI7qh_7j0-lT3vdqjz26H3ZYP2aiR_-QbEo7yAcgfcSXXDWR0f7klSNdAjRte48RXru1fMUFkP-w6ETszFe3AphWzZlYBsFkEEiJGRrlBN0HfMvVDDdFBfwww/s1600/PaperShadowsScreen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="417" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYepMq41LKyvcX05fklJWI7qh_7j0-lT3vdqjz26H3ZYP2aiR_-QbEo7yAcgfcSXXDWR0f7klSNdAjRte48RXru1fMUFkP-w6ETszFe3AphWzZlYBsFkEEiJGRrlBN0HfMvVDDdFBfwww/s640/PaperShadowsScreen.png" width="640" /></a></div>
<br />
This'll be a different kind of post, so bear with me here.<br />
<br />
I've started conducting user research for Idle Action Studios, the creators of Paper Shadows. After some discussion with the team, I decided to run some co-creation sessions to help make Paper Shadow's UI elements (of which there are few) more intuitive. This post is about the process and results of the co-creation study.<br />
<br />
First, I'll give you some context about the game. Paper Shadows is a highly stylized and artistic platformer built in Unity where the player controls two characters: the masked character and the lantern-bearer. On its website, Idle Action Studios describes Paper Shadows as a game about "separation and reunion," a theme strongly supported in the game. In order to progress in the game, the player must frequently separate the two characters. The tall, masked character can jump much higher than the lantern-bearer, and so often must go ahead to activate levers so that the lantern-bearer may continue. But some platforms are only revealed when they are within the lantern-bearer's light radius, so often the masked character must return to the light.<br />
<br />
In later levels, the player finds talismans, ability-giving items that the characters may carry and trade. Up until the introduction of talismans, Paper Shadows is simple -- the player is easily taught that the arrow keys and WASD control the two characters.<br />
<br />
Talismans throw a wrench into the works: to access talismans, the player has to press and hold spacebar to open the talisman menu, and then use the arrow keys to activate, swap, or deactivate talisman abilities. The developers, knowing it to be unintuitive, asked for my feedback on the talismans. I decided to put together a co-creation session to help brainstorm a new UI for the talismans.<br />
<br />
<ol>
<li><b>Research Questions</b><br />The developers and I created a list of four research questions to better understand how players expect to be able to interact with the talisman menu:</li>
<ul>
<li>How do players imagine being able to equip/activate talismans?</li>
<li>How do players imagine being able to swap talismans between the characters?</li>
<li>What do participants think the inability to exchange talismans due to distance would look like?</li>
<li>How would the participants show that only one talisman can be active at a time?</li>
</ul>
<li><b>Acquiring Participants & Setup</b><br />I gathered three participants familiar with platform games, gave them access to the demo level, and asked them to complete the first level. I also asked the participants to write down any "passwords" they saw in the level so that I could tell whether they completed the level (there was one at the halfway point, and one at the end).</li>
<li><b>Scenario Development</b><br />To answer the research questions, I developed scenario-based tasks for the participants to complete. These were:</li>
<ul>
<li>You just acquired your first talisman. Is it automatically equipped to one of the characters? If not, what happens to it?</li>
<li>The tall character has the monkey talisman, and you want to give it to the short character. How would you do that, and what would that look like?</li>
<li>A character can hold multiple talismans at a time, but can only have one ability active at a time. How would you switch the active talisman?</li>
<li>How would you visually display which talisman is active?</li>
<li>Visually, how would you indicate that you're too far away to swap/switch talismans with the other characters?</li>
</ul>
<li><b>Explaining Talismans</b><br />Since I didn't want to explain talismans in the context of opening menus (how it currently is), I decided to use pens & pencils as props to explain how players can interact with talismans. </li>
<ul>
<li><i>Giving/taking talismans: </i>I gave one of the pens to a participant, and then took it back.</li>
<li><i>Swapping talismans:</i> I exchanged the participant's pencil for my pen.</li>
<li><i>Talisman distance restrictions:</i> I moved backwards and tried to exchange pens with the participant, but couldn't reach far enough to switch (and thus the exchange didn't happen).</li>
<li><i>Activating talismans:</i> I could hold many pens, but could only write with one at once. </li>
<li><i>Deactivating talismans:</i> I stopped writing with the pen and went back to holding it.</li>
</ul>
<li><b>Session Overview</b><br />The co-creation session ended up being about two hours long and was conducted with three participants and one of the developers in attendance. I prompted the participants to draw their ideas on paper, writing down both what they thought it would look like and the buttons they would press to accomplish the tasks. At the end, I let the developer who attended the co-creation session ask additional follow-up questions.</li>
</ol>
<div>
<br /></div>
<div>
Now for results. </div>
<div>
<br /></div>
<h2>
How do participants imagine being able to equip/activate talismans?</h2>
<h3>
<span style="font-weight: normal;">Scenario 1: You just acquired your first talisman. Is it automatically equipped to one of the characters? If not, what happens to it?</span></h3>
<div>
<blockquote class="tr_bq">
<span style="font-weight: normal;">The players imagined that it <i>would</i> be automatically equipped to the character who first interacted with the object (pressed the down arrow/D key when next to the talisman). </span></blockquote>
</div>
<h3>
<span style="font-weight: normal;">Scenario 2: The lantern-bearer is holding the bat and monkey talismans, and has the monkey talisman active. How would you activate the bat talisman instead? </span></h3>
<div>
<blockquote class="tr_bq">
All three participants said that they would open a menu to change the active talisman. The three menu buttons they suggested were Tab, Spacebar, and T. Pressing this button would pause the game and add a faded overlay showing the characters with the talismans displayed horizontally over their heads. The players would then use the character's respective movement keys to navigate the talismans.<br />
<ul>
<li>Press Spacebar, Tab, or T (for 'talismans') as the menu key</li>
</ul>
<ul>
<li>Horizontal bar with talismans</li>
</ul>
<ul>
<li>Left/right keys to select a talisman</li>
</ul>
<ul>
<li>Down (arrow or D) to activate a talisman</li>
</ul>
<ul>
<li>Up (arrow or W) to deactivate a talisman</li>
</ul>
<ul>
<li>Press the same menu key to accept the change and close the menu</li>
</ul>
</blockquote>
</div>
<div>
<h4>
Follow-Up Question: Would you want a way to quickly change what talisman is active?</h4>
</div>
<div>
<blockquote class="tr_bq">
Participants said no, they wouldn't feel the need to quickly change the active talisman. Since the game is slow-paced, they said they would not feel the need for some kind of shortcut to quickly swap/activate a different talisman.</blockquote>
</div>
<div>
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMXlJuJ6GxL22jNYTc3E3MK6dmYNV7Te44Ofb8hWUtabFRt9SPg2qftPfr0TnABvGvRI1_zDP8x4-M8SppcjgXbWHNRGfnpHpcinPxPWSrX8wdV1roJFT3ydb7q0RU8OHWNyS2KeF3_Lg/s1600/IMG_20151122_102147254.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="392" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMXlJuJ6GxL22jNYTc3E3MK6dmYNV7Te44Ofb8hWUtabFRt9SPg2qftPfr0TnABvGvRI1_zDP8x4-M8SppcjgXbWHNRGfnpHpcinPxPWSrX8wdV1roJFT3ydb7q0RU8OHWNyS2KeF3_Lg/s640/IMG_20151122_102147254.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">One participant's sketch of the talisman menu</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
<h2>
How do participants imagine being able to switch/swap talismans between characters?</h2>
</div>
<div>
<h3>
<span style="font-weight: normal;">Scenario 3: The lantern-bearer has the bat talisman, and the masked character has the monkey talisman. You want to swap these two talismans. How would you do that?</span></h3>
</div>
<div>
<blockquote class="tr_bq">
<span style="font-weight: normal;">Participants would first open the menu to switch/swap the talismans, and then use the arrow keys to select what talisman they wanted to trade. The participants did not reach consensus on how they wanted to accomplish this, but some themes appeared:</span><br />
<ul>
<li>When choosing what talismans to send over, they use the arrow keys to highlight a talisman. The highlighted talisman would be the talisman that would be given or swapped. </li>
</ul>
</blockquote>
<blockquote class="tr_bq">
<ul>
<li> The 'highlighted' talisman could either by marked by a colored aura (glowing), raising the talisman above the talisman bar, or otherwise separating the selected talisman from the rest. </li>
</ul>
</blockquote>
<blockquote class="tr_bq">
<ul>
<li> The talismans would also be swapped by either pressing a specific swap key (such as T) or by using the arrow keys again to move it. One participant suggested pressing the 'up' key twice: once to move it above the horizontal bar to say that it's selected, and then using the 'move' key to give it to the other person. </li>
</ul>
</blockquote>
</div>
<div>
<span style="font-weight: normal;"><br /></span></div>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlpdQUMdjQjQ0ROibf5dhgyttqdi3jNVYE6prmirJGosD-K28Y_6RuPcnwQ7BKi5E-3hIcsnSwMQF-89a0S63xS0eZtcV1wT3StHNY95acXYvIBgWN-kS6RfRnlX6jeSTq7ejZ_3SIEv0/s1600/threemethods.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="102" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlpdQUMdjQjQ0ROibf5dhgyttqdi3jNVYE6prmirJGosD-K28Y_6RuPcnwQ7BKi5E-3hIcsnSwMQF-89a0S63xS0eZtcV1wT3StHNY95acXYvIBgWN-kS6RfRnlX6jeSTq7ejZ_3SIEv0/s640/threemethods.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">The three 'selection' visuals by participants</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<h4>
<span style="font-weight: normal;">Follow-Up: Let's say the lantern-bearer had the monkey talisman active when you decided to swap it. Once swapped, is the monkey talisman now active on the masked character?</span></h4>
<h2 style="clear: both; text-align: left;">
<div style="font-size: medium; font-weight: normal;">
</div>
<blockquote class="tr_bq" style="font-size: medium; font-weight: normal;">
<span style="font-weight: normal;">Participants said that a talisman, when swapped, would <i>not </i>automatically become active. One participant compared this process to World of Warcraft saying, "In WoW, when you trade a pair of gloves, it doesn't automatically get equipped when it goes in your inventory. You need to equip it." </span></blockquote>
<div style="font-size: medium; font-weight: normal;">
</div>
</h2>
<h2 style="clear: both; text-align: left;">
What do participants think the inability to exchange talismans due to distance would look like?</h2>
</div>
<div>
<br />
<h3>
<span style="font-weight: normal;">Scenario 4: The characters are too far apart to swap items. Visually, how would you indicate this?</span></h3>
<br />
<blockquote class="tr_bq" style="clear: both; text-align: center;">
<div style="text-align: left;">
Participants agreed that there would need to be a clear way to show that distance affects the ability to trade talismans. One of the first suggestions (before participants agreed the either Spacebar, Tab, or T would be good keys to open the menu) was that the menu could only be opened when the two characters were close enough to press their 'down' keys together. If the characters were too far apart, and X would appear.</div>
</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlMdx8zYMDZkn6u2iq2UkeNvnbZBya9_TbG4spY4StDOeiOCn96QCI-f4b3O1n5gxNAUSU1OpwnTWuBBhHPokFb0kRQA210Itg98hcOlvvB0g4rbaBFPe43lu-cC4cEGPU0OWJSrz10KA/s1600/distance.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="205" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlMdx8zYMDZkn6u2iq2UkeNvnbZBya9_TbG4spY4StDOeiOCn96QCI-f4b3O1n5gxNAUSU1OpwnTWuBBhHPokFb0kRQA210Itg98hcOlvvB0g4rbaBFPe43lu-cC4cEGPU0OWJSrz10KA/s400/distance.png" width="400" /></a></div>
<blockquote class="tr_bq" style="clear: both; text-align: center;">
<div style="text-align: left;">
Upon learning that the menu can be opened when the characters are apart, this simultaneous down arrow idea was scrapped.</div>
</blockquote>
<h2>
How would the participants show that only one talisman can be active at a time on a character?</h2>
<h3>
<span style="font-weight: normal;">Scenario 5: The monkey talisman is currently active on the lantern-bearer. How would you visually indicate this?</span></h3>
<h4>
<div style="font-weight: normal;">
</div>
<div>
<blockquote class="tr_bq" style="font-weight: normal;">
In the talisman menu, all three participants agreed that the active talisman would 'glow.' Only one talisman can glow at a time. If a player highlighted another talisman and activated it, the previously-glowing talisman would stop glowing.</blockquote>
<blockquote class="tr_bq" style="font-weight: normal;">
Outside of the talisman menu, participants said they would want a visual indication on characters what talisman was active. So the character with an active monkey talisman would have a monkey tail as part of its silhouette. If a talisman is not active on that character, there is no such visual indicator.</blockquote>
<div style="font-weight: normal;">
<br /></div>
<div style="font-weight: normal;">
<br /></div>
Recommendations:<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr0AoAMyzyr70RcQ0wTFZ_O14lLedlp2uGrjfT032f3ANUn5p1CRKMl6UVWdZxhepSiq7FtGFq6dwwfPnRfW24ugcCnqn1Uv3w-634AGrirkzIwd0lnt9pwL22rP1x-H67g_8ysBNn3yM/s1600/20151122_141207.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="217" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr0AoAMyzyr70RcQ0wTFZ_O14lLedlp2uGrjfT032f3ANUn5p1CRKMl6UVWdZxhepSiq7FtGFq6dwwfPnRfW24ugcCnqn1Uv3w-634AGrirkzIwd0lnt9pwL22rP1x-H67g_8ysBNn3yM/s400/20151122_141207.jpg" width="400" /></a></div>
<br />
<br />
<ol>
<li><span style="font-weight: normal;">Use the Spacebar as the 'talisman menu' key. It's a good mid-point between the two control schemes, and players can easily tap it with their thumbs, rather than reaching for the Tab. The 'T' key could also work. Let this be a 'press' button, not a 'press and hold' button. It's more easily discovered that way.</span></li>
<li><span style="font-weight: normal;">Display the talismans horizontally, rather than vertically. All three users drew out the menu this way, and said it was more intuitive than a vertical design.</span></li>
<li><span style="font-weight: normal;">Each talisman could have its own location (for example, the monkey talisman could always be the first circle). </span></li>
<li><span style="font-weight: normal;">When a character is not holding a talisman, grey out its location. </span></li>
<li><span style="font-weight: normal;">Use the left/right keys for each character to highlight various talisman slots.</span></li>
<li><span style="font-weight: normal;">Use the down arrow to activate a talisman.</span></li>
<li><span style="font-weight: normal;">Use the up arrow to deactivate a talisman.</span></li>
<li><span style="font-weight: normal;">When a talisman is traded, do not activate it on the other character, let the player decide what to activate or deactivate.</span></li>
</ol>
<div>
<span style="font-weight: normal;">Since Blogger is bad at entering photos in between bullet points, here's a few images I drew out:</span></div>
<div>
<span style="font-weight: normal;"><br /></span></div>
<div>
<span style="font-weight: normal;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmQbTvjJmSOrigokPm0JEkh-SB1ML8EKGxdRaGEJ843d78EAudObx_PHygp_9nH3Hir9FG8F9-nIXrwuXko-Ffg85CuFgetms4mSlLar4YU8yGpahkSHuWQCEFMa-4u4HhCHwt7VXbMUg/s1600/20151122_141748.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="478" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmQbTvjJmSOrigokPm0JEkh-SB1ML8EKGxdRaGEJ843d78EAudObx_PHygp_9nH3Hir9FG8F9-nIXrwuXko-Ffg85CuFgetms4mSlLar4YU8yGpahkSHuWQCEFMa-4u4HhCHwt7VXbMUg/s640/20151122_141748.jpg" width="640" /></a></div>
<div>
<span style="font-weight: normal;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk3VZm1knRyshq2CZ5wOuJyHjkUgmZMv07pIBiok2oEtd4ZuwzriVMRDL4x1n5381Tmyix1NjExh4GXRqL4tzdjQbiq_hbbDvqOBYWPBZP0XHwTiLp1lf47yaS-maQ9zNx2uyHEnAPx_Q/s1600/20151122_141326.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="476" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk3VZm1knRyshq2CZ5wOuJyHjkUgmZMv07pIBiok2oEtd4ZuwzriVMRDL4x1n5381Tmyix1NjExh4GXRqL4tzdjQbiq_hbbDvqOBYWPBZP0XHwTiLp1lf47yaS-maQ9zNx2uyHEnAPx_Q/s640/20151122_141326.jpg" width="640" /></a></div>
<div>
<span style="font-weight: normal;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJpM_yV5bLzCGyGzbFqFaxEdwwgJpe1O1kcAK62w-0uczD-BtfGKFHRmlGkJ9jKXwfaznTvvPhnWdtP916OrkWATlsFwJ8fvpudIabAaSLbJcoyDEGY1DxpKjjeqIWET8ljn4gLRkV1A/s1600/20151122_141304.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnJpM_yV5bLzCGyGzbFqFaxEdwwgJpe1O1kcAK62w-0uczD-BtfGKFHRmlGkJ9jKXwfaznTvvPhnWdtP916OrkWATlsFwJ8fvpudIabAaSLbJcoyDEGY1DxpKjjeqIWET8ljn4gLRkV1A/s640/20151122_141304.jpg" width="640" /></a></div>
<div>
<span style="font-weight: normal;"><br /></span></div>
<div>
<span style="font-weight: normal;"><br /></span></div>
<div>
<span style="font-weight: normal;"><br /></span></div>
<div>
<span style="font-weight: normal;">________________</span></div>
<div>
<span style="font-weight: normal;"><br /></span></div>
<div>
<span style="font-weight: normal;">Thanks for bearing with me, folks! This project was rather fun to undertake, and it's possible I may run another co-creation session in the coming months. It is still to be seen. </span></div>
<div>
<span style="font-weight: normal;"><br /></span></div>
<div>
<span style="font-weight: normal;">I apologize that I've been writing far less frequently -- I started a new job in late September, and have been super busy since then. I'm also going to be in a play in December (17 performances, whee) so my blogging time will be limited then, too. I hope to return to a regular, bimonthly schedule by January. That's the goal, at least.</span></div>
<div>
<span style="font-weight: normal;"><br /></span></div>
<div>
<span style="font-weight: normal;">Thanks again to you, my readers, and to Idle Action Studios for letting me run the co-creation session!</span></div>
<br /></div>
</h4>
</div>
Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-11324836916527441622015-10-26T09:00:00.000-04:002015-10-26T09:00:01.107-04:00Triangle180: Usability Review<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmU-EzBIGhRBlDX9Oer8PK61p8xJW2GlSQJD_A2_JBSZb3Edy6lTXgRm4uK-6u-bGv0iKRiJOnavCc6Xa-wn05wODyUsxrtL5GBlXXN_fW_AYpDjvxK3iwST4xLw8wrw0F6so64Gbzf_o/s1600/Screenshot_2015-10-25-09-18-05.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="336" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmU-EzBIGhRBlDX9Oer8PK61p8xJW2GlSQJD_A2_JBSZb3Edy6lTXgRm4uK-6u-bGv0iKRiJOnavCc6Xa-wn05wODyUsxrtL5GBlXXN_fW_AYpDjvxK3iwST4xLw8wrw0F6so64Gbzf_o/s400/Screenshot_2015-10-25-09-18-05.png" width="400" /></a></div>
<br />
If you like quick puzzle games, Fingerprint Studio's Triangle180 is a game for you. Match colors to create triangles, and build up combo points by creating same-colored triangles consecutively. Triangle180 is the kind of game where you'll keep pressing the 'play again' button after each one-minute game saying, "I can do better than that!"<br />
<br />
Yet the problems I found in the <b>preview version </b>of the game (<i>thanks, Fingerprint Studio!</i>) are as follows:<br />
<br />
<ol>
<li>Even after 20-or-so games, I don't entirely know how the game works.</li>
<li>The UI is so minimalistic that it leaves out important elements.</li>
<li>The scrolling is the very, very frustrating.</li>
<li>Some of the game's settings are likely superfluous.</li>
</ol>
<div>
<br /></div>
<h2>
What <i>is</i> that?</h2>
So, at least in the 'dots' version in the preview game, there are five different colors to play with and four 'special' icons. Look at the bottom row of the picture below. What do you think each icon does?<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBBnAgnWNvrFC5LpAWtGcqHY253vSQOViT5mFJOQ4V4MQtzjIwRbp_RDaUCf-0dWdVEAoXQuA-vmV3gx5OfLeI9XpNIUeAfcPjmWEsiBGu0PAb-a78cYiYBiRjITD5FYPA178wvs8hFDo/s1600/dots.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBBnAgnWNvrFC5LpAWtGcqHY253vSQOViT5mFJOQ4V4MQtzjIwRbp_RDaUCf-0dWdVEAoXQuA-vmV3gx5OfLeI9XpNIUeAfcPjmWEsiBGu0PAb-a78cYiYBiRjITD5FYPA178wvs8hFDo/s1600/dots.png" /></a></div>
<br />
<br />
The first icon is likely what you expect: when captured within a triangle's area, the clock icon gives the player extra time. But what about the second - fourth special icons? What are they, and how do you interact with them? After playing quite a bit, I know a little about the second, next to nothing about the third icon, and know that the grey icon is a 'wild' bonus that connects to any color.<br />
<br />
After being exposed to the special icons, I hunted around in the settings of the game to see if I could learn what the icons did -- but couldn't find any explanations.<br />
<br />
And that knowledge gap is an issue -- until I know what each of the special icons do, I can't play optimally. And as a player, that's frustrating.<br />
<br />
<b>Recommendations:</b><br />
<br />
<ul>
<li>Either explain these in the initial tutorial (I like how short & sweet it is now, but it's too brief to the player's detriment), or in the 'settings' section allow players to click on the icons and have an explanation of the icon's purpose/effect pop up.</li>
<li>The 'spike' design of the makes-dots-disappear effect is confusing. It's more like a bomb, in a way -- why not use a more intuitive icon?</li>
<li>I have <i style="font-weight: bold;">no idea </i>what the pink does. This is the icon that needs to be explained the most.</li>
<li>The grey color is not intuitive as a way to express 'wild.' Consider showing something akin to a pinwheel with multiple colors to better demonstrate what it is.</li>
</ul>
<br />
<br />
<h2>
Minimalist to its detriment</h2>
<div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6VrR7HvKMdGkUySZLcPkD5gpkw2C9gY52ccUDi62tduraXKWcmR2cz_elBD3TQ9L5qpdjJX2urlP7l2zQ9gMsVg6NTESTPGlQ4j1H4z26MyNbEaMmgb4WBae4yVRrNerOFvq6reEYmYg/s1600/Screenshot_2015-10-25-09-32-10.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6VrR7HvKMdGkUySZLcPkD5gpkw2C9gY52ccUDi62tduraXKWcmR2cz_elBD3TQ9L5qpdjJX2urlP7l2zQ9gMsVg6NTESTPGlQ4j1H4z26MyNbEaMmgb4WBae4yVRrNerOFvq6reEYmYg/s400/Screenshot_2015-10-25-09-32-10.png" width="225" /></a>When I'm reviewing games, I like to pause the game so I can take notes. But I couldn't find the pause button anywhere. Only later, when I was showing the game to a family member, did I learn how to pause the game (she paused it accidentally).</div>
<div>
<br /></div>
<div>
The way that one pauses the game is by clicking on the grey bar that shows the remaining time, points accumulated, and triangles made.</div>
<div>
<br /></div>
<div>
Triangle180's design is truly sleek -- but it leaves out features that I as a player would like easy access to. Since this is the kind of game I'd play while waiting for the bus, I'd like to easily be able to find a button that allows me to pause or quit the game. Until I stumbled upon the pause's location, I would press my Android's home button, and then close all apps to shut down Triangle180.</div>
<div>
<br /></div>
<div>
<b>Recommendations:</b></div>
<div>
<ul>
<li>Unless the "number of triangles created" notifier is important (I don't know why it <i>would </i>be), I would put a 'pause' icon on the top bar instead. </li>
<li>Also regarding pausing/closing, I'd add a 'quit' option to the main menu page. I still don't like needing to do the 'close all apps' workaround on my phone in order to quit the game.</li>
</ul>
</div>
<br />
<h2>
Scrolling scrolling scrolling, why can't I go scrolling</h2>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsmuiA8KPWgHKMuud5-OBRqedd4hhaPGUIwAxVdVeICW60mGqSzV1crHWY0jiNUtwUNIVrhZu8E1NTPefvB8QOidJnjMDQKIJalr4Rrv6mbCIqFJILBrYn0UbPOWilkmr77EJQcEbLrwI/s1600/Screenshot_2015-10-25-09-28-50.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsmuiA8KPWgHKMuud5-OBRqedd4hhaPGUIwAxVdVeICW60mGqSzV1crHWY0jiNUtwUNIVrhZu8E1NTPefvB8QOidJnjMDQKIJalr4Rrv6mbCIqFJILBrYn0UbPOWilkmr77EJQcEbLrwI/s400/Screenshot_2015-10-25-09-28-50.png" width="225" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">DOOMED!</td></tr>
</tbody></table>
<div>
In Triangle180, not all of the dots you want to interact with are on the screen at the same time. As such, the player must scroll around the page in order to find same-color-dots to continue building combos. </div>
<div>
<br /></div>
<div>
But the scrolling is not only <i>slow </i>to move, but sometimes<i> is not responsive. </i>And when you're playing at 150% zoom (hint: never play at 150% zoom), sometimes you can get stuck on a screen devoid of dots. I frantically tried to navigate to another area with dots as the time ticked down, but couldn't.</div>
<div>
<br /></div>
<div>
Even at other zooms (the game's settings allow a range between 50% - 150%), scrolling proved a pain. Not only because the scroll speed is slow, but also because the game can be boiled down to a game of chance -- not being able to see the whole screen, you may spend precious time scrolling to a location where you may not find dots of your ideal color.</div>
<div>
<br /></div>
<div>
<b>Recommendations:</b></div>
<div>
<ul>
<li>Allow players to set the scroll speed in their settings.</li>
<li>Potentially, when the game first loads up, show a fully-zoomed out version of the screen to give players a rough idea of what the board looks like. Sure, more dots will be added over time, but to at least have the opportunity to see a brief overview would make it feel like the player has more control.</li>
<li>I noticed that the menu screen interacts with the phone's accelerometer, making the background move slightly. It might be a design challenge, but it could be helpful if there were an option that would enable players to use their accelerometer as a scrolling mechanism rather than their finger.</li>
</ul>
</div>
<div>
<br /></div>
<h2>
Why 150% zoom?</h2>
<div>
I wonder if you put in the 150% zoom version for people with limited vision (and if so, that's great that you're thinking about accessibility) -- but with the scroll version in its current state, I believe that anyone using that feature is at a serious disadvantage. Unless you change the scrolling, I think this zoom% is superfluous. </div>
<div>
<br /></div>
<h2>
Final thoughts</h2>
<div>
I really enjoyed playing Triangle180, not only because the music is quite beautiful, but also because it encouraged me to keep pushing myself to get better. I got better after each game, learning the strategies and knowing when to switch to another color to begin combos. Once it comes out for wider use, I'd recommend you all try it.</div>
<div>
<br /></div>
<div>
A few final things for the developers:</div>
<div>
<ul>
<li>On the menu screen, it could be nice to separate the options vertically on the screen a little more. For small fingers, it's easy to select, but not as much for people with larger hands. This may also enable you to design it such that a player doesn't have to click on an option other than Play more than once in order to activate it. </li>
<li>The top bar location on the game screen is inconvenient - since I can see the dots slightly above the bar, I would try to tap the dot, but when I then tried to scroll down to then create a triangle, I would accidentally activate my Android's pull-down menu.</li>
<li>Thanks for using well-sized and colored fonts. I complain about that in nearly every review, and I'm happy to say that you get an A+ on that front.</li>
</ul>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0tag:blogger.com,1999:blog-2656111516959276084.post-31182615796124281492015-09-21T09:44:00.003-04:002015-09-21T10:14:24.062-04:00No Pineapple Left Behind Usability Review<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDj741Vb1JKKxDPe2ImskTNcqbfBJGfglhtArzkIESurH6y3O-JEGgKS3JlbDzRWXEkeyLB7fP0xjOx3gdUfPiQEeioAigtFKinm1wo8jGkul7GFI2HzTXqaofFQuduyRaRWzrlXweZuY/s1600/maxresdefault.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="225" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDj741Vb1JKKxDPe2ImskTNcqbfBJGfglhtArzkIESurH6y3O-JEGgKS3JlbDzRWXEkeyLB7fP0xjOx3gdUfPiQEeioAigtFKinm1wo8jGkul7GFI2HzTXqaofFQuduyRaRWzrlXweZuY/s400/maxresdefault.jpg" width="400" /></a></div>
<br />
No Pineapple Left Behind, currently in <a href="http://subalterngames.com/nplb_alpha">alpha</a>, is a fun construction and management simulation (CMS) that doubles as a dark criticism of contemporary American schools. The player oversees a school and has the goal of making as much money as possible. How? By converting students into test-taking automatons, called pineapples, and essentially draining the school of any fun.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6horNDEcsWrEC-pxvQiaaI8AvxIwVyyTXlvA0_Pk_tFPqa2xPK7ze2FdGEPRwwUVMlqQyp_vbKG60qthEHuxqi53vlD7a3gDd0MPNmCZXacYgDopkGXPgu29PVveVttR65lN-Jaiwoqw/s1600/wut8.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6horNDEcsWrEC-pxvQiaaI8AvxIwVyyTXlvA0_Pk_tFPqa2xPK7ze2FdGEPRwwUVMlqQyp_vbKG60qthEHuxqi53vlD7a3gDd0MPNmCZXacYgDopkGXPgu29PVveVttR65lN-Jaiwoqw/s1600/wut8.png" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Students learn when influenced by a teacher's magic spell.</td></tr>
</tbody></table>
Using magic spells, teachers can end a child's friendships or stop them from being teased -- removing any distractions from learning whatsoever. Teachers gain experience based on how well their students are learning, and can learn different teaching/discipline skills over time.<br />
<br />
While the gameplay itself seems pretty polished, there are some navigational and informational architecture problems rooted in its UI. In this post, I'll highlight some of the issues and provide examples of other CMS games that have organized their content more clearly.<br />
<br />
In terms of UI structure, NPLB's problem is threefold:<br />
<ul>
<li>The game breaks CSM conventions to its detriment</li>
<li>The color palette and contrast level of the menus muddy important information</li>
<li>The game doesn't take advantage of shortcuts</li>
</ul>
_________________________________________<br />
<h2>
Breaking CSM Conventions</h2>
<h3>
Evolution of CMS Games (A Brief History)</h3>
<div>
<br /></div>
<div>
Though the first CSM game dates back to 1968 with The Sumer Game, the sub-genre did not take off until 1989 with Maxis' SimCity. Following the success of SimCity, Maxis soon released other iterations of CMS games, including SimEarth (1990), SimAnt (1991), SimLife (1992), and many others.<br />
<br /></div>
<div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin4PRf4v4MGUVaOpGWN5fRtdR7hwSUfbWkRjJXVxQdCjou3CW2aqD9A8p6sF5gMCVLPdi1xJCWJJRnNrJ91ahuQl9KCI4SRetSl_uof7knJ01dCwPfBx0QYOKBJNjiSoLA_QXTi2EMx4w/s1600/sim+city.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="SimCity Screenshot" border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin4PRf4v4MGUVaOpGWN5fRtdR7hwSUfbWkRjJXVxQdCjou3CW2aqD9A8p6sF5gMCVLPdi1xJCWJJRnNrJ91ahuQl9KCI4SRetSl_uof7knJ01dCwPfBx0QYOKBJNjiSoLA_QXTi2EMx4w/s320/sim+city.jpg" title="http://images9.gry-online.pl/galeria/galeria_duze3/677540437.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">SimCity (1989) Screenshot</td></tr>
</tbody></table>
</div>
<div>
<br /></div>
<div>
Now, let's take a look at SimCity. The topmost bar includes the game information (system, options, disasters, and windows), followed by the city's name, population, and funds.</div>
<div>
<br /></div>
<div>
All along the left are the tools that the player needs to help their city grow, and some additional information exists on a bottom bar. Note the the entire right-hand side of the screen is devoid of menus. </div>
<div>
<br /></div>
<div>
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoEfKoaAW5Nf38Ydn7u-wDCXTLMVNS82-c31kIfGZ1q0_6bGjWDXEK4l9hG0SS2iErsOqxqy5eLHwDeMhUOIWi0ldp97tiHFUDyKtSrprFt6U2q7o6oieVznOVCERo7Z2BgXTnH1mOufk/s1600/AOEII.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="http://www.mobygames.com/images/shots/l/254412-age-of-empires-ii-the-age-of-kings-windows-screenshot-a-bustling.png" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoEfKoaAW5Nf38Ydn7u-wDCXTLMVNS82-c31kIfGZ1q0_6bGjWDXEK4l9hG0SS2iErsOqxqy5eLHwDeMhUOIWi0ldp97tiHFUDyKtSrprFt6U2q7o6oieVznOVCERo7Z2BgXTnH1mOufk/s320/AOEII.png" title="http://www.mobygames.com/images/shots/l/254412-age-of-empires-ii-the-age-of-kings-windows-screenshot-a-bustling.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Age of Empires II (1999) Screenshot</td></tr>
</tbody></table>
</div>
<div>
Over time, the UI of CSM evolved to remove the left-hand bar, moving important tools to either to top or bottom of the screen, and framing the rest of the game clearly. Age of Empires II (1999), for example, showed the player's resource count, civilization age, and various menus at the top, and unit and map control on the bottom.</div>
<div>
<br /></div>
<div>
Now, in 2015, the UIs for CSMs have become a lot cleaner and condensed. See the screen for a new load for Cities: Skylines below. Skylines has streamlined its UI such that a top bar is hardly needed, only used for updates and easily finding the settings. </div>
<div>
<br /></div>
<div>
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRqDAO9wDPtaTwC07xInJydyb26Q6Q3K0UksnWQr5bY2SsgI4TkUxxqm-bAuY6UEjFD3Oe8JeBKshUDqoTf2PzZN7OLuGQBzcNm5wBnhC0bD6JY-qVh3Do8Ja2B-NfN5IMnIFjYlZt-aw/s1600/cities.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRqDAO9wDPtaTwC07xInJydyb26Q6Q3K0UksnWQr5bY2SsgI4TkUxxqm-bAuY6UEjFD3Oe8JeBKshUDqoTf2PzZN7OLuGQBzcNm5wBnhC0bD6JY-qVh3Do8Ja2B-NfN5IMnIFjYlZt-aw/s640/cities.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Cities: Skylines (2015) Screenshot</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<h2>
</h2>
<h2>
</h2>
<h2>
</h2>
<h3>
</h3>
<h3>
<br /></h3>
<h3>
NPLB Diverges</h3>
<div>
<br /></div>
<span style="font-size: small; font-weight: normal;">NPLB breaks from the trend of CSM framing, instead presenting information in all four corners of the screen, and along the sides as well. </span><br />
<span style="font-size: small; font-weight: normal;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyEruiH5Bn-KJMQmZH0kXrEXOCO8WkOqGiZRsjkABQiaBR8InbiXX_usg9IBeN7FI4ESXD52iyyUwm3e0H3XCUl_mRR8t9NLTiLJxKK4pJO6wGsixi8yS5ZnwrV0dw70OmDALUMB8W77I/s1600/s2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="362" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyEruiH5Bn-KJMQmZH0kXrEXOCO8WkOqGiZRsjkABQiaBR8InbiXX_usg9IBeN7FI4ESXD52iyyUwm3e0H3XCUl_mRR8t9NLTiLJxKK4pJO6wGsixi8yS5ZnwrV0dw70OmDALUMB8W77I/s640/s2.png" width="640" /></a></div>
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span>
<span style="font-size: small;"><span style="font-weight: normal;">There are two primary problems with this strategy. </span></span><span style="font-size: small; font-weight: normal;">First, condensing all of the important information into one or two locations makes players' lives easier, in that they don't need to work as hard to inform themselves about the status of their game. </span><span style="font-size: small; font-weight: normal;">Second, eye-tracking studies of web sites have demonstrated that users </span><i style="font-size: medium; font-weight: normal;">heavily</i><span style="font-size: small;"><span style="font-weight: normal;"> favor one side of a screen, depending on the site's language (particularly whether a language reads right-to-left or right-to-left). In <a href="http://www.nngroup.com/articles/horizontal-attention-leans-left/">one study</a> of English-speaking participants, participants spent more than twice the time looking at the left side of the screen than the right.</span></span><br />
<span style="font-size: small;"><span style="font-weight: normal;"><br /></span></span>
While I understand wanting to look different from other CSMs, NPLB can benefit from mirroring certain aspects of its predecessors.<br />
<br />
Recommendations:<br />
<ul>
<li>Refrain from putting important information on the right-hand side of the screen, <i>particularly </i>if the player needs to click on it. (More on this later.)</li>
</ul>
<ul>
<li>Considering using a top and bottom bar, leaving the left and right sides clear without player intervention. </li>
</ul>
<ul>
<li>When a player opens <i>any</i> menu, have it appear in the top left side of the screen. Then can they reposition and pin it if they so desire. </li>
</ul>
<ul>
<li>Repositioning the tutorial textbox, as Cities: Skylines does, will allow you to remove the white arrows you've been using to call out certain elements of the screen.</li>
</ul>
<ul>
<li>Essentially, don't try to reinvent the wheel! CSMs have evolved over time to make it easy to review minute details -- as is, you're making it a lot more difficult than it needs to be!</li>
</ul>
<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtbRWBqTq2j9GiKfbwqGnIs0bTrGtzWAgzLuBMTgKXJsKAF2sXPaj6Li-zayMm6HljdzgBDGvggVQofpkdSSPbJC30t4KuA9G7TUvmmya2wQ6ZGXUKxjYMz34EDO7aZfx8i7nij1ua1oA/s1600/worstcase.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtbRWBqTq2j9GiKfbwqGnIs0bTrGtzWAgzLuBMTgKXJsKAF2sXPaj6Li-zayMm6HljdzgBDGvggVQofpkdSSPbJC30t4KuA9G7TUvmmya2wQ6ZGXUKxjYMz34EDO7aZfx8i7nij1ua1oA/s640/worstcase.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Designing the game such that most menus open by default on the left-side of the screen will prevent this from happening. The picture is a worst-case scenario.</td></tr>
</tbody></table>
<h2>
<span style="font-size: small; font-weight: normal;">_________________________________________</span></h2>
<h2>
Color and Contrast Choices</h2>
<div>
<br /></div>
One of NPLB's problems is that its color palette is so similar that it's difficult to pick out the most important information. Everything is so attention-grabbing that nothing is.<br />
<br />
Thinking of that, let's talk briefly about what makes images 'attention-grabbing' (salient). The more an image differs from its surroundings, the more salient it is (<a href="http://dare.uva.nl/document/2/87556">source</a>). Objects that differ significantly in color, size, shape, brightness, texture, motion, or other low-level features, pop-out to viewers. If you want to grab someone's attention, add a dash of contrast or a bright color -- but woe be to those who overuse these low-level features.<br />
<div>
<br /></div>
<div>
NPLB currently has the problem that nearly every menu features high contrast in the form of bright white, red, or green text on an opaque black background. Such a design not only obfuscates the important information, but also is overwhelming to the viewer's eye.<br />
<br />
Consider the following picture -- where do you look first on the screen? (I'm curious, tell me in the comments!)<br />
<br /></div>
<div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHTxh8RF8EcaeC5Wg6_CR5BjTkZcqzJNYo7kv5pjGG6t08hlv8z1nnkGCg8fEN5uvA4B4D4IbUlj_0qOWRPDxZVIL60MRQmwRj1dQX_hK43swsGP7rvv7ZKIQaDzHsp7dMIWHMCn-C9LU/s1600/first1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="364" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHTxh8RF8EcaeC5Wg6_CR5BjTkZcqzJNYo7kv5pjGG6t08hlv8z1nnkGCg8fEN5uvA4B4D4IbUlj_0qOWRPDxZVIL60MRQmwRj1dQX_hK43swsGP7rvv7ZKIQaDzHsp7dMIWHMCn-C9LU/s640/first1.png" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><br /></td></tr>
</tbody></table>
When an image/screen looks much the same, important information can be lost. At first glance, I didn't know what I was looking at, and wasn't positive where I <i>should </i>be looking. If you want a player to do a task, make sure they can find it without prompting!<br />
<br />
Recommendations:<br />
<br />
<ul>
<li>Very seriously consider changing your color scheme entirely. The sea of black and white is overwhelming.</li>
<li>In general, people find reading black text on a lighter background <a href="https://www.joedolson.com/2006/08/on-the-readability-of-inverted-color-schemes/">easier to read</a> than inverted color schemes. White on darker colors is typically used to <a href="http://uxmovement.com/content/when-to-use-white-text-on-a-dark-background/">signpost information</a> -- so at the moment it looks like <i>everything </i>is important.<i> </i></li>
<li>For the map, consider shifting the map to the right, placing the 'achieve' box on the left (and changing the colors!) I'd also have the map fit the same color palette as the school itself (the light grey, reds, greens, etc., not black/white). </li>
</ul>
</div>
<h2>
<span style="font-size: small; font-weight: normal;">_________________________________________</span></h2>
<h2>
Shortcuts</h2>
<div>
<br /></div>
Like many simulators, NPLB allows players to fast-forward time and take very detailed control over the sims' lives. But at the moment, navigating all the various menus and controlling time is clunky, due to a lack of keyboard shortcuts. While NPLB allows the player to pause and unpause the game with spacebar, it doesn't offer the navigational nuance that it truly needs.<br />
<br />
<div>
One of the better sim navigational setups I've seen are from Banished, a medieval city sim that came out in Feburary, 2014. Players can open any menu and sub-menu using the function and number keys. In the picture below, for example, I pressed F1 to open the time menu, and 2 to pause it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivybko-hYTYbH7SJgYNgEfydJ5ys9Z-jRGf-PtHYzmDquE9ag1-M91z-2R-jnrbSE3HIgX1eVivXIO4ybSyjjKwuC_6UpX9tPEqpnsNwK5tRJKnWnUtwAe_Pk0wQN2jGjepsdOqgJmYds/s1600/Banished_Time.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivybko-hYTYbH7SJgYNgEfydJ5ys9Z-jRGf-PtHYzmDquE9ag1-M91z-2R-jnrbSE3HIgX1eVivXIO4ybSyjjKwuC_6UpX9tPEqpnsNwK5tRJKnWnUtwAe_Pk0wQN2jGjepsdOqgJmYds/s400/Banished_Time.png" width="400" /></a></div>
<br />
<br />
Now, one of my earlier suggestions was that NPLB shouldn't concentrate information on the right-hand side the screen. The exception is for a menu bar, as Banished does.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdHaNb8Jyo3mLPA668cev6UZ00scVeFRESWUKJi_ZEkvAdlGZLndfWGsEyduYzfpR3lgtled1qoXP-7AYQQVjXMgQFk_YPs-nbPK2Z02GYxzwjwiq3LwU7-y4rgjOrM5AQ70qhHqU4P0/s1600/banished.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkdHaNb8Jyo3mLPA668cev6UZ00scVeFRESWUKJi_ZEkvAdlGZLndfWGsEyduYzfpR3lgtled1qoXP-7AYQQVjXMgQFk_YPs-nbPK2Z02GYxzwjwiq3LwU7-y4rgjOrM5AQ70qhHqU4P0/s640/banished.jpg" width="640" /></a></div>
<br />
So long as players don't <i>need </i>to click the menu buttons to get them to open, a menu bar can be put in the right-hand side of the screen. The reason behind this is because not only is a keystroke faster than a click, but a player won't have to look at the right-hand side to activate the menu. If a user presses F2, 4 to open the workers page, he or she can continue to look at the left side of the screen (as it will open top left).<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<h2>
<span style="font-size: small; font-weight: normal;">_________________________________________</span></h2>
<h2>
Final Thoughts</h2>
<div>
<br /></div>
<div>
NPLB is quirky, and I like it. It's a bit depressing, though! I don't want to break friendships and make kids lose their humanity (that's how they become pineapples). I also want the game to be organized more clearly and easier on the eyes. </div>
<br />
Oh, if you're asking yourself, "Why pineapples?" The designer told me that it references a bizarre <a href="http://www.huffingtonpost.com/2012/04/20/ridiculous-talking-pineapple-question-on-state-exam_n_1440942.html">test question</a> given to New York State students in 2012.<br />
<br />
And after this long post about color and font and such, I think I'll actually look more into color theory, organization, and fonts in game design. I think it'll be a fun topic to explore.<br />
<br />
Thanks for reading!<br />
<br /></div>
Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com1tag:blogger.com,1999:blog-2656111516959276084.post-17246500703393172052015-09-07T09:00:00.000-04:002015-09-07T09:00:01.434-04:00Evolve Usability Review<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW6_7aJYWu8KHSKcaQYl2cJHpuo5pamW1FMP6BZYfiCuDgKnMZN7iTHM1U8Yg0p2hSI1R_r48kaddyPv0xKQ6yMM-Quf5W84erAeH4TUdvaY9FHcGBrja85PwcmmWH8k3-KwcJGPsT42I/s1600/evolvebanner.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW6_7aJYWu8KHSKcaQYl2cJHpuo5pamW1FMP6BZYfiCuDgKnMZN7iTHM1U8Yg0p2hSI1R_r48kaddyPv0xKQ6yMM-Quf5W84erAeH4TUdvaY9FHcGBrja85PwcmmWH8k3-KwcJGPsT42I/s400/evolvebanner.jpg" width="400" /></a></div>
<br />
Evolve, by Turtle Rock Studios, is an asymmetrical shooter where players can either play in a team or as a terrifying monster whose goal is to eliminate all of the Heroes. Simplified, Evolve is a complex 4 v. 1 cat-and-mouse game where the monster gets stronger as the game progresses.<br />
<br />
A game published by 2K, a publishing company with dedicated user researchers, Evolve is sleek, easy to learn, and difficult to master.<br />
<br />
<h3 style="text-align: left;">
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.1999998092651px; line-height: 18.4799995422363px;">_________________________________</span><span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px; line-height: 18.48px;">_________________________________</span></h3>
<h2 style="text-align: left;">
Sleek and Clean</h2>
<div style="text-align: left;">
<br /></div>
Menu navigation is clean and intuitive in Evolve-- every option is easy to find, understand, and use. Part of the ease of use can be attributed to the size, type, and coloring of the fonts used on Evolve's menus. The fonts are easily read from a distance (as is necessary for console versions) and clearly mark cursor location by highlighting the menu bars as the cursor passes above them.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJkAJw8yQT8s8e2W7ItH1B0Z7rqfPp-jtJ0XnZNWnh81icnQu_OPmlIlpkoqeQ8H-KONFb5Kw1rkpc1stdnylduGAEDuilwfoVcShFrUA4aaW47A3RXOB1y-7r6W29YJWPTwDdU5xvMk4/s1600/2015-09-06_00001.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJkAJw8yQT8s8e2W7ItH1B0Z7rqfPp-jtJ0XnZNWnh81icnQu_OPmlIlpkoqeQ8H-KONFb5Kw1rkpc1stdnylduGAEDuilwfoVcShFrUA4aaW47A3RXOB1y-7r6W29YJWPTwDdU5xvMk4/s640/2015-09-06_00001.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Starting Menu, with the cursor hovering over 'Solo'</td></tr>
</tbody></table>
Where I think Evolve excels is its use of contrast (colorful/monochromatic, bright/dark, text/no text, etc.) in establishing screen architecture. For example, the starting menu uses bright hues on the left and muted, faded, or dark colors on the right. The bright red creates a focal point on the left, establishing that important content is on the left.<br />
<br />
<div style="text-align: left;">
<span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.1999998092651px; line-height: 18.4799995422363px;">_________________________________</span><span style="background-color: white; color: #444444; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13.2px; line-height: 18.48px;">_________________________________</span></div>
<div style="text-align: center;">
</div>
<h2 style="text-align: left;">
Easy to Learn, Difficult to Master</h2>
<div>
<br /></div>
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYg1uvI3zgv8fNhxB56IrNO_wqdngI1A5CwmLPNwKRnEsTttWVT6-vAWJTSSi8d4RaZesvl_qymqFO68oLodiTli5i2O9dR0K-mPMsFdbY4uHsMcCZRR9Bn0CzjDj_4h_H9BIwHUQP-BA/s1600/2015-09-05_00007.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYg1uvI3zgv8fNhxB56IrNO_wqdngI1A5CwmLPNwKRnEsTttWVT6-vAWJTSSi8d4RaZesvl_qymqFO68oLodiTli5i2O9dR0K-mPMsFdbY4uHsMcCZRR9Bn0CzjDj_4h_H9BIwHUQP-BA/s640/2015-09-05_00007.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">I was *terrible* at the monster tutorial.</td></tr>
</tbody></table>
Evolve is quick to teach new players the basic controls -- as soon as a new player begins the game, they are moved into the monster tutorial. The game incentivizes tutorial use in the form of badges/achievements -- the faster the player moves, the more badges and XP she or he gets.<br />
<br />
Later, after players have picked a character to play in a match (that they have not played before), they are shown a quick tutorial video about their selected character's abilities.<br />
<div style="text-align: left;">
</div>
<br />
Players are also able to find additional, advanced tutorial videos for every available character. From what I could tell, each character has its own quirks and challenges.<br />
<br />
<div style="text-align: left;">
__________________________________________________________________</div>
<h2 style="text-align: left;">
One issue... Bots? What Bots?</h2>
<div>
<br /></div>
<div>
Really, the only issue I had in Evolve was knowing if or how bots would be joining the game. Not the kind of person who enjoys highly competitive games, I decided to invite a friend and play with two other bot AIs.</div>
<div>
<br /></div>
<div>
... Problem was, we weren't sure how to <i>start </i>a bot game. Unlike other games (such as DOTA 2), which clearly label bot matches, we just had to muddle along <i>hoping</i> that bots would join. In the following screenshot, for example, we were seven seconds until loading into the unknown (<i>into the game? into another screen? We weren't sure, since it was our first time playing</i>) and we didn't have bots assigned.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWMNmkykYRBCHQguf0gN7LUX1QX6jIPq9dqhE8o7WFKuecagcXHMiCZtiHcS7jK7Kjv0d07Ebc9hHgX8G2EYnlAd0TNlwBVYBplaTKVbswCUPvtXSkT3PLv9PCHGgmWCTgo06yLMqSuUs/s1600/2015-09-05_00014.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWMNmkykYRBCHQguf0gN7LUX1QX6jIPq9dqhE8o7WFKuecagcXHMiCZtiHcS7jK7Kjv0d07Ebc9hHgX8G2EYnlAd0TNlwBVYBplaTKVbswCUPvtXSkT3PLv9PCHGgmWCTgo06yLMqSuUs/s640/2015-09-05_00014.jpg" width="640" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Loading map with 7 seconds left.</td></tr>
</tbody></table>
<div>
<br /></div>
<div>
I was genuinely concerned that I hadn't pressed the correct button somewhere, and that we'd load into a map two players short. We didn't -- thankfully, because even with a team of four we got <i>curbstomped</i> by Goliath -- but for a minute or so, I was more concerned than I was having fun.</div>
<div>
<br /></div>
<div>
<b>Recommendation:</b> instead of assigning bots at the end of the map setup process, put 'bot' nameplates into the 'empty' slots on the match screen shown above. If a new player joins, one of those bot plates can be removed and replaced with the player's badge. This serves the purpose of showing the players that bots will be joining the game.</div>
<div>
<br /></div>
<div style="text-align: left;">
____________________________________________</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Happy Labor Day, all. I have an idea for a non-review post -- specifically about the role and importance of clear typography in video games and elsewhere. I know I talk about font sizes, colors, types and such a lot in my posts, so I think I might explore that topic a little further.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
Thanks again for reading!</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
Anonymoushttp://www.blogger.com/profile/07364768571295895971noreply@blogger.com0